/* ========================================================================== 10 метров · CRM — единый слой оформления. Подключается ПОСЛЕДНИМ в /new/index.html. Меняет только внешний вид: никакой логики, никаких скрытых/новых элементов. Цвета — из переменных основной темы (styles.css): --bg, --surface, --line, --ink, --muted, --accent… ========================================================================== */ :root { --r-sm: 8px; /* поля, кнопки, чипы */ --r: 12px; /* карточки, панели */ --r-lg: 16px; /* модальные окна */ --ctl-h: 44px; /* высота полей и кнопок */ --gap: 16px; --shadow-pop: 0 18px 48px rgba(20, 22, 25, .18); --focus: 0 0 0 3px rgba(250, 204, 21, .45); --danger-soft: #FDE8E6; } /* ---------- База: один шрифт и размер везде, включая окна и кнопки ---------- */ #root, dialog, .crm-drag-notice { font-family: Onest, system-ui, sans-serif; } #root button, #root input, #root select, #root textarea, dialog button, dialog input, dialog select, dialog textarea { font-family: inherit; } dialog { font-size: 14px; color: var(--ink); } a.btn, a.dw-button { text-decoration: none; } h1, h2, h3 { text-wrap: balance; } .mono, td.mono, .kpi .v { font-variant-numeric: tabular-nums; } /* ---------- Кнопки: три вида — основная, обычная, тихая ---------- */ .btn { justify-content: center; border-radius: var(--r-sm); transition: background .15s, border-color .15s, box-shadow .15s; } .btn:not(.ghost):not(.dark):hover { background: #F5C20A; } .btn.ghost:hover { border-color: var(--ink); } .btn:focus-visible, .pill:focus-visible, .next:focus-visible { outline: none; box-shadow: var(--focus); } .pill { transition: border-color .15s; } .pill:not(.on):hover { border-color: var(--ink); } /* ---------- Поля ввода: одинаковые во всех формах и окнах ---------- */ dialog input:not([type=checkbox]):not([type=radio]):not([type=file]), dialog select, dialog textarea, .crm-integration-content input:not([type=checkbox]):not([type=radio]), .crm-dialog-list input, #crm-deal-window input:not([type=file]), #crm-deal-window select, #crm-deal-window textarea { box-sizing: border-box; width: 100%; min-height: var(--ctl-h); padding: 0 12px; margin: 0; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); } dialog textarea, #crm-deal-window textarea { padding: 10px 12px; min-height: 88px; line-height: 1.45; } dialog input:focus, dialog select:focus, dialog textarea:focus, .crm-integration-content input:focus, .crm-dialog-list input:focus, #crm-deal-window input:focus, #crm-deal-window select:focus, #crm-deal-window textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); } /* ---------- Модальные окна: один размер углов, отступы и тень ---------- */ dialog.modal { border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-pop); } dialog.modal::backdrop, #crm-deal-window::backdrop { background: rgba(20, 22, 25, .55); } dialog.modal h2 { font-size: 20px; } dialog.modal .stack { gap: 14px; } /* Форма поставки (закупка): подписи и поля как в остальных формах */ .crm-purchase-modal form > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } .crm-purchase-modal form > small { margin-top: -8px; font-size: 12px; color: var(--muted); } .crm-purchase-total { background: var(--bg); border-radius: var(--r-sm); padding: 14px 16px; } .crm-purchase-total small { font-size: 13px; color: var(--muted); } .crm-purchase-total strong { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-variant-numeric: tabular-nums; } /* Нижние кнопки форм: справа, обычного размера (а не плитки из общих правил) */ dialog .control-row, .crm-filter-actions { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: auto; } dialog .control-row .btn, .crm-filter-actions .btn { width: auto !important; min-height: var(--ctl-h); padding: 0 18px; border-radius: var(--r-sm); font-size: 15px; } .crm-filter-dialog form > .btn.ghost:last-child { align-self: flex-end; border-color: transparent; color: var(--muted); } .crm-filter-dialog .crm-filter-pair { gap: 12px; } /* ---------- Канбан ---------- */ #root .deal { border-radius: 10px; transition: box-shadow .15s, outline-color .15s; } #root .deal:hover { box-shadow: 0 4px 14px rgba(20, 22, 25, .08); } #root .deal .mono { white-space: nowrap; } #root .deal > span:has(> .mono) { flex-wrap: wrap; row-gap: 4px; } #root .crm-subgroup { border-color: var(--line); border-radius: 10px; background: rgba(255,255,255,.35); } #root .crm-drop-over { background: var(--warn-bg); } /* Карточка-дубль: белая карточка с красной рамкой и пометкой, без заливки */ #root .deal.crm-duplicate { background: var(--surface); box-shadow: none; outline: 1.5px solid var(--bad); } .crm-duplicate-note { display: inline-flex !important; align-self: flex-start; gap: 6px; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--danger-soft); font-size: 11px; } /* Теги в карточках и фильтре — в одном стиле с чипами интерфейса */ #root .deal .crm-card-tag { border-radius: 6px; padding: 3px 8px; font-size: 11px; } #root .crm-deal-tags .pill { min-height: 32px; border-radius: 16px; background: var(--surface); border-color: var(--line); color: var(--ink); } #root .crm-deal-tags .pill.on { background: var(--side); border-color: var(--side); color: var(--accent); } .crm-tag-menu { border-radius: var(--r); box-shadow: var(--shadow-pop); } /* ---------- Окно сделки ---------- */ #crm-deal-window { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-pop); font-size: 14px; } #crm-deal-window .dw-head { padding: 20px 24px; } #crm-deal-window .dw-head h2 { font-size: 22px; letter-spacing: -.01em; } #crm-deal-window .dw-info, #crm-deal-window .dw-chat { padding: 22px 24px; } #crm-deal-window .dw-info { background: var(--bg); } #crm-deal-window .dw-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } #crm-deal-window .dw-section > * { max-width: 100%; } #crm-deal-window .dw-section > select, #crm-deal-window .dw-section > form, #crm-deal-window .dw-section > dl { align-self: stretch; } #crm-deal-window .dw-section form { display: flex; flex-direction: column; gap: 6px; } #crm-deal-window .dw-section form > label { font-size: 13px; color: var(--muted); margin-top: 4px; } #crm-deal-window .dw-section form > .dw-button { align-self: flex-start; margin-top: 6px; } #crm-deal-window h3 { margin: 0 0 4px; font-size: 15px; } #crm-deal-window .dw-muted { font-size: 13px; } #crm-deal-window .dw-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); } #crm-deal-window .dw-button:hover:not(:disabled) { border-color: var(--ink); } #crm-deal-window .dw-head .dw-button { min-height: var(--ctl-h); } #crm-deal-window .dw-form .dw-button[type=submit], #crm-deal-window .dw-chat form .dw-button[type=submit] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } #crm-deal-window .dw-refresh-icon { width: 40px; min-height: 40px; padding: 0; font-size: 20px; } #crm-deal-window .dw-detail-fields div { grid-template-columns: 124px minmax(0,1fr); } #crm-deal-window .dw-detail-fields div.dw-muted { display: block; } #crm-deal-window .dw-message { border-radius: 12px 12px 12px 4px; } #crm-deal-window .dw-message.outgoing { border-radius: 12px 12px 4px 12px; background: var(--warn-bg); border-color: transparent; } /* ---------- Объект ---------- */ .crm-payment-balance { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); } .crm-payment-balance strong:last-child { font-size: 20px; } .card.pad.stack > .head { gap: 12px; } .card.pad.stack > .head h2 { font-size: 19px; } .card.pad.stack > strong { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-variant-numeric: tabular-nums; } .card.pad.stack > div:not([class]) { font-size: 14px; color: var(--body); } .kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* ---------- Поставки ---------- */ .crm-rate-card { border-radius: var(--r); padding: 16px 18px; } .crm-supply-edit-button { font-size: 14px; } .upload { border-radius: var(--r-sm); } .upload:hover { border-color: var(--ink); } /* ---------- Финансы: карточки и таблица с отступами ---------- */ main > div:not([class]):has(> section.card > .muted + .mono) { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); } main > div:not([class]) > section.card:has(> .muted + .mono) { padding: 20px; display: flex; flex-direction: column; gap: 10px; } main > div:not([class]) > section.card > .muted { font-size: 14px; } main > div:not([class]) > section.card > .mono { font-size: 28px; font-weight: 600; letter-spacing: -.02em; } main > section.card:not(.pad) > h2:first-child { padding: 20px 20px 8px; } main > section.card > div:has(> table) { overflow-x: auto; } /* ---------- Диалоги ---------- */ main > section.card:has(> p):has(> .btn) { padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } main > section.card:has(> p):has(> .btn) > p { margin: 0; font-size: 15px; } .crm-dialog-layout { gap: var(--gap); } .crm-dialog-list { padding: 12px; gap: 8px; } .crm-dialog-item { background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: var(--r-sm); padding: 12px 14px; transition: border-color .15s; } .crm-dialog-item:hover { border-color: var(--ink); } .crm-dialog-item.selected { background: var(--warn-bg); border-color: var(--accent); } .crm-dialog-item small { color: var(--muted); font-size: 12px; } .crm-dialog-view { padding: 20px; } .crm-dialog-view > p.muted { margin: 0; } .crm-dialog-bubble { border-radius: 12px 12px 12px 4px; } .crm-dialog-bubble.outgoing { border-radius: 12px 12px 4px 12px; background: var(--warn-bg); border-color: transparent; } /* ---------- Интеграции ---------- */ .crm-integration-content { gap: var(--gap); } .crm-integration-content .panel { background: var(--surface); border-radius: var(--r); } .crm-integration-content .connectors { gap: 12px; } .crm-integration-content .connector { padding: 16px; } .crm-integration-content .connector strong { font-size: 15px; } .crm-integration-content .connector span { font-size: 13px; color: var(--muted); } .crm-integration-content .integration-card h2 { font-size: 19px; margin: 0 0 8px; } .crm-integration-content label { color: var(--muted); font-size: 13px; } .crm-integration-content button { min-height: var(--ctl-h); padding: 0 16px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-size: 14px; } .crm-integration-content button:hover:not(:disabled) { border-color: var(--ink); } .crm-integration-content form button:last-child:not([data-action]) { align-self: flex-start; background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .crm-integration-content a { color: var(--link); } .crm-integration-content .integration-card > a { display: inline-block; margin: 0 16px 8px 0; } .crm-integration-content form > button, .crm-integration-content .integration-card > button { align-self: flex-start; width: auto; padding: 0 20px; } .crm-integration-content .control-row { max-width: 440px; } .crm-integration-content .control-row button { min-height: var(--ctl-h); border-radius: var(--r-sm); font-size: 14px; } .crm-integration-content .integration-card > label { margin-top: 12px; } .crm-integration-content .connector [data-state] { display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; padding: 4px 9px; border-radius: 999px; font-size: 12px; line-height: 1.3; box-shadow: none !important; } /* ---------- Финансы: цветные итоги (классы владельца) — отступы и размеры как у остальных карточек ---------- */ #root .crm-finance-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); } #root .crm-finance-summary > .card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r); } #root .crm-finance-summary > .card .muted { font-size: 14px; font-weight: 500; } #root .crm-finance-summary > .card .mono { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* ---------- Поставки: компактные фильтры сохраняем, но делаем читаемыми ---------- */ #root #supplies .crm-supply-toolbar .pill { height: 28px; min-height: 28px; line-height: 26px; padding: 0 10px; font-size: 12px; border-radius: 14px; } #root #supplies .crm-supply-toolbar .pill.crm-supply-stage::before { width: 6px; height: 6px; } #root #supplies .crm-supply-toolbar > .btn { height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); } #root #supplies .crm-supply-toolbar > .btn:hover { border-color: var(--ink); } #root #supplies .status-row > .badge { border-radius: 6px; font-weight: 600; } /* ---------- Воронка: зоны «Завершено» / «Закрыто» в одном стиле с колонками ---------- */ .crm-deal-outcomes { border-radius: var(--r); } .crm-deal-outcome { border-radius: var(--r); border-width: 1.5px; } .crm-deal-outcome summary { font-size: 15px; font-weight: 700; } .crm-deal-outcome summary small { font-weight: 400; } .crm-deal-outcome summary > span { font-weight: 500; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; } /* ---------- График денег: подписи сумм тише, чтобы столбцы читались первыми ---------- */ #root .crm-chart-amount { color: var(--muted); } /* ========================================================================== Воронка: колонки меняют ширину вместе с экраном. Сколько колонок видно сразу: телефон — одна (+ край следующей), планшет — 2,3, ноутбук — 3,25–4,25, большой монитор — 5,25–6,25. Ширина колонки 220–340 px, текст в карточках растёт вместе с колонкой. ========================================================================== */ #root .scroll:has(> .kan) { container: kanban / inline-size; scroll-snap-type: x proximity; scroll-padding-inline: 2px; overscroll-behavior-x: contain; } #root .scroll > .kan { --kan-gap: 14px; --kan-n: 3.5; --kan-col: clamp(220px, calc((100cqw - (var(--kan-n) - 1) * var(--kan-gap)) / var(--kan-n)), 340px); grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: var(--kan-col) !important; gap: var(--kan-gap) !important; min-width: max-content !important; width: max-content !important; } @container kanban (max-width: 559px) { #root .scroll > .kan { --kan-n: 1.15; --kan-gap: 10px; } } @container kanban (min-width: 560px) { #root .scroll > .kan { --kan-n: 2.3; } } @container kanban (min-width: 820px) { #root .scroll > .kan { --kan-n: 3.25; } } @container kanban (min-width: 1080px) { #root .scroll > .kan { --kan-n: 4.25; } } @container kanban (min-width: 1400px) { #root .scroll > .kan { --kan-n: 5.25; } } @container kanban (min-width: 1800px) { #root .scroll > .kan { --kan-n: 6.25; } } /* Колонка */ #root .scroll > .kan > .col { container: kancol / inline-size; scroll-snap-align: start; min-width: 0; padding: 12px !important; gap: 10px !important; border-radius: var(--r) !important; } #root .scroll > .kan > .col:has(> .crm-subgroups) { grid-column: span 2 !important; } #root .scroll > .kan > .col > h3 { font-size: 15px !important; line-height: 1.3 !important; gap: 8px !important; padding: 2px 4px !important; } #root .scroll > .kan > .col > h3 .mono { font-size: 13px !important; } #root .scroll > .kan > .col > .mono { font-size: 13px !important; padding: 0 4px; color: var(--muted); } #root .scroll > .kan .crm-subgroups { gap: 10px !important; } #root .scroll > .kan .crm-subgroup { container-type: inline-size; padding: 8px !important; gap: 10px !important; border-radius: 10px !important; min-height: 120px; } #root .scroll > .kan .crm-subgroup h4 { font-size: 12px !important; } /* Карточка сделки: размеры текста от ширины колонки */ #root .scroll > .kan .deal { padding: clamp(10px, 4.6cqi, 14px) !important; gap: 4px !important; border-radius: 10px !important; min-height: 0 !important; line-height: 1.35 !important; } #root .scroll > .kan .deal .top { gap: 8px !important; } #root .scroll > .kan .deal .top > span:first-child { font-size: clamp(14px, 6cqi, 16px) !important; font-weight: 600; line-height: 1.3 !important; } #root .scroll > .kan .deal > .s13 { font-size: clamp(12px, 5.2cqi, 14px) !important; line-height: 1.35 !important; color: var(--muted); } #root .scroll > .kan .deal .mono { font-size: clamp(14px, 6.6cqi, 18px) !important; font-weight: 600; } #root .scroll > .kan .deal > span:has(> .mono) { margin-top: 4px !important; gap: 4px 10px !important; } #root .scroll > .kan .deal > span:has(> .mono) > span:not(.mono) { font-size: 12px !important; color: var(--muted); } #root .scroll > .kan .deal .crm-card-tag { font-size: 11px !important; padding: 2px 7px !important; border-radius: 5px !important; } #root .scroll > .kan .deal .crm-duplicate-note { font-size: 12px !important; line-height: 1.3 !important; } /* Телефон: одна колонка на экран, подгруппы друг под другом */ @container kanban (max-width: 559px) { #root .scroll > .kan > .col:has(> .crm-subgroups) { grid-column: span 1 !important; } #root .scroll > .kan .crm-subgroups { flex-direction: column !important; } #root .scroll > .kan .crm-subgroup { min-height: 84px; } } /* ========================================================================== Сетка показателей: ровные ряды без «сирот» на любой ширине ========================================================================== */ #root main { container: page / inline-size; } #root .kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; } @container page (max-width: 1099px) { #root .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } #root .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @container page (max-width: 559px) { #root .kpis { gap: 10px !important; } #root .kpi { padding: 14px !important; gap: 6px !important; } #root .kpi .v { font-size: 24px !important; } #root .kpi .v small { font-size: 13px !important; } #root .kpi .l, #root .kpi .n { font-size: 12px !important; } } /* ========================================================================== Таблицы поставок и объектов: на узком экране — карточки вместо таблицы ========================================================================== */ #root #supplies { container: listcard / inline-size; } #root section[aria-label="Объекты"] { container: objcard / inline-size; } @container listcard (max-width: 720px) { #root #supplies table { display: block; min-width: 0 !important; width: 100% !important; table-layout: auto !important; } #root #supplies thead { display: none; } #root #supplies tbody { display: block; } #root #supplies tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); } #root #supplies tbody td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; } #root #supplies tbody td[colspan] { grid-column: 1 / -1; } #root #supplies .scroll { overflow: visible; } /* Поставка: материал | сумма; объект; статус; прибытие | договор */ #root #supplies tbody td:first-child { grid-column: 1; grid-row: 1; } #root #supplies tbody td:nth-last-child(4) { grid-column: 2; grid-row: 1; text-align: right !important; } #root #supplies tbody td:nth-child(2):nth-last-child(5) { grid-column: 1 / -1; grid-row: 2; font-size: 13px; } #root #supplies tbody td:nth-child(2):nth-last-child(5)::before { content: 'Объект: '; color: var(--muted); } #root #supplies tbody td:nth-last-child(2)::before { content: 'Прибытие: '; color: var(--muted); } #root #supplies tbody td:nth-last-child(3) { grid-column: 1 / -1; } #root #supplies tbody td:nth-last-child(2) { grid-column: 1; font-size: 13px; } #root #supplies tbody td:last-child { grid-column: 2; justify-self: end; } #root #supplies .status-row { display: flex !important; flex-wrap: wrap; gap: 6px !important; } #root #supplies .status-row > .badge { width: auto !important; min-width: 150px; } } @container objcard (max-width: 860px) { #root section[aria-label="Объекты"] table { display: block; min-width: 0 !important; width: 100% !important; table-layout: auto !important; } #root section[aria-label="Объекты"] thead { display: none; } #root section[aria-label="Объекты"] tbody { display: block; } #root section[aria-label="Объекты"] tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); } #root section[aria-label="Объекты"] tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; } #root section[aria-label="Объекты"] tbody td[colspan] { grid-column: 1 / -1; } #root section[aria-label="Объекты"] .scroll { overflow: visible; } /* Объект: название | этап; ответственный · задачи · деньги */ #root section[aria-label="Объекты"] tbody td.crm-prio-cell { grid-column: 1; grid-row: 1 / span 2; align-self: start; } #root section[aria-label="Объекты"] tbody td:nth-child(2) { grid-column: 2; grid-row: 1; } #root section[aria-label="Объекты"] tbody td:nth-child(3) { grid-column: 3; grid-row: 1; justify-self: end; } #root section[aria-label="Объекты"] tbody td:nth-child(n+4) { grid-column: 2 / -1; font-size: 13px; color: var(--body); } #root section[aria-label="Объекты"] tbody td:nth-child(4):not(:empty)::before { content: 'Ответственный: '; color: var(--muted); } #root section[aria-label="Объекты"] tbody td:nth-child(5)::before { content: 'Задачи: '; color: var(--muted); } #root section[aria-label="Объекты"] tbody td:nth-child(6)::before { content: 'Получено / бюджет: '; color: var(--muted); font-family: Onest, system-ui, sans-serif; } #root section[aria-label="Объекты"] tbody td:nth-child(7)::before { content: 'Монтаж: '; color: var(--muted); font-family: Onest, system-ui, sans-serif; } #root section[aria-label="Объекты"] tbody td:nth-child(n+4) { text-align: left !important; } #root section[aria-label="Объекты"] td.crm-prio-cell { width: auto !important; display: flex !important; flex-direction: column; align-items: center; gap: 4px; } #root section[aria-label="Объекты"] td.crm-prio-cell > * + * { margin-left: 0; } #root .crm-prio-cell .crm-prio-handle { display: none; } #root .crm-prio-arrows { opacity: 1 !important; flex-direction: column; gap: 4px; } #root .crm-prio-arrows button { width: 30px; height: 30px; } } /* ========================================================================== Экран входа (PIN → код из AI-офиса) ========================================================================== */ #root .login { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); background: var(--side); } #root .login > form.card { width: 100%; max-width: 400px; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; padding: 32px 28px 28px; border: 0; border-radius: var(--r-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); } #root .login > form.card > h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 22px; letter-spacing: -.01em; } #root .login > form.card > h1::before { content: '10'; flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 700; letter-spacing: 0; } #root .login > form.card > p.muted { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--muted); } #root .login > form.card > label { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 8px; } #root .login > form.card > input { box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0 16px; font: inherit; font-size: 18px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s; } #root .login > form.card > input:focus { border-color: var(--ink); box-shadow: var(--focus); } /* Код из 4 цифр — крупно и по центру, как в банковских приложениях */ #root .login > form.card > input[inputmode="numeric"] { height: 60px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 28px; letter-spacing: .45em; padding-left: calc(16px + .45em); } #root .login > form.card > small.muted { margin: 10px 0 0; font-size: 13px; color: var(--muted); } #root .login > form.card > p.err { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bad-bg); color: var(--bad); font-size: 14px; line-height: 1.4; } #root .login .crm-login-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 22px; } #root .login .crm-login-actions .btn { width: 100%; height: 50px; justify-content: center; font-size: 16px; border-radius: 10px; } #root .login .crm-login-actions .btn.ghost { height: 44px; font-size: 14px; border-color: transparent; color: var(--muted); background: transparent; } #root .login .crm-login-actions .btn.ghost:hover { color: var(--ink); background: var(--bg); } #root .login .crm-login-actions .btn:disabled { opacity: .55; } @media (max-width: 420px) { #root .login > form.card { padding: 26px 20px 22px; } } /* Кнопка «Защита входа» в меню — в стиле остальных пунктов */ #root nav.side .crm-security-button { align-self: stretch; margin: 0 !important; min-height: 36px; height: auto; background: transparent; color: var(--side-muted); border: 1px solid var(--side-line); border-radius: var(--r-sm); font-size: 13px !important; font-weight: 500; justify-content: center; } #root nav.side .crm-security-button:hover { color: var(--side-text); border-color: var(--side-muted); } /* Окно «Защита входа» */ dialog.modal form.stack > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); } dialog.modal form.stack > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); } dialog.modal form.stack > p[role=status]:empty { display: none; } dialog.modal form.stack > small { color: var(--muted); font-size: 12px; margin-top: -6px; } dialog.modal form.stack > div:last-child { justify-content: flex-end; flex-wrap: wrap; } /* Диалоги: пустая группа «Непрочитанные» не занимает пол-экрана */ @media (max-width: 1100px) { #root .crm-dialog-columns:has(> .crm-dialog-group:first-child .crm-dialog-group-empty) { grid-template-rows: auto minmax(150px, 1fr) !important; } #root .crm-dialog-columns:has(> .crm-dialog-group:last-child .crm-dialog-group-empty) { grid-template-rows: minmax(150px, 1fr) auto !important; } } #root .crm-dialog-group-empty { color: var(--muted); } #root .crm-dialog-group-title { color: var(--ink); } #root .crm-dialog-search-row .crm-new-dialog-plus { width: var(--ctl-h) !important; height: var(--ctl-h) !important; border-radius: var(--r-sm) !important; } #root .crm-dialog-item.unread { border-left-width: 3px; } /* Панель надёжности и напоминания */ #root .crm-reliability { border-radius: var(--r); } #root .crm-reliability summary { font-size: 14px; } #root .crm-health { border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; } /* ========================================================================== Карточка сделки: зоны по важности. 1 Главное (телефон, сумма, статус) → 2 Работа по сделке → 3 Детали → 4 Источник. Только порядок и оформление — содержимое и логика не меняются. ========================================================================== */ #crm-deal-window .dw-head { box-shadow: 0 1px 0 var(--line); position: relative; z-index: 2; } #crm-deal-window .dw-head h2 { font-size: 24px; line-height: 1.2; } #crm-deal-window .dw-head .dw-muted { font-size: 14px; margin-top: 6px; } #crm-deal-window .dw-head #dw-close { min-height: 40px !important; padding: 0 16px; font-weight: 500; } #crm-deal-window .dw-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } #crm-deal-window .dw-info { display: flex; flex-direction: column; } #crm-deal-window .dw-info > .dw-section { position: relative; margin: 0 0 12px; padding: 16px 18px; gap: 10px; box-shadow: none; } #crm-deal-window .dw-info > .dw-section > h3 { font-size: 15px; font-weight: 700; margin: 0 0 2px; } /* Порядок */ #crm-deal-window .dw-info > .dw-section:first-child { order: 1; } #crm-deal-window .dw-section:has(#dw-notes-form) { order: 2; } #crm-deal-window .dw-section:has(#dw-project) { order: 3; } #crm-deal-window .dw-section:has(#dw-contract-list) { order: 4; } #crm-deal-window .dw-section:has(#dw-payment-form) { order: 5; } #crm-deal-window .dw-section:has(#dw-mount-form) { order: 6; } #crm-deal-window .dw-section:has(.crm-tag-badges) { order: 7; } #crm-deal-window .dw-section:has(#dw-material-form) { order: 8; } #crm-deal-window .dw-section:has(#dw-foreman-form) { order: 9; } #crm-deal-window .dw-section:has(#dw-photo-list) { order: 10; } #crm-deal-window .dw-info > .dw-source-info { order: 11; } /* Подписи зон */ #crm-deal-window .dw-section:has(#dw-notes-form), #crm-deal-window .dw-section:has(.crm-tag-badges), #crm-deal-window .dw-info > .dw-source-info { margin-top: 30px; } #crm-deal-window .dw-section:has(#dw-notes-form)::before, #crm-deal-window .dw-section:has(.crm-tag-badges)::before, #crm-deal-window .dw-info > .dw-source-info::before { position: absolute; left: 2px; top: -22px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #crm-deal-window .dw-section:has(#dw-notes-form)::before { content: 'Работа по сделке'; } #crm-deal-window .dw-section:has(.crm-tag-badges)::before { content: 'Детали'; } #crm-deal-window .dw-info > .dw-source-info::before { content: 'Откуда пришла заявка'; } /* 1. Главное — тёмный блок */ #crm-deal-window .dw-info > .dw-section:first-child { background: var(--side); border-color: var(--side); color: var(--side-text); padding: 16px; } #crm-deal-window .dw-info > .dw-section:first-child > h3 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); } #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .07); } #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields > div:first-child { display: none; } /* имя уже в заголовке */ #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields > div:nth-child(2) { grid-column: 1 / -1; } #crm-deal-window .dw-info > .dw-section:first-child dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--side-muted); } #crm-deal-window .dw-info > .dw-section:first-child dd { font-size: 16px; font-weight: 600; color: var(--side-text); } #crm-deal-window .dw-info > .dw-section:first-child dd a { color: var(--accent); text-decoration: none; font-size: 20px; font-weight: 600; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } #crm-deal-window .dw-info > .dw-section:first-child dd a:hover { text-decoration: underline; } #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields > div:nth-child(3) dd { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-variant-numeric: tabular-nums; } #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields > div:nth-child(4) dd { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 700; } /* 2. Работа по сделке */ #crm-deal-window #dw-notes { min-height: 110px; } #crm-deal-window .dw-section:has(#dw-project) > .dw-button { display: inline-flex; } #crm-deal-window .dw-section:has(#dw-create-project) #dw-open-project { display: none; } /* объекта нет — открывать нечего */ #crm-deal-window #dw-create-project { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } #crm-deal-window #dw-address:empty { display: none; } #crm-deal-window .dw-contracts:empty { display: none; } /* Одно поле + кнопка — в одну строку */ #crm-deal-window #dw-payment-form, #crm-deal-window #dw-foreman-form { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; align-items: center; } #crm-deal-window #dw-payment-form > label, #crm-deal-window #dw-foreman-form > label { grid-column: 1 / -1; margin: 0 !important; } #crm-deal-window #dw-payment-form > .dw-button, #crm-deal-window #dw-foreman-form > .dw-button { margin: 0 !important; min-height: var(--ctl-h); align-self: stretch; } #crm-deal-window .dw-section:has(#dw-payment-form) > p.dw-muted { margin: 0; font-size: 12px; } /* Монтаж: смета и сумма на всю ширину, даты рядом */ #crm-deal-window #dw-mount-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; row-gap: 6px; grid-template-areas: "el el" "e e" "al al" "a a" "sl xl" "s x" "b b"; } #crm-deal-window #dw-mount-form > label { margin: 4px 0 0 !important; } #crm-deal-window label[for="dw-mount-estimate"] { grid-area: el; } #crm-deal-window #dw-mount-estimate { grid-area: e; } #crm-deal-window label[for="dw-mount-amount"] { grid-area: al; } #crm-deal-window #dw-mount-amount { grid-area: a; font-family: 'JetBrains Mono', monospace; } #crm-deal-window label[for="dw-mount-start"] { grid-area: sl; } #crm-deal-window #dw-mount-start { grid-area: s; } #crm-deal-window label[for="dw-mount-end"] { grid-area: xl; } #crm-deal-window #dw-mount-end { grid-area: x; } #crm-deal-window #dw-save-mount { grid-area: b; justify-self: start; margin-top: 6px !important; } /* Подписи, повторяющие заголовок блока, скрыты визуально (остаются для экранного диктора) */ #crm-deal-window label[for="dw-notes"], #crm-deal-window label[for="dw-project"] { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Пустые служебные строки статуса не занимают место */ #crm-deal-window .dw-section [role=status]:empty { display: none; } /* 3. Детали */ #crm-deal-window .crm-tag-badges { gap: 6px; } #crm-deal-window .crm-tag-badges .crm-card-tag { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); } #crm-deal-window .dw-section:has(.crm-tag-badges) { flex-direction: row !important; flex-wrap: wrap; align-items: center; } #crm-deal-window .dw-section:has(.crm-tag-badges) > h3 { flex-basis: 100%; } #crm-deal-window .dw-section:has(.crm-tag-badges) > .crm-tag-badges { flex: 1 1 auto; } #crm-deal-window #dw-edit-tags { min-height: 34px !important; font-size: 13px; } /* 4. Источник — справочно, тише */ #crm-deal-window .dw-info > .dw-source-info { background: transparent; border-style: dashed; } #crm-deal-window .dw-source-info dt { font-size: 12px; } #crm-deal-window .dw-source-info dd { font-size: 13px; font-weight: 500; color: var(--body); } #crm-deal-window .dw-source-info .dw-detail-fields { gap: 6px; } /* Переписка: отделена от левой колонки */ #crm-deal-window .dw-chat-head h3 { font-size: 15px; } @media (max-width: 700px) { #crm-deal-window .dw-head { min-height: 0 !important; padding: 14px 16px !important; align-items: flex-start; } #crm-deal-window .dw-head h2 { font-size: 21px; } #crm-deal-window .dw-info > .dw-section { padding: 14px; } #crm-deal-window .dw-chat { border-top: 8px solid var(--bg); } } /* ========================================================================== Карточка объекта: зоны по важности. Шапка (название, адрес, клиент, этап) → Деньги → Заметки → Задачи и платежи → Монтаж → Поставки ========================================================================== */ #root main:has(> section[aria-label="Деньги по объекту"]) { --obj: 1; } #root main:has(> section[aria-label="Деньги по объекту"]) > a:first-child { order: 0; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head { order: 1; } #root main:has(> section[aria-label="Деньги по объекту"]) > section[aria-label="Деньги по объекту"] { order: 2; } #root main:has(> section[aria-label="Деньги по объекту"]) > section[aria-label="Заметки"] { order: 3; } #root main:has(> section[aria-label="Деньги по объекту"]) > .row { order: 4; } #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head) { order: 5; } #root main:has(> section[aria-label="Деньги по объекту"]) > #supplies { order: 6; } #root main:has(> section[aria-label="Деньги по объекту"]) > :not(a):not(header):not(section):not(.row) { order: 7; } /* Шапка — тёмный блок */ #root main:has(> section[aria-label="Деньги по объекту"]) > header.head { background: var(--side); color: var(--side-text); border-radius: var(--r); padding: 22px 24px; gap: 16px 24px; align-items: flex-start; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head h1 { color: #fff; font-size: 28px; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head > div:first-child > div:last-child { color: var(--side-muted) !important; gap: 8px 10px !important; margin-top: 10px !important; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head > div:first-child > div:last-child > span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head .badge.late { background: var(--bad); color: #fff; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head select { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; min-height: var(--ctl-h); height: var(--ctl-h); padding: 0 12px; border-radius: var(--r-sm); font-size: 15px; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head .btn.ghost { background: transparent; color: var(--side-text); border-color: var(--side-line); } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head .btn.ghost:hover { border-color: var(--side-muted); } /* Подписи зон */ #root section[aria-label="Деньги по объекту"], #root main:has(> section[aria-label="Деньги по объекту"]) > .row, #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head) { position: relative; margin-top: 12px; } #root section[aria-label="Деньги по объекту"]::before, #root main:has(> section[aria-label="Деньги по объекту"]) > .row::before, #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head)::before { position: absolute; left: 2px; top: -24px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #root section[aria-label="Деньги по объекту"]::before { content: 'Деньги по объекту'; } #root main:has(> section[aria-label="Деньги по объекту"]) > .row::before { content: 'Работа на объекте'; } #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head)::before { content: 'Монтаж и материалы'; } /* Деньги: плитка «Монтаж» дублирует блок «Монтаж» ниже — скрыта; «Остаток» выделен */ #root section[aria-label="Деньги по объекту"] > .kpi:first-child { display: none; } #root section[aria-label="Деньги по объекту"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #root section[aria-label="Деньги по объекту"] > .kpi:last-child { background: var(--accent); border-color: var(--accent); } #root section[aria-label="Деньги по объекту"] > .kpi:last-child .l, #root section[aria-label="Деньги по объекту"] > .kpi:last-child .v, #root section[aria-label="Деньги по объекту"] > .kpi:last-child .v small { color: var(--on-accent) !important; } #root section[aria-label="Деньги по объекту"] > .kpi:last-child .n { color: var(--on-accent) !important; opacity: .8; } #root section[aria-label="Деньги по объекту"] .bar { height: 8px; } @container page (max-width: 899px) { #root section[aria-label="Деньги по объекту"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #root section[aria-label="Деньги по объекту"] > .kpi:last-child { grid-column: auto; } } /* Заметки — заметный жёлтый листок сразу под деньгами */ #root main:has(> section[aria-label="Деньги по объекту"]) > section[aria-label="Заметки"] { background: var(--warn-bg); border-color: #F2DE8A; padding: 16px 20px; gap: 6px; } #root main:has(> section[aria-label="Деньги по объекту"]) > section[aria-label="Заметки"] h2 { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warn-fg); } #root main:has(> section[aria-label="Деньги по объекту"]) > section[aria-label="Заметки"] p { font-size: 15px !important; color: var(--ink) !important; line-height: 1.5 !important; } /* Задачи и платежи: одинаковая высота заголовков, «Остаток денег» крупно */ #root section[aria-label="Задачи объекта"] > div:first-child, #root section[aria-label="Платежи"] > div:first-child { min-height: 40px; } #root section[aria-label="Платежи"] .doc { padding: 6px 0; } /* Монтаж */ #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head) > .head h2 { font-size: 19px; } @media (max-width: 700px) { #root main:has(> section[aria-label="Деньги по объекту"]) > header.head { padding: 18px 16px; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head h1 { font-size: 23px; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head > div:last-child { width: 100%; } #root main:has(> section[aria-label="Деньги по объекту"]) > header.head > div:last-child select { flex: 1; } } /* ========================================================================== Калькулятор «Юани → рубли» — тёмная компактная панель, результат жёлтым ========================================================================== */ #root .crm-supply-header .crm-cny-calculator { background: var(--side); color: var(--side-text); border: 0; border-radius: var(--r); padding: 14px 16px; margin-top: 12px; max-width: 760px; } #root .crm-cny-calculator h2 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); } #root .crm-cny-calculator .crm-cny-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; align-items: stretch; } #root .crm-cny-calculator label { gap: 5px; color: var(--side-muted); font-size: 11px; } #root .crm-cny-calculator label > span { letter-spacing: .02em; } #root .crm-cny-calculator input { min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 18px; font-variant-numeric: tabular-nums; } #root .crm-cny-calculator input::placeholder { color: rgba(255, 255, 255, .38); font-family: Onest, system-ui, sans-serif; font-size: 14px; } #root .crm-cny-calculator input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250, 204, 21, .25); } #root .crm-cny-calculator .crm-cny-result { border: 0 !important; padding: 8px 12px !important; gap: 2px; border-radius: var(--r-sm); background: rgba(250, 204, 21, .1); justify-content: center; } #root .crm-cny-calculator .crm-cny-result > span { color: var(--side-muted); font-size: 11px; } #root .crm-cny-calculator .crm-cny-result output { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; letter-spacing: -.01em; } #root .crm-cny-calculator .crm-cny-formula { margin: 8px 0 6px; font-size: 11px; color: var(--side-muted); } #root .crm-cny-calculator .crm-cny-rates summary { font-size: 12px; color: var(--side-muted); padding: 4px 0; } #root .crm-cny-calculator .crm-cny-rates summary:hover { color: var(--side-text); } #root .crm-cny-calculator .crm-cny-rate-fields { margin-top: 6px; gap: 8px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } #root .crm-cny-calculator .crm-cny-rate-fields input { min-height: 38px; font-size: 15px; } #root .crm-cny-calculator .crm-cny-rates .btn { margin-top: 6px; min-height: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 500; } #root .crm-cny-calculator .crm-cny-rates .btn:hover { text-decoration: underline; } #root .crm-cny-calculator .crm-cny-note { margin-top: 6px; color: rgba(255, 255, 255, .45); font-size: 11px; } /* ========================================================================== Задачи на сегодня: «Просрочено» и «На сегодня», кнопка «На завтра» ========================================================================== */ #root .crm-task-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #root .crm-task-group + .crm-task-group { margin-top: 10px; } #root .crm-task-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #root .crm-task-group-title > span { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0; background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; } #root .crm-task-group.overdue .crm-task-group-title { color: var(--bad); } #root .crm-task-group.overdue .crm-task-group-title > span { background: var(--danger-soft); color: var(--bad); } #root .crm-task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-sm); } #root .crm-task-row:hover { background: var(--bg); } #root .crm-task-row.overdue { box-shadow: inset 3px 0 0 var(--bad); } #root .crm-task-row > label.task { margin: 0; padding: 0; border: 0; min-width: 0; } #root .crm-task-row > label.task .t { overflow-wrap: anywhere; } #root .crm-task-later { height: 30px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; } #root .crm-task-later:hover { border-color: var(--ink); } #root .crm-task-later:disabled { opacity: .55; cursor: progress; } @media (hover: hover) { #root .crm-task-row:not(:hover):not(:focus-within) .crm-task-later:not(:disabled) { opacity: .55; } } /* ========================================================================== Поставки: «Вперёд» — главная кнопка, «Назад» — маленькая; договор не теряется на телефоне ========================================================================== */ #root #supplies .crm-supply-stage-controls { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 6px; grid-template-columns: none !important; } #root #supplies .crm-supply-stage-controls .next { width: auto !important; box-sizing: border-box; white-space: nowrap; border-radius: var(--r-sm); font-weight: 600; } #root #supplies .crm-supply-stage-controls .next:not(.crm-supply-back) { height: 32px !important; min-height: 32px !important; padding: 0 14px !important; font-size: 13px !important; background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent, #1e2328); } #root #supplies .crm-supply-stage-controls .next:not(.crm-supply-back):hover:not(:disabled) { background: #F5C20A; } #root #supplies .crm-supply-stage-controls .crm-supply-back { height: 32px !important; min-height: 32px !important; padding: 0 8px !important; font-size: 12px !important; font-weight: 500; background: transparent; border: 1px solid transparent; color: var(--muted); } #root #supplies .crm-supply-stage-controls .crm-supply-back:hover:not(:disabled) { color: var(--ink); border-color: var(--line); } #root #supplies .crm-supply-stage-controls .next:disabled { opacity: .4; cursor: default; } @container listcard (max-width: 720px) { #root #supplies .crm-supply-stage-controls { margin-top: 4px; } #root #supplies .crm-supply-stage-controls .next:not(.crm-supply-back) { flex: 1 1 auto; height: 40px !important; min-height: 40px !important; font-size: 14px !important; } #root #supplies .crm-supply-stage-controls .crm-supply-back { height: 40px !important; min-height: 40px !important; flex: none; } /* Договор — отдельной строкой на всю ширину, с подписью */ #root #supplies tbody td:last-child:not([colspan]) { grid-column: 1 / -1 !important; justify-self: stretch !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px !important; margin-top: 2px; border-top: 1px dashed var(--line) !important; } #root #supplies tbody td:last-child:not([colspan])::before { content: 'Договор'; font-size: 12px; font-weight: 600; color: var(--muted); margin-right: auto; } #root #supplies tbody td:last-child:not([colspan]) a, #root #supplies tbody td:last-child:not([colspan]) button, #root #supplies tbody td:last-child:not([colspan]) label { min-height: 36px; display: inline-flex; align-items: center; } #root #supplies tbody td:last-child:not([colspan]) img { max-height: 56px; border-radius: 6px; } } /* ========================================================================== Окно сделки: автосохранение и «Следующий этап» ========================================================================== */ #crm-deal-window form.dw-autosave > button[type=submit] { display: none !important; } #crm-deal-window #dw-payment-form.dw-autosave, #crm-deal-window #dw-foreman-form.dw-autosave { grid-template-columns: minmax(0, 1fr); } #crm-deal-window .dw-section:has(#dw-notes-form.dw-autosave)::before { content: 'Работа по сделке · сохраняется сама'; } #crm-deal-window .dw-section:has(form.dw-autosave) [role=status]:not(:empty) { font-size: 12px; color: var(--good-fg); } #crm-deal-window .dw-next-stage { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; min-height: 46px !important; border-radius: 10px; background: var(--accent) !important; border: 0 !important; color: var(--on-accent, #1e2328) !important; font-size: 15px; font-weight: 600; cursor: pointer; } #crm-deal-window .dw-next-stage[hidden] { display: none; } #crm-deal-window .dw-next-stage > span { font-weight: 500; opacity: .75; } #crm-deal-window .dw-next-stage:hover:not(:disabled) { background: #F5C20A !important; } #crm-deal-window .dw-next-stage:disabled { opacity: .6; cursor: progress; } /* ========================================================================== Как приложение: без сдвигов экрана, ровный текст, все экраны ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; /* полоса прокрутки не сдвигает страницу */ overflow-x: clip; overscroll-behavior-x: none; /* нет бокового «уезжания» и свайпа назад */ background: var(--bg); } body { overflow-x: clip; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } body:has(dialog[open]) { overflow: hidden; } html:has(dialog[open]) { background: #808183; } /* полоса прокрутки под затемнением окна */ #root { min-width: 0; } .app { min-height: 100vh; min-height: 100dvh; } .login { min-height: 100vh; min-height: 100dvh; } .modal { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overscroll-behavior: contain; } dialog, .dw-messages, .dw-info, .dw-chat, .crm-dialog-feed { overscroll-behavior: contain; } button, .btn, .pill, .next, a, label, summary, [role=button] { touch-action: manipulation; } button, .btn, .pill, .next, summary { -webkit-user-select: none; user-select: none; } img, video, canvas, svg { max-width: 100%; } p, li, dd, td, .muted, .s13 { text-wrap: pretty; } main { min-width: 0; } main h1, main h2, main h3, #crm-deal-window h2, td, dd, .t { overflow-wrap: break-word; } .mono, td.mono, input[inputmode=decimal], input[inputmode=numeric] { font-variant-numeric: tabular-nums; } body { padding-bottom: env(safe-area-inset-bottom, 0px); } @media (max-width: 800px) { #root .side { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } } /* iPhone не увеличивает экран при нажатии на поле: на сенсорных экранах шрифт полей не меньше 16px */ @media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.login input):not(.crm-cny-calculator input), select, textarea { font-size: 16px !important; } } @media (max-width: 700px) { #crm-deal-window { padding-bottom: env(safe-area-inset-bottom); } #crm-deal-window .dw-head { padding-top: max(14px, env(safe-area-inset-top)); } } #root #supplies .crm-supply-stage-controls { max-width: 100%; } @container listcard (max-width: 720px) { #root #supplies .status-row:has(.crm-supply-stage-controls), #root #supplies td:has(> .crm-supply-stage-controls), #root #supplies .crm-supply-stage-controls { width: 100%; } } @media (max-width: 460px) { #root .crm-cny-calculator .crm-cny-main { grid-template-columns: minmax(0, 1fr) !important; } #root .crm-cny-calculator input::placeholder { font-size: 13px; } } /* ========================================================================== Узкие экраны: шапки страниц, фильтры, финансы ========================================================================== */ @container page (max-width: 600px) { /* Шапка: поиск и кнопки — на всю ширину, без обрезанных подсказок */ #root main > .head > div:last-child { width: 100%; } #root main > .head .search { flex: 1 1 100%; min-width: 0; } #root main > .head > div:last-child > .btn { flex: 1 1 auto; justify-content: center; } #root main > .head > div:last-child > .crm-tag-dropdown { flex: 1 1 auto; display: flex; } #root main > .head > div:last-child > .crm-tag-dropdown > .btn { flex: 1; justify-content: center; } /* Фильтры раздела в одну строку с прокруткой, кнопка «+» справа */ #root .sec-h > div:last-child:has(> .pills) { width: 100%; flex-wrap: nowrap !important; } #root .sec-h > div:last-child > .pills { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 16px; overscroll-behavior-x: contain; } #root .sec-h > div:last-child > .pills::-webkit-scrollbar { display: none; } #root .sec-h > div:last-child > .pills > .pill { flex: none; height: 36px; } #root .sec-h > div:last-child > .btn { flex: none; height: 36px; padding: 0 12px; } /* Финансы: итоги 2×2 */ #root .crm-finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } #root .crm-finance-summary > .card { padding: 14px !important; min-width: 0; } #root .crm-finance-summary .mono { font-size: clamp(16px, 5.2cqi, 22px) !important; margin-top: 8px !important; white-space: nowrap; } #root .crm-finance-summary .muted { font-size: 12px; } /* Финансы: платежи карточками */ #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) { min-width: 0 !important; } #root main section.card:not([aria-label]):not(#supplies):has(> div > table th:nth-child(5):last-child) > div { margin-top: 8px !important; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) tbody tr:last-child { border-bottom: 0; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) thead { display: none; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) tbody { display: block; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: baseline; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; text-align: left; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) tbody td[colspan] { grid-column: 1 / -1; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--muted); } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-weight: 600; white-space: nowrap; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) td:nth-child(3) { grid-column: 1; grid-row: 2; font-weight: 500; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) td:nth-child(2) { grid-column: 1 / -1; font-size: 13px; } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) td:nth-child(5) { grid-column: 1 / -1; font-size: 13px; color: var(--muted); } #root main section.card:not([aria-label]):not(#supplies) > div > table:has(th:nth-child(5):last-child) td:nth-child(5):empty { display: none; } } /* Статусы подключений: если текст длинный — аккуратный блок, а не «таблетка» */ .crm-integration-content .connector > span[data-state] { border-radius: 8px !important; line-height: 1.35; text-wrap: balance; } /* AI-офис поверх CRM: учитываем «чёлку» и нижнюю полосу iPhone */ body > .crm-unified-office { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-sizing: border-box; } /* ========================================================================== Голосовые, фото и видео в переписке; запись голосового «зажми и говори» ========================================================================== */ crm-voice { --p: 0%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; max-width: 300px; min-width: 0; margin: 0 0 6px; color: var(--ink); } crm-voice .crm-voice-play { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--side); color: var(--accent); transition: transform .12s; } crm-voice .crm-voice-play:active { transform: scale(.94); } crm-voice .crm-voice-play:focus-visible { outline: none; box-shadow: var(--focus); } crm-voice.loading .crm-voice-play { animation: crm-voice-pulse 1s ease-in-out infinite; } @keyframes crm-voice-pulse { 50% { opacity: .55; } } crm-voice .crm-voice-wave { position: relative; height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; min-width: 0; outline: none; } crm-voice .crm-voice-wave > i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: rgba(27, 29, 32, .22); } crm-voice .crm-voice-wave > i.on { background: var(--side); } crm-voice.playing .crm-voice-wave > i.on { background: #B8860B; } crm-voice .crm-voice-wave:focus-visible { box-shadow: var(--focus); border-radius: 4px; } crm-voice .crm-voice-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; } crm-voice .crm-voice-rate { height: 24px; min-width: 34px; padding: 0 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } crm-voice.failed .crm-voice-play { background: var(--line); color: var(--muted); } .crm-msg-caption { display: block; font-size: 13px; color: var(--body); margin: 2px 0 6px !important; } .crm-msg-missing { font-size: 13px; color: var(--muted); font-style: italic; } .crm-msg-photo { display: block; margin: 0 0 6px; border-radius: 10px; overflow: hidden; max-width: 260px; background: var(--line-soft); } .crm-msg-photo img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; } .crm-msg-video { display: block; width: min(300px, 100%); max-height: 320px; border-radius: 10px; margin: 0 0 6px; background: #000; } .crm-msg-file { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; margin: 0 0 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500; } .crm-msg-file::before { content: '📎'; } #crm-deal-window .dw-message.has-media { white-space: normal; width: min(300px, 92%); box-sizing: border-box; } .crm-dialog-bubble.has-media { width: min(320px, 85%); box-sizing: border-box; } @media (max-width: 650px) { .crm-chat-actions > small { display: none; } crm-voice { gap: 8px; grid-template-columns: 36px minmax(0, 1fr) auto auto; } crm-voice .crm-voice-play { width: 36px; height: 36px; } } /* Кнопка записи: зажать — запись, отпустить — отправка, влево — отмена */ crm-voice-recorder { position: relative; display: inline-flex; align-items: center; flex: none; } crm-voice-recorder .crm-rec-button { width: 44px; height: 44px; min-height: 44px !important; padding: 0 !important; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .15s, background .15s, color .15s; margin-left: 0 !important; } crm-voice-recorder .crm-rec-button:hover:not(:disabled) { border-color: var(--ink); } crm-voice-recorder .crm-rec-button:disabled { opacity: .45; cursor: default; } crm-voice-recorder.recording .crm-rec-button { transform: translateX(var(--dx, 0)) scale(1.35); background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 0 0 8px rgba(180, 35, 24, .15); position: relative; z-index: 3; } crm-voice-recorder.recording.will-cancel .crm-rec-button { background: var(--muted); border-color: var(--muted); box-shadow: none; } crm-voice-recorder.sending .crm-rec-button { animation: crm-voice-pulse 1s ease-in-out infinite; } .crm-chat-actions, #crm-deal-window .dw-send-row { position: relative; } .crm-chat-actions crm-voice-recorder, #crm-deal-window .dw-send-row crm-voice-recorder { position: static; } crm-voice-recorder .crm-rec-panel { position: absolute; left: -4px; right: -4px; top: 50%; transform: translateY(-50%); z-index: 2; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 160px 0 16px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-pop); white-space: nowrap; overflow: hidden; } crm-voice-recorder .crm-rec-panel[hidden] { display: none; } crm-voice-recorder .crm-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); flex: none; animation: crm-voice-pulse 1s ease-in-out infinite; } crm-voice-recorder .crm-rec-time { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; } crm-voice-recorder .crm-rec-hint { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } crm-voice-recorder.will-cancel .crm-rec-hint { color: var(--bad); font-weight: 600; } crm-voice-recorder .crm-rec-status { position: absolute; right: 0; bottom: calc(100% + 4px); font-size: 12px; white-space: nowrap; color: var(--good-fg); pointer-events: none; background: var(--surface); padding: 2px 8px; border-radius: 6px; } crm-voice-recorder .crm-rec-status:empty { display: none; } crm-voice-recorder .crm-rec-status.error { color: var(--bad); white-space: normal; width: max-content; max-width: 260px; } .crm-chat-actions crm-voice-recorder { margin-left: auto; } .crm-chat-actions crm-voice-recorder + button[type=submit] { margin-left: 0 !important; } #crm-deal-window .dw-send-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } #crm-deal-window .dw-send-row #dw-send { margin: 0 !important; } /* Дашборд: карточки-показатели ведут в раздел */ #root a.card.kpi.crm-kpi-link { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; } #root a.card.kpi.crm-kpi-link:hover { border-color: var(--ink); } #root a.card.kpi.crm-kpi-link:focus-visible { outline: none; box-shadow: var(--focus); } /* ========================================================================== Сквозная проверка стиля: интеграции, воронка, диалоги, финансы, график ========================================================================== */ /* Кнопки интеграций — в общем стиле: «включить» тёмная, «пауза» контурная красная */ #root .crm-integration-content button[data-action=enable], #root .crm-integration-content button[data-action=enable]:hover { background: var(--side) !important; border-color: var(--side) !important; color: #fff !important; } #root .crm-integration-content button[data-action=enable]:hover { background: #000 !important; } #root .crm-integration-content button[data-action=disable] { background: var(--surface) !important; border-color: var(--bad) !important; color: var(--bad) !important; } #root .crm-integration-content button[data-action=disable]:hover { background: var(--bad-bg) !important; } #root .crm-integration-content button { min-height: var(--ctl-h); border-radius: var(--r-sm); font-weight: 600; } #root .crm-integration-content .integration-card > a[target=_blank] { align-self: flex-start; } #root .crm-push-settings .control-row { display: flex !important; flex-wrap: wrap; gap: 8px; } #root .crm-push-settings .control-row button { width: auto !important; min-width: 140px; flex: 0 0 auto; } /* Фильтры поставок прокручиваются — мягкое затухание справа подсказывает, что есть ещё */ #root #supplies .crm-supply-toolbar .pills { scrollbar-width: none; padding-right: 18px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); } #root #supplies .crm-supply-toolbar .pills::-webkit-scrollbar { display: none; } /* Воронка на телефоне и планшете: раскрытая колонка — по ширине экрана, а не 180px */ @media (max-width: 800px) { #root .scroll > .kan > .col:not(.crm-col-collapsed) { flex: 0 0 var(--kan-col) !important; } #root .scroll > .kan > .col:not(.crm-col-collapsed):has(> .crm-subgroups) { flex-basis: calc(var(--kan-col) * 2 + var(--kan-gap)) !important; } } @container kanban (max-width: 559px) { #root .scroll > .kan > .col:not(.crm-col-collapsed):has(> .crm-subgroups) { flex-basis: var(--kan-col) !important; } #root .scroll > .kan > .col > .crm-subgroups { grid-template-columns: minmax(0, 1fr) !important; display: grid !important; } } /* Диалоги: окно переписки той же высоты, что и список; пустое состояние по центру */ #root .crm-dialog-layout { align-items: stretch !important; } #root .crm-dialog-layout > .crm-dialog-view:has(> p.muted:only-child) { display: flex; align-items: center; justify-content: center; text-align: center; } #root .crm-dialog-layout > .crm-dialog-view > p.muted:only-child { max-width: 260px; margin: 0; font-size: 14px; line-height: 1.5; } /* Финансы: итоги 4 в ряд или 2×2 — без «сироты» в последней строке */ #root .crm-finance-summary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } @container page (max-width: 899px) { #root .crm-finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* График денег на узком экране: последние 3 месяца крупно, без прокрутки вбок */ @container page (max-width: 600px) { #root .chart.crm-money-chart { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible; padding-left: 0; padding-right: 0; } #root .chart.crm-money-chart > .c:nth-last-child(n+4) { display: none; } #root .crm-money-chart .crm-chart-amounts { grid-template-columns: 1fr; gap: 2px; } } /* ========================================================================== Окно переписки как в мессенджере: шапка с клиентом, лента по дням, строка ввода со скрепкой, микрофоном и отправкой; перетаскивание файла ========================================================================== */ #root .crm-dialog-layout > .crm-dialog-view { position: relative; display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; overflow: hidden; min-width: 0; height: max(560px, calc(100dvh - 170px)); } #root .crm-dialog-layout > .crm-dialog-list { height: max(560px, calc(100dvh - 170px)) !important; max-height: none !important; } /* Шапка */ #root .crm-chat-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface); } #root .crm-chat-head .crm-dialog-ava { grid-row: auto; width: 42px; height: 42px; flex: none; font-size: 17px; } #root .crm-chat-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } #root .crm-chat-who h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #root .crm-chat-chan { font-size: 12px; font-weight: 600; color: var(--muted); } #root .crm-chat-head.ch-whatsapp .crm-chat-chan { color: #1d9a52; } #root .crm-chat-head.ch-telegram .crm-chat-chan { color: #1d8fcc; } #root .crm-chat-head.ch-max .crm-chat-chan { color: #6a4be6; } #root .crm-chat-head.ch-avito .crm-chat-chan { color: #1E6FFF; } #root .crm-chat-back, #root .crm-chat-refresh { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); cursor: pointer; } #root .crm-chat-back { display: none; margin-left: -8px; } #root .crm-chat-refresh { color: var(--muted); } #root .crm-chat-back:hover, #root .crm-chat-refresh:hover:not(:disabled) { background: var(--bg); color: var(--ink); } #root .crm-chat-refresh:disabled { animation: crm-voice-pulse 1s ease-in-out infinite; } /* Лента */ #root .crm-dialog-view .crm-dialog-feed { flex: 1 1 auto; min-height: 0 !important; max-height: none !important; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 12px !important; background: #F6F6F3; } #root .crm-feed-day { align-self: center; margin: 10px 0 4px; position: sticky; top: 0; z-index: 1; } #root .crm-feed-day > span { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--body); background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(20, 22, 25, .08); } #root .crm-feed-older { align-self: center; margin: 0 0 8px; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; } #root .crm-feed-empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 4px; max-width: 280px; } #root .crm-feed-empty b { color: var(--ink); font-size: 15px; } #root .crm-dialog-view .crm-dialog-bubble { max-width: min(78%, 560px) !important; padding: 8px 12px 6px !important; border-radius: 16px 16px 16px 6px !important; background: var(--surface) !important; border: 0 !important; box-shadow: 0 1px 1.5px rgba(20, 22, 25, .1); font-size: 14px; line-height: 1.45; } #root .crm-dialog-view .crm-dialog-bubble.outgoing { border-radius: 16px 16px 6px 16px !important; background: #FFF3B8 !important; } #root .crm-dialog-view .crm-dialog-bubble p { margin: 0 !important; } #root .crm-dialog-view .crm-dialog-bubble .crm-bubble-meta { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; } #root .crm-dialog-view .crm-dialog-bubble.has-media { width: min(320px, 78%); } /* Строка ввода */ #root .crm-dialog-composer.crm-composer-bar { flex: none; display: flex !important; flex-direction: column; gap: 8px; margin: 0 !important; padding: 10px 12px 12px !important; border-top: 1px solid var(--line-soft) !important; background: var(--surface); } #root .crm-composer-row { position: relative; display: flex; align-items: flex-end; gap: 8px; } #root .crm-composer-row crm-voice-recorder { position: static; margin: 0 !important; } #root .crm-composer-row textarea { flex: 1 1 auto; min-width: 0; min-height: 44px !important; max-height: 180px; resize: none !important; overflow-y: auto; padding: 11px 16px !important; border-radius: 22px !important; border: 1px solid var(--line) !important; background: var(--bg) !important; font-size: 15px; line-height: 1.4; box-sizing: border-box; } #root .crm-composer-row textarea:focus { outline: none; border-color: var(--ink) !important; background: var(--surface) !important; box-shadow: none; } #root .crm-composer-attach, #root .crm-composer-send { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .12s; } #root .crm-composer-attach { border: 1px solid var(--line); background: var(--surface); color: var(--ink); } #root .crm-composer-attach:hover:not(:disabled) { border-color: var(--ink); } #root .crm-composer-send { border: 0; background: var(--accent); color: var(--on-accent); } #root .crm-composer-send:hover:not(:disabled) { background: #F5C20A; } #root .crm-composer-send:active:not(:disabled), #root .crm-composer-attach:active:not(:disabled) { transform: scale(.94); } #root .crm-composer-send:disabled { background: var(--track); color: var(--muted); cursor: default; } #root .crm-composer-attach:disabled { opacity: .45; cursor: default; } #root .crm-send-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: crm-spin .8s linear infinite; } @keyframes crm-spin { to { transform: rotate(360deg); } } #root .crm-composer-row crm-voice-recorder .crm-rec-panel { padding-right: 112px; left: 0; right: 0; } #root .crm-chat-attachment { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-soft); font-size: 13px; } #root .crm-att-icon { font-size: 20px; flex: none; } #root .crm-att-name { min-width: 0; flex: 1; display: flex; flex-direction: column; } #root .crm-att-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #root .crm-att-name small { color: var(--muted); font-size: 12px; } #root .crm-att-remove { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } #root .crm-att-remove:hover:not(:disabled) { background: var(--line-soft); color: var(--ink); } #root .crm-composer-note, #root .crm-dialog-composer .crm-chat-notice { margin: 0; padding: 0 6px; font-size: 12px; color: var(--muted); } #root .crm-dialog-composer .crm-chat-notice.err, #root .crm-composer-note.err { color: var(--bad); } #root .crm-composer-reset { align-self: flex-start; height: 34px; font-size: 13px; } /* Перетаскивание файла */ #root .crm-dialog-view.crm-drop-active::after { content: 'Отпустите — файл прикрепится к сообщению'; position: absolute; inset: 10px; z-index: 20; pointer-events: none; display: grid; place-items: center; text-align: center; padding: 24px; border: 2px dashed var(--ink); border-radius: 14px; background: rgba(255, 248, 217, .94); font-size: 17px; font-weight: 700; color: var(--ink); } /* Пустое окно, ошибки */ #root .crm-dialog-layout > .crm-dialog-view > p.muted:only-child { margin: auto; } #root main > .card.state.err { padding: 12px 16px; background: var(--bad-bg); border-color: transparent; border-left: 3px solid var(--bad); font-size: 14px; } /* Телефон: список и переписка — два экрана, как в мессенджере */ @media (max-width: 760px) { #root .crm-dialog-layout > .crm-dialog-list { height: max(440px, calc(100dvh - 210px)) !important; } #root .crm-dialog-layout:has(.crm-chat-head) > .crm-dialog-list { display: none !important; } #root .crm-dialog-layout > .crm-dialog-view:has(.crm-chat-head) { position: fixed; inset: 0; z-index: 1000; height: 100dvh; border-radius: 0 !important; border: 0 !important; } #root .crm-dialog-layout > .crm-dialog-view:not(:has(.crm-chat-head)) { display: none !important; } #root .crm-chat-head { padding: max(8px, env(safe-area-inset-top)) 10px 8px; gap: 8px; } #root .crm-chat-back { display: inline-flex; margin-left: 0; } #root .crm-chat-head .crm-dialog-ava { width: 38px; height: 38px; font-size: 15px; } #root .crm-chat-who h2 { font-size: 16px; } #root .crm-dialog-view .crm-dialog-feed { padding: 12px 10px 10px !important; } #root .crm-dialog-view .crm-dialog-bubble { max-width: 86% !important; } #root .crm-dialog-composer.crm-composer-bar { padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important; } #root .crm-composer-row { gap: 6px; } #root .crm-composer-attach, #root .crm-composer-send { width: 42px; height: 42px; } #root .crm-composer-row crm-voice-recorder .crm-rec-button { width: 42px; height: 42px; min-height: 42px !important; } #root .crm-composer-row crm-voice-recorder .crm-rec-panel { padding-right: 100px; } body:has(.crm-dialog-view .crm-chat-head) { overflow: hidden; } } /* Дашборд: поиск убран, вместо «Новый объект» — быстрый переход в «Сделки» (по просьбе владельца) */ #root main > .head > div:last-child:has(> .search) > .search, #root main > .head > div:last-child:has(> .search) > .found { display: none !important; } #root main > .head .crm-head-deals { text-decoration: none; } @container page (max-width: 600px) { #root main > .head > div:last-child:has(> .crm-head-deals) > .crm-head-deals { flex: 1 1 100%; } } /* ========================================================================== Окно правил: вкладки «Теги и UTM» / «Правила AI-менеджеров» ========================================================================== */ .crm-rules-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-soft); } .crm-rules-tabs button { flex: 1 1 0; min-width: 0; height: 38px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-rules-tabs button:hover { color: var(--ink); } .crm-rules-tabs .crm-tab-short { display: none; } @media (max-width: 600px) { .crm-rules-tabs .crm-tab-short { display: inline; } .crm-rules-tabs .crm-tab-long { display: none; } } .crm-rules-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(20, 22, 25, .12); } .crm-rules-form[data-tab=ai] > :not(header):not(.crm-rules-tabs):not(.crm-ai-rules) { display: none !important; } .crm-rules-form:not([data-tab=ai]) > .crm-ai-rules { display: none !important; } .crm-ai-rules { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .crm-ai-group { margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .crm-ai-list { display: flex; flex-direction: column; gap: 8px; } .crm-ai-rule { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; } .crm-ai-rule[open] { border-color: var(--ink); } .crm-ai-rule > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 14px; -webkit-user-select: none; user-select: none; } .crm-ai-rule > summary::-webkit-details-marker { display: none; } .crm-ai-rule > summary b { font-size: 14px; font-weight: 600; } .crm-ai-rule > summary small { grid-column: 2; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-ai-dot { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; } .crm-ai-rule.filled .crm-ai-dot { background: var(--good-fg); border-color: var(--good-fg); } .crm-ai-hint { margin: 0; padding: 0 14px 8px 34px; font-size: 12px; line-height: 1.5; color: var(--muted); } .crm-ai-rule textarea { display: block; width: calc(100% - 28px); margin: 0 14px 14px; box-sizing: border-box; min-height: 110px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; } .crm-ai-rule textarea:focus { outline: none; border-color: var(--ink); background: var(--surface); } .crm-ai-status.err { color: var(--bad); } .crm-ai-actions { position: sticky; bottom: -24px; padding: 12px 0; background: var(--card, var(--surface)); } @media (max-width: 600px) { .crm-rules-tabs button { font-size: 12px; } .crm-ai-hint { padding-left: 14px; } .crm-ai-actions { bottom: -16px; } } /* ========================================================================== Задачи: доска по срокам, календарь, список, редактор ========================================================================== */ #root .crm-task-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } #root .crm-task-views { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } #root .crm-task-views button { height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } #root .crm-task-views button.on { background: var(--side); color: var(--accent); } #root .crm-task-who-pick { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; min-width: 200px; } /* Карточка задачи */ #root .crm-task-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; } #root .crm-task-card:hover { border-color: var(--ink); box-shadow: 0 2px 8px rgba(20, 22, 25, .08); } #root .crm-task-card:focus-visible { outline: none; box-shadow: var(--focus); } #root .crm-task-card.overdue { border-left: 3px solid var(--bad); } #root .crm-task-card.done { opacity: .6; } #root .crm-task-card.done .crm-task-title { text-decoration: line-through; } #root .crm-task-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; } #root .crm-task-card-top input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; cursor: pointer; } #root .crm-task-kind { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--body); white-space: nowrap; } #root .crm-task-when { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } #root .crm-task-when.bad { color: var(--bad); font-weight: 600; } #root .crm-task-title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; } #root .crm-task-links { display: flex; flex-wrap: wrap; gap: 4px; } #root .crm-task-links:empty { display: none; } #root .crm-task-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 6px; border: 0; cursor: pointer; text-decoration: none; background: var(--warn-bg); color: var(--warn-fg); } #root .crm-task-link.object { background: var(--ok-bg); color: var(--ok-fg); } #root .crm-task-link:hover { filter: brightness(.96); text-decoration: underline; } #root .crm-task-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); } #root .crm-task-result { color: var(--good-fg); } #root .crm-task-empty { margin: 4px 2px; font-size: 13px; color: var(--muted); } /* Доска */ #root .crm-task-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } #root .crm-task-col { background: var(--column); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; scroll-snap-align: start; min-width: 0; } #root .crm-task-col.over { outline: 2px dashed var(--ink); outline-offset: -2px; } #root .crm-task-col > h3 { display: flex; align-items: center; gap: 8px; margin: 2px 4px; font-size: 14px; } #root .crm-task-col > h3 > span { font-size: 12px; font-weight: 600; color: var(--muted); } #root .crm-task-col.c-overdue > h3 { color: var(--bad); } #root .crm-task-col.c-today > h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } #root .crm-task-col-items { display: flex; flex-direction: column; gap: 8px; } #root .crm-task-add { height: 34px; border: 1.5px dashed var(--line); border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } #root .crm-task-add:hover { border-color: var(--ink); color: var(--ink); } /* Календарь */ #root .crm-task-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } #root .crm-task-cal-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; } #root .crm-task-cal-head h2 { min-width: 180px; text-align: center; font-size: 18px; } #root .crm-task-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } #root .crm-task-cal-dow { background: var(--bg); padding: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; } #root .crm-task-cal-day { position: relative; background: var(--surface); min-height: 108px; padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; min-width: 0; } #root .crm-task-cal-day.out { background: var(--bg); } #root .crm-task-cal-day.out .crm-task-cal-num { opacity: .45; } #root .crm-task-cal-day.sel { box-shadow: inset 0 0 0 2px var(--ink); } #root .crm-task-cal-day.over { box-shadow: inset 0 0 0 2px var(--accent); } #root .crm-task-cal-num { font-size: 13px; font-weight: 600; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; } #root .crm-task-cal-day.today .crm-task-cal-num { background: var(--accent); color: var(--on-accent); } #root .crm-task-cal-dots { position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--side); color: #fff; font-size: 11px; font-weight: 700; display: none; place-items: center; box-sizing: border-box; } #root .crm-task-cal-dots.bad { background: var(--bad); } #root .crm-task-cal-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #root .crm-task-chip { display: block; width: 100%; text-align: left; border: 0; border-radius: 5px; padding: 2px 6px; background: var(--warn-bg); color: var(--ink); font: inherit; font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } #root .crm-task-chip b { font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; } #root .crm-task-chip.done { background: var(--bg); color: var(--muted); text-decoration: line-through; } #root .crm-task-chip.bad { background: var(--bad-bg); color: var(--bad); } #root .crm-task-more { font-size: 11px; color: var(--muted); padding-left: 6px; } #root .crm-task-agenda { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; } #root .crm-task-agenda-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #root .crm-task-agenda-head h3 { margin: 0; font-size: 15px; } #root .crm-task-list { display: flex; flex-direction: column; gap: 8px; } /* Список */ #root .crm-task-days { display: flex; flex-direction: column; gap: 18px; max-width: 760px; } #root .crm-task-day > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } #root .crm-task-day > h3 > span { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); letter-spacing: 0; } #root .crm-task-day.overdue > h3 { color: var(--bad); } #root .crm-task-zero { padding: 28px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; color: var(--muted); } #root .crm-task-zero b { color: var(--ink); font-size: 16px; } /* Дашборд: шапка блока задач */ #root .crm-today-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #root .crm-today-head h2 { margin-right: auto; } #root .crm-today-head .btn.sm { height: 34px; padding: 0 12px; font-size: 13px; } #root .crm-today-all { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; } #root .crm-today-all:hover { text-decoration: underline; } /* Редактор задачи */ dialog.crm-task-editor { width: min(560px, calc(100% - 24px)); padding: 22px; border-radius: var(--r-lg); } dialog.crm-task-editor form { display: flex; flex-direction: column; gap: 12px; } .crm-task-editor-head { display: flex; align-items: center; justify-content: space-between; } .crm-task-editor-head h2 { margin: 0; font-size: 20px; } .crm-task-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; } .crm-task-x:hover { background: var(--bg); color: var(--ink); } .crm-task-kinds, .crm-task-quick { display: flex; flex-wrap: wrap; gap: 6px; } .crm-task-kind-pick { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } .crm-task-kind-pick.on { background: var(--side); border-color: var(--side); color: var(--accent); font-weight: 600; } .crm-task-quick .pill { height: 32px; font-size: 12px; } .crm-task-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .crm-task-editor .field textarea { height: auto; padding: 10px 12px; resize: vertical; } .crm-task-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; } /* Узкие экраны */ @container page (max-width: 900px) { #root .crm-task-cal-wrap { grid-template-columns: minmax(0, 1fr); } #root .crm-task-agenda { position: static; } } @container page (max-width: 640px) { #root .crm-task-board { grid-auto-columns: 86%; } #root .crm-task-cal-day { min-height: 52px; align-items: center; padding: 4px 2px; } #root .crm-task-cal-items { display: none; } #root .crm-task-cal-dots { display: grid; position: static; } #root .crm-task-cal-dow { padding: 6px 2px; font-size: 11px; } #root .crm-task-cal-head h2 { min-width: 0; flex: 1; font-size: 16px; } #root .crm-task-views { width: 100%; } #root .crm-task-views button { flex: 1; padding: 0 8px; } #root .crm-task-who-pick { width: 100%; } } @media (max-width: 560px) { .crm-task-row2 { grid-template-columns: minmax(0, 1fr); } dialog.crm-task-editor { padding: 16px; } } /* Окно сделки: блок «Задачи» — первым в зоне «Работа по сделке» */ #crm-deal-window .dw-section.dw-tasks { order: 2; margin-top: 30px; } #crm-deal-window .dw-section.dw-tasks::before { content: 'Работа по сделке'; position: absolute; left: 2px; top: -22px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #crm-deal-window .dw-section:has(#dw-notes-form) { margin-top: 0 !important; } #crm-deal-window .dw-section:has(#dw-notes-form)::before { content: none !important; } #crm-deal-window .dw-tasks-head { align-self: stretch; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; } #crm-deal-window .dw-tasks-head h3 { margin: 0 !important; } #crm-deal-window #dw-task-add { min-height: 34px !important; padding: 0 12px; font-size: 13px; font-weight: 600; background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #crm-deal-window .dw-task-list { align-self: stretch; width: 100%; display: flex; flex-direction: column; gap: 6px; } #crm-deal-window .dw-task { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; } #crm-deal-window .dw-task:hover { border-color: var(--ink); } #crm-deal-window .dw-task small { font-size: 12px; color: var(--muted); } #crm-deal-window .dw-task.late { border-left: 3px solid var(--bad); } #crm-deal-window .dw-task.late small { color: var(--bad); } #crm-deal-window .dw-task.done { opacity: .55; } #crm-deal-window .dw-task.done > span { text-decoration: line-through; } /* Платежи: строки открываются для редактирования */ #root .crm-payment-row { cursor: pointer; border-radius: 8px; transition: background .12s; } #root .doc.crm-payment-row { margin: 0 -8px; padding: 6px 8px; } #root .crm-payment-row:hover { background: var(--bg); } #root .crm-payment-row:focus-visible { outline: none; box-shadow: var(--focus); } dialog.crm-payment-editor { width: min(500px, calc(100% - 24px)); padding: 22px; border-radius: var(--r-lg); } dialog.crm-payment-editor form { gap: 12px; } .crm-payment-auto { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-fg); font-size: 13px; line-height: 1.5; } .crm-payment-auto a { color: inherit; font-weight: 600; } .crm-payment-actions .crm-payment-delete { margin-right: auto; color: var(--bad); border-color: transparent; } .crm-payment-actions .crm-payment-delete:hover { border-color: var(--bad); } .crm-payment-confirm { margin-right: auto; align-self: center; font-size: 14px; font-weight: 600; color: var(--bad); } .btn.crm-btn-danger { background: var(--bad); color: #fff; } .btn.crm-btn-danger:hover { background: #8f1c13 !important; } .crm-delete-confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--bad-bg); } .crm-delete-confirm p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bad); font-weight: 500; } .crm-delete-confirm > div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } #root .doc.crm-deal-sum-row { margin: 0 -8px; padding: 8px; border-radius: 8px; background: var(--good-bg); border-bottom: 0; } #root .crm-pay-in-deal .mono { opacity: .55; } #root .crm-pay-in-deal .mono::after { content: 'в счёт сделки'; display: block; text-align: right; font-family: Onest, system-ui, sans-serif; font-size: 11px; font-weight: 500; } #root .crm-payment-share { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; font-size: 13px; color: var(--muted); } #root .crm-share-bar { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; } #root .crm-share-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--good-fg); } #root .crm-share-text b { color: var(--good-fg); font-size: 14px; } #root .crm-payment-share.bad .crm-share-text b { color: var(--bad); } /* Объекты: приоритет — перетаскивание строк и стрелки ↑↓ */ #root .crm-prio-th { width: 116px; } #root .crm-prio-row { cursor: grab; } #root .crm-prio-row.dragging { opacity: .45; } #root .crm-prio-row.drop-target td { box-shadow: inset 0 2px 0 var(--accent); } #root td.crm-prio-cell { white-space: nowrap; width: 116px; } #root td.crm-prio-cell > * { vertical-align: middle; } #root td.crm-prio-cell > * + * { margin-left: 6px; } #root .crm-prio-handle { color: var(--muted); letter-spacing: -3px; font-weight: 700; cursor: grab; user-select: none; } #root .crm-prio-num { min-width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--bg); font-size: 12px; font-variant-numeric: tabular-nums; } #root .crm-prio-arrows { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; } #root .crm-prio-row:hover .crm-prio-arrows, #root .crm-prio-row:focus-within .crm-prio-arrows { opacity: 1; } #root .crm-prio-arrows button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; } #root .crm-prio-arrows button:hover:not(:disabled) { border-color: var(--ink); } #root .crm-prio-arrows button:disabled { opacity: .3; cursor: default; } @media (hover: none) { #root .crm-prio-arrows { opacity: 1; } } /* Дашборд: примерный доход за месяц — светло-жёлтая карточка */ #root .crm-income-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 20px 22px; background: #FFF6CC; border-color: #F2DE8A; color: #3D3206; } #root .crm-income-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #root .crm-income-label { font-size: 14px; font-weight: 600; color: #6B5A12; } #root .crm-income-value { font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: #2B2304; font-variant-numeric: tabular-nums; } #root .crm-income-note { font-size: 12px; color: #7A6A2A; } #root .crm-income-parts { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; flex: 1 1 360px; max-width: 520px; } #root .crm-income-parts > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .55); } #root .crm-income-parts span { font-size: 12px; font-weight: 600; color: #6B5A12; } #root .crm-income-parts b { font-size: 18px; color: #2B2304; font-variant-numeric: tabular-nums; } #root .crm-income-parts small { font-size: 12px; color: #7A6A2A; } @container page (max-width: 600px) { #root .crm-income-card { padding: 16px; } #root .crm-income-value { font-size: 28px; } #root .crm-income-parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); flex-basis: 100%; } #root .crm-income-parts b { font-size: 16px; } } /* Окно сделки: «Закупка» и «Монтаж» под суммой */ #crm-deal-window .dw-info > .dw-section:first-child .dw-detail-fields > div.dw-split-tile { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 12px; } #crm-deal-window .dw-split { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #crm-deal-window .dw-split > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--side-muted); } #crm-deal-window .dw-split > input { box-sizing: border-box; width: 100%; min-width: 0; height: 38px !important; min-height: 38px !important; padding: 0 10px !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, .16) !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; font-family: 'JetBrains Mono', monospace; font-size: 16px !important; font-variant-numeric: tabular-nums; } #crm-deal-window .dw-split > input::placeholder { color: rgba(255, 255, 255, .35); } #crm-deal-window .dw-split > input:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(250, 204, 21, .25); } #crm-deal-window #dw-split-status { grid-column: 1 / -1; font-size: 12px; color: var(--side-muted); } #crm-deal-window #dw-split-status:empty { display: none; } #crm-deal-window #dw-split-status.error { color: #ff9189; } /* Объект: рекламации (красный блок) и доп. монтажи */ #root .crm-claims { border: 1.5px solid var(--bad); border-radius: var(--r); background: var(--bad-bg); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; } #root .crm-claims:not(.has) { align-self: flex-start; padding: 6px 8px 6px 14px; background: transparent; border-style: dashed; } #root .crm-claims-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #root .crm-claims-head h2 { margin: 0 auto 0 0; font-size: 15px; color: var(--bad); display: flex; align-items: center; gap: 8px; } #root .crm-claims-head h2 > span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 12px; display: inline-grid; place-items: center; box-sizing: border-box; } #root .crm-claims-sum { font-size: 14px; font-weight: 700; color: var(--bad); } #root .crm-claims-add { height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--bad); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } #root .crm-claims-add:hover { filter: brightness(.92); } #root .crm-claims-list { display: flex; flex-direction: column; gap: 6px; } #root .crm-claim { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(180, 35, 24, .25); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; } #root .crm-claim:hover { border-color: var(--bad); } #root .crm-claim > span:first-child { display: flex; flex-direction: column; min-width: 0; } #root .crm-claim b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } #root .crm-claim small { font-size: 12px; color: var(--muted); } #root .crm-claim .mono { white-space: nowrap; color: var(--bad); font-weight: 600; font-size: 13px; } #root main:has(> section[aria-label="Деньги по объекту"]) > .crm-claims { order: 3; } #root .crm-mount-line { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); } #root .crm-mount-line .crm-mount-est { font-size: 13px; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; } #root .crm-mount-line .mono { white-space: nowrap; } #root .crm-mount-line.total { border-bottom: 0; } #root .crm-mount-line.total .mono { font-size: 18px; } dialog.crm-mount-editor { width: min(560px, calc(100% - 24px)); padding: 22px; border-radius: var(--r-lg); } .crm-mount-block { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; } .crm-mount-block.extra { border-style: dashed; } .crm-mount-block h3 { margin: 0; font-size: 14px; } .crm-mount-block-head { display: flex; justify-content: space-between; align-items: center; } .crm-mount-remove { border: 0; background: transparent; color: var(--bad); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .crm-mount-add { align-self: flex-start; } .crm-mount-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--bg); } .crm-mount-total b { font-size: 18px; } .crm-mount-editor .field textarea { height: auto; padding: 10px 12px; resize: vertical; } /* Объект: кнопка «Сделка →» в тёмной шапке */ #root .btn.crm-open-deal-btn { background: transparent; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; } #root .btn.crm-open-deal-btn:hover { background: var(--accent) !important; color: var(--on-accent); } /* Этапы объектов — свой цвет у каждого (список объектов, дашборд, шапка объекта) */ #root .badge.crm-pstage { border: 1px solid transparent; } #root .badge.crm-pstage[data-stage="Подготовка"] { background: #E8F0FE; color: #1D4ED8; border-color: #C7D7FB; } #root .badge.crm-pstage[data-stage="В работе"] { background: #FEF3C7; color: #92400E; border-color: #F8DC8C; } #root .badge.crm-pstage[data-stage="Приёмка"] { background: #F3E8FF; color: #7E22CE; border-color: #E2C8FB; } #root .badge.crm-pstage[data-stage="Завершён"] { background: #DCFCE7; color: #166534; border-color: #B5EBC6; } #root .badge.crm-pstage[data-stage="Пауза"] { background: #F1F5F9; color: #475569; border-color: #D9E0E8; } #root #project-stage[data-stage="Подготовка"] { background-color: #7AA7FF !important; color: #0B1B3F !important; } #root #project-stage[data-stage="Приёмка"] { background-color: #C084FC !important; color: #2A0B45 !important; } #root #project-stage[data-stage="Завершён"] { background-color: #4ADE80 !important; color: #052E12 !important; } #root #project-stage[data-stage="Пауза"] { background-color: #94A3B8 !important; color: #0F172A !important; } /* ---------- Телефон ---------- */ @media (max-width: 800px) { #root .side { padding: 10px 16px; } main > div:not([class]):has(> section.card > .muted + .mono) { grid-template-columns: 1fr; } } @media (max-width: 700px) { dialog.modal { padding: 20px 16px; width: calc(100vw - 16px); } #crm-deal-window .dw-info, #crm-deal-window .dw-chat { padding: 14px; } #crm-deal-window .dw-section { padding: 14px; } .head h1 { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* Сделка: кнопки «клиент оплатил закупку» 50% / 100% и авто-сумма */ #crm-deal-window .dw-detail-fields div.dw-split-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #crm-deal-window .dw-detail-fields div.dw-prepay { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #crm-deal-window .dw-prepay-btn { height: 32px; min-height: 32px; padding: 0 8px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: var(--side-muted, #b8b8b8); font: 600 13px/1 'JetBrains Mono', monospace; transition: background .15s, color .15s, border-color .15s, transform .1s; } #crm-deal-window .dw-prepay-btn:hover { border-color: rgba(250, 204, 21, .6); color: #fff; } #crm-deal-window .dw-prepay-btn:active { transform: scale(.97); } #crm-deal-window .dw-prepay-btn.on { background: var(--accent, #facc15); border-color: var(--accent, #facc15); color: #111; box-shadow: 0 0 0 3px rgba(250, 204, 21, .22); } #crm-deal-window .dw-prepay-btn:focus-visible { outline: 2px solid var(--accent, #facc15); outline-offset: 2px; } #crm-deal-window #dw-amount-tile.dw-amount-auto .dw-amount-value { cursor: default; opacity: 1; } #crm-deal-window #dw-amount-hint { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--side-muted); } #crm-deal-window #dw-amount-hint:empty { display: none; } #crm-deal-window #dw-amount-tile.dw-amount-auto .dw-amount-value:disabled { color: inherit; -webkit-text-fill-color: currentColor; opacity: 1; background: transparent; border-color: transparent; } /* ===== Объект: строка суммы сделки, авто-платежи ===== */ #root .doc.crm-deal-sum-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; } #root .crm-sum-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } #root .crm-sum-title { font-weight: 600; font-size: 14px; } #root .crm-sum-total { font-weight: 700; font-size: 17px; white-space: nowrap; color: var(--ink); } #root .crm-sum-bar { display: block; height: 6px; border-radius: 3px; background: var(--track, rgba(127,127,127,.2)); overflow: hidden; } #root .crm-sum-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--good-fg); transition: width .3s; } #root .crm-sum-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } #root .crm-sum-meta b { color: var(--ink); font-weight: 600; } #root .crm-sum-meta em { font-style: normal; color: var(--good-fg); font-weight: 600; } #root .crm-payment-row > span:first-child { min-width: 0; } #root .crm-pay-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; } #root .crm-pay-auto { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; background: var(--warn-bg, rgba(250,204,21,.16)); color: var(--warn-fg, #a16207); } #root .crm-payment-row .mono { text-align: right; } /* ===== Рекламации: аккуратная строка во всю ширину ===== */ #root .crm-claims:not(.has) { align-self: stretch; flex-direction: row; align-items: center; padding: 8px 10px 8px 14px; border-width: 1px; } #root .crm-claims:not(.has) .crm-claims-head { width: 100%; } #root .crm-claims:not(.has) .crm-claims-head h2::after { content: 'нет — всё в порядке'; margin-left: 4px; font-size: 13px; font-weight: 500; color: var(--muted); } /* ===== Объект: фото и смета ===== */ #root .crm-obj-left { display: flex; flex-direction: column; gap: var(--gap, 16px); } #root .crm-media { position: relative; transition: box-shadow .15s, border-color .15s; } #root .crm-media.crm-drop-on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(250,204,21,.25); } #root .crm-media-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } #root .crm-media-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; } #root .crm-media-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; box-sizing: border-box; } #root .crm-media-empty { width: 100%; padding: 18px 14px; border-radius: var(--r-sm, 10px); border: 1.5px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; line-height: 1.45; text-align: center; cursor: pointer; } #root .crm-media-empty:hover { border-color: var(--accent); color: var(--ink); } #root .crm-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; } #root .crm-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg); } #root .crm-photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } #root .crm-photo-open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } #root .crm-photo-open:hover img { transform: scale(1.04); } #root .crm-photo-del, #root .crm-file-del { width: 26px; height: 26px; border-radius: 13px; border: 0; display: grid; place-items: center; font-size: 17px; line-height: 1; cursor: pointer; } #root .crm-photo-del { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .15s; } #root .crm-photo:hover .crm-photo-del, #root .crm-photo-del:focus-visible { opacity: 1; } @media (hover: none) { #root .crm-photo-del { opacity: 1; } } #root .crm-photo .crm-media-confirm { position: absolute; inset: auto 4px 4px 4px; flex-direction: column; align-items: stretch; } #root .crm-media-confirm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--bad); font-size: 12.5px; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 2; } #root .crm-media-confirm > span { margin-right: auto; font-weight: 600; } #root .crm-file-list { display: flex; flex-direction: column; gap: 6px; } #root .crm-file { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px; border-radius: 10px; border: 1px solid var(--line); } #root .crm-file:hover { border-color: var(--accent); } #root .crm-file-link { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } #root .crm-file-kind { flex: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; font: 700 11px/1 'JetBrains Mono', monospace; color: #fff; background: #64748b; } #root .crm-kind-pdf { background: #dc2626; } #root .crm-kind-xls { background: #16a34a; } #root .crm-kind-doc { background: #2563eb; } #root .crm-kind-img { background: #9333ea; } #root .crm-file-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } #root .crm-file-text b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #root .crm-file-text small { color: var(--muted); font-size: 12px; } #root .crm-file-del { background: transparent; color: var(--muted); } #root .crm-file-del:hover { background: var(--bad-bg); color: var(--bad); } #root .crm-file .crm-media-confirm { flex-basis: 100%; } #root .crm-media-status { font-size: 13px; color: var(--muted); } #root .crm-media-status.err { color: var(--bad); } .crm-lightbox { max-width: min(96vw, 1400px); max-height: 96vh; width: auto; padding: 0; border: 0; border-radius: 14px; background: #0b0b0c; color: #fff; overflow: hidden; } .crm-lightbox::backdrop { background: rgba(0,0,0,.82); } .crm-lightbox img { display: block; max-width: min(96vw, 1400px); max-height: calc(96vh - 60px); margin: 0 auto; object-fit: contain; } .crm-lightbox-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 10px; font-size: 13px; } .crm-lightbox-bar .btn.ghost { color: #fff; border-color: rgba(255,255,255,.25); } .crm-lightbox .crm-media-confirm { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 10px; background: #1a1a1c; } /* ===== Показатели ===== */ #root .crm-kpi-empty { display: block; padding: 12px 16px; border-radius: var(--r, 14px); border: 1.5px dashed var(--line); color: var(--muted); font-size: 14px; text-decoration: none; } #root .crm-kpi-empty:hover { border-color: var(--accent); color: var(--ink); } #root .crm-kpi-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } #root .crm-kpi-card.crm-kpi-all-done { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e, 0 0 28px rgba(34,197,94,.28); } #root .crm-kpi-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } #root .crm-kpi-title { font-size: 16px; font-weight: 700; } #root .crm-kpi-title::first-letter { text-transform: uppercase; } #root .crm-kpi-link { font-size: 13px; color: var(--muted); text-decoration: none; } #root .crm-kpi-link:hover { color: var(--ink); text-decoration: underline; } #root .crm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } #root .crm-kpi-meter { --kc: var(--accent); padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: box-shadow .3s, border-color .3s; } #root .crm-kpi-meter.crm-kpi-low { --kc: #f59e0b; } #root .crm-kpi-meter.crm-kpi-near { --kc: var(--accent); } #root .crm-kpi-meter.crm-kpi-done { --kc: #22c55e; border-color: #22c55e; box-shadow: 0 0 22px rgba(34,197,94,.3); animation: crmKpiGlow 2.6s ease-in-out infinite; } #root .crm-kpi-meter.crm-kpi-none { --kc: var(--muted); } @keyframes crmKpiGlow { 50% { box-shadow: 0 0 34px rgba(34,197,94,.5); } } @media (prefers-reduced-motion: reduce) { #root .crm-kpi-meter.crm-kpi-done { animation: none; } } #root .crm-kpi-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } #root .crm-kpi-label { font-size: 13px; color: var(--muted); font-weight: 600; } #root .crm-kpi-pct { font-size: 24px; font-weight: 700; color: var(--kc); } #root .crm-kpi-bar { display: block; height: 8px; border-radius: 4px; background: var(--track, rgba(127,127,127,.2)); overflow: hidden; } #root .crm-kpi-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--kc); transition: width .5s; } #root .crm-kpi-nums { font-size: 14px; color: var(--muted); } #root .crm-kpi-nums b { color: var(--ink); font-size: 15px; } #root .crm-kpi-meter small { font-size: 12.5px; color: var(--muted); } #root .crm-kpi-meter.crm-kpi-done small { color: #22c55e; font-weight: 600; } #root .crm-kpi-month { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #root .crm-kpi-month strong { min-width: 140px; text-align: center; font-size: 16px; } #root .crm-kpi-month strong::first-letter { text-transform: uppercase; } #root .crm-kpi-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: end; } #root .crm-kpi-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; } #root .crm-kpi-form input { height: var(--ctl-h, 44px); padding: 0 12px; border-radius: var(--r-sm, 10px); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 17px/1 'JetBrains Mono', monospace; } #root .crm-kpi-form input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } #root .crm-kpi-form small { font-weight: 400; color: var(--muted); font-size: 12px; } #root .crm-kpi-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #root .crm-kpi-table-wrap { overflow-x: auto; } #root .crm-kpi-table { width: 100%; border-collapse: collapse; font-size: 14px; } #root .crm-kpi-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); } #root .crm-kpi-table td { padding: 10px 8px; border-bottom: 1px solid var(--line-soft, var(--line)); white-space: nowrap; } #root .crm-kpi-table td:first-child::first-letter { text-transform: uppercase; } #root .crm-kpi-table tr { cursor: pointer; } #root .crm-kpi-table tr.on td { background: var(--bg); } #root .crm-kpi-table td.ok .mono { color: #22c55e; font-weight: 700; } @media (max-width: 640px) { #root .crm-kpi-card { padding: 14px; } #root .crm-kpi-pct { font-size: 20px; } } #root .doc.crm-deal-sum-row { align-items: stretch; text-align: left; } /* Главная: компактная карточка плана */ #root .crm-kpi-card { padding: 12px 16px; gap: 8px; } #root .crm-kpi-card .crm-kpi-title { font-size: 14px; } #root .crm-kpi-card .crm-kpi-link { font-size: 12px; } #root .crm-kpi-card .crm-kpi-grid { gap: 8px; } #root .crm-kpi-card .crm-kpi-meter { padding: 8px 12px; gap: 4px; border-radius: 10px; } #root .crm-kpi-card .crm-kpi-label { font-size: 12px; } #root .crm-kpi-card .crm-kpi-pct { font-size: 17px; } #root .crm-kpi-card .crm-kpi-bar { height: 5px; } #root .crm-kpi-card .crm-kpi-nums { font-size: 12.5px; } #root .crm-kpi-card .crm-kpi-nums b { font-size: 13px; } #root .crm-kpi-card .crm-kpi-meter small { font-size: 11.5px; } #root .crm-kpi-card .crm-kpi-meter.crm-kpi-done { box-shadow: 0 0 14px rgba(34,197,94,.25); } /* Объект: компактный выбор этапа — пилюля с цветной точкой */ #root select#project-stage[data-stage] { --st: #FACC15; --st-bg: rgba(250, 204, 21, .14); -webkit-appearance: none; appearance: none; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 30px 0 26px !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--st) 55%, transparent) !important; background-color: var(--st-bg) !important; color: var(--st) !important; background-image: radial-gradient(circle, var(--st) 0 3.5px, transparent 4px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 11px 50%, right 11px center !important; background-size: 9px 9px, 10px 6px !important; font: 600 13px/1 Onest, system-ui, sans-serif !important; letter-spacing: .01em; box-shadow: none !important; cursor: pointer; transition: background-color .15s, border-color .15s; } #root select#project-stage[data-stage]:hover { background-color: color-mix(in srgb, var(--st) 22%, transparent) !important; } #root select#project-stage[data-stage]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 30%, transparent) !important; } #root select#project-stage option { background: #1b1d22; color: #f1f5f9; font-weight: 500; } #root select#project-stage[data-stage="Подготовка"][data-stage] { --st: #8FB4FF; --st-bg: rgba(122, 167, 255, .14); } #root select#project-stage[data-stage="В работе"][data-stage] { --st: #FACC15; --st-bg: rgba(250, 204, 21, .14); } #root select#project-stage[data-stage="Приёмка"][data-stage] { --st: #D2A8FF; --st-bg: rgba(192, 132, 252, .15); } #root select#project-stage[data-stage="Завершён"][data-stage] { --st: #4ADE80; --st-bg: rgba(74, 222, 128, .13); } #root select#project-stage[data-stage="Пауза"][data-stage] { --st: #CBD5E1; --st-bg: rgba(148, 163, 184, .16); } /* Показатели: проценты чистого дохода */ #root .crm-pct-input { position: relative; display: flex; } #root .crm-pct-input input { width: 100%; padding-right: 34px !important; } #root .crm-pct-input i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 700; color: var(--muted); pointer-events: none; } #root .crm-kpi-net { font-size: 14px; color: var(--muted); } #root .crm-kpi-net b { color: var(--ink); font-size: 16px; } #root .crm-kpi-pct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } #root .crm-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); } #root .crm-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13px/1 Onest, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } #root .crm-seg button:hover { color: var(--ink); } #root .crm-seg button.on { background: var(--accent); color: var(--on-accent, #111); } #root .crm-seg button:focus-visible { outline: none; box-shadow: var(--focus); } #root .crm-cash-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } #root .crm-cash { padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; } #root .crm-cash span { font-size: 13px; color: var(--muted); font-weight: 600; } #root .crm-cash b { font-size: 20px; } #root .crm-cash small { font-size: 13px; font-weight: 700; color: #22c55e; } #root .crm-cash-net { border-color: #22c55e; } #root .crm-cash-net b { color: #22c55e; } #root .crm-cash-net.bad { border-color: var(--bad); } #root .crm-cash-net.bad b, #root .crm-cash-net.bad small { color: var(--bad); } #root .crm-income-value.crm-neg { color: var(--bad) !important; } @media (max-width: 640px) { #root .crm-seg { width: 100%; } #root .crm-seg button { flex: 1; padding: 0 8px; font-size: 12px; } } /* ===== Визуальная проверка: мелкие исправления ===== */ /* Боковое меню: название не обрезается, «Выйти» не вылезает за край */ #root nav.side .crm-brand-label { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; overflow: visible; text-overflow: clip; } #root nav.side .user { min-width: 0; gap: 8px; } #root nav.side .user .crm-user-details { min-width: 0; overflow: hidden; } #root nav.side .user .crm-user-details > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #root nav.side .user .logout { flex: none; padding: 0 8px; } /* Финансы: карточки «Поступления» и «Расходы» — свои цвета днём и ночью */ #root .crm-finance-summary > .card:nth-child(1) { --finance-bg: #e9f8ef; --finance-ink: #17703f; } #root .crm-finance-summary > .card:nth-child(2) { --finance-bg: #fdeeee; --finance-ink: #a2302a; } :root[data-theme=night] #root .crm-finance-summary > .card:nth-child(1) { --finance-bg: #15301f; --finance-ink: #7fe0a6; } :root[data-theme=night] #root .crm-finance-summary > .card:nth-child(2) { --finance-bg: #3a1d1c; } :root[data-theme=night] #root .crm-finance-summary > .card:nth-child(2) { --finance-ink: #ffaba4; } /* Воронка ночью: колонка «Авито» без светлого фона */ :root[data-theme=night] #root .kan > .col[data-crm-stage="Авито"] { background: #17243a; } :root[data-theme=night] #root .kan > .col[data-crm-stage="Авито"] h2, :root[data-theme=night] #root .kan > .col[data-crm-stage="Авито"] .col-head { color: #9cc4ff; } /* Главная на широком экране: список объектов не сжимается в карточки */ @media (min-width: 1100px) { #root main .row > div[style*="999 1 620px"] { flex-basis: 860px !important; } } /* ===== Главная: «Задачи на сегодня» — сетка по 4, коротко, «Показать ещё» ===== */ #root section[aria-label="Задачи на сегодня"] { flex-basis: 100% !important; container-type: inline-size; } #root .crm-task-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } @container (max-width: 900px) { #root .crm-task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (max-width: 680px) { #root .crm-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 420px) { #root .crm-task-grid { grid-template-columns: minmax(0, 1fr); } } #root .crm-task-grid > .crm-task-row { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; min-width: 0; height: 100%; box-sizing: border-box; padding: 10px 10px 8px 12px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } #root .crm-task-grid > .crm-task-row.overdue { box-shadow: inset 3px 0 0 var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); } #root .crm-task-grid > .crm-task-row > label.task { display: flex; align-items: flex-start; gap: 8px; } #root .crm-task-grid > .crm-task-row > label.task input { margin-top: 2px; flex: none; } #root .crm-task-grid .crm-task-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } #root .crm-task-grid .crm-task-meta { display: block; margin-top: 3px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #root .crm-task-grid .crm-task-later { align-self: flex-end; height: 24px; padding: 0 8px; font-size: 11px; } #root .crm-task-more { display: flex; justify-content: center; gap: 8px; margin-top: 8px; } #root .crm-task-more .btn { height: 32px; padding: 0 14px; font-size: 13px; } @container (max-width: 420px) { #root .crm-task-grid { gap: 6px; } #root .crm-task-grid > .crm-task-row { flex-direction: row; align-items: center; padding: 8px 8px 8px 12px; } #root .crm-task-grid > .crm-task-row > label.task { flex: 1; min-width: 0; } #root .crm-task-grid .crm-task-later { align-self: center; flex: none; } } /* ===== Меню: «Ещё разделы» — раскрывающийся список ===== */ #root .crm-secondary-nav { gap: 2px; } #root .crm-more-toggle { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--side-muted); font: 500 14px/1 Onest, system-ui, sans-serif; cursor: pointer; text-align: left; } #root .crm-more-toggle:hover { background: rgba(255,255,255,.06); color: var(--side-text, #fff); } #root .crm-more-toggle:focus-visible { outline: none; box-shadow: var(--focus); } #root .crm-more-toggle.has-active { color: var(--accent); } #root .crm-more-dots { width: 18px; text-align: center; font-size: 18px; line-height: 1; flex: none; } #root .crm-more-toggle .crm-nav-label { flex: 1; } #root .crm-more-chev { flex: none; font-size: 16px; transition: transform .2s; } #root .crm-more-open > .crm-more-toggle .crm-more-chev { transform: rotate(90deg); } #root .crm-more-list { display: flex; flex-direction: column; gap: 2px; padding-left: 8px; margin-left: 12px; border-left: 1px solid var(--side-line, rgba(255,255,255,.1)); } #root nav.side.crm-side-collapsed .crm-more-toggle { justify-content: center; padding: 0; } #root nav.side.crm-side-collapsed .crm-more-toggle .crm-more-chev { display: none; } #root nav.side.crm-side-collapsed .crm-more-list { padding-left: 0; margin-left: 0; border-left: 0; } /* ===== Маркетинг ===== */ #root .crm-mkt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } #root .crm-mkt-head h2 { margin: 0; } #root .crm-mkt-src { font-size: 12.5px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--bg); } #root .crm-mkt-src.on { color: #22c55e; background: rgba(34,197,94,.12); } #root .crm-mkt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } #root .crm-mkt-tile { padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; } #root .crm-mkt-tile span { font-size: 12.5px; color: var(--muted); font-weight: 600; } #root .crm-mkt-tile b { font-size: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #root .crm-mkt-tile small { font-size: 12px; color: var(--muted); line-height: 1.35; } #root .crm-mkt-tile.good { border-color: #22c55e; } #root .crm-mkt-tile.good b { color: #22c55e; } #root .crm-mkt-tile.bad { border-color: var(--bad); } #root .crm-mkt-tile.bad b { color: var(--bad); } #root .crm-mkt-note { font-size: 12.5px; margin: 0; } #root .crm-mkt-table-wrap { overflow-x: auto; margin: 0 -4px; } #root .crm-mkt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; } #root .crm-mkt-table th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; } #root .crm-mkt-table td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft, var(--line)); white-space: nowrap; height: 38px; } #root .crm-mkt-table tr.today td { background: color-mix(in srgb, var(--accent) 10%, transparent); } #root .crm-mkt-table tr.total td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; } #root .crm-mkt-table td.crm-mkt-ok { color: #22c55e; font-weight: 700; } #root .crm-mkt-in { width: 104px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 13.5px; text-align: right; } #root .crm-mkt-in:hover { border-color: var(--line); background: var(--surface); } #root .crm-mkt-in:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--focus); } #root .crm-mkt-in.auto { color: var(--muted); } #root .crm-mkt-in::placeholder { color: color-mix(in srgb, var(--muted) 55%, transparent); } #root .crm-mkt-auto { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; } #root .crm-mkt-auto i { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 6px; background: rgba(34,197,94,.14); color: #22c55e; } @media (max-width: 640px) { #root .crm-mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #root .crm-mkt-tile b { font-size: 17px; } } /* ===== Бригадиры: пункт в «Ещё разделы», кнопка в объекте в стиле CRM ===== */ #brigade-nav { display: none !important; } #root #brigade-entry { display: inline-flex !important; align-items: center; gap: 6px; height: 36px; margin: 0 0 12px !important; padding: 0 14px !important; border: 1px solid var(--accent) !important; border-radius: 10px !important; background: transparent; color: var(--ink) !important; font: 600 14px/1 Onest, system-ui, sans-serif !important; text-decoration: none; transition: background .15s, color .15s; } #root #brigade-entry:hover { background: var(--accent); color: var(--on-accent) !important; } /* ===== Маркетинг · «По дням»: кнопка у числа договоров и раскрывающийся список ===== */ #root .crm-mkt-cbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #22c55e 55%, transparent); background: color-mix(in srgb, #22c55e 10%, transparent); color: #16a34a; font: 700 13.5px/1 "JetBrains Mono", monospace; cursor: pointer; transition: background .15s, border-color .15s; } #root .crm-mkt-cbtn i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; color: #fff; font: 700 13px/1 system-ui, sans-serif; font-style: normal; } #root .crm-mkt-cbtn:hover { background: color-mix(in srgb, #22c55e 18%, transparent); } #root .crm-mkt-cbtn.open { background: #22c55e; color: #fff; border-color: #22c55e; } #root .crm-mkt-cbtn.open i { background: #fff; color: #16a34a; } #root .crm-mkt-cbtn:focus-visible { outline: none; box-shadow: var(--focus); } #root .crm-mkt-table tr.crm-mkt-open td { background: color-mix(in srgb, #22c55e 6%, transparent); } #root .crm-mkt-table tr.crm-mkt-crow-tr > td { height: auto; padding: 4px 0 12px; white-space: normal; } #root .crm-mkt-table tr.crm-mkt-crow-tr .crm-mkt-clist { max-width: 760px; } #root .crm-mkt-table tr.crm-mkt-crow-tr .crm-mkt-clist { position: sticky; left: 0; width: min(760px, calc(100vw - 80px)); } /* ===== Окно сделки: «Сохранить в…» у вложений переписки ===== */ #crm-deal-window .dw-save { position: relative; margin-top: 6px; } #crm-deal-window .dw-save-btn { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--surface, #fff); color: var(--ink, #1b1d20); font: 500 12px/1 Onest, system-ui, sans-serif; cursor: pointer; } #crm-deal-window .dw-save-btn:hover, #crm-deal-window .dw-save.open .dw-save-btn { border-color: var(--accent, #facc15); } #crm-deal-window .dw-save-menu { position: absolute; z-index: 5; top: 32px; left: 0; min-width: 210px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line, rgba(127,127,127,.3)); box-shadow: 0 10px 28px rgba(0,0,0,.18); } #crm-deal-window .dw-message.outgoing .dw-save-menu { left: auto; right: 0; } #crm-deal-window .dw-save-menu button { text-align: left; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink, #1b1d20); font: 500 14px/1 Onest, system-ui, sans-serif; cursor: pointer; } #crm-deal-window .dw-save-menu button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent, #facc15) 22%, transparent); } #crm-deal-window .dw-save-menu button:disabled { opacity: .45; cursor: not-allowed; } #crm-deal-window .dw-save-menu small { padding: 6px 10px 2px; font-size: 11.5px; color: var(--muted, #6b7280); } #crm-deal-window .dw-message.has-media { overflow: visible; } /* ===== Окно сделки: отслеживание заказа — выбор фото для клиента ===== */ #crm-deal-window .dw-track-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } #crm-deal-window .dw-track-head h3 { margin: 0; } #crm-deal-window .dw-track-state { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--muted, #6b7280) 14%, transparent); color: var(--muted, #6b7280); } #crm-deal-window .dw-track-state.on { background: rgba(34,197,94,.14); color: #16a34a; } #crm-deal-window .dw-track-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; } #crm-deal-window .dw-track-actions .dw-button { height: 38px; } #crm-deal-window .dw-track-on { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; } #crm-deal-window .dw-track-off { background: transparent !important; border: 1px solid var(--bad, #dc2626) !important; color: var(--bad, #dc2626) !important; } #crm-deal-window .dw-track-link { display: inline-flex; align-items: center; text-decoration: none; } #crm-deal-window .dw-track-notice:empty { display: none; } #crm-deal-window .dw-track-notice.error { color: var(--bad, #dc2626); } #crm-deal-window .dw-track-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, rgba(127,127,127,.25)); } #crm-deal-window .dw-track-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #crm-deal-window .dw-track-sub h4 { margin: 0 auto 0 0; font-size: 14px; } #crm-deal-window .dw-track-count { font-size: 12px; color: var(--muted, #6b7280); } #crm-deal-window .dw-track-mini { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: transparent; color: var(--ink, inherit); font: 500 12px/1 Onest, system-ui, sans-serif; cursor: pointer; } #crm-deal-window .dw-track-mini:hover { border-color: var(--accent, #facc15); } #crm-deal-window .dw-track-add { border-color: var(--accent, #facc15); font-weight: 600; } #crm-deal-window .dw-track-hint { font-size: 12px; margin: 6px 0 8px; } #crm-deal-window .dw-track-empty { margin: 8px 0; } #crm-deal-window .dw-share-grid, #crm-deal-window .dw-track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } #crm-deal-window .dw-share-tile { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--bg, #eee); cursor: pointer; transition: border-color .15s, transform .1s; } #crm-deal-window .dw-share-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.85) brightness(.75); transition: filter .2s; } #crm-deal-window .dw-share-tile.on { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); } #crm-deal-window .dw-share-tile.on img { filter: none; } #crm-deal-window .dw-share-tile:active { transform: scale(.97); } #crm-deal-window .dw-share-tile:disabled { opacity: .6; cursor: progress; } #crm-deal-window .dw-share-badge { position: absolute; left: 6px; bottom: 6px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font: 600 11px/1 Onest, system-ui, sans-serif; background: rgba(0,0,0,.6); color: #fff; } #crm-deal-window .dw-share-tile.on .dw-share-badge { background: #22c55e; } #crm-deal-window .dw-track-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg, #eee); text-decoration: none; } #crm-deal-window .dw-track-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } #crm-deal-window .dw-track-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: 10.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #crm-deal-window .dw-track-from { display: inline-block; margin-right: 4px; padding: 1px 5px; border-radius: 6px; background: var(--accent, #facc15); color: #1b1d20; font-size: 9.5px; } #crm-deal-window .dw-track-actions [hidden] { display: none !important; } /* ===== Сметчик ===== */ #root .crm-est-msg { padding: 10px 14px; border-radius: 10px; background: rgba(34,197,94,.12); color: #15803d; font-size: 14px; font-weight: 500; } #root .crm-est-msg.err { background: var(--bad-bg); color: var(--bad); } #root .crm-est-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #root .crm-est-top h2 { margin: 0 auto 0 0; } #root .crm-est-total { font-size: 22px; font-weight: 700; } #root .crm-est-search { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; min-width: 220px; } #root .crm-est-list { display: flex; flex-direction: column; gap: 6px; } #root .crm-est-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; } #root .crm-est-item:hover { border-color: var(--accent); } #root .crm-est-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #root .crm-est-item-main b { font-size: 15px; } #root .crm-est-item-main small { color: var(--muted); font-size: 12.5px; } #root .crm-est-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } #root .crm-est-grid .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; } #root .crm-est-grid .field input, #root .crm-est-grid .field select, #root .crm-est-foot textarea { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 14px Onest, system-ui, sans-serif; } #root .crm-est-span { grid-column: 1 / -1; } #root .crm-est-wrap { overflow-x: auto; margin: 0 -4px; } #root .crm-est-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } #root .crm-est-table th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 8px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; } #root .crm-est-table th.num, #root .crm-est-table td.num { text-align: right; } #root .crm-est-table td { padding: 3px 4px; border-bottom: 1px solid var(--line-soft, var(--line)); vertical-align: middle; } #root .crm-est-table td.wide { width: 46%; } #root .crm-est-table td.unit { width: 64px; } #root .crm-est-table td.strong { font-weight: 700; white-space: nowrap; padding-right: 8px; } #root .crm-est-in { width: 100%; box-sizing: border-box; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ink); font: 400 14px Onest, system-ui, sans-serif; } #root .crm-est-in.num { text-align: right; font-family: "JetBrains Mono", monospace; min-width: 84px; } #root .crm-est-in:hover { border-color: var(--line); background: var(--surface); } #root .crm-est-in:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--focus); } #root .crm-est-new td { background: color-mix(in srgb, var(--accent) 7%, transparent); } #root .crm-est-new .crm-est-in { border-color: var(--line); background: var(--surface); } #root .crm-est-sec td { background: color-mix(in srgb, var(--accent) 16%, transparent); } #root .crm-est-sec .crm-est-in { font-weight: 700; } #root .crm-est-ops { white-space: nowrap; text-align: right; } #root .crm-est-x, #root .crm-est-mv { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; } #root .crm-est-x:hover { background: var(--bad-bg); color: var(--bad); } #root .crm-est-mv:hover { background: var(--bg); color: var(--ink); } #root .crm-est-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } #root .crm-est-pick { height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); color: var(--ink); font: 500 13px Onest, system-ui, sans-serif; max-width: 100%; } #root .crm-est-foot { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } #root .crm-est-foot .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; } #root .crm-est-foot textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; } #root .crm-est-sum { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); } #root .crm-est-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; } #root .crm-est-sum span { color: var(--muted); } #root .crm-est-sum .crm-est-in { width: 80px; border-color: var(--line); background: var(--surface); } #root .crm-est-grand { padding-top: 8px; border-top: 1px solid var(--line); } #root .crm-est-grand span { color: var(--ink) !important; font-weight: 700; } #root .crm-est-grand b { font-size: 20px; } #root .crm-est-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } @media (max-width: 760px) { #root .crm-est-grid, #root .crm-est-foot { grid-template-columns: 1fr; } #root .crm-est-search { min-width: 0; flex: 1; } } /* ===== Объект: бригада — смета бригаде, разница, выплаты ===== */ #root .crm-ob .head{flex-wrap:wrap;gap:8px} #root .crm-ob-who{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink)} #root .crm-ob-who i{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--bad-bg,#FDE8E6);color:var(--bad,#B42318)} #root .crm-ob-who i.on{background:var(--good-bg,#E6F4EA);color:var(--good-fg,#166534)} #root .crm-ob-msg{padding:9px 12px;border-radius:10px;background:var(--good-bg,#E6F4EA);color:var(--good-fg,#166534);font-size:13px} #root .crm-ob-msg.err{background:var(--bad-bg,#FDE8E6);color:var(--bad,#B42318)} #root .crm-ob-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} #root .crm-ob-tiles>div{padding:12px 14px;border-radius:12px;border:1px solid var(--line-soft,#E6E6E2);background:var(--surface-2,var(--bg,#F5F5F2));min-width:0} #root .crm-ob-tiles small{display:block;font-size:12px;font-weight:600;color:var(--muted)} #root .crm-ob-tiles b{display:block;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #root .crm-ob-tiles em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px} #root .crm-ob-tiles .crew{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)} #root .crm-ob-tiles .diff{border-color:transparent;background:var(--good-bg,#E6F4EA)} #root .crm-ob-tiles .diff b{color:var(--good-fg,#166534)} #root .crm-ob-tiles .diff.neg{background:var(--bad-bg,#FDE8E6)}#root .crm-ob-tiles .diff.neg b{color:var(--bad,#B42318)} #root .crm-ob-block{border-top:1px solid var(--line-soft,#E6E6E2);padding-top:12px;display:flex;flex-direction:column;gap:10px} #root .crm-ob-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} #root .crm-ob-sub h3{margin:0;font-size:15px} #root .crm-ob-sel{height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--accent);background:var(--surface);color:var(--ink);font:500 13px Onest,system-ui,sans-serif;max-width:100%} #root .crm-ob-empty{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.crm-ob-empty p{margin:0} #root .crm-ob-cuts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)} #root .crm-ob-cuts button{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 12px Onest,system-ui,sans-serif;cursor:pointer} #root .crm-ob-cuts button:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)} #root .crm-ob-wrap{overflow-x:auto} #root .crm-ob-table{width:100%;border-collapse:collapse;font-size:13.5px} #root .crm-ob-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 6px;font-weight:600} #root .crm-ob-table th.num,#root .crm-ob-table td.num{text-align:right} #root .crm-ob-table td{padding:4px 6px;border-top:1px solid var(--line-soft,#E6E6E2);vertical-align:middle} #root .crm-ob-table td.wide{min-width:200px;width:50%}#root .crm-ob-table td.unit{width:70px} #root .crm-ob-table input{width:100%;height:34px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font:inherit} #root .crm-ob-table input:hover{border-color:var(--line)}#root .crm-ob-table input:focus{outline:none;border-color:var(--accent);background:var(--surface)} #root .crm-ob-table input.num{text-align:right;min-width:70px} #root .crm-ob-table td.strong{font-weight:700;white-space:nowrap} #root .crm-ob-cp{display:block;text-align:right;font-size:11px;color:var(--muted);padding-right:8px} #root .crm-ob-x{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-size:16px} #root .crm-ob-x:hover{background:var(--bad-bg,#FDE8E6);color:var(--bad,#B42318)} #root .crm-ob-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.crm-ob-upd{font-size:12px} #root .crm-ob-paid{font-size:13px;color:var(--muted)}#root .crm-ob-paid b{color:var(--ink)} #root .crm-ob-bar{display:flex;height:8px;border-radius:99px;background:var(--line-soft,#E6E6E2);overflow:hidden} #root .crm-ob-bar span{background:#22C55E}#root .crm-ob-bar i{background:#EF4444;opacity:.85} #root .crm-ob-left{font-size:13px;color:var(--bad,#B42318);font-weight:600} #root .crm-ob-pays{list-style:none;margin:0;padding:0} #root .crm-ob-pays li{display:grid;grid-template-columns:1fr auto 28px;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft,#E6E6E2);font-size:14px} #root .crm-ob-pays i{font-style:normal;color:var(--muted)} #root .crm-ob-payform{display:grid;grid-template-columns:140px 150px 1fr auto auto;gap:8px;align-items:center} #root .crm-ob-payform input{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;min-width:0} #root .crm-ob-payform input:focus{outline:none;border-color:var(--accent)} @media(max-width:720px){#root .crm-ob-tiles{grid-template-columns:1fr 1fr}#root .crm-ob-tiles .diff{grid-column:span 2}#root .crm-ob-payform{grid-template-columns:1fr 1fr}#root .crm-ob-payform input:nth-child(3){grid-column:span 2}#root .crm-ob-payform .btn{grid-column:span 1}} @media(max-width:720px){ #root .crm-ob-table thead{display:none} #root .crm-ob-table,#root .crm-ob-table tbody{display:block} #root .crm-ob-table tr{display:grid;grid-template-columns:64px 1fr 1fr 28px;grid-template-areas:"n n n x" "u q p p" "s s s s";gap:4px 6px;padding:8px 0;border-top:1px solid var(--line-soft,#E6E6E2)} #root .crm-ob-table td{border:0;padding:0;display:block;min-width:0} #root .crm-ob-table td.wide{grid-area:n;min-width:0;width:auto}#root .crm-ob-table td.wide input{font-weight:600} #root .crm-ob-table td.unit{grid-area:u;width:auto}#root .crm-ob-table td:nth-child(3){grid-area:q}#root .crm-ob-table td:nth-child(4){grid-area:p} #root .crm-ob-table td.strong{grid-area:s;text-align:right;font-size:14px}#root .crm-ob-table td:last-child{grid-area:x} #root .crm-ob-table input{border-color:var(--line)} } #root .crm-ob-cuts button.on{background:var(--accent);border-color:var(--accent);color:#1b1d20} #root .crm-ob-cuttotal{margin-left:auto;font-size:14px;color:var(--ink)} #root .crm-ob-how{border-top:1px solid var(--line-soft,#E6E6E2);padding-top:8px;font-size:13px} #root .crm-ob-how summary{cursor:pointer;font-weight:600;color:var(--muted);list-style:none} #root .crm-ob-how summary::-webkit-details-marker{display:none} #root .crm-ob-how summary::before{content:'ⓘ ';color:var(--accent)} #root .crm-ob-how ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;color:var(--ink)} /* ===== Сквозная проверка 14.10: аккуратные мелочи по всем разделам ===== */ /* Объект: подпись «Монтаж и материалы» — один раз, над первым блоком */ #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head) ~ section.card.pad.stack:has(> .head)::before { content: none; } #root main:has(> section[aria-label="Деньги по объекту"]) > section.card.pad.stack:has(> .head) ~ section.card.pad.stack:has(> .head) { margin-top: 0; } /* Объект: «Задание для бригады» — аккуратная ссылка-пилюля справа, в строке «Все объекты» */ #root main > #brigade-entry { order: 0; align-self: flex-end; position: relative; z-index: 2; margin: 0 0 -38px !important; padding: 6px 14px !important; border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--surface); color: var(--ink) !important; font-size: 13px; font-weight: 600 !important; line-height: 1.3; white-space: nowrap; } #root main > #brigade-entry:hover { border-color: var(--accent) !important; } /* Объект: 4 плитки денег в одну строку на широком экране */ #root section[aria-label="Деньги по объекту"] > .kpi:last-child { grid-column: auto !important; } /* Поставки: таблица влезает целиком, колонка «Договор» не обрезается */ #root #supplies table { min-width: 0 !important; } #root #supplies th[style*="400"] { width: 330px !important; } #root #supplies th:last-child { width: 104px; } #root #supplies .status-row { grid-template-columns: 140px 1fr; } #root #supplies .status-row > .badge { width: 140px; } /* Диалоги: имя клиента в две строки вместо обрезанного «Роман ди…» */ #root .crm-dialog-group .crm-dialog-title strong { white-space: normal !important; text-overflow: clip !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; } /* Интеграции: главные кнопки — фирменные жёлтые (в тёмной теме чёрные терялись) */ #root .crm-integration-content button[data-action=enable], #root .crm-integration-content button[data-action=enable]:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; } #root .crm-integration-content button[data-action=enable]:hover { filter: brightness(.95); } /* Объекты: вкладки «В работе / Просрочки / Архив» переносятся, а не обрезаются */ @media (max-width: 600px) { #root .sec-h > div:last-child:has(> .pills) { flex-wrap: wrap !important; row-gap: 8px; } #root .sec-h > div:has(> .pills) > .pills { flex-wrap: nowrap !important; flex: 1 1 100% !important; width: auto !important; gap: 4px; overflow-x: auto; } #root .sec-h > div:has(> .pills) > .pills .pill { padding: 0 9px !important; font-size: 12.5px !important; } } /* Сметчик на телефоне: поиск на всю ширину отдельной строкой */ @media (max-width: 600px) { #root .crm-est-top:has(> .crm-est-search) { flex-wrap: wrap; } #root .crm-est-top > .crm-est-search { order: 3; flex: 1 1 100%; width: 100% !important; max-width: none; } } /* Показатели на телефоне: таблица по месяцам листается вбок без ломки строк */ @media (max-width: 600px) { #root .crm-kpi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } #root .crm-kpi-table th, #root .crm-kpi-table td, #root .crm-kpi-table td * { white-space: nowrap !important; } #root .crm-kpi-table td:first-child, #root .crm-kpi-table th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; } } /* ===== Объект: монтаж в шапке «Сметы объекта», без отдельных блоков «Монтаж» и «Смета» ===== */ #root section[aria-label="Смета объекта"] { display: none !important; } #root section[aria-label="Сметы объекта"] > .head { flex-wrap: wrap; gap: 10px; align-items: center; } #root .crm-mount-chip { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 6px 12px 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; max-width: 100%; transition: border-color .15s, background .15s; } #root .crm-mount-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } #root .crm-mount-chip.empty { border-style: dashed; } #root .crm-mount-chip-ic { font-size: 18px; line-height: 1; } #root .crm-mount-chip-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } #root .crm-mount-chip-tx b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #root .crm-mount-chip-tx small { font-size: 12.5px; color: var(--muted); white-space: nowrap; } #root .crm-mount-chip-go { font-size: 20px; color: var(--muted); margin-left: 2px; } @media (max-width: 600px) { #root .crm-mount-chip { order: 3; flex: 1 1 100%; margin-left: 0; } } /* ===== Смета для бригады на телефоне: компактная строка «кол-во · ед. × цена = сумма» ===== */ @media (max-width: 720px) { #root .crm-ob-table tr { grid-template-columns: 50px 42px minmax(60px, 1fr) auto 24px !important; grid-template-areas: "n n n n x" "q u p s s" !important; gap: 4px 5px !important; padding: 10px 0 !important; align-items: center; min-width: 0; width: 100%; box-sizing: border-box; } #root .crm-ob-wrap { overflow-x: visible !important; } #root .crm-ob-table td.strong { white-space: nowrap; } #root .crm-ob-table td.wide { grid-area: n !important; } #root .crm-ob-table td.wide input { height: 30px !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; font-weight: 600; font-size: 15px; text-overflow: ellipsis; } #root .crm-ob-table td.wide input:focus { background: var(--bg) !important; padding: 0 8px !important; } #root .crm-ob-table td.unit { grid-area: u !important; } #root .crm-ob-table td:nth-child(3) { grid-area: q !important; } #root .crm-ob-table td:nth-child(4) { grid-area: p !important; position: relative; padding-left: 14px !important; } #root .crm-ob-table td:nth-child(4)::before { content: "×"; position: absolute; left: 1px; top: 7px; color: var(--muted); font-size: 14px; } #root .crm-ob-table td.strong { grid-area: s !important; position: relative; padding-left: 14px !important; text-align: right; font-size: 15px !important; align-self: start; padding-top: 6px !important; } #root .crm-ob-table td.strong::before { content: "="; position: absolute; left: 2px; top: 6px; color: var(--muted); font-weight: 400; } #root .crm-ob-table td:last-child { grid-area: x !important; align-self: start; } #root .crm-ob-table td:not(.wide) input { min-width: 0 !important; width: 100% !important; height: 32px !important; padding: 0 6px !important; border: 1px solid transparent !important; background: var(--bg) !important; border-radius: 8px; font-size: 14px; } #root .crm-ob-table td:not(.wide) input:focus { border-color: var(--accent) !important; background: var(--surface) !important; } #root .crm-ob-table td.unit input { text-align: center; padding: 0 2px !important; font-size: 12.5px !important; } #root .crm-ob-table .crm-ob-cp { text-align: right; padding: 2px 2px 0 0; font-size: 10.5px; white-space: nowrap; } #root .crm-ob-table .crm-ob-x { width: 26px; height: 26px; font-size: 15px; } } /* ===== Объект → Бригада: «Выплаты бригаде» отдельным блоком с пунктирной рамкой ===== */ #root .crm-ob-block:has(.crm-ob-payform) { border: 1.5px dashed color-mix(in srgb, #3B82F6 55%, transparent) !important; border-radius: 16px; padding: 14px 16px 16px !important; margin-top: 6px; background: color-mix(in srgb, #3B82F6 7%, var(--surface)); } #root .crm-ob-block:has(.crm-ob-payform) .crm-ob-sub h3::before { content: "💸 "; } #root .crm-ob-block:has(.crm-ob-payform) .crm-ob-pays li { border-top-color: color-mix(in srgb, #3B82F6 20%, transparent); } #root .crm-ob-block:has(.crm-ob-payform) .crm-ob-payform input { background: var(--surface); } @media (max-width: 720px) { #root .crm-ob-block:has(.crm-ob-payform) { padding: 12px 12px 14px !important; } } /* ===== Бригада: свой процент от цены клиента ===== */ #root .crm-ob-pct { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 700; color: var(--ink); cursor: text; } #root .crm-ob-pct:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } #root .crm-ob-pct input { width: 44px; border: 0; background: transparent; color: var(--ink); font: 700 15px var(--mono, ui-monospace, monospace); text-align: center; padding: 0; outline: none; } #root .crm-ob-cuts > span { font-size: 13px; color: var(--muted); } /* ===== Бригада: фиксированная сумма выплаты, позиции с ручной ценой подсвечены ===== */ #root .crm-ob-table tr.crm-ob-locked { background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: inset 3px 0 0 var(--accent); } #root .crm-ob-table tr.crm-ob-locked td:nth-child(4) input { border-color: var(--accent) !important; font-weight: 700; } #root .crm-ob-unlock { display: inline-block; margin: 3px 0 0; padding: 2px 8px; border: 0; border-radius: 999px; background: var(--accent); color: #1B1D20; font: 600 11px/1.4 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; float: right; } #root .crm-ob-unlock:hover { filter: brightness(.95); } #root .crm-ob-target { margin-top: -2px; padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); } #root .crm-ob-target.over { background: var(--bad-bg, #FDE8E6); color: var(--bad, #B42318); font-weight: 600; } @media (max-width: 720px) { #root .crm-ob-table tr.crm-ob-locked { padding-left: 8px !important; padding-right: 4px !important; border-radius: 10px; } #root .crm-ob-unlock { float: none; display: block; margin: 3px 0 0 auto; } } /* ===== Бригада: доп. смета — добавляется к основной ===== */ #root .crm-ob-table tr.crm-ob-extra-h td { padding: 12px 6px 6px !important; border-top: 2px dashed color-mix(in srgb, #8B5CF6 45%, transparent) !important; } #root .crm-ob-table tr.crm-ob-extra-h span { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7C3AED; } #root .crm-ob-table tr.crm-ob-extra-h b { font-size: 13px; color: var(--ink); text-transform: none; letter-spacing: 0; } #root .crm-ob-table tr.crm-ob-extra { background: color-mix(in srgb, #8B5CF6 7%, transparent); box-shadow: inset 3px 0 0 #8B5CF6; } #root .crm-ob-extra-btn { border-color: color-mix(in srgb, #8B5CF6 55%, var(--line)) !important; color: #7C3AED !important; } #root .crm-ob-extra-btn:hover { background: color-mix(in srgb, #8B5CF6 10%, transparent) !important; } @media (prefers-color-scheme: dark) { #root .crm-ob-table tr.crm-ob-extra-h span, #root .crm-ob-extra-btn { color: #C4B5FD !important; } } @media (max-width: 720px) { #root .crm-ob-table tr.crm-ob-extra-h { display: block !important; } #root .crm-ob-table tr.crm-ob-extra-h td { display: block !important; } #root .crm-ob-table tr.crm-ob-extra { padding-left: 8px !important; border-radius: 10px; } } /* ===== Сметчик на телефоне: строки сметы карточками «ед. · кол-во × цена = сумма» ===== */ @media (max-width: 720px) { #root .crm-est-rows thead { display: none; } #root .crm-est-wrap:has(> .crm-est-rows) { overflow-x: visible !important; } #root .crm-est-rows, #root .crm-est-rows tbody { display: block; width: 100%; min-width: 0 !important; } #root .crm-est-rows tr:not(.crm-est-sec) { display: grid; grid-template-columns: 22px 48px 50px minmax(56px, 1fr) auto; grid-template-areas: "n w w w o" ". u q p s"; gap: 6px 6px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft, var(--line)); } #root .crm-est-rows tr:not(.crm-est-sec) > td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; width: auto !important; } #root .crm-est-rows tr:not(.crm-est-sec) > td:nth-child(1) { grid-area: n; align-self: start; padding-top: 8px !important; font-size: 12px; text-align: center; } #root .crm-est-rows tr:not(.crm-est-sec) > td.wide { grid-area: w; } #root .crm-est-rows tr:not(.crm-est-sec) > td.unit { grid-area: u; } #root .crm-est-rows tr:not(.crm-est-sec) > td:nth-child(4) { grid-area: q; } #root .crm-est-rows tr:not(.crm-est-sec) > td:nth-child(5) { grid-area: p; position: relative; padding-left: 12px !important; } #root .crm-est-rows tr:not(.crm-est-sec) > td:nth-child(5)::before { content: "×"; position: absolute; left: 1px; top: 8px; color: var(--muted); font-size: 13px; } #root .crm-est-rows tr:not(.crm-est-sec) > td:nth-child(6) { grid-area: s; white-space: nowrap; text-align: right; font-weight: 700; font-size: 14px; padding-left: 4px !important; } #root .crm-est-rows tr:not(.crm-est-sec) > td:nth-child(6)::before { content: "= "; color: var(--muted); font-weight: 400; } #root .crm-est-rows tr:not(.crm-est-sec) > td:last-child { grid-area: o; display: flex !important; gap: 2px; align-self: start; } #root .crm-est-rows tr:not(.crm-est-sec) td.wide > input { font-weight: 600; font-size: 15px; } #root .crm-est-rows tr:not(.crm-est-sec) td.wide > label { margin-top: 4px; } #root .crm-est-rows tr:not(.crm-est-sec) input.crm-est-in, #root .crm-est-rows tr:not(.crm-est-sec) select.crm-est-in { width: 100% !important; min-width: 0 !important; height: 36px; font-size: 14px; box-sizing: border-box; } #root .crm-est-rows tr:not(.crm-est-sec) td:not(.wide) .crm-est-in { background: var(--bg) !important; border-color: transparent !important; border-radius: 8px; } #root .crm-est-rows tr:not(.crm-est-sec) td.unit .crm-est-in { text-align: center; padding: 0 4px !important; font-size: 13px; } #root .crm-est-rows tr.crm-est-sec { display: flex; align-items: center; gap: 6px; padding: 6px 0; } #root .crm-est-rows tr.crm-est-sec > td { display: block; border: 0 !important; padding: 0 !important; } #root .crm-est-rows tr.crm-est-sec > td:nth-child(2) { flex: 1 1 auto; min-width: 0; } #root .crm-est-rows tr.crm-est-sec > td:first-child:empty { display: none; } } /* ===== Прайс: порядок позиций ↑↓ и телефонная раскладка ===== */ #root .crm-est-table .crm-est-pmv { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; } #root .crm-est-table .crm-est-up, #root .crm-est-table .crm-est-dn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } #root .crm-est-table .crm-est-up:hover:not(:disabled), #root .crm-est-table .crm-est-dn:hover:not(:disabled) { border-color: var(--accent); } #root .crm-est-table .crm-est-up:disabled, #root .crm-est-table .crm-est-dn:disabled { opacity: .3; cursor: default; } #root .crm-est-table td.crm-est-acts { white-space: nowrap; width: 1%; } @media (max-width: 720px) { #root .crm-est-wrap:has(> .crm-est-table .crm-est-pmv) { overflow: visible !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) { min-width: 0 !important; width: 100% !important; border-collapse: separate !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) thead { display: none !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody { display: flex !important; flex-direction: column !important; gap: 8px !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody tr { display: grid !important; grid-template-columns: 1fr 72px 104px !important; grid-template-areas: "cat cat acts" "name name name" "unit price price" !important; gap: 6px !important; padding: 10px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--surface) !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td { display: block !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(1) { grid-area: cat !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(2) { grid-area: name !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(3) { grid-area: unit !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(4) { grid-area: price !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(5) { grid-area: acts !important; justify-self: end !important; align-self: start !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td .crm-est-in { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(1) .crm-est-in { font-size: 12px !important; color: var(--muted) !important; height: 30px !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody td:nth-child(2) .crm-est-in { font-weight: 600 !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody tr.crm-est-new { border-style: dashed !important; grid-template-areas: "cat cat cat" "name name name" "unit price acts" !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) tbody tr.crm-est-new td:nth-child(5) { align-self: center !important; } #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) .crm-est-up, #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) .crm-est-dn, #root .crm-est-wrap .crm-est-table:has(.crm-est-pmv) .crm-est-x { width: 32px !important; height: 32px !important; } } /* ===== Замеры ===== */ #root .crm-ms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } #root .crm-ms-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; } #root .crm-ms-card:hover { border-color: var(--accent); transform: translateY(-1px); } #root .crm-ms-card-t { font-weight: 700; font-size: 16px; } #root .crm-ms-card-a, #root .crm-ms-card-d { font-size: 13px; } #root .crm-ms-card-s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } #root .crm-ms-card-s span { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--bg); font-weight: 600; } #root .crm-ms-empty { align-items: flex-start; } #root .crm-ms-head { align-items: flex-end; } #root .crm-ms-back { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 4px; } #root .crm-ms-back:hover { color: var(--ink); } #root .crm-ms-st { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; } #root .crm-ms-st.saving { color: var(--ink); } #root .crm-ms-st.offline { background: var(--bad-bg, #fde8e8); color: var(--bad, #c0392b); white-space: normal; } #root .crm-ms-meta { display: grid; grid-template-columns: 2fr 2fr 2fr 1fr; gap: 12px; } #root .crm-ms-rooms { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } #root .crm-ms-room { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 104px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; flex: 0 0 auto; } #root .crm-ms-room b { font-size: 14.5px; white-space: nowrap; } #root .crm-ms-room small { font-size: 11.5px; color: var(--muted); white-space: nowrap; } #root .crm-ms-room.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #root .crm-ms-room.on small { color: var(--on-accent); opacity: .75; } #root .crm-ms-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #root .crm-ms-add > .muted { font-size: 13px; margin-right: 4px; } #root .crm-ms-type { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink); font: 500 13.5px Onest, system-ui, sans-serif; cursor: pointer; } #root .crm-ms-type:hover { border-color: var(--accent); border-style: solid; } #root .crm-ms-room-top { display: grid; grid-template-columns: 1fr 120px auto; gap: 10px; align-items: end; } #root .crm-ms-del { height: 40px; } #root .crm-ms-sk-wrap { border-radius: 14px; background: var(--bg); padding: 8px; } #root .crm-ms-sketch { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; touch-action: manipulation; } #root .crm-ms-sketch.pin { cursor: crosshair; outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: 10px; } #root .crm-ms-floor { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: none; } #root .crm-ms-wl { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; } #root .crm-ms-w.empty .crm-ms-wl { stroke: var(--muted); stroke-dasharray: 6 5; stroke-width: 2; } #root .crm-ms-w.on .crm-ms-wl { stroke: var(--accent); stroke-width: 5; stroke-dasharray: none; } #root .crm-ms-hit { stroke: transparent; stroke-width: 22; cursor: pointer; } #root .crm-ms-lbl { font: 600 11.5px "JetBrains Mono", monospace; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; pointer-events: none; } #root .crm-ms-lbl.auto { fill: var(--muted); font-style: italic; } #root .crm-ms-w.on .crm-ms-lbl { fill: var(--accent); } #root .crm-ms-corner { stroke: var(--bg); stroke-width: 2; } #root .crm-ms-corner.in, #root .crm-ms-legend i.in { fill: #0EA5A4; background: #0EA5A4; } #root .crm-ms-corner.out, #root .crm-ms-legend i.out { fill: #F97316; background: #F97316; } #root .crm-ms-op { stroke-width: 7; stroke-linecap: butt; } #root .crm-ms-op.door, #root .crm-ms-legend i.door { stroke: #A16207; background: #A16207; } #root .crm-ms-op.window, #root .crm-ms-legend i.window { stroke: #3B82F6; background: #3B82F6; } #root .crm-ms-op.hole { stroke: var(--muted); } #root .crm-ms-pinmark circle { fill: #8B5CF6; stroke: var(--bg); stroke-width: 2; } #root .crm-ms-pinmark text { fill: #fff; font: 700 11px Onest, system-ui, sans-serif; pointer-events: none; } #root .crm-ms-hint { fill: var(--muted); font: 400 11px Onest, system-ui, sans-serif; } #root .crm-ms-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 12px; padding: 4px 0 2px; } #root .crm-ms-legend span { display: inline-flex; align-items: center; gap: 5px; } #root .crm-ms-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } #root .crm-ms-legend i.door, #root .crm-ms-legend i.window { border-radius: 2px; height: 5px; width: 14px; } #root .crm-ms-warn { font-size: 13px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #F97316 14%, transparent); color: var(--ink); } #root .crm-ms-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } #root .crm-ms-tile { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--bg); } #root .crm-ms-tile span { font-size: 12px; color: var(--muted); } #root .crm-ms-tile b { font-size: 18px; white-space: nowrap; } #root .crm-ms-tile small { font-size: 12px; color: var(--muted); font-weight: 500; } #root .crm-ms-sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-top: 4px; } #root .crm-ms-sub h2, #root .crm-ms-sub h3 { margin: 0; } #root .crm-ms-sub h3 { font-size: 15px; } #root .crm-ms-sub > .muted { font-size: 12.5px; } #root .crm-ms-walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; } #root .crm-ms-wall { display: grid; grid-template-columns: 30px 1fr auto 30px; gap: 6px; align-items: center; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); } #root .crm-ms-wall.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } #root .crm-ms-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--bg); font-weight: 700; font-size: 13px; } #root .crm-ms-wall input { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 10px; font-size: 16px; text-align: right; } #root .crm-ms-wall input:focus { outline: none; border-color: var(--accent); } #root .crm-ms-turn { height: 30px; padding: 0 9px; border-radius: 8px; border: 0; font: 600 12px Onest, system-ui, sans-serif; cursor: pointer; color: #fff; } #root .crm-ms-turn.in { background: #0EA5A4; } #root .crm-ms-turn.out { background: #F97316; } #root .crm-ms-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #root .crm-ms-ops { display: flex; flex-direction: column; gap: 6px; } #root .crm-ms-opr { display: grid; grid-template-columns: 1fr 1fr 74px 12px 74px 30px; gap: 6px; align-items: center; } #root .crm-ms-opr select, #root .crm-ms-opr input { height: 38px; min-width: 0; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 8px; font-size: 14px; } #root .crm-ms-opr input { text-align: right; font-size: 16px; } #root .crm-ms-counter { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; } #root .crm-ms-counter button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 18px; cursor: pointer; } #root .crm-ms-counter b { min-width: 20px; text-align: center; font-size: 16px; } #root .crm-ms-pinon { border-color: var(--accent) !important; color: var(--ink) !important; background: color-mix(in srgb, var(--accent) 18%, transparent) !important; } #root .crm-ms-pins { display: flex; flex-direction: column; gap: 6px; } #root .crm-ms-pin { display: grid; grid-template-columns: 26px 1fr 30px; gap: 8px; align-items: center; } #root .crm-ms-pinno { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #8B5CF6; color: #fff; font-weight: 700; font-size: 12px; } #root .crm-ms-pin input, #root .crm-ms-notes { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 8px 10px; font: 400 15px Onest, system-ui, sans-serif; } #root .crm-ms-pin input { height: 38px; } #root .crm-ms-notes { resize: vertical; } /* калькулятор */ #root .crm-ms-calc { max-width: 520px; width: 100%; box-sizing: border-box; } #root .crm-ms-calc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } #root .crm-ms-calc-head h2 { margin: 0; } #root .crm-ms-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #root .crm-ms-chips > .muted { font-size: 13px; } #root .crm-ms-chip { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 12.5px Onest, system-ui, sans-serif; cursor: pointer; white-space: nowrap; } #root .crm-ms-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #root .crm-ms-calc-screen { padding: 12px 14px; border-radius: 12px; background: var(--bg); text-align: right; } #root .crm-ms-calc-ex { font: 500 22px "JetBrains Mono", monospace; word-break: break-all; min-height: 28px; } #root .crm-ms-calc-res { font-size: 15px; color: var(--muted); min-height: 20px; } #root .crm-ms-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #root .crm-ms-key { height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 20px Onest, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; } #root .crm-ms-key:active { transform: scale(.97); } #root .crm-ms-key.op { background: var(--bg); } #root .crm-ms-key.eq { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #root .crm-ms-hist { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; text-align: right; } /* расчёт в смету */ #root .crm-ms-tabs { flex-wrap: wrap; align-self: flex-start; } #root .crm-ms-estopts { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: 13.5px; } #root .crm-ms-estopts label { display: inline-flex; align-items: center; gap: 8px; } #root .crm-ms-estopts input.mono { width: 64px; height: 34px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 8px; text-align: right; font-size: 15px; } #root .crm-ms-check input { width: 18px; height: 18px; accent-color: var(--accent); } #root .crm-ms-lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); } #root .crm-ms-line { display: grid; grid-template-columns: minmax(0, 1fr) 190px 84px 52px 120px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-soft, var(--line)); opacity: .62; } #root .crm-ms-line.on { opacity: 1; } #root .crm-ms-ln { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; } #root .crm-ms-ln input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); } #root .crm-ms-line select { height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 6px; font-size: 13px; min-width: 0; } #root .crm-ms-q { text-align: right; font-size: 15px; } #root input.crm-ms-q { width: 100%; height: 34px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 8px; } #root .crm-ms-u { font-size: 12.5px; } #root .crm-ms-sum { text-align: right; font-size: 13.5px; white-space: nowrap; } #root .crm-ms-line:not(.on) .crm-ms-sum { color: var(--muted); font-size: 12px; } #root .crm-ms-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg); } #root .crm-ms-total b { font-size: 20px; } #root .crm-ms-go { display: flex; flex-wrap: wrap; gap: 8px; } #root .crm-ms-go select { flex: 1 1 220px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 10px; font-size: 14px; min-width: 0; } #root .crm-ms-go .btn { flex: 0 0 auto; } #root .crm-ms-foot { display: flex; justify-content: flex-end; } @media (max-width: 800px) { #root .crm-ms-meta { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { #root .crm-ms-meta { grid-template-columns: 1fr; gap: 10px; } #root .crm-ms-room-top { grid-template-columns: 1fr 92px; } #root .crm-ms-room-top .crm-ms-del { grid-column: 1 / -1; justify-self: start; height: 32px; } #root .crm-ms-walls { grid-template-columns: 1fr; } #root .crm-ms-opr { grid-template-columns: 1fr 1fr 30px; grid-template-areas: "t w x" "a s b"; } #root .crm-ms-opr > :nth-child(1) { grid-area: t; } #root .crm-ms-opr > :nth-child(2) { grid-area: w; } #root .crm-ms-opr > :nth-child(3) { grid-area: a; } #root .crm-ms-opr > :nth-child(4) { display: none; } #root .crm-ms-opr > :nth-child(5) { grid-area: s; } #root .crm-ms-opr > :nth-child(6) { grid-area: x; } #root .crm-ms-counter { margin-left: 0; width: 100%; justify-content: space-between; padding: 6px 0 0; } #root .crm-ms-line { grid-template-columns: 1fr 70px 40px; grid-template-areas: "n n n" "b q u" "s s s"; row-gap: 6px; } #root .crm-ms-line > :nth-child(1) { grid-area: n; } #root .crm-ms-line > :nth-child(2) { grid-area: b; } #root .crm-ms-line > :nth-child(3) { grid-area: q; } #root .crm-ms-line > :nth-child(4) { grid-area: u; } #root .crm-ms-line > :nth-child(5) { grid-area: s; } #root .crm-ms-line:not(.on) > :nth-child(2), #root .crm-ms-line:not(.on) > :nth-child(3), #root .crm-ms-line:not(.on) > :nth-child(4) { display: none; } #root .crm-ms-line:not(.on) { grid-template-areas: "n n s"; grid-template-columns: 1fr auto auto; } #root .crm-ms-go .btn { flex: 1 1 100%; } #root .crm-ms-key { height: 54px; } #root .crm-ms-calc { max-width: none; } } #root .crm-ms-pinbtn { flex: 1 1 100%; height: 36px; border-radius: 10px; border: 1px dashed #8B5CF6; background: transparent; color: var(--ink); font: 600 13px Onest, system-ui, sans-serif; cursor: pointer; margin-bottom: 4px; } #root .crm-ms-pinbtn.on { background: color-mix(in srgb, #8B5CF6 22%, transparent); border-style: solid; } @media (min-width: 601px) { #root .crm-ms-pinbtn { flex: 0 0 auto; padding: 0 14px; margin: 0 8px 0 0; height: 30px; } } /* замеры: фото */ #root .crm-ms-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } #root .crm-ms-ph { position: relative; margin: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); } #root .crm-ms-ph-img { display: block; padding: 0; border: 0; background: var(--bg); cursor: zoom-in; aspect-ratio: 4 / 3; width: 100%; } #root .crm-ms-ph-img img { display: block; width: 100%; height: 100%; object-fit: cover; } #root .crm-ms-ph figcaption { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; } #root .crm-ms-ph figcaption b { font-size: 13.5px; } #root .crm-ms-ph figcaption input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px dashed var(--line); background: transparent; color: var(--ink); padding: 2px 0; font: 400 13px Onest, system-ui, sans-serif; } #root .crm-ms-ph figcaption input:focus { outline: none; border-bottom-color: var(--accent); } #root .crm-ms-ph-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; } #root .crm-ms-ph-wait { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--muted); font-size: 13px; animation: crm-ms-pulse 1.2s ease-in-out infinite; } @keyframes crm-ms-pulse { 50% { opacity: .5; } } #root .crm-ms-ph-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--ink); cursor: pointer; font-weight: 600; font-size: 14px; text-align: center; padding: 8px; } #root .crm-ms-ph-add:hover { border-color: var(--accent); } #root .crm-ms-ph-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #root .crm-ms-ph-ico { font-size: 28px; line-height: 1; } #root .crm-ms-ph-add small { font-size: 12px; font-weight: 500; } #root .crm-ms-viewer { position: fixed; inset: 0; z-index: 1000; background: #0B0C0E; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; cursor: zoom-out; } #root .crm-ms-viewer img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 8px; } #root .crm-ms-viewer-cap { color: #fff; font-size: 16px; text-align: center; } #root .crm-ms-viewer-x { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 22px; cursor: pointer; } @media (max-width: 600px) { #root .crm-ms-photos { grid-template-columns: 1fr 1fr; gap: 8px; } } /* замеры: удобство на объекте */ #root .crm-ms-page { display: flex; flex-direction: column; gap: inherit; gap: 16px; } #root .crm-ms-metabar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 14px Onest, system-ui, sans-serif; text-align: left; cursor: pointer; } #root .crm-ms-metabar span { color: var(--muted); } #root .crm-ms-metabar b { flex: 0 0 auto; font-size: 13px; color: var(--ink); padding: 6px 12px; border-radius: 999px; background: var(--bg); } #root .crm-ms-meta-ok { align-self: end; height: 44px; } #root .crm-ms-meta input, #root .crm-ms-meta select, #root .crm-ms-room-top input { font-size: 16px; } #root .crm-ms-offline { position: sticky; top: 0; z-index: 60; padding: 10px 14px; border-radius: 12px; background: var(--bad, #c0392b); color: #fff; font-size: 14px; font-weight: 600; } #root .crm-ms-roomsbar { position: sticky; top: 0; z-index: 50; margin: -6px -4px; padding: 6px 4px; background: var(--bg); } #root .crm-ms-room-add { border-style: dashed !important; background: transparent !important; } #root .crm-ms-room-add small { color: var(--muted); } #root .crm-ms-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } #root .crm-ms-typegrid .crm-ms-type { height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: 600 16px Onest, system-ui, sans-serif; } #root .crm-ms-typegrid .crm-ms-type:active { background: var(--accent); color: var(--on-accent); } #root .crm-ms-sheet-bg { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; } #root .crm-ms-sheet { width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; border-radius: 18px; background: var(--surface); padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; } #root .crm-ms-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #root .crm-ms-sheet-h h2 { margin: 0; } #root .crm-ms-sheet-x { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; } #root .crm-ms-calc .crm-ms-sheet-x { display: none; } #root .crm-ms-room-foot { display: flex; justify-content: flex-end; padding-top: 4px; } #root .crm-ms-bar { display: none; } @media (max-width: 800px) { #root .crm-ms-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } #root .crm-ms-bar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.18); } #root .crm-ms-bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: 600 12px Onest, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; } #root .crm-ms-bar button i { font-style: normal; font-size: 24px; line-height: 1; font-weight: 700; } #root .crm-ms-bar button:active, #root .crm-ms-bar button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); } #root .crm-ms-pinbtn { display: none; } #root .crm-ms-calcwrap { display: none; } #root .crm-ms-calcwrap.open { display: flex; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.5); align-items: flex-end; } #root .crm-ms-calcwrap.open .crm-ms-calc { max-width: none; border-radius: 20px 20px 0 0; margin: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; } #root .crm-ms-calc .crm-ms-sheet-x { display: block; } #root .crm-ms-calc-head h2 { flex: 1; } #root .crm-ms-calc-head .crm-ms-chips { order: 3; width: 100%; } #root .crm-ms-key { height: 58px; font-size: 22px; } #root .crm-ms-sheet-bg { align-items: flex-end; padding: 0; } #root .crm-ms-sheet { border-radius: 20px 20px 0 0; max-width: none; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } #root .crm-ms-typegrid { grid-template-columns: 1fr 1fr; } #root .crm-ms-sketch { max-height: 36vh; } #root .crm-ms-legend { gap: 10px; font-size: 11.5px; } #root .crm-ms-tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; } #root .crm-ms-tile { padding: 8px 8px; border-radius: 10px; } #root .crm-ms-tile span { font-size: 11px; } #root .crm-ms-tile b { font-size: 15px; } #root .crm-ms-tile small { display: block; font-size: 10.5px; } #root .crm-ms-actions .btn { min-height: 44px; } #root .crm-ms-counter button { width: 44px; height: 44px; } } @media (max-width: 600px) { #root .crm-ms-walls { grid-template-columns: 1fr 1fr; gap: 6px; } #root .crm-ms-wall { grid-template-columns: 24px minmax(0, 1fr) 40px; gap: 4px; padding: 5px; } #root .crm-ms-letter { width: 24px; height: 28px; font-size: 13px; } #root .crm-ms-wall input { height: 48px; font-size: 19px; padding: 0 6px; } #root .crm-ms-turn { height: 36px; padding: 0 4px; font-size: 12px; } #root .crm-ms-room-top { grid-template-columns: 1fr 96px; } #root .crm-ms-room { min-width: 92px; padding: 9px 12px; } #root .crm-ms-metabar { padding: 12px 14px; font-size: 13.5px; } #root .crm-ms-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) and (min-width: 360px) { #root .crm-ms-room-card .crm-ms-tiles { grid-template-columns: repeat(4, 1fr); } } #root .crm-ms-room-card { scroll-margin-top: 84px; } #root .crm-ms-room-foot .crm-btn-danger { background: transparent !important; border-color: transparent !important; color: var(--bad, #c0392b) !important; font-weight: 600; } @media (min-width: 801px) { #root .crm-ms-sketch { max-height: 420px; } } /* замеры: мебель и расчёт площади */ #root .crm-ms-op.furniture { stroke: #8B5E34; stroke-dasharray: 3 3; } #root .crm-ms-legend i.furniture { background: repeating-linear-gradient(90deg, #8B5E34 0 3px, transparent 3px 6px); border-radius: 2px; height: 5px; width: 14px; } #root .crm-ms-opf { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #root .crm-ms-opf > span { font-size: 11.5px; color: var(--muted); padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #root .crm-ms-opr { align-items: end; } #root .crm-ms-opr > .crm-est-x, #root .crm-ms-opr > .muted { align-self: end; margin-bottom: 9px; } #root .crm-ms-calcline { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; } #root .crm-ms-cl-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } #root .crm-ms-cl-rows { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; } #root .crm-ms-cl-rows > div { display: flex; justify-content: space-between; gap: 10px; } #root .crm-ms-cl-rows b { white-space: nowrap; font-weight: 600; } #root .crm-ms-cl-rows .minus { color: var(--bad); } #root .crm-ms-cl-rows .res { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 700; } #root .crm-ms-cl-rows .res b { font-size: 16px; font-weight: 700; } /* ===== Объект: блок «Сумма сделки» — карточка с прогрессом оплаты ===== */ #root .doc.crm-deal-sum-row { margin: 0 !important; padding: 16px 16px 14px !important; gap: 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--good-fg) 22%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--good-fg) 12%, var(--surface)) 0%, var(--surface) 75%); box-shadow: 0 1px 2px rgba(0,0,0,.04); } #root .crm-deal-sum-row .crm-sum-top { align-items: flex-end; flex-wrap: wrap; row-gap: 2px; } #root .crm-deal-sum-row .crm-sum-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } #root .crm-deal-sum-row .crm-sum-total { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; } #root .crm-deal-sum-row .crm-sum-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); } #root .crm-deal-sum-row .crm-sum-bar > i { min-width: 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--good-fg) 70%, #fff) 0%, var(--good-fg) 100%); } #root .crm-deal-sum-row .crm-sum-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; } #root .crm-deal-sum-row .crm-sum-meta > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); line-height: 1.2; } #root .crm-deal-sum-row .crm-sum-meta > span:last-child { align-items: flex-end; text-align: right; } #root .crm-deal-sum-row .crm-sum-meta b { font-size: 16px; font-weight: 700; white-space: nowrap; } #root .crm-deal-sum-row .crm-sum-meta > span:first-child b { color: var(--good-fg); } #root .crm-deal-sum-row .crm-sum-meta em { order: -1; position: absolute; } #root .crm-deal-sum-row .crm-sum-meta > span:first-child { position: relative; } #root .crm-deal-sum-row .crm-sum-meta em { top: 8px; right: 8px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--good-fg) 16%, transparent); font-size: 11.5px; } /* ===== Единицы измерения — выпадающий список ===== */ #root select.crm-unit-sel { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; box-sizing: border-box; height: 34px; padding: 0 20px 0 8px !important; border-radius: 8px; border: 1px solid var(--line) !important; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A8F98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px center / 10px 6px !important; color: var(--ink); font: 500 14px Onest, system-ui, sans-serif; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; } #root select.crm-unit-sel:hover { border-color: var(--accent) !important; } #root select.crm-unit-sel:focus { outline: none; border-color: var(--accent) !important; box-shadow: var(--focus); } #root .crm-est-table td.unit, #root .crm-ob-table td.unit { width: 100px; min-width: 92px; } @media (max-width: 720px) { #root .crm-est-rows tr:not(.crm-est-sec) { grid-template-columns: 20px 62px 46px minmax(62px, 1fr) auto !important; } #root .crm-est-rows tr:not(.crm-est-sec) td.unit select.crm-unit-sel, #root .crm-ob-table td.unit select.crm-unit-sel { height: 36px; font-size: 13px; padding: 0 16px 0 6px !important; text-align: left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A8F98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 5px center !important; background-size: 9px 6px !important; } #root .crm-est-table td.unit, #root .crm-ob-table td.unit { width: auto; min-width: 0; } #root .crm-ob-table tr { grid-template-columns: 44px 64px minmax(56px, 1fr) auto 24px !important; } } /* ===== Единый стиль: Финансы, плитки бригады, «Сумма сделки» ===== */ /* Финансы: плитки как на дашборде и в объекте */ #root .crm-fin-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #root .crm-fin-kpis .crm-fin-in .v { color: var(--good-fg); } #root .crm-fin-kpis .crm-fin-out .v { color: var(--bad); } #root .crm-fin-kpis .crm-fin-rest { background: var(--accent); border-color: var(--accent); } #root .crm-fin-kpis .crm-fin-rest .l, #root .crm-fin-kpis .crm-fin-rest .v, #root .crm-fin-kpis .crm-fin-rest .v small { color: var(--on-accent) !important; } #root .crm-fin-kpis .crm-fin-rest .n { color: var(--on-accent) !important; opacity: .8; } #root .crm-fin-kpis .crm-fin-rest.neg { background: var(--bad-bg); border-color: var(--bad-bg); } #root .crm-fin-kpis .crm-fin-rest.neg .l, #root .crm-fin-kpis .crm-fin-rest.neg .v, #root .crm-fin-kpis .crm-fin-rest.neg .n { color: var(--bad) !important; } @media (max-width: 900px) { #root .crm-fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Финансы: список платежей */ #root .crm-fin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } #root .crm-fin-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; margin-right: auto; } #root .crm-fin-count { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); } #root .crm-fin-search { height: 38px; min-width: 240px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 14px Onest, system-ui, sans-serif; } #root .crm-fin-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } #root .crm-fin-group { display: flex; flex-direction: column; } #root .crm-fin-month { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 4px 8px; border-bottom: 1px solid var(--line); } #root .crm-fin-group:first-of-type .crm-fin-month { padding-top: 4px; } #root .crm-fin-month b { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } #root .crm-fin-month span { display: inline-flex; gap: 10px; font-size: 13px; font-weight: 600; font-family: "JetBrains Mono", monospace; white-space: nowrap; } #root .crm-fin-month em { font-style: normal; } #root .crm-fin-month em.in { color: var(--good-fg); } #root .crm-fin-month em.out { color: var(--ink); } #root .crm-fin-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line-soft, var(--line)); cursor: pointer; border-radius: 10px; transition: background .12s; } #root .crm-fin-row:hover { background: var(--bg); } #root .crm-fin-row:focus-visible { outline: none; box-shadow: var(--focus); } #root .crm-fin-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; font-weight: 700; } #root .crm-fin-row.in .crm-fin-ico { background: var(--good-bg); color: var(--good-fg); } #root .crm-fin-row.out .crm-fin-ico { background: var(--bg); color: var(--muted); } #root .crm-fin-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #root .crm-fin-t { font-size: 14.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #root .crm-fin-note { font-weight: 400; color: var(--muted); } #root .crm-fin-s { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted); min-width: 0; } #root .crm-fin-s a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } #root .crm-fin-s a:hover { color: var(--ink); text-decoration-color: currentColor; } #root .crm-fin-sum { font-size: 15px; font-weight: 700; white-space: nowrap; text-align: right; } #root .crm-fin-row.in .crm-fin-sum { color: var(--good-fg); } #root .crm-fin-row.out .crm-fin-sum { color: var(--ink); } #root .crm-fin-more { align-self: center; margin-top: 4px; } @media (max-width: 600px) { #root .crm-fin-head h2 { width: 100%; } #root .crm-fin-pills { flex: 1 1 100%; } #root .crm-fin-search { flex: 1 1 100%; min-width: 0; font-size: 16px; height: 42px; } #root .crm-fin-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 11px 2px; } #root .crm-fin-ico { width: 32px; height: 32px; font-size: 15px; } #root .crm-fin-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #root .crm-fin-sum { font-size: 14px; align-self: start; padding-top: 2px; } #root .crm-fin-month { padding-left: 2px; padding-right: 2px; } } /* Вложенные плитки внутри карточек — как в Маркетинге и Показателях: серая подложка и тонкая рамка */ #root .crm-ob-tiles > div, #root .crm-ob-tiles .crew, #root .crm-ob-tiles .diff, #root .crm-ob-tiles .diff.neg { background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 12px; } #root .crm-ob-tiles small { font-weight: 500; font-size: 12.5px; } #root .crm-ob-tiles b { font-size: 21px; font-weight: 700; } #root .crm-ob-tiles .diff { border-color: color-mix(in srgb, var(--good-fg) 55%, transparent) !important; } #root .crm-ob-tiles .diff.neg { border-color: color-mix(in srgb, var(--bad) 55%, transparent) !important; } #root .crm-ob-tiles .diff b { color: var(--good-fg) !important; } #root .crm-ob-tiles .diff.neg b { color: var(--bad) !important; } #root .doc.crm-deal-sum-row { background: var(--bg) !important; border-color: var(--line) !important; box-shadow: none !important; } #root .crm-deal-sum-row .crm-sum-meta > span { background: var(--surface); border-color: var(--line); } /* Поставки: калькулятор «Юани → рубли» — обычная карточка, как все блоки */ #root .crm-supply-header .crm-cny-calculator { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none; } #root .crm-cny-calculator h2 { color: var(--muted) !important; } #root .crm-cny-calculator label, #root .crm-cny-calculator .crm-cny-result > span, #root .crm-cny-calculator .crm-cny-formula, #root .crm-cny-calculator .crm-cny-rates summary, #root .crm-cny-calculator .crm-cny-note { color: var(--muted) !important; } #root .crm-cny-calculator .crm-cny-rates summary:hover { color: var(--ink) !important; } #root .crm-cny-calculator input { background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; } #root .crm-cny-calculator input::placeholder { color: var(--muted) !important; } #root .crm-cny-calculator .crm-cny-result { background: var(--bg) !important; border: 1px solid var(--line) !important; } #root .crm-cny-calculator .crm-cny-result output { color: var(--ink) !important; } #root .crm-cny-calculator .crm-cny-rates .btn { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* Поставки: колонка «Договор» помещается целиком */ #root #supplies th:nth-child(1), #root #supplies th:nth-child(2) { width: 128px; } #root #supplies th:nth-child(3) { width: 118px; } #root #supplies th[style*="400"] { width: 330px !important; } #root #supplies th:nth-child(5) { width: 112px; } #root #supplies th:last-child { width: 132px !important; } #root #supplies td:last-child { white-space: nowrap; } /* ===== Показатели: внутри «План и доход» и «Маркетинг» ===== */ #root .crm-kpi-hub { display: flex; flex-direction: column; gap: inherit; gap: 18px; } #root .crm-kpi-hub > header.head:not(.crm-hub-head) > div:first-child { display: none; } #root .crm-kpi-hub > header.head:not(.crm-hub-head) { margin-top: -6px; } #root .crm-kpi-hub > header.head:not(.crm-hub-head):not(:has(> :nth-child(2))) { display: none; } #root .crm-hub-seg button { min-width: 130px; } @media (max-width: 600px) { #root .crm-hub-head { flex-direction: column; align-items: stretch !important; gap: 12px; } #root .crm-hub-seg { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; } #root .crm-hub-seg button { min-width: 0; } } #root .crm-avg-check .crm-mkt-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } #root .crm-avg-check .crm-avg-main { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 16%, var(--bg)) !important; } #root a.crm-ms-entry { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 600px) { #root .crm-avg-check .crm-mkt-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; } #root .crm-avg-check .crm-avg-main { grid-column: 1 / -1; } #root .crm-avg-check .crm-mkt-tile b { font-size: 16px; } } /* ===== Сметчик: смета материалов с фото, отправка клиенту ===== */ #root .crm-est-kind { align-self: flex-start; } #root .crm-est-photo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } #root .crm-est-ph { position: relative; display: inline-block; } #root .crm-est-ph img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); } #root .crm-est-ph-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; } #root .crm-est-ph-btn { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; color: var(--ink); font: 600 12.5px Onest, system-ui, sans-serif; cursor: pointer; } #root .crm-est-ph-btn:hover { border-color: var(--accent); border-style: solid; } #root .crm-est-ph-err { color: var(--bad); font-size: 12px; } #root .crm-est-sendpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); } #root .crm-est-sendlist { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } @media (max-width: 720px) { #root .crm-est-rows tr:not(.crm-est-sec) td.wide > .crm-est-photo { margin-top: 6px; } #root .crm-est-kind { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; } } /* ===== Сметчик: два столбца «Монтаж» и «Материалы», прайс материалов ===== */ #root .crm-est-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } #root .crm-est-col { --col: var(--accent); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--col) 45%, var(--line)); background: color-mix(in srgb, var(--col) 7%, var(--surface)); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } #root .crm-est-col.material { --col: #3B82F6; } #root .crm-est-colh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 10px; border-bottom: 3px solid var(--col); } #root .crm-est-colt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #root .crm-est-colt b { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; } #root .crm-est-colt small { font-size: 12.5px; color: var(--muted); } #root .crm-est-cnt { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--col); color: #1b1d20; } #root .crm-est-col.material .crm-est-cnt { color: #fff; } #root .crm-est-col.material .crm-est-colh .btn { background: #3B82F6; border-color: #3B82F6; color: #fff; } #root .crm-est-col .crm-est-list { display: flex; flex-direction: column; gap: 8px; } #root .crm-est-col .crm-est-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; border-left: 4px solid var(--col); } #root .crm-est-col .crm-est-item:hover { border-color: var(--col); } #root .crm-est-empty { margin: 4px; font-size: 13.5px; } #root .crm-est-price.material h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #3B82F6; margin-right: 8px; vertical-align: middle; } #root .crm-est-price.work h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; } @media (max-width: 800px) { #root .crm-est-cols { grid-template-columns: 1fr; } } #root .crm-est-rowx { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #root .crm-est-rowx .crm-est-photo { margin-top: 0; } /* ===== Смета материалов: синее оформление, крупные фото ===== */ #root .crm-est-edit.crm-est-mat { border-top: 4px solid #3B82F6; } #root .crm-est-mat .crm-est-top h2 { color: #2563EB; } #root .crm-est-mat .crm-est-kind button.on { background: #3B82F6 !important; color: #fff !important; } #root .crm-est-mat .crm-est-photo .crm-est-ph img { width: 96px; height: 96px; border-radius: 12px; } #root .crm-est-mat .crm-est-photo .crm-est-ph-btn { border-color: #93C5FD; color: #2563EB; } #root .crm-est-mat .crm-est-rows tbody tr:not(.crm-est-sec) { background: color-mix(in srgb, #3B82F6 4%, transparent); } #root .crm-est-mat .crm-est-foot .crm-est-sum, #root .crm-est-mat .crm-est-sum { border-color: #93C5FD; } #root .crm-est-mat .crm-est-actions .btn:not(.ghost) { background: #3B82F6; border-color: #3B82F6; color: #fff; } #root .crm-est-mat .crm-est-pick { border-color: #93C5FD !important; } /* Смета материалов: описание позиции */ .crm-est-rows textarea.crm-est-desc{display:block;width:100%;margin-top:6px;min-height:44px;resize:vertical;font:inherit;font-size:12.5px;line-height:1.35;color:var(--muted,#62676E);padding:6px 8px;white-space:pre-wrap} .crm-est-rows textarea.crm-est-desc:focus{color:var(--text,inherit)} /* Замеры: заметная кнопка на странице объектов */ #root a.crm-ms-entry { background: color-mix(in srgb, var(--accent, #facc15) 22%, var(--surface, #fff)) !important; border: 1.5px solid var(--accent, #facc15) !important; font-weight: 700 !important; color: var(--ink, inherit) !important; } #root a.crm-ms-entry svg { color: var(--accent, #facc15); } /* Замеры: произвольная планировка */ #root .crm-ms-drawbtn { flex: 1 1 100%; height: 44px; border-radius: 12px; border: 0; background: #7C3AED; color: #fff; font: 700 14.5px Onest, system-ui, sans-serif; cursor: pointer; margin-bottom: 4px; box-shadow: 0 4px 14px rgba(124,58,237,.35); } #root .crm-ms-drawbtn:hover { background: #6D28D9; } #root .crm-ms-draw { max-width: 620px; } #root .crm-ms-draw-tip { margin: 0; font-size: 13.5px; } #root .crm-ms-draw-box { width: 100%; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; } #root .crm-ms-draw-cv { display: block; touch-action: none; cursor: crosshair; } #root .crm-ms-draw-act { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; } #root .crm-ms-draw-act .btn { height: 48px; font-size: 15px; justify-content: center; } #root .crm-ms-draw-ok { background: #7C3AED !important; color: #fff !important; border-color: #7C3AED !important; } #root .crm-ms-draw-ok:disabled { opacity: .45; } /* Прайс материалов: размер позиции (длина × ширина) */ #root .crm-est-size { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 4px; } #root .crm-est-size-h { font: 600 12px Onest, system-ui, sans-serif; color: var(--muted); } #root .crm-est-size-in { display: inline-flex; align-items: center; gap: 6px; } #root .crm-est-size-in i { font-style: normal; color: var(--muted); } #root .crm-est-price .crm-est-size-in input.crm-est-in { width: 88px !important; flex: 0 0 88px !important; min-width: 0; text-align: center !important; border: 1px solid var(--line) !important; border-radius: 9px; height: 36px; } #root .crm-est-size small { font-size: 12px; } /* Замеры: контур не замкнут — без заливки, разрыв пунктиром */ #root .crm-ms-gap line { stroke: #EF4444; stroke-width: 2.5; stroke-dasharray: 6 5; } #root .crm-ms-gap text { fill: #EF4444; font: 700 11px Onest, system-ui, sans-serif; }