:root, [data-theme="dark"] { --bg: #0f1117; --bg-soft: #161924; --card: #1c2030; --card-2: #232838; --border: #2a2f42; --text: #e8eaf0; --muted: #8a91a8; --primary: #7c5cff; --primary-2: #6244ff; --accent: #ff7ab6; --good: #34d399; --bad: #f87171; --warn: #fbbf24; --chart-grid: #2a2f42; } /* Светлая тема — переопределяет переменные через data-theme на */ [data-theme="light"] { --bg: #f6f7fb; --bg-soft: #eef0f6; --card: #ffffff; --card-2: #f3f4f9; --border: #e1e4ee; --text: #1c2030; --muted: #6b7180; --primary: #6244ff; --primary-2:#4d33d9; --accent: #d9407c; --good: #16a34a; --bad: #dc2626; --warn: #d97706; --chart-grid: #e1e4ee; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Левая полоса под сайдбаром тянется на всю высоту документа за счёт градиента на html — sidebar сверху sticky, а под ним всегда подложка нужного цвета. Линия в 1px на 240px — это «продолжение» border-right у sidebar. Цвета берутся из CSS-переменных, поэтому светлая/тёмная тема работает автоматом. */ html { background: linear-gradient( to right, var(--bg-soft) 0, var(--bg-soft) 240px, var(--border) 240px, var(--border) 241px, var(--bg) 241px, var(--bg) 100% ); } body { min-height: 100vh; background: transparent; /* пропускаем градиент с html */ } /* SIDEBAR — position: fixed надёжнее sticky на flex-layout. Жёстко прижата к левому краю окна, всегда видна при любом скролле. */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--bg-soft); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 14px; z-index: 10; /* min-height нужно для flex-контейнера со скроллируемым потомком, иначе nav пытается раздуть sidebar и нижний блок уезжает за экран */ min-height: 0; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 22px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .brand-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-logo svg, .brand-logo img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .brand-name { font-weight: 700; font-size: 15px; } .brand-sub { font-size: 11px; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; /* Когда пунктов меню становится много (или окно низкое) — nav скроллится внутри сайдбара, чтобы нижний блок (user-chip, тема) всегда был виден. Никаких градиентов-затуханий — они путали с «обрезанным» меню. */ overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .nav::-webkit-scrollbar { width: 4px; } .nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .nav::-webkit-scrollbar-thumb:hover { background: var(--primary); } .nav-item { background: transparent; border: none; color: var(--muted); text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 10px; transition: all .15s; font-family: inherit; } .nav-item:hover { background: var(--card); color: var(--text); } .nav-item.active { background: var(--card-2); color: var(--text); box-shadow: inset 2px 0 0 var(--primary); } /* Badge с количеством новых элементов в nav-item */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; background: var(--bad); color: white; border-radius: 9px; font-size: 10px; font-weight: 700; margin-left: auto; flex-shrink: 0; line-height: 1; } .side-footer { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; } .period-picker label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .period-picker select { width: 100%; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-family: inherit; font-size: 13px; } /* USER CHIP (sidebar bottom) */ .user-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; } .user-chip:hover { background: var(--card-2); border-color: var(--primary); } .user-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .user-meta { flex: 1; min-width: 0; } .user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--muted); } .user-gear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; transition: background .15s, color .15s; } .user-gear:hover { background: var(--bg-soft); color: var(--text); } .side-foot-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 4px; } .theme-toggle { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 14px; line-height: 1; transition: background .15s, border-color .15s; color: var(--text); } .theme-toggle:hover { background: var(--card-2); border-color: var(--primary); } /* По умолчанию (до того как JS поставит data-theme) — прячем оба, JS моментально проставит атрибут и нужная иконка появится. Так избегаем «вспышки» обеих иконок. */ .theme-icon-dark, .theme-icon-light { display: none; } [data-theme="dark"] .theme-icon-dark { display: inline; } [data-theme="light"] .theme-icon-light { display: inline; } /* AUTH OVERLAY (login / bootstrap) */ .auth-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 30% 20%, #1a1f33 0%, #0a0c14 70%); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn .2s ease; } .auth-overlay[hidden] { display: none; } .auth-card { width: min(420px, 92vw); background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 14px; } .auth-logo { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; } .auth-logo svg, .auth-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .auth-title { text-align: center; font-size: 22px; font-weight: 700; margin: 0; } .auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin: -6px 0 8px; } .auth-body { display: flex; flex-direction: column; gap: 10px; } .auth-body .form-row { margin: 0; } .auth-error { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); color: #fca5a5; padding: 10px 12px; border-radius: 8px; font-size: 13px; } .auth-submit { margin-top: 4px; } .auth-hint { text-align: center; font-size: 11px; line-height: 1.5; } /* SETTINGS MODAL — tabs + user list + sections grid */ .settings-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; padding-bottom: 2px; } .settings-tab { background: none; border: none; color: var(--muted); padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .settings-tab:hover { color: var(--text); } .settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .settings-pane { display: flex; flex-direction: column; gap: 12px; } .settings-pane[hidden] { display: none; } .user-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; } .user-row-meta { flex: 1; min-width: 0; } .user-row-name { font-size: 14px; font-weight: 600; } .user-row-sub { font-size: 11px; margin-top: 2px; } .user-row-actions { display: flex; gap: 4px; } .user-row-actions button { padding: 6px 10px; font-size: 14px; } .user-row-actions button[disabled] { opacity: .35; cursor: not-allowed; } .sections-grid { display: grid; /* Жёстко 2 колонки — предсказуемо, без adaptive surprises */ grid-template-columns: 1fr 1fr; gap: 10px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } /* AUDIT LOG: цветные ярлыки типа действия */ .audit-action { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--card-2); color: var(--muted); white-space: nowrap; } .audit-action-create { background: rgba(52,211,153,.15); color: #34d399; } .audit-action-update { background: rgba(96,165,250,.15); color: #60a5fa; } .audit-action-delete { background: rgba(248,113,113,.15); color: #f87171; } .audit-action-restore { background: rgba(124,92,255,.15); color: #a78bfa; } .audit-action-status { background: rgba(251,191,36,.15); color: #fbbf24; } .audit-action-login { background: rgba(34,211,238,.15); color: #22d3ee; } .audit-action-logout { background: rgba(138,145,168,.15); color: #8a91a8; } .audit-action-permissions { background: rgba(167,139,250,.15); color: #a78bfa; } .audit-action-sync { background: rgba(96,165,250,.15); color: #60a5fa; } .audit-action-import, .audit-action-export { background: rgba(255,122,182,.15); color: #ff7ab6; } /* Кликабельные контакты в таблице клиентов */ .contact-link { display: inline-block; color: var(--text); text-decoration: none; font-size: 12px; padding: 2px 0; transition: color .12s; white-space: nowrap; } .contact-link:hover { color: var(--primary); text-decoration: underline; } .contact-tel:hover { color: var(--good); } .contact-wa:hover { color: #25d366; } .contact-tg:hover { color: #229ed9; } .contact-ig:hover { color: #e4405f; } .contact-em:hover { color: var(--accent); } /* Заметки в карточке клиента (хронологическая лента) */ .notes-timeline { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; max-height: 320px; overflow-y: auto; } .note-item { background: var(--bg-soft); border-left: 3px solid var(--primary); padding: 10px 12px; border-radius: 0 8px 8px 0; } .note-meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; } .note-meta b { color: var(--text); font-weight: 600; } .note-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; } .note-delete { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 12px; } .note-delete:hover { color: var(--bad); } .note-input-row { display: flex; gap: 8px; margin-top: 12px; } .note-input-row textarea { flex: 1; min-height: 60px; resize: vertical; } /* Виджет напоминаний (ДР клиентов + праздники) */ .reminders-list { display: flex; flex-direction: column; gap: 8px; } .reminder-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--bg-soft); border-radius: 8px; border-left: 3px solid var(--border); } .reminder-item.reminder-birthday { border-left-color: var(--accent); } .reminder-item.reminder-holiday { border-left-color: var(--primary); } .reminder-item.reminder-urgent { background: rgba(251,191,36,.08); border-left-color: var(--warn); } .reminder-days { min-width: 70px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .reminder-item.reminder-urgent .reminder-days { color: var(--warn); } .reminder-body { flex: 1; min-width: 0; } .reminder-title { font-size: 14px; font-weight: 600; } .reminder-sub { font-size: 12px; margin-top: 2px; } /* Чекбокс-строка в формах. Используем максимально специфичный селектор + жёстко фиксированный размер чекбокса (16px), чтобы: 1) перебить .form-row label { display: block; font-size: 12px; ... } 2) перебить .form-row input { width: 100% } — иначе чекбокс «занимает» всю колонку и span с текстом отъезжает в центр ячейки. Через flex: 0 0 16px фиксируем basis, чтобы flex-алгоритм не мог его раздуть. */ .sections-grid > label.section-toggle, .form-row .section-toggle, .section-toggle { display: flex !important; align-items: center; justify-content: flex-start; gap: 8px; font-size: 13px; color: var(--text); margin: 0 !important; cursor: pointer; width: auto; text-transform: none; } .sections-grid > label.section-toggle > input, .section-toggle > input[type=checkbox] { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; margin: 0 !important; cursor: pointer; } .section-toggle > span { flex: 0 1 auto; min-width: 0; } .section-toggle input:disabled + span { color: var(--muted); } /* Аналогично для checkbox-row (sound notification и подобные) */ .checkbox-row input[type=checkbox], .form-row .checkbox-row input[type=checkbox] { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; margin: 0 !important; } /* Унифицированная компактная checkbox-строка для опций в профиле/настройках */ .checkbox-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .checkbox-row > label { display: inline-flex !important; align-items: center; gap: 8px; font-size: 13px !important; color: var(--text) !important; margin: 0 !important; cursor: pointer; text-transform: none !important; } .checkbox-row > label input { flex-shrink: 0; } /* MAIN — отступаем слева на ширину фиксированного сайдбара */ .main { margin-left: 240px; padding: 28px 32px; min-width: 0; } .view { display: none; } .view.active { display: block; animation: fadeIn .25s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .view-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .view-header h1 { font-size: 24px; font-weight: 700; } .view-header .muted { font-size: 13px; margin-top: 2px; } .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* BUTTONS */ .btn-primary, .btn-ghost, .btn-danger { font-family: inherit; font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: all .15s; } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-2); } .btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--card-2); } .btn-danger { background: transparent; color: var(--bad); border-color: var(--border); } .btn-danger:hover { background: rgba(248,113,113,.1); } /* INPUTS */ input[type=text], input[type=search], input[type=number], input[type=date], input[type=email], input[type=tel], input[type=password], select, textarea { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 9px 12px; border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; transition: border-color .15s; min-width: 0; } input:focus, select:focus, textarea:focus { border-color: var(--primary); } input[type=search] { min-width: 240px; } textarea { resize: vertical; min-height: 70px; } /* KPI */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; } .kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .kpi-value { font-size: 24px; font-weight: 700; } .kpi-delta { font-size: 12px; margin-top: 4px; color: var(--muted); } .kpi-delta.up { color: var(--good); } .kpi-delta.down { color: var(--bad); } /* KPI как фильтр: кликабельные плашки на доске сборки. Клик переключает значение #assemblyStatusFilter; повторный клик снимает. .is-active — текущий выбранный статус. */ .kpi-clickable { cursor: pointer; transition: border-color .12s, transform .08s, background .12s; user-select: none; } .kpi-clickable:hover { border-color: var(--primary); } .kpi-clickable:active { transform: scale(0.99); } .kpi-clickable.is-active { border-color: var(--primary); background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(124,92,255,0.04)); box-shadow: 0 0 0 2px rgba(124,92,255,0.18) inset; } .kpi-clickable.is-active .kpi-label { color: var(--primary); } .kpi-clickable.is-active .kpi-value { color: var(--primary); } /* CARDS */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; } .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .card-head h3 { font-size: 14px; font-weight: 600; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } @media (max-width: 1100px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } } canvas { max-height: 280px; } /* TABLES */ .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table thead th { text-align: left; padding: 10px 12px; font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); } .data-table tbody td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table tbody tr:hover { background: var(--card-2); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table.compact td, .data-table.compact th { padding: 8px 10px; } .row-actions { display: flex; gap: 6px; justify-content: flex-end; } .row-actions button { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; } .row-actions button:hover { color: var(--text); } .row-actions .danger:hover { color: var(--bad); border-color: var(--bad); } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; } .badge-paid { background: rgba(52,211,153,.15); color: var(--good); } .badge-pending { background: rgba(251,191,36,.15); color: var(--warn); } .badge-cancelled { background: rgba(248,113,113,.15); color: var(--bad); } .badge-returned { background: rgba(248,113,113,.18); color: var(--bad); border: 1px solid rgba(248,113,113,.3); } /* Строка возврата в таблице продаж — лёгкий красный фон и красная цифра суммы */ .data-table tr.is-return { background: rgba(248,113,113,.04); } .data-table tr.is-return td { border-top: 1px dashed rgba(248,113,113,.18); } .sales-total-return { color: var(--bad); } /* ============================================================ ВОЗВРАТЫ — мини-доска обработки на странице «Заказы для сборки» ============================================================ */ .returns-board-section { margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--border); } .returns-board-head { margin-bottom: 14px; } .returns-board-head h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; } .returns-board-head p { font-size: 13px; margin: 0; } .returns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 14px; } .ret-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--bad); } .ret-card-new { border-left-color: var(--warn); } .ret-card-checking { border-left-color: var(--primary); } .ret-card-accepted { border-left-color: var(--good); opacity: .8; } .ret-card-rejected { border-left-color: var(--muted); opacity: .65; } .ret-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; } .ret-card-customer { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .ret-card-total { color: var(--bad); } .ret-card-items { background: var(--bg-soft); border-radius: 6px; padding: 8px 10px; font-size: 12px; max-height: 120px; overflow-y: auto; } .ret-item { display: flex; justify-content: space-between; padding: 2px 0; } .ret-item-name { flex: 1; } .ret-item-qty { color: var(--muted); margin-left: 8px; } .ret-card-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dotted var(--border); } .ret-stage-select { flex: 1; background: var(--card-2); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 6px; font-size: 12px; } /* ============================================================ WISHLIST в карточке клиента + дашборд-виджет ============================================================ */ .wishlist-input-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .wishlist-input-row input { flex: 1; min-width: 100px; background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 13px; } .wl-item { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 0 6px 6px 0; padding: 8px 10px; margin-bottom: 6px; } .wl-item-done { border-left-color: var(--good); opacity: .55; } .wl-item-body { flex: 1; min-width: 0; } .wl-item-product { font-size: 13px; font-weight: 600; } .wl-item-note { font-size: 12px; margin-top: 2px; } .wl-item-meta { font-size: 11px; margin-top: 2px; } .wl-item-actions { display: flex; gap: 4px; flex-shrink: 0; } .wl-item-actions button { padding: 4px 9px; font-size: 13px; } /* Дашборд-виджет wishlist */ .wishlist-widget { display: flex; flex-direction: column; gap: 8px; } .wl-widget-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg-soft); border-radius: 6px; cursor: pointer; transition: background .15s; } .wl-widget-row:hover { background: var(--card-2); } .wl-widget-product { flex: 1; font-size: 13px; } .wl-widget-client { font-size: 11px; color: var(--muted); } /* ============================================================ КОГОРТНЫЙ АНАЛИЗ — heatmap-таблица в разделе Аналитика ============================================================ */ .cohort-wrap { padding: 4px 0; } .cohort-scroll { overflow-x: auto; } .cohort-table { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 12px; } .cohort-table th { background: var(--bg-soft); color: var(--muted); font-weight: 600; padding: 6px 8px; text-align: center; border-radius: 4px; } .cohort-table th.cohort-label, .cohort-table td.cohort-label { text-align: left; min-width: 100px; padding: 6px 10px; } .cohort-cell { text-align: center; padding: 8px 6px; min-width: 56px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; border-radius: 4px; cursor: default; } .cohort-empty { background: transparent; color: var(--muted); } .cohort-col { font-family: monospace; } /* Заголовки разделов на дашборде */ .dash-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 24px 0 10px; } /* Ячейка таблицы продаж с многострочным списком позиций — каждая позиция в отдельной
с фиксированной высотой. За счёт одинакового line-height и padding столбцы «Товар» и «Размер» строго выравниваются построчно. */ .sales-items-cell { vertical-align: top; white-space: normal; max-width: 280px; } .sales-items-cell > div { line-height: 1.5; padding: 2px 0; font-size: 13px; } .sales-items-cell > div + div { border-top: 1px dotted var(--border); margin-top: 2px; padding-top: 4px; } .badge-returned { background: rgba(138,145,168,.15); color: var(--muted); } .badge-channel { background: rgba(124,92,255,.15); color: var(--primary); } .tag { display: inline-block; background: var(--card-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 4px; font-size: 11px; margin-right: 4px; color: var(--muted); } .empty-state { text-align: center; padding: 40px 20px; color: var(--muted); } /* .product-thumb стили удалены вместе с разделом Товары. */ .muted-inline { color: var(--muted); font-size: 11px; } /* Топ-5 товаров по выручке — кастомный HTML-чарт */ .top-products { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; } .tp-row { display: grid; grid-template-columns: 26px 1fr 2fr; align-items: center; gap: 10px; } .tp-rank { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--bg-soft); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; } .tp-row:nth-child(1) .tp-rank { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #1a1a1a; } .tp-row:nth-child(2) .tp-rank { background: linear-gradient(135deg, #c8c8c8, #999); color: #1a1a1a; } .tp-row:nth-child(3) .tp-rank { background: linear-gradient(135deg, #cd7f32, #a05a23); color: white; } .tp-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-bar-wrap { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tp-bar { height: 22px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 6px; position: relative; display: flex; align-items: center; padding: 0 10px; min-width: 60px; transition: width .3s ease; } .tp-bar-revenue { font-size: 12px; font-weight: 700; color: white; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .tp-bar-qty { font-size: 11px; color: var(--muted); padding-left: 2px; } /* ============================================================ ПРОИЗВОДСТВО: stepper + сетка карточек + файлы ============================================================ */ /* Stepper — горизонтальная шкала всех этапов воронки */ .prod-stepper { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 18px; scrollbar-width: thin; } .prod-stepper::-webkit-scrollbar { height: 6px; } .prod-stepper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .prod-step { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; text-align: center; transition: background .15s, border-color .15s, transform .12s; color: var(--text); flex-shrink: 0; } .prod-step:hover { border-color: var(--primary); transform: translateY(-1px); } .prod-step.is-active { background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(255,122,182,.12)); border-color: var(--primary); } .prod-step.is-empty .prod-step-count { color: var(--muted); } .prod-step-idx { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .5px; } .prod-step-label { font-size: 12px; font-weight: 600; white-space: nowrap; } .prod-step-count { font-size: 18px; font-weight: 700; color: var(--primary); line-height: 1; margin-top: 2px; } .prod-step-arrow { align-self: center; color: var(--muted); font-size: 18px; user-select: none; flex-shrink: 0; } /* Сетка карточек изделий */ .prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .prod-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .12s; display: flex; flex-direction: column; } .prod-card:hover { border-color: var(--primary); transform: translateY(-2px); } .prod-card-img { width: 100%; aspect-ratio: 4 / 3; background: var(--bg-soft) center/cover no-repeat; } .prod-card-img-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 36px; } .prod-card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; } .prod-card-title { font-size: 14px; font-weight: 600; } .prod-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--muted); } .prod-card-meta span { white-space: nowrap; } .prod-card-progress { height: 4px; background: var(--bg-soft); border-radius: 2px; overflow: hidden; } .prod-card-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .25s ease; } .prod-card-stage-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; } /* Футер карточки изделия — последнее изменение + ссылка на полную историю */ .prod-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding-top: 6px; margin-top: 2px; border-top: 1px dashed var(--border); gap: 8px; flex-wrap: wrap; } .prod-card-history-link { color: var(--accent); text-decoration: none; font-weight: 500; } .prod-card-history-link:hover { text-decoration: underline; } .prod-card-stage-label { font-size: 11px; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prod-stage-select { font-size: 11px; padding: 4px 6px; background: var(--card-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; flex-shrink: 0; } .prod-card-stage-time { font-size: 11px; color: var(--muted); background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; white-space: nowrap; } .prod-card-stage-time.is-stuck { background: rgba(248,113,113,.15); color: var(--bad); } .prod-step-avg { font-size: 10px; color: var(--muted); margin-top: 2px; white-space: nowrap; } .prod-step.is-active .prod-step-avg { color: var(--text); } /* Хронология этапов в модалке изделия */ .prod-timeline { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; } .prod-tl-row { display: grid; grid-template-columns: 130px 1fr 70px 80px; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0; } .prod-tl-row.is-current { background: rgba(124,92,255,.08); border-radius: 4px; padding: 4px 6px; } .prod-tl-stage { font-weight: 600; } .prod-tl-bar { height: 6px; background: var(--card-2); border-radius: 3px; overflow: hidden; } .prod-tl-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); } .prod-tl-time { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } .prod-tl-time.is-stuck { color: var(--bad); font-weight: 600; } .prod-tl-by { font-size: 11px; } .prod-tl-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; } /* Модалка изделия: блок файлов */ .prod-files-box { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .prod-file { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px; width: 130px; position: relative; display: flex; flex-direction: column; gap: 6px; } .prod-file img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; display: block; } .prod-file-doc { display: flex; align-items: center; justify-content: center; height: 90px; background: var(--card-2); border-radius: 4px; font-size: 36px; text-decoration: none; } .prod-file-meta { display: flex; flex-direction: column; gap: 2px; } .prod-file-name { font-size: 11px; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prod-file-name:hover { color: var(--primary); } .prod-file-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(0,0,0,.5); color: white; border: none; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; } .prod-file-del:hover { background: var(--bad); } .prod-file-upload-label { display: inline-flex; cursor: pointer; } /* Kanban-доска задач */ .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 60vh; } @media (max-width: 1100px) { .kanban-board { grid-template-columns: 1fr; } } /* Для воронки блогеров — 5 колонок (на экранах поуже автоматически сужаются) */ #bloggersKanban { grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow-x: auto; } @media (max-width: 700px) { #bloggersKanban { grid-template-columns: 1fr; overflow-x: visible; } } /* Notebook (тетрадка): дневник задачи — каждая запись на отдельной «строчке», слева дата, справа текст. Горизонтальные линии как в школьной тетради. */ .notebook { background: var(--card-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; margin-top: 6px; font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', monospace; } .notebook-line { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 12px; border-bottom: 1px dashed rgba(140, 145, 168, 0.35); font-size: 13px; line-height: 1.5; } .notebook-line:last-child { border-bottom: 0; } .notebook-date { color: var(--accent); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .notebook-text { color: var(--text); word-break: break-word; white-space: pre-wrap; } .notebook-by { color: var(--muted); font-size: 10.5px; font-style: italic; white-space: nowrap; } /* «Висящие» (pending) записи — добавлены, но ещё не сохранены */ .notebook-pending { background: rgba(124, 92, 255, 0.06); } .notebook-pending .notebook-text { color: var(--primary); } .notebook-pending .notebook-by { color: var(--primary); font-style: italic; } /* Строка ввода новой записи */ .notebook-new { background: var(--card); border-top: 2px solid var(--border) !important; border-bottom: 0 !important; padding: 8px 12px; } .notebook-date-input { font-family: inherit; font-size: 12px; padding: 4px 6px; background: var(--card-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-variant-numeric: tabular-nums; } .notebook-text-input { font-family: inherit; font-size: 13px; padding: 4px 8px; background: var(--card-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); width: 100%; outline: none; } .notebook-text-input:focus { border-color: var(--primary); } /* СДЭК-возвраты: kanban из 4 колонок + карточки */ #cdekReturnsKanban { grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow-x: auto; } @media (max-width: 1200px) { #cdekReturnsKanban { grid-template-columns: repeat(4, minmax(240px, 1fr)); } } @media (max-width: 700px) { #cdekReturnsKanban { grid-template-columns: 1fr; overflow-x: visible; } } .cdek-card { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, transform .12s; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .cdek-card:hover { border-color: var(--primary); transform: translateY(-1px); } .cdek-card[draggable="true"] { cursor: grab; } .cdek-card[draggable="true"]:active { cursor: grabbing; } .cdek-card.is-dragging { opacity: 0.45; } .cdek-card-locked { opacity: 0.72; border-color: var(--warn) !important; background: rgba(251, 191, 36, 0.04); } .cdek-card-locked:hover { border-color: var(--warn) !important; transform: none; } .cdek-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .cdek-card-title { font-weight: 600; font-size: 13px; line-height: 1.3; flex: 1; } .cdek-card-customer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 8px; } .cdek-card-total { color: var(--bad); font-weight: 600; font-variant-numeric: tabular-nums; } .cdek-card-items { font-size: 12px; color: var(--muted); line-height: 1.4; background: var(--card); padding: 5px 8px; border-radius: 4px; } .cdek-card-tracking { font-size: 12px; font-family: ui-monospace, monospace; background: rgba(255, 122, 182, 0.10); border: 1px solid rgba(255, 122, 182, 0.30); padding: 4px 8px; border-radius: 4px; } .cdek-card-address { font-size: 11px; color: var(--muted); line-height: 1.3; background: var(--card); padding: 4px 8px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; } .cdek-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding-top: 4px; border-top: 1px dashed var(--border); gap: 8px; flex-wrap: wrap; } /* Превью последней заметки на карточке */ .cdek-card-lastnote { font-size: 11px; color: var(--muted); font-style: italic; background: var(--card); padding: 4px 8px; border-radius: 4px; line-height: 1.4; border-left: 2px solid var(--accent); } /* Индикатор возврата денег (только когда статус «Принято») */ .cdek-money-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; align-self: flex-start; border: 1px solid transparent; } .cdek-money-badge.is-pending { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); animation: cdek-money-pulse 2.2s ease-in-out infinite; } .cdek-money-badge.is-refunded { color: var(--good); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.4); } @keyframes cdek-money-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } 50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); } } /* Подсветка всей карточки в зависимости от состояния возврата денег */ .cdek-card.cdek-card-money-pending { border-color: rgba(251, 191, 36, 0.5); } .cdek-card.cdek-card-money-done { border-color: rgba(52, 211, 153, 0.5); } /* Карточка отправки блогеру — компактная, основанная на task-card */ .blogger-card { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, transform .12s; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .blogger-card:hover { border-color: var(--primary); transform: translateY(-1px); } .blogger-card[draggable="true"] { cursor: grab; } .blogger-card[draggable="true"]:active { cursor: grabbing; } .blogger-card.is-dragging { opacity: 0.45; } .blogger-card-locked { opacity: 0.72; border-color: var(--warn) !important; background: rgba(251, 191, 36, 0.04); } .blogger-card-locked:hover { border-color: var(--warn) !important; transform: none; } .blogger-card-overdue { border-color: var(--bad) !important; background: rgba(248, 113, 113, 0.06); } /* «Отправлено, ждём возврата» — карточка жёлтая до момента, когда её перенесли в «Вернули». Если 10 дней истекли — выше срабатывает overdue. */ .blogger-card-waiting-return { border-color: rgba(251, 191, 36, 0.55) !important; background: rgba(251, 191, 36, 0.05); } .blogger-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .blogger-card-title { font-weight: 600; font-size: 13px; line-height: 1.3; flex: 1; } .blogger-card-meta { font-size: 12px; color: var(--muted); } .blogger-card-items { font-size: 12px; background: var(--card); padding: 6px 8px; border-radius: 4px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .blogger-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; gap: 8px; flex-wrap: wrap; } /* Маркер «с возвратом» — три состояния: pending (ещё не отправлено), обычный (отправлено, ждём), is-overdue (просрочено). */ .blogger-return-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(255, 122, 182, 0.10); border: 1px solid rgba(255, 122, 182, 0.30); padding: 3px 8px; border-radius: 999px; align-self: flex-start; } .blogger-return-badge.is-pending { color: var(--muted); background: var(--card); border-color: var(--border); } .blogger-return-badge.is-waiting { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); } .blogger-return-badge.is-done { color: var(--good); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.45); } .blogger-return-badge.is-overdue { color: var(--bad); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.5); animation: blogger-overdue-pulse 2s ease-in-out infinite; } @keyframes blogger-overdue-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } 50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15); } } .kanban-col { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 100px; } .kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .kanban-col-title { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text); } .kanban-col-count { background: var(--card-2); color: var(--muted); padding: 2px 9px; border-radius: 999px; font-size: 11px; } .kanban-col[data-col-status="in_progress"] .kanban-col-title { color: var(--primary); } .kanban-col[data-col-status="done"] .kanban-col-title { color: var(--good); } .kanban-col-body { display: flex; flex-direction: column; gap: 8px; } .task-card { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color .12s, transform .12s; display: flex; flex-direction: column; gap: 6px; } .task-card:hover { border-color: var(--primary); transform: translateY(-1px); } /* Drag & drop: курсор «перетащить», прозрачность во время перетаскивания, подсветка колонки-цели куда сейчас может произойти drop. */ .task-card[draggable="true"] { cursor: grab; } .task-card[draggable="true"]:active { cursor: grabbing; } .task-card.is-dragging { opacity: 0.45; } .kanban-col.is-drop-target .kanban-col-body { background: rgba(124, 92, 255, 0.10); outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 8px; } .task-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .task-card-title { font-weight: 600; font-size: 13px; line-height: 1.3; flex: 1; } .task-card-desc { font-size: 12px; color: var(--muted); line-height: 1.4; } .task-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; gap: 8px; flex-wrap: wrap; } .task-assignee { color: var(--text); } .task-deadline { color: var(--muted); } .task-deadline.task-overdue { color: var(--bad); font-weight: 600; } .task-deadline.task-today { color: var(--warn); font-weight: 600; } .task-prio { font-size: 11px; } .task-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); } .task-card-foot select { padding: 4px 8px; font-size: 11px; min-width: 90px; } .task-card-foot .muted-inline { font-size: 10px; } /* Live-индикатор бесшовного обновления */ .live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(52, 211, 153, 0.1); color: var(--good); border: 1px solid rgba(52, 211, 153, 0.3); border-radius: 6px; font-size: 11px; font-weight: 500; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-badge.live-error { background: rgba(248, 113, 113, 0.1); color: var(--bad); border-color: rgba(248, 113, 113, 0.3); } .live-badge.live-pending { background: rgba(251, 191, 36, 0.1); color: var(--warn); border-color: rgba(251, 191, 36, 0.3); } .live-dot { width: 8px; height: 8px; background: var(--good); border-radius: 50%; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); animation: live-pulse 2s infinite; } .live-badge.live-error .live-dot { background: var(--bad); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); animation: live-pulse-bad 2s infinite; } .live-badge.live-pending .live-dot { background: var(--warn); box-shadow: none; animation: none; } @keyframes live-pulse-bad { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } /* Assembly orders — карточки заказов для сборки */ .assembly-grid { display: grid; /* Компактные карточки: ~4 в ряд на широких экранах (по четверти ширины) */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .ao-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .ao-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; } /* Единый стиль заголовка карточки во ВСЕХ разделах (сборка, блогеры, СДЭК, задачи) */ .ao-num, .blogger-card-title, .cdek-card-title, .task-card-title { font-weight: 700; font-size: 14px; line-height: 1.3; } .ao-date { color: var(--muted); font-size: 11px; margin-top: 2px; } .ao-status select { padding: 4px 8px; font-size: 12px; border-radius: 6px; } .ao-customer { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .ao-customer-name { font-weight: 600; font-size: 13px; } .ao-customer-contact { color: var(--muted); font-size: 11px; display: flex; gap: 8px; flex-wrap: wrap; } .ao-section { display: flex; flex-direction: column; gap: 4px; } .ao-section-title { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .ao-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ao-row label { font-size: 11px; color: var(--muted); } .ao-row select, .ao-row input { flex: 1; padding: 6px 9px; font-size: 12px; } .ao-address { font-size: 12px; color: var(--text); background: var(--card-2); padding: 8px 10px; border-radius: 6px; line-height: 1.4; } .ao-taken-by { font-size: 10px; color: var(--muted); margin-top: 3px; text-align: right; line-height: 1.4; } .ao-taken-by b { color: var(--accent); font-weight: 600; } /* Полная история смены статусов — таймлайн в модалке */ .history-timeline { display: flex; flex-direction: column; gap: 10px; } .history-item { background: var(--card-2); border-left: 3px solid var(--border); padding: 10px 14px; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; } .history-item.is-current { border-left-color: var(--accent); background: var(--card); } .history-time { font-size: 11px; color: var(--muted); } .history-change { font-size: 13px; } .history-change b { color: var(--text); font-weight: 600; } .history-by { font-size: 12px; color: var(--muted); } .history-by b { color: var(--accent); font-weight: 500; } .ao-input { width: 100%; padding: 7px 10px; font-size: 12px; background: var(--card-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-family: inherit; resize: vertical; min-height: 50px; outline: none; line-height: 1.4; box-sizing: border-box; } .ao-input:focus { border-color: var(--primary); } .ao-cost-input { width: 100px; padding: 4px 8px; font-size: 13px; background: var(--card-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); text-align: right; font-family: inherit; font-variant-numeric: tabular-nums; outline: none; } .ao-cost-input:focus { border-color: var(--primary); } /* Убираем кнопки-стрелки у number input */ .ao-cost-input::-webkit-outer-spin-button, .ao-cost-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ao-cost-input { -moz-appearance: textfield; } .ao-items { border-top: 1px solid var(--border); padding-top: 6px; } .ao-item { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; padding: 2px 0; font-size: 12px; align-items: center; } .ao-item-qty { color: var(--muted); font-size: 11px; } .ao-item-price { font-variant-numeric: tabular-nums; font-weight: 500; } .ao-totals { border-top: 1px dashed var(--border); padding-top: 6px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12px; } .ao-totals .total-label { color: var(--muted); } .ao-totals .grand { font-weight: 700; font-size: 13px; } .ao-tracking-row { background: rgba(255, 122, 182, 0.08); border: 1px solid rgba(255, 122, 182, 0.3); border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; } .ao-tracking-row label { font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; } .ao-tracking-row input { flex: 1; background: transparent; border: none; color: var(--text); font-size: 13px; font-family: ui-monospace, monospace; outline: none; } /* ============================================================ Lock + Modal Edit pattern (Вариант А) Карточка теперь read-only. Клик → модалка с локом. Если другой пользователь редактирует → бейдж + visual hint. ============================================================ */ .ao-card { cursor: pointer; transition: border-color .15s, transform .1s; } .ao-card:hover { border-color: var(--primary); } .ao-card:active { transform: scale(0.998); } /* Когда лок взят другим — карточку нельзя открывать */ .ao-card-locked { cursor: not-allowed; opacity: 0.72; border-color: var(--warn); background: rgba(251, 191, 36, 0.04); } .ao-card-locked:hover { border-color: var(--warn); } /* Бейдж "редактирует X" в шапке карточки */ .ao-lock-badge { font-size: 11px; background: rgba(251, 191, 36, 0.15); color: var(--warn); padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(251, 191, 36, 0.4); white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } /* Read-only поля на карточке (там где раньше были ) */ .ao-display-field { font-size: 12px; color: var(--text); padding: 2px 0; } .ao-display-field .muted-inline { color: var(--muted); font-style: italic; } .ao-display-field-multi { font-size: 11px; color: var(--text); background: var(--card-2); padding: 5px 8px; border-radius: 4px; line-height: 1.3; white-space: pre-wrap; word-break: break-word; } .ao-tracking-display { font-size: 11px; background: rgba(255, 122, 182, 0.08); border: 1px solid rgba(255, 122, 182, 0.3); border-radius: 4px; padding: 4px 8px; font-family: ui-monospace, monospace; } .ao-tracking-display b { color: var(--accent); } /* "Клик чтобы редактировать" внизу карточки */ .ao-edit-hint { font-size: 10px; text-align: right; margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--border); opacity: 0.6; transition: opacity .15s; } .ao-card:hover .ao-edit-hint { opacity: 1; color: var(--primary); } .ao-card-locked .ao-edit-hint { display: none; } /* Баннер-предупреждение в модалке когда лок у другого */ .lock-warn { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); color: var(--warn); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; font-weight: 500; } .lock-warn::before { content: "⚠️"; font-size: 16px; } /* Универсальный бейдж «редактирует X» для строк таблицы, task/prod карточек. В отличие от .ao-lock-badge (большой жёлтый pill для шапки заказа сборки) — компактнее, чтобы влезать внутрь маленьких карточек/строк. */ .row-lock-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--warn); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); padding: 2px 7px; border-radius: 999px; margin-top: 4px; white-space: nowrap; vertical-align: middle; } /* Карточка задачи / производства / строка клиента когда занято другим юзером */ .task-card-locked, .prod-card-locked { opacity: 0.72; border-color: var(--warn) !important; background: rgba(251, 191, 36, 0.04); cursor: pointer; /* всё равно можно открыть в read-only */ } .task-card-locked:hover, .prod-card-locked:hover { border-color: var(--warn) !important; transform: none; } .row-locked td { background: rgba(251, 191, 36, 0.04); } .row-locked td:first-child { border-left: 3px solid var(--warn); } /* Period bar — фильтр периода на дашборде */ .period-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 20px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; } .period-chip { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 7px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: all .12s; } .period-chip:hover { color: var(--text); background: var(--card-2); } .period-chip.active { background: var(--primary); color: white; border-color: var(--primary); } .period-custom { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--border); } .period-custom input[type=date] { padding: 5px 10px; font-size: 12px; } .stock-empty { color: var(--bad); font-weight: 600; } .stock-low { color: var(--warn); font-weight: 600; } /* MODAL */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal-backdrop.open { display: flex; } .modal { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; } .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-head h3 { font-size: 16px; font-weight: 600; } .modal-close { background: none; border: none; color: var(--muted); font-size: 24px; cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--text); } .modal-body { padding: 20px 22px; overflow-y: auto; } .modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; } .form-row input, .form-row select, .form-row textarea { width: 100%; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* IMPORT */ .import-row { display: flex; align-items: flex-end; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); } .import-row:last-child { border-bottom: none; } .import-row > div { flex: 1; } .import-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .import-row input[type=file] { color: var(--muted); font-size: 12px; } .button-row { display: flex; gap: 8px; flex-wrap: wrap; } hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; } details { padding: 10px 0; border-bottom: 1px solid var(--border); } details:last-child { border-bottom: none; } details summary { cursor: pointer; padding: 4px 0; font-size: 13px; } details code { display: block; background: var(--card-2); padding: 10px; border-radius: 6px; font-size: 12px; margin-top: 8px; color: var(--accent); word-break: break-all; } details p { font-size: 12px; color: var(--muted); margin-top: 6px; } /* FUNNEL */ .funnel { display: flex; flex-direction: column; gap: 6px; } .funnel-step { background: var(--card-2); padding: 12px 16px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; } .funnel-step .funnel-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(124,92,255,.25), rgba(255,122,182,.15)); } .funnel-step .funnel-label, .funnel-step .funnel-value { position: relative; z-index: 1; } .funnel-label { font-weight: 500; } .funnel-value { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; } /* INSIGHTS */ .insights { display: flex; flex-direction: column; gap: 10px; } .insight { background: var(--card-2); border-left: 3px solid var(--primary); padding: 12px 16px; border-radius: 6px; font-size: 13px; } .insight b { color: var(--accent); } .insight.warn { border-left-color: var(--warn); } .insight.good { border-left-color: var(--good); } /* TOAST */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--card-2); border: 1px solid var(--border); padding: 12px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transform: translateY(10px); transition: all .25s; z-index: 200; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.3); } .toast.show { opacity: 1; transform: translateY(0); } .toast.error { border-color: var(--bad); color: var(--bad); } .toast.success { border-color: var(--good); color: var(--good); } /* SCROLLBAR */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--card-2); }