/* ERP MY WATCH — оформление интерфейса. Светлая и тёмная тема, палитра по IBCS. Цвета — только именами из :root (светлая тема) и :root[data-theme="dark"] (тёмная): в правилах ниже цвет числом не пишем (правка 39, 22.10). Отступы новых и переделанных правил — по шкале --s1…--s7. */ :root { --tl-prod: #c3cfe2; --tl-wait: #e6be5c; --tl-road: #5b8fd0; --tl-cust: #e08a4a; --tl-acc: #4c9a63; --tl-prepay: #8a6fd1; --tl-road-soft: #cfe0f6; --tl-wait-soft: #f6e5b4; --hatch: rgba(255, 255, 255, .55); color-scheme: light; /* встроенные элементы браузера (календарь, списки, полосы прокрутки) — в цвет темы */ --bg: #f3f4f6; /* фон страницы */ --surface: #ffffff; /* карточки, таблицы */ --surface-2: #f6f7f9; /* шапка таблицы, строка под мышью */ --surface-3: #eceef2; /* нажатое, строка категории */ --border: #e1e4e8; /* тонкие линии между строками */ --rule: #c3c9d1; /* линия под шапкой и над итогом */ /* строки таблиц не сливаются (правка 148): линия между строками, каждая вторая строка, строка под мышью — от цветов темы, поэтому в тёмной теме те же правила */ --row-line: color-mix(in srgb, var(--text) 15%, var(--surface)); --zebra: color-mix(in srgb, var(--text) 5%, transparent); --row-hover: color-mix(in srgb, var(--accent) 10%, transparent); /* у каждого уровня группы свой тон (правка 150; Дмитрий, 01.11: «маркетплейсы — лёгкий оттенок их фирменных цветов»): маркетплейс — его цвет, кабинет — тот же светлее, группа без своего цвета (категория, менеджер) — серым; полосы через строку — только у строк внутри групп */ --ozon: #005bff; --wb: #a73afd; --ym: #ffcc00; --level-1: color-mix(in srgb, var(--slate) 16%, var(--surface)); --field-border: #848c97;/* граница поля ввода: видна на белом и на сером фоне (3:1) */ --text: #171a1f; --text-muted: #59626e; --accent: #1a5bc4; /* можно нажать: ссылки, основная кнопка */ --accent-soft: #e8eef9; --btn-primary: #1a5bc4; /* заливка основной кнопки и значка «MW» */ --btn-primary-hover: #164fab; --btn-primary-press: #134393; --focus: var(--accent); /* рамка фокуса с клавиатуры */ --press-shadow: inset 0 1px 2px rgba(16, 24, 40, .14); /* «вдавленная» нажатая кнопка */ --good: #14703f; --bad: #b42318; --warn: #965400; --warn-strong: #7a4500; /* текст на тёплом фоне шапки «Заказано» */ --on-accent: #fff; /* текст на основной кнопке и значке «MW» */ --count-bg: #f5c46b; /* счётчик у пункта меню и в разделе: тёмные цифры на светло-жёлтом */ --count-fg: #171a1f; --good-soft: #e5f5ec; --bad-soft: #fbe9e7; --warn-soft: #fdf3e1; --violet: #7048c8; --violet-soft: #f1ebfd; --teal: #0c6d6d; --teal-soft: #e0f4f4; --slate: #4f5966; --slate-soft: #eef0f3; --backdrop: rgba(0, 0, 0, .35); /* шкала отступов (план оформления, раздел 3.3) */ --s1: 2px; --s2: 4px; --s3: 8px; --s4: 12px; --s5: 16px; --s6: 24px; --s7: 32px; /* ячейка таблицы (правка 42): строка с фото — 48 пикселей, как на одобренном макете */ --cell-y: 6px; --cell-x: 10px; --radius: 10px; --shadow: none; /* без теней: тонкой рамки достаточно (правка 42) */ --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; } /* Тёмная тема — свои, более мягкие цвета, а не «перевёрнутые» светлые (контраст — tests/test_contrast.py) */ :root[data-theme="dark"] { --tl-prod: #4a5568; --tl-wait: #b8913a; --tl-road: #4a7cc0; --tl-cust: #c0703a; --tl-acc: #3f8556; --tl-prepay: #7a62c0; --tl-road-soft: #24364f; --tl-wait-soft: #4a3d1c; --hatch: rgba(0, 0, 0, .35); color-scheme: dark; --bg: #111317; --surface: #191c21; --surface-2: #20242a; --surface-3: #262a31; --border: #2c3138; --rule: #444b55; --field-border: #6b7480; --text: #e7e9ec; --text-muted: #a2abb6; --accent: #7fb0ff; --accent-soft: #22324d; --btn-primary: #2f67c9; /* темнее ссылки: белый текст на светло-синем не читается */ --btn-primary-hover: #3a6fd0; --btn-primary-press: #285aae; --press-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); --good: #5cc792; --bad: #ff8a7d; --warn: #e8ad55; --warn-strong: #f0c27a; --count-bg: #e8ad55; --good-soft: #16301f; --bad-soft: #3a1f1c; --warn-soft: #352a16; --violet: #a98bf0; --violet-soft: #2a2340; --teal: #5cc8c8; --teal-soft: #123232; --slate: #a2abb6; --slate-soft: #262b32; --shadow: none; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); } a { color: var(--accent); text-decoration: none; } h1 { font-size: 20px; margin: 0; font-weight: 650; } h2 { font-size: 15px; margin: 0; font-weight: 650; } /* каркас */ .layout { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; } .side { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--s5) var(--s3); } /* меню слева — во всю высоту окна и стоит на месте при прокрутке: учётная запись всегда внизу окна (Дмитрий, 26.10) */ @media (min-width: 861px) { .side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; } .logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--btn-primary); color: var(--on-accent); font-weight: 700; font-size: 12px; } .brand-name { font-weight: 650; } .nav-group { padding: 14px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--text); font-weight: 500; margin-bottom: 2px; } .nav-icon { display: flex; flex: none; color: var(--text-muted); } .nav-item.active .nav-icon { color: var(--accent); } .nav-label { flex: 1; min-width: 0; } .nav-item:hover { background: var(--surface-2); } /* Где Вы сейчас (правка 44): синяя полоса у края меню и жирный тёмный текст на голубом */ .nav-item { position: relative; } .nav-item.active { background: var(--accent-soft); color: var(--text); font-weight: 650; } .nav-item.active::before { content: ""; position: absolute; left: calc(-1 * var(--s3)); top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } /* Один размер числа для меню, плиток разделов и сводки задач. */ .erp-count,.count-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle; flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--count-bg);color:var(--count-fg); font:650 11px/20px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap} .erp-count[hidden]{display:none} .erp-count[data-tone="total"]{background:var(--surface-2);color:var(--text-muted)} .erp-count[data-tone="draft"]{background:var(--violet-soft);color:var(--violet)} .erp-count[data-tone="approval"],.erp-count[data-tone="rev_approval"]{background:var(--warn-soft);color:var(--warn-strong)} .erp-count[data-tone="approved"]{background:var(--good-soft);color:var(--good)} .erp-count[data-tone="placed"]{background:var(--accent-soft);color:var(--accent)} .erp-count[data-tone="revision"]{background:var(--teal-soft);color:var(--teal)} .nav-count{margin-left:6px} .nav-count[data-count="0"]{background:transparent;color:var(--text-muted)} .side-foot { margin-top: auto; padding: var(--s4) 0 0; border-top: 1px solid var(--border); } /* Учётная запись (правка 64): кружок с инициалами, имя и роль; тема — две кнопки; действия — строками со значками */ .acct{display:flex;flex-direction:column;gap:var(--s1)} .acct form{margin:0} .acct-who{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s2) var(--s3)} .acct-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;letter-spacing:.03em} .acct-text{display:flex;flex-direction:column;min-width:0;line-height:1.3} .acct-name{overflow:hidden;color:var(--text);font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap} .acct-role{color:var(--text-muted);font-size:12px} .acct-theme{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0 var(--s1) var(--s2);padding:2px; border-radius:8px;background:var(--surface-3)} .acct-theme button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:28px;padding:0; border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-muted);font:inherit; font-size:12px;cursor:pointer} .acct-theme button:hover{color:var(--text)} .acct-theme button[aria-pressed="true"]{border-color:var(--border);background:var(--surface);color:var(--text); font-weight:650} .acct-item{display:flex;align-items:center;gap:var(--s3);width:100%;padding:6px var(--s3);border:0;border-radius:6px; background:transparent;color:var(--text-muted);font:inherit;font-size:13px;text-align:left;text-decoration:none; cursor:pointer} .acct-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none} .acct-item .icon,.acct-theme .icon{flex:none} a.acct-who{margin:0 0 var(--s1);padding-top:var(--s1);border-radius:8px;color:inherit;text-decoration:none} a.acct-who:hover{background:var(--surface-2)} a.acct-who:focus-visible{outline:2px solid var(--focus);outline-offset:1px} img.acct-avatar{object-fit:cover;background:var(--surface-3)} /* Профиль (правка 65) */ .panel.profile-panel{width:min(100%,640px)} .profile-photo-actions [hidden]{display:none} .profile-photo{display:flex;align-items:center;gap:var(--s5);padding:var(--s5)} .profile-avatar{flex:none;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;object-fit:cover; background:var(--accent-soft);color:var(--accent);font-size:30px;font-weight:700} .profile-photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)} .profile-photo-actions label.btn{cursor:pointer} .profile-password{display:grid;gap:var(--s4);padding:var(--s5);max-width:420px} .acct-item:focus-visible,.acct-theme button:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .who { font-size: 13px; display: flex; flex-direction: column; margin-bottom: 6px; } .role { color: var(--text-muted); font-size: 12px; } .main { display: flex; flex-direction: column; min-width: 0; } .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface); } .content { padding: 20px 24px 40px; } /* плитки */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); color: var(--text); } .card:hover { border-color: var(--accent); } .card-value { font: 600 26px/1.1 var(--font); font-variant-numeric: tabular-nums; } .card-name { color: var(--text-muted); margin-top: 6px; } /* панели и таблицы */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; box-shadow: var(--shadow); overflow-x: auto; width: fit-content; max-width: 100%; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .sync-panel{width:min(100%,760px);padding:var(--s5)} .sync-panel h2{margin-bottom:var(--s5)} .sync-panel .card-form{border:0;padding:0;max-width:none} .sync-panel .actions-row{align-items:center;margin:var(--s5) 0 0} .sync-panel details{margin-top:var(--s4)} /* таблица — по содержимому, не растягивается на всю ширину (Дмитрий, 19.10) */ .grid { width: auto; max-width: 100%; border-collapse: collapse; background: var(--surface); font-variant-numeric: tabular-nums; } /* Таблицы по IBCS (правка 42): шапка обычными буквами и линией темнее строк, цифры одной ширины, итог — жирным с линией, без заливки; строка категории — серая */ .grid th { text-align: left; font-size: 12.5px; line-height: 1.3; color: var(--text-muted); font-weight: 600; padding: calc(var(--cell-y) + 1px) var(--cell-x); border-bottom: 1px solid var(--rule); background: var(--surface-2); position: sticky; top: 0; } .grid td { padding: var(--cell-y) var(--cell-x); line-height: 1.35; border-bottom: 1px solid var(--row-line); vertical-align: top; } /* списки и поля отбора в заголовке — по содержимому: иначе раздвигают таблицу на всю ширину */ .grid th .field { width: auto; max-width: 240px; } .grid td a.cell-link { white-space: nowrap; } /* название записи — одной строкой */ .grid tbody tr:hover { background: var(--surface-2); } /* каждая вторая строка чуть темнее, строка под мышью — голубоватая (правка 148, static/js/app.js stripe): тонировка поверх фона клетки, поэтому видна и на цветных колонках, и на закреплённых */ .grid tbody tr.row-alt>td{background-image:linear-gradient(var(--zebra),var(--zebra))} .grid tbody tr:hover>td{background-image:linear-gradient(var(--row-hover),var(--row-hover))} .grid td.right { text-align: right; } .nowrap { white-space: nowrap; } .small { font-size: 12px; color: var(--text-muted); } .muted { color: var(--text-muted); } .empty { padding: 28px 14px; text-align: center; color: var(--text-muted); } /* элементы */ .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .tab { padding: 7px 14px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .field { width: 100%; padding: 8px 10px; border: 1px solid var(--field-border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .field:focus, .field:focus-within { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); } .field::placeholder { color: var(--text-muted); opacity: 1; } .search { max-width: 280px; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; } .btn.primary { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--on-accent); font-weight: 600; } .link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; } /* Состояния (правка 41): под мышью — фон темнее, нажата — ещё темнее и «вдавлена», недоступна — бледная, «Сохраняю…» — после отправки формы (static/js/app.js); фокус с клавиатуры — синяя рамка с зазором */ .btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--field-border); } .btn:active:not(:disabled) { background: var(--surface-3); box-shadow: var(--press-shadow); } .btn.primary:hover:not(:disabled) { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); } .btn.primary:active:not(:disabled) { background: var(--btn-primary-press); border-color: var(--btn-primary-press); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn.is-busy { opacity: .75; cursor: progress; justify-content: center; } .link:hover { text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .field:focus-visible { outline: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } /* На компьютере кнопки и поля — 32 пикселя (были 39–41); телефон — правка 46 (О-9) */ @media (min-width: 861px) { .btn { min-height: var(--s7); padding: var(--s2) var(--s4); line-height: 20px; } .field { min-height: var(--s7); padding: var(--s2) var(--s3); line-height: 20px; } .grid tr.filter-row .field, .grid tr.toggle-row .list-filter { min-height: 0; } } .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); } .tag.create { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); } .tag.update { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .tag.delete { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .messages { padding: 12px 24px 0; } .msg { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 8px; } .msg.success { border-color: color-mix(in srgb, var(--good) 45%, transparent); } .msg { transition: opacity .4s ease; } .msg.fading { opacity: 0; } .msg.error { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); } .pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; } /* карточка записи */ .card-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; max-width: 760px; box-shadow: var(--shadow); } .card-form h2 { margin-bottom: 16px; } .row { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 9px 0; align-items: start; } .row > label { color: var(--text-muted); padding-top: 8px; } .row.has-error .field { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); } .hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .err { font-size: 12px; color: var(--bad); margin-top: 4px; font-weight: 500; } .form-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .check { width: auto; } div.check-list { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; } div.check-list label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } input.check-list { width: auto; margin: 0; } .row > .input > input.check { margin-top: 11px; } ul.checklist { list-style: none; margin: 0; padding: 8px 16px 16px; } ul.checklist li { padding: 6px 0 6px 26px; position: relative; color: var(--text-muted); } ul.checklist li:before { content: "○"; position: absolute; left: 4px; } ul.checklist li.done { color: var(--text); } ul.checklist li.done:before { content: "✓"; color: var(--good); } /* вход */ .login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 20px; } .login { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); } .login-head { text-align: center; margin-bottom: 20px; } .login-head .logo { margin: 0 auto 10px; width: 38px; height: 38px; font-size: 14px; } .login-head h1 { font-size: 20px; } .login-head p { color: var(--text-muted); margin: 6px 0 0; } .login label { display: block; margin-bottom: 14px; color: var(--text-muted); font-size: 13px; } .login .field { margin-top: 6px; } .login .btn { width: 100%; justify-content: center; } .login .hint { margin-top: 14px; text-align: center; } @media (max-width: 860px) { .nav-group { display: none; } .row { grid-template-columns: 1fr; } } /* --- разделы ассортимента и остатков ------------------------------------- */ .note{margin:0 0 14px;padding:10px 12px;border-left:3px solid var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:6px;font-size:13px;line-height:1.5} .section{margin:28px 0 10px;font-size:15px;font-weight:600} .content > .section:first-child{margin-top:4px} .card-foot{margin-top:4px;font-size:11px;color:var(--text-muted)} .grid.num td,.grid.num th{white-space:nowrap} .right{text-align:right} .warn{color:var(--warn);font-weight:600} .grid tfoot th{border-top:1.5px solid var(--text-muted);font-weight:650;background:transparent} .grid tr.xl-total td{font-weight:700;border-bottom:1.5px solid var(--text-muted)} .grid tr.done td{opacity:.55} .inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted)} .inline-form{display:inline-flex;align-items:center;gap:6px} .field.tiny{width:72px} .msg.warning{background:color-mix(in srgb,var(--warn) 9%,var(--surface)); border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--text)} .empty-box{padding:28px;text-align:center;border:1px dashed var(--rule);border-radius:10px; color:var(--text-muted)} .empty-box .btn{margin-top:10px} /* --- 3.3.1: просмотр без права правки, резервные копии ------------------- */ .note.muted-note{border-left-color:var(--text-muted);background:var(--surface-2);color:var(--text-muted)} .field:disabled{background:var(--surface-2);border-color:var(--border);color:var(--text);opacity:1;cursor:default} .card.static:hover{border-color:var(--border)} .card-value.small-value{font-size:18px} .good{color:var(--good);font-weight:600} .bad{color:var(--bad);font-weight:600} .steps{margin:0 0 14px;padding-left:20px;font-size:13px;line-height:1.6} .form-foot form{display:inline} .actions-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px} /* --- «Сегодня», меню по задачам, «Настройки» (13.10) ------------------------ */ /* Статусы одни на всю программу: словом и цветом, не только цветом */ .status{display:inline-block;min-width:104px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600; text-align:center;border:1px solid var(--border);white-space:nowrap} .status.urgent{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent); background:color-mix(in srgb,var(--bad) 8%,transparent)} .status.action{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 8%,transparent)} .status.info{color:var(--text-muted)} .status.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)} .queue{list-style:none;margin:0;padding:0} .queue-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px; border-bottom:1px solid var(--border)} .queue-item:last-child{border-bottom:0} .queue-title{font-weight:600} .queue-detail{color:var(--text-muted);font-size:13px;margin-top:2px} .count-badge{margin-left:6px} .count-badge.urgent{background:var(--bad-soft);color:var(--bad)} .all-clear{color:var(--good)} .small-note{font-size:12px;margin:0 2px 18px} .heading-date{font-size:14px;font-weight:400;color:var(--text-muted);margin-left:8px} .top-title{display:flex;flex-direction:column;gap:2px;min-width:0} .top-right{display:flex;align-items:center;gap:var(--s2)} /* несколько кнопок вверху — с промежутком (правка 93) */ .fresh{font-size:12px;color:var(--text-muted)} .fresh .stale{color:var(--warn);font-weight:600} .nav-sep{height:1px;margin:10px 8px;background:var(--border)} details.build summary{cursor:pointer;list-style:none} details.build summary::-webkit-details-marker{display:none} details.build:not([open]) summary{border-bottom:0} .section-attention{width:fit-content;max-width:100%;margin-bottom:var(--s5);padding:var(--s4) var(--s5); border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} .section-attention h2{display:flex;align-items:center;gap:var(--s3);margin:0;font-size:15px;line-height:1.4} .section-attention:has([data-attention-parts][hidden]) [data-attention-total]{background:transparent;color:var(--text-muted)} .attention-parts{list-style:none;padding:0;margin:var(--s3) 0 0} .attention-parts:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s4)} .attention-parts li{max-width:100%;min-width:0} .attention-parts a{display:inline-flex;align-items:center;gap:var(--s3);max-width:100%;padding:var(--s2) var(--s3); border-radius:6px;background:var(--surface-2);color:var(--accent);font-size:14px;line-height:1.4} .attention-parts a:hover,.attention-parts a:focus-visible{background:var(--accent-soft);text-decoration:underline} .attention-parts a::after{content:"";flex:none;width:5px;height:5px;border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;transform:rotate(45deg)} .attention-parts a span{min-width:0;overflow-wrap:anywhere} .attention-parts a b{white-space:nowrap;font-variant-numeric:tabular-nums} .today-topics{padding:var(--s3) var(--s5) var(--s4);border-bottom:1px solid var(--border)} .today-topics .attention-parts{margin:0} .queue-item:target{background:var(--accent-soft);scroll-margin-top:var(--s6)} .attention-empty{margin:var(--s2) 0 0;color:var(--text-muted);font-size:14px} .hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px;margin-bottom:8px} .hub-item{display:flex;align-items:center;gap:12px;min-height:68px;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);color:var(--text)} .hub-item:hover{border-color:var(--accent)} .hub-tile{position:relative} .hub-body{flex:1;min-width:0} .hub-heading{display:flex;gap:var(--s2);align-items:center} .hub-main{color:inherit} .hub-main::after{content:"";position:absolute;inset:0;border-radius:var(--radius)} .hub-main:focus-visible{outline:0} .hub-main:focus-visible::after{outline:2px solid var(--focus);outline-offset:1px} .tile-total:not([hidden]),.tile-question{display:inline-flex;align-items:center;gap:var(--s2);min-width:0} .tile-total,.tile-question{color:var(--text-muted)} .tile-parts:not([hidden]),.hub-order-counts:not([hidden]){display:inline-flex;align-items:center;gap:var(--s2) var(--s3);min-width:0} .tile-parts{flex-wrap:wrap} .tile-question,.hub-order-number{position:relative;z-index:1} .tile-question:hover,.tile-question:focus-visible,.hub-order-number:hover,.hub-order-number:focus-visible{text-decoration:underline} .tile-question [data-tile-label]{overflow-wrap:anywhere} .hub-order-counts:not([hidden]){flex-wrap:nowrap;gap:2px} .hub-order-number{display:inline-flex} .hub-status-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .hub-order-number:only-child{align-items:center;gap:var(--s2)} .hub-order-number:only-child .hub-status-name{position:static;width:auto;height:auto;clip-path:none;white-space:normal; font-size:11px;line-height:1.3;color:var(--text-muted)} #today-queue:has(> .all-clear) .count-badge{background:transparent;color:var(--text-muted)} .hub-item.primary{background:var(--btn-primary);border-color:var(--btn-primary);color:var(--on-accent)} .hub-item.primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover)} .hub-item.primary .hub-icon{background:var(--on-accent);color:var(--btn-primary)} .hub-icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:11px; background:var(--tone-bg);color:var(--tone-fg)} .hub-title{flex:1;min-width:0;font-weight:600;line-height:1.3} .hub-lock{flex:none;display:flex;color:var(--text-muted)} .hub-item.primary .tile-total,.hub-item.primary .tile-question{color:var(--on-accent)} .hub-item.soon{opacity:.6;cursor:default} .hub-item.soon:hover{border-color:var(--border)} .hub-soon{flex:none;font-size:12px;color:var(--text-muted);border:1px dashed var(--border);border-radius:999px;padding:1px 8px} /* оттенки значков и меток (разделы «Справочников», отделы сотрудников): цвета — из темы */ .tone-blue{--tone-bg:var(--accent-soft);--tone-fg:var(--accent)} .tone-violet{--tone-bg:var(--violet-soft);--tone-fg:var(--violet)} .tone-amber{--tone-bg:var(--warn-soft);--tone-fg:var(--warn)} .tone-green{--tone-bg:var(--good-soft);--tone-fg:var(--good)} .tone-red{--tone-bg:var(--bad-soft);--tone-fg:var(--bad)} .tone-slate{--tone-bg:var(--slate-soft);--tone-fg:var(--slate)} .tone-teal{--tone-bg:var(--teal-soft);--tone-fg:var(--teal)} @media (max-width: 860px){ .queue-item{grid-template-columns:1fr;gap:8px} .queue-item .btn{justify-self:start} .status{justify-self:start} } .crumb{font-weight:400;color:var(--text-muted)} .crumb:hover{color:var(--accent)} .crumb-sep{margin:0 8px;color:var(--text-muted);font-weight:400} /* Меню учётной записи в шапке — только на телефоне (правка 46); на компьютере имя и «Выйти» — внизу меню слева */ .account{display:none;position:relative;flex:none} .account-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule); background:var(--surface);color:var(--text-muted);cursor:pointer;list-style:none} .account-btn::-webkit-details-marker{display:none} .account[open] .account-btn{background:var(--surface-2);color:var(--text)} .account-menu{position:absolute;right:0;top:calc(100% + var(--s2));z-index:60;display:flex;flex-direction:column; gap:var(--s4);min-width:220px;padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);box-shadow:0 8px 24px var(--backdrop)} .account-menu{min-width:240px;padding:var(--s4) var(--s3)} .account-menu .acct-item{min-height:40px} .account-menu .acct-theme button{height:36px} /* Телефон (правка 46): меню — внизу экрана, как в приложениях: значок над подписью, всегда под пальцем; имя и «Выйти» — за кнопкой в шапке. Поля и кнопки — 44 пикселя, шрифт полей 16 (иначе iPhone увеличивает страницу) */ @media (max-width: 860px){ .layout{grid-template-columns:minmax(0,1fr)} .side{position:fixed;left:0;right:0;bottom:0;z-index:50;flex-direction:row;padding:0;min-width:0; border-right:0;border-bottom:0;border-top:1px solid var(--border);background:var(--surface)} .brand,.side-foot,.side .nav-sep{display:none} /* ширина пункта — по подписи, остаток делится поровну: «Справочники» помещается целиком */ .side nav{display:flex;width:100%;padding:0 0 env(safe-area-inset-bottom)} .side .nav-item{flex:1 1 auto;min-width:0;flex-direction:column;justify-content:center;gap:2px;min-height:56px;margin:0; padding:var(--s3) var(--s1) 6px;border:0;border-radius:0;font-size:11px;font-weight:500;text-align:center} .side .nav-item .nav-label{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .side .nav-item.active{background:transparent;color:var(--accent);font-weight:650} .side .nav-item.active::before{left:25%;right:25%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px} .side .nav-count{position:absolute;top:1px;right:0;margin:0} .main{padding-bottom:calc(64px + env(safe-area-inset-bottom))} .account{display:block} .top{padding:var(--s3) var(--s5);min-height:56px;flex-wrap:wrap;row-gap:var(--s3)} .top-title{flex:1 1 0;order:1} .account{order:2} /* кнопки страницы — своей строкой под заголовком: раньше наезжали на него (Дмитрий, 27.10) */ .top-right{order:3;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:var(--s2)} .top-right:empty{display:none} .top h1{font-size:17px} .content{padding:var(--s4) var(--s5) var(--s6)} .field,.btn{min-height:44px;font-size:16px} .content .grid tr.filter-row .field,.content .grid tr.toggle-row .list-filter{min-height:36px;font-size:16px} .toolbar{flex-wrap:wrap} .toolbar .field{max-width:100%;min-width:0} /* широкие таблицы прокручиваются сами по себе, страница остаётся в ширину экрана */ table.grid{display:block;overflow-x:auto;max-width:100%} /* название в таблице — в две строки и уже, чтобы закреплённая колонка не съедала экран; колонку «Фото» (первая, только фото) на телефоне не показываем — как в «Остатках» */ table[data-sticky] td a.cell-link{white-space:normal;max-width:140px} .grid:has(> tbody > tr > td:first-child > .ph:only-child) > * > tr > :first-child:not([colspan]){display:none} } /* загрузка справочников */ .split{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 16px 14px} ul.plain{list-style:none;margin:0;padding:0} ul.plain li{padding:3px 0} @media (max-width: 860px){.split{grid-template-columns:1fr}} .review td:last-child{min-width:300px} .review .inline-form{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px} .review select.field{min-width:220px;max-width:260px} .related{margin-top:18px;max-width:1100px} .related-note{margin:12px 16px} /* таблица с упорядочиванием и отбором по столбцам (data-table-tools, static/js/app.js) */ .table-tools-bar[hidden],.row[hidden],.grid tfoot[hidden]{display:none} .key-form{margin-bottom:16px} .meta-line{margin:0 0 14px;color:var(--text-muted)} .grid tr.group-row th{background:var(--level-1);color:var(--text);font-size:13px;font-weight:650;text-align:left; padding:var(--cell-y) var(--cell-x);border-bottom:1px solid var(--rule)} .key-form .form-foot{align-items:center;flex-wrap:wrap} .key-row-actions{display:flex;gap:12px;align-items:center} .link.danger{color:var(--bad)} .table-tools-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px; font-size:13px;color:var(--text-muted);border-top:1px solid var(--border)} .grid th .sort{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer; font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left} .grid th .sort:hover{color:var(--accent)} .grid th .sort-mark{font-size:10px;opacity:.4} .grid th[aria-sort="ascending"] .sort,.grid th[aria-sort="descending"] .sort{color:var(--accent)} .grid th[aria-sort="ascending"] .sort-mark,.grid th[aria-sort="descending"] .sort-mark{opacity:1} .grid tr.filter-row th{position:static;padding:6px 8px;background:var(--surface);text-transform:none;letter-spacing:0; font-weight:400} .grid tr.filter-row .field{min-width:96px;padding:3px 6px;font-size:12.5px} .grid tr.filter-row input.field{width:130px;min-width:0} .grid tr.filter-row select.field{max-width:170px} .grid tr.filter-row .field.on{border-color:var(--accent);background:var(--accent-soft)} .grid tr.no-rows td{padding:22px 14px;text-align:center;color:var(--text-muted)} /* список под строкой «Сегодня» (неопознанные карточки) */ .queue-body{min-width:0} .queue-table{margin-top:10px;border:1px solid var(--border);border-radius:8px;overflow-x:auto} .queue-table .grid th,.queue-table .grid td{padding:6px 10px;font-size:13px} .queue-table .grid tbody tr:last-child td{border-bottom:0} /* Остатки «как в отчёте»: широкая таблица, шапка и первые три колонки закреплены, как в Excel */ .xl-toolbar{flex-wrap:wrap} .xl-toolbar .field.select{width:auto} .xl-toolbar .field.search{width:180px} .xl-checks{display:inline-flex;align-items:center;gap:12px;padding:6px 10px;border:1px solid var(--border); border-radius:8px;background:var(--surface)} .xl-check{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer} .xl-wrap{overflow:auto;max-height:calc(100vh - 250px);border:1px solid var(--border);border-radius:8px; background:var(--surface)} .grid.xl{width:auto;border-collapse:separate;border-spacing:0;font-size:13px} .grid.xl th,.grid.xl td{box-sizing:border-box;padding:4px 8px;border-bottom:1px solid var(--border); border-right:1px solid var(--border)} .grid.xl thead th{z-index:2;text-transform:none;letter-spacing:0;font-size:11.5px;line-height:1.25;white-space:normal; vertical-align:bottom;min-width:70px;max-width:120px} .grid.xl thead tr.xl-groups th{top:0;height:28px;text-align:center;text-transform:uppercase;letter-spacing:.03em; white-space:nowrap;max-width:none} .grid.xl thead tr.xl-titles th{top:28px} .grid.xl thead th[rowspan]{top:0;vertical-align:bottom} .grid.xl .xl-c1,.grid.xl .xl-c2,.grid.xl .xl-c3{position:sticky;z-index:1;background:var(--surface)} .grid.xl thead .xl-c1,.grid.xl thead .xl-c2,.grid.xl thead .xl-c3{z-index:3;background:var(--surface-2)} .grid.xl .xl-c1{left:0;width:58px;min-width:58px;max-width:58px;color:var(--text-muted);white-space:normal} .grid.xl .xl-c2{left:58px;width:250px;min-width:250px;max-width:250px;white-space:normal} .grid.xl .xl-c3{left:308px;width:130px;min-width:130px;max-width:130px;white-space:normal} .grid.xl td.right{font-variant-numeric:tabular-nums} .grid.xl .xl-sum{font-weight:600} .grid.xl th.xl-defect{color:var(--warn)} .grid.xl tr.xl-total td{font-weight:700;background:var(--accent-soft)} .grid.xl tr.xl-file td{font-weight:600;background:var(--surface-2)} .grid.xl tr.xl-gap td{color:var(--warn);font-size:12px;background:var(--surface)} .grid.xl tr.xl-section td{background:var(--surface-2);font-weight:700;font-size:12px;text-transform:uppercase; letter-spacing:.02em;color:var(--text)} .grid.xl tr.xl-issue td{color:var(--text-muted);font-style:italic} .xl-raw{font-size:11.5px;color:var(--text-muted);line-height:1.2;margin-top:2px} .xl-flag{display:inline-block;margin-top:2px;padding:0 5px;border:1px solid var(--warn);border-radius:4px; font-size:10.5px;color:var(--warn);white-space:nowrap} /* Складские документы */ .new-doc{padding:10px 14px;margin-bottom:12px} .new-doc summary{cursor:pointer} /* новый документ — блоками по смыслу, слева название блока; что значит документ — подсказкой (Дмитрий, 27.10) */ .doc-groups{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)} .doc-group{display:grid;grid-template-columns:120px 1fr;gap:var(--s3);align-items:baseline} .doc-group-title{font-size:12px;font-weight:600;color:var(--text-muted)} .doc-kinds{display:flex;flex-wrap:wrap;gap:var(--s3)} .doc-kind{padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:8px;color:var(--text); text-decoration:none;background:var(--surface);font-weight:600} .doc-kind:hover,.doc-kind:focus-visible{border-color:var(--accent);color:var(--accent)} @media (max-width:860px){.doc-group{grid-template-columns:1fr;gap:var(--s2)}} .doc-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text-muted)} .doc-head{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px;margin:10px 0 14px} .doc-field{display:flex;flex-direction:column;gap:4px} .doc-field label{font-size:12px;color:var(--text-muted)} .doc-field.wide{grid-column:1/-1} .doc-field.has-error .field{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)} .doc-field[hidden]{display:none} .doc-lines .field.select{min-width:280px} /* Строки документа (правка 45): фото и список позиции — в одну строку, список не заходит под «Штук»; числа в полях — вправо, как в столбце; «Отменить документ» — справа, подальше от «Провести» */ .doc-lines td{white-space:nowrap} .doc-lines td .err{white-space:normal} .doc-lines td select.field{width:auto} .grid td.right .field{text-align:right} .form-foot .btn.danger{margin-left:auto} .doc-lines td{vertical-align:top} .review-box{padding:12px 14px;margin:10px 0} .review-box .actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px} .btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)} .btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 7%,var(--surface));border-color:var(--bad)} .field.tiny-date{width:150px} .period-now{font-size:15px} .order-extra-models{padding:var(--s3) var(--s5)} .order-extra-models summary{color:var(--accent);cursor:pointer;width:fit-content} .add-line-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s3)} .add-line-row select{width:min(100%,400px)} .add-line-row input[name=qty]{width:110px} /* «Закрытие месяца» — все рамки одной ширины, таблицы во всю рамку, пустое — без лишней высоты (правка 163) */ .period-page{max-width:880px} .period-page .panel{width:auto} .period-page .panel .grid{width:100%} .period-page .empty{padding:var(--s5)} .period-body{padding:var(--s4) var(--s5) var(--s5)} .period-body .msg{margin-top:0} .period-body .actions-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:0} .period-body .actions-row .field{width:auto;flex:1 1 200px} .period-body .actions-row input[type=month]{flex:0 1 190px} .claim-line{padding:10px 14px;margin:10px 0} .grid td.cell-neg,.grid.xl td.cell-neg{color:var(--bad);font-weight:700} @media (max-width: 860px){ .doc-lines .field.select{min-width:180px} } /* Фото товара (с площадки) */ .ph{display:inline-block;object-fit:cover;border-radius:4px;background:var(--surface-2);vertical-align:middle} .ph-sm{width:26px;height:34px} .ph-lg{width:180px;height:240px;border:1px solid var(--border)} .ph-left{float:left;margin-right:8px} .grid.xl .xl-c2 .ph{float:left;margin:0 6px 0 0} /* Выход из документа: «Сохранить черновик?» */ .doc-back{margin:0 0 6px} .leave-dialog{border:1px solid var(--border);border-radius:10px;padding:16px 18px;max-width:440px; background:var(--surface);color:var(--text)} .leave-dialog::backdrop{background:var(--backdrop)} .leave-dialog .actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} /* Галочки над колонками списка (карточки) */ .grid tr.toggle-row th{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;background:var(--surface); border-bottom:none;white-space:normal;vertical-align:bottom} .grid tr.toggle-row .list-filter{min-width:125px;width:100%;max-width:210px;padding:4px 6px;font-size:12px} .grid tr.toggle-row .list-filter.on{border-color:var(--accent);color:var(--accent)} /* серый значок «Нет фото»: цвет внутри картинки (%2394a3b8 = #94a3b8) именем задать нельзя */ .ph-none{background:var(--surface-2) url("data:image/svg+xml;utf8,") center/18px no-repeat;border:1px dashed var(--border)} .ph-lg.ph-none{background-size:56px} /* Название записи в таблице — кнопка, открывает запись. Чёрным, синим с подчёркиванием — под мышью и при переходе клавишей (правка 43): таблица не пестрит ссылками */ .cell-link{display:inline-block;margin:-3px -6px;padding:3px 6px;border-radius:6px;color:var(--text); text-decoration:none;font-weight:500} .cell-link:hover,.cell-link:focus-visible{color:var(--accent);background:var(--accent-soft);text-decoration:underline; text-underline-offset:2px} /* Строка, которая требует внимания (карточка без модели) */ /* «требует внимания» — красной полосой слева (правка 154; Дмитрий, 01.11): жёлтый — только у Яндекс Маркета */ .grid tr.row-attention>td:first-child{box-shadow:inset 3px 0 0 var(--bad)} .grid tr.row-attention>td.stick-edge:first-child{box-shadow:inset 3px 0 0 var(--bad),inset -1px 0 0 var(--border)} .grid tr.row-birthday td{background:color-mix(in srgb,var(--accent) 10%,var(--surface))} /* закреплённые шапка и первые колонки (data-sticky, static/js/app.js): фон — непрозрачный, иначе под ним видно строки */ .table-scroll{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--border);border-radius:var(--radius); background:var(--surface);max-width:100%} .table-scroll > .grid{border:0} .grid .stick-top{position:sticky;z-index:2} .grid .stick-left{position:sticky;z-index:1;background-color:var(--surface)} .grid thead .stick-left{z-index:3;background-color:var(--surface-2)} .grid .stick-edge{box-shadow:inset -1px 0 0 var(--border)} /* строка отборов закреплённой таблицы — закреплена вместе с шапкой: при прокрутке вбок отборы модели и бренда стоят под своими колонками (правка 124; до неё строка отборов была «static» и уезжала) */ .grid tr.filter-row th.stick-top{position:sticky} .grid thead tr.filter-row th.stick-left{background-color:var(--surface)} .grid tbody tr:hover td.stick-left{background-color:var(--surface-2)} .grid tr.xl-total td.stick-left{background-color:var(--surface)} .grid tr.group-row th .group-label{position:sticky;left:var(--cell-x)} .grid tr.row-muted td,.grid tr.row-muted td a.cell-link{color:var(--text-muted)} .factory-line{white-space:nowrap} .stock-table td.model-cell{white-space:nowrap} /* «Параметры расчёта заказа» (правка 50): группы параметров карточками, поля — подпись над полем */ .settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:16px; margin-bottom:16px} @media (max-width:1280px){.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:860px){.settings-grid{grid-template-columns:minmax(0,1fr)}} .settings-grid .panel{margin:0;width:auto} /* рамки одной ширины по сетке, а не по содержимому (правка 95) */ .settings-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:14px 16px 16px} .settings-field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--text-muted)} /* подпись в две строки не сдвигает поле: поля строки — на одной линии (правка 95) */ .settings-fields .settings-field>span:first-child{flex:1 0 auto} .settings-field .static-field{display:flex;align-items:center;background:var(--surface-2);color:var(--text)} .settings-field .settings-help{font-size:12px;line-height:1.45;color:var(--text-muted)} /* поле с пояснением — на всю ширину рамки, само поле — как у соседних */ .settings-fields .settings-field.has-help{grid-column:1/-1} .settings-fields .settings-field.has-help .field{max-width:calc(50% - 8px)} /* сроки — одной строкой по этапам */ .settings-chain{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--s4) var(--s3);padding:14px 16px 16px} .settings-chain .settings-field{width:170px} .settings-chain .settings-field>span:first-child{min-height:2.6em;display:flex;align-items:flex-end} .settings-chain .chain-arrow{color:var(--text-muted);padding-bottom:9px} .settings-chain .chain-total .static-field{font-weight:650} .settings-grid .settings-wide{grid-column:1/-1} /* строка сроков — на всю ширину */ .settings-field .field{width:100%;color:var(--text)} .settings-field.has-error .field{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)} .settings-field .error-text{color:var(--bad);font-size:12px} @media (max-width:640px){.settings-fields{grid-template-columns:1fr}} /* «Расчёт заказа» (правка 51): статусы — метками; «пора» — тёплым, «скоро» — синим, излишек — серым */ .chips{display:inline-flex;flex-wrap:wrap;gap:6px} .chip{display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border:1px solid var(--border);border-radius:16px; background:var(--surface);color:var(--text);font-size:13px;text-decoration:none} .chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .calc-status{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap; border:1px solid var(--border)} .calc-due{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent); background:color-mix(in srgb,var(--warn) 10%,var(--surface))} .calc-soon{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)} .calc-ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)} .calc-excess,.calc-idle{color:var(--text-muted)} .calc-assumed{display:inline-block;padding:2px 6px;border:1px solid color-mix(in srgb,var(--warn) 48%,var(--border)); border-radius:5px;background:color-mix(in srgb,var(--warn) 12%,var(--surface));color:var(--text); font-size:12px;font-weight:600;line-height:1.2} .calc-table .calc-assumed{white-space:nowrap;vertical-align:middle} .calc-table .model-cell{height:52px} .calc-late{color:var(--bad);font-size:12px;white-space:nowrap} .calc-table td{white-space:nowrap;vertical-align:middle} /* «Расчёт заказа» компактнее (правки 110, 113): переносы в заголовках — по смыслу, в шаблоне; стрелка порядка — у последней строки заголовка; длинное название модели — в две строки; узкие отборы, «прошло N дн.» — под датой; «Готово в Китае» — своим цветом; у заголовков — подсказки при наведении */ .calc-table{--cell-x:8px} /* шапка (правка 122): подписи — по центру ячейки; у колонок без группы — по центру вместе с пустой ячейкой их цвета над ними в строке групп (сдвиг на половину её высоты, --group-h ставит static/js/app.js) */ .calc-table thead tr:not(.col-groups):not(.filter-row) th{white-space:nowrap;vertical-align:middle} .calc-table thead tr:not(.col-groups):not(.filter-row) th:not([data-group]) > .sort{ transform:translateY(calc(var(--group-h, 0px) / -2))} .calc-table thead th[title]{cursor:help} /* колонку можно перетащить за заголовок (правка 119): куда встанет — полоса слева или справа */ table[data-reorder] thead th[draggable="true"]{cursor:grab} .grid thead th.drop-before{box-shadow:inset 3px 0 0 var(--accent)} .grid thead th.drop-after{box-shadow:inset -3px 0 0 var(--accent)} .grid thead th.col-dragging{opacity:.5} .calc-table th .sort{align-items:flex-end} .calc-table th .sort{text-align:center;justify-content:center} .calc-table .model-line{display:flex;align-items:center;gap:8px;min-width:230px;max-width:270px} .calc-table .model-line .ph{flex:none;margin-right:0} .calc-table .model-line .cell-link{flex:1 1 auto;min-width:0;white-space:normal} .calc-table tr.filter-row select.field{min-width:0;width:100%;max-width:none} .calc-table .calc-late{display:block} /* цвета колонок (правка 118, Дмитрий 29.10): в РФ — оранжевым, едет и готово в Китае — синим, не произведено — серым; «К заказу» — зелёным, по выбранному способу — темнее, как и выбранная кнопка переключателя */ /* колонки остатков — одной ширины: числа стоят ровным столбиком, а не вразнобой (правка 125) */ .calc-table th.c-qty{width:84px;min-width:84px} /* все заголовки колонок — по центру (Дмитрий, 29.10) */ .calc-table thead tr:not(.col-groups):not(.filter-row) th{text-align:center} /* соседние колонки одного цвета («Едет» и «Готово в Китае») — с тонкой чертой между ними, чтобы не сливались */ .calc-table th.col-way + th.col-way,.calc-table td.col-way + td.col-way{ box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 30%,var(--surface))} /* строка отборов — цветом своей колонки (светлым, как строки таблицы) */ .calc-table tr.filter-row th.col-rf{background:color-mix(in srgb,var(--warn) 9%,var(--surface))} .calc-table tr.filter-row th.col-way{background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .calc-table tr.filter-row th.col-unmade{background:color-mix(in srgb,var(--text-muted) 10%,var(--surface))} .calc-table tr.filter-row th.col-order{background:color-mix(in srgb,var(--good) 8%,var(--surface))} .calc-table td.col-rf{background:color-mix(in srgb,var(--warn) 9%,var(--surface))} .calc-table thead th.col-rf{background:color-mix(in srgb,var(--warn) 16%,var(--surface-2))} .calc-table td.col-way{background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .calc-table thead th.col-way{background:color-mix(in srgb,var(--accent) 15%,var(--surface-2))} .calc-table td.col-unmade{background:color-mix(in srgb,var(--text-muted) 10%,var(--surface))} .calc-table thead th.col-unmade{background:color-mix(in srgb,var(--text-muted) 17%,var(--surface-2))} .calc-table td.col-alt{background:color-mix(in srgb,var(--good) 8%,var(--surface));color:var(--text-muted)} .calc-table thead th.col-alt{background:color-mix(in srgb,var(--good) 14%,var(--surface-2))} .calc-table td.col-main{background:color-mix(in srgb,var(--good) 22%,var(--surface))} /* группы колонок (правка 120): заказ — зелёным, отгрузка из готового — синим, как «Готово в Китае» */ .calc-table td.col-order{background:color-mix(in srgb,var(--good) 8%,var(--surface))} .calc-table thead th.col-order{background:color-mix(in srgb,var(--good) 14%,var(--surface-2))} .calc-table td.col-ship{background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .calc-table thead th.col-ship{background:color-mix(in srgb,var(--accent) 15%,var(--surface-2))} /* строка групп — часть шапки (правка 121): фон шапки, подпись группы — на цвете группы */ .grid tr.col-groups th{background:var(--surface-2);border-bottom:0;padding:5px var(--cell-x) 3px;white-space:nowrap} .grid tr.col-groups th.col-group{text-align:center;border-bottom:1px solid var(--border)} .grid tr.col-groups .col-group-title{font-size:12.5px;font-weight:600;color:var(--text)} .calc-table tr.col-groups th.col-order{background:color-mix(in srgb,var(--good) 14%,var(--surface-2))} .calc-table tr.col-groups th.col-ship{background:color-mix(in srgb,var(--accent) 15%,var(--surface-2))} .calc-table tr.col-groups th.col-rf{background:color-mix(in srgb,var(--warn) 16%,var(--surface-2))} .calc-table tr.col-groups th.col-way{background:color-mix(in srgb,var(--accent) 15%,var(--surface-2))} .calc-table tr.col-groups th.col-unmade{background:color-mix(in srgb,var(--text-muted) 17%,var(--surface-2))} .calc-table thead th.col-main{background:color-mix(in srgb,var(--good) 30%,var(--surface-2));color:var(--text)} /* переключатель «Страховой запас считать» (правка 114) */ .calc-method{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;position:relative;min-height:32px} .calc-method .over-group{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap} #early-orders-dialog,.early-orders-page{width:min(560px,100%);padding:0;color:var(--text);background:var(--surface)} #early-orders-dialog{max-width:calc(100% - var(--s6));max-height:calc(100% - var(--s6));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto} #early-orders-dialog::backdrop{background:var(--backdrop)} .early-orders-choice{padding:var(--s5)} .early-orders-choice h2{margin:0 0 var(--s2);font-size:20px} .early-orders-choice p{margin:0 0 var(--s3);line-height:1.45} .early-orders-scope{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:var(--s4) 0;padding:var(--s3);background:var(--surface-2);border-radius:var(--radius)} .early-orders-scope dt{color:var(--text-muted)}.early-orders-scope dd{margin:0;font-weight:600} .early-orders-path{margin-top:var(--s2);border:1px solid var(--border);border-radius:var(--radius)} .early-orders-path summary{padding:var(--s3);font-weight:650;cursor:pointer} .early-orders-path[open] summary{color:var(--accent);background:var(--surface-2)} .early-orders-body{padding:var(--s3)} .early-orders-mode+.early-orders-mode{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)} .early-orders-mode h3{margin:0 0 var(--s1);font-size:15px} .early-orders-foot{margin-top:var(--s4)} .order-omissions{margin:var(--s4) 0;padding:var(--s3) var(--s4);border:1px solid color-mix(in srgb,var(--warn) 50%,var(--border));border-radius:var(--radius)} .order-omissions h3{margin:0;font-size:15px}.order-omissions ul{list-style:none;margin:var(--s2) 0;padding:0} .order-omissions li{padding:var(--s2) 0}.order-omissions li+li{border-top:1px solid var(--border)} .order-omission-head{display:flex;justify-content:space-between;gap:var(--s3)}.order-omission-head span{white-space:nowrap;font-variant-numeric:tabular-nums} .order-omissions p{margin:var(--s2) 0 0} /* месяцы плана заказов (правка 123): галочка — сформировать заказ под месяц; после 6-го месяца и неподтверждённый план — курсивом (это расчёт программы) */ .calc-table th.month-head{text-align:center} .calc-table .month-pick{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-weight:600} .calc-table .month-pick input{margin:0 0 2px} /* галочки моделей «заказать» (правка 165): у строки — перед фото, у категории — «все модели категории» */ .calc-table .row-pick,.calc-table .group-pick{flex:none;margin:0;width:16px;height:16px;cursor:pointer;accent-color:var(--btn-primary)} .calc-table .group-pick{margin-right:var(--s3);vertical-align:middle} .pick-count:not(:empty){margin-left:var(--s2);font-weight:500} .calc-table th.month-later .month-pick{font-style:italic;font-weight:500} .calc-table td.month-calc b{font-style:italic;font-weight:500} .month-order-key{display:inline-flex;align-items:center;gap:var(--s1)} .month-order-cell{display:inline-flex;flex-direction:column;align-items:flex-end} .month-order-line{display:inline-flex;align-items:center;gap:var(--s1)} .month-assignment-mark{padding:1px 4px;border:1px solid color-mix(in srgb,var(--warn) 48%,var(--border));border-radius:4px; background:var(--warn-soft);color:var(--text);font:600 11px/1.3 var(--font);white-space:nowrap;cursor:pointer} .month-assignment-mark:hover,.month-assignment-mark:focus-visible{border-color:var(--warn)} .month-order-key{color:var(--text-muted);white-space:nowrap} .month-order-key svg,.month-order-mark svg{width:16px;height:16px;color:var(--good)} .month-order-mark{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer} .month-order-mark:hover,.month-order-mark:focus-visible{background:var(--good-soft)} .month-order-mark:focus-visible{outline:2px solid var(--focus)} .month-order-info{max-width:min(320px,90vw);padding:var(--s3) var(--s4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow);font:13px/1.5 var(--font);white-space:normal;text-align:left} .month-order-info strong{display:block;margin-bottom:var(--s1)} .month-extra-badge{display:inline-block;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--border)); border-radius:5px;padding:1px 6px;background:var(--warn-soft);color:var(--text);font:600 13px/1.35 var(--font); font-variant-numeric:tabular-nums;white-space:nowrap} .month-order-extra{cursor:pointer} .month-order-extra:hover,.month-order-extra:focus-visible{border-color:var(--warn)} .month-order-context,.month-order-breakdown{color:var(--text-muted)} .month-order-amounts{display:grid;grid-template-columns:1fr auto;gap:2px 16px;margin:var(--s2) 0} .month-order-amounts dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums} .month-order-amounts + .month-order-breakdown{border-top:1px solid var(--border);padding-top:var(--s2)} @supports (position-area:top){ .month-order-info{position-area:top;inset:auto;margin:var(--s1);position-try-fallbacks:flip-block,flip-inline} } @media (max-width:860px){.calc-method{flex-wrap:wrap}.calc-method .over-group{position:static;transform:none}} .seg{display:inline-flex;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface)} .seg-btn{border:0;background:none;padding:5px 12px;font:inherit;font-size:13px;color:var(--text);cursor:pointer} .seg-btn+.seg-btn{border-left:1px solid var(--border)} .seg-btn:hover{color:var(--accent)} .seg-btn.on{background:color-mix(in srgb,var(--good) 30%,var(--surface));color:var(--text);font-weight:600;cursor:default} .calc-table thead th.col-alt{font-weight:500} .calc-table td.model-cell .ph{vertical-align:middle;margin-right:8px} .calc-head{display:flex;gap:16px;align-items:center;margin-bottom:16px} .calc-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;color:var(--text-muted)} .calc-facts b{color:var(--text)} .grid.explain th{width:210px;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:13px} .grid tr.calc-below td{background:color-mix(in srgb,var(--warn) 9%,var(--surface))} /* Блоки «В РФ» и «Заказано» (правка 37): цветная полоса над шапкой; «Заказано» — в пути из Китая, готово и не произведено — мягким тёплым фоном и тонкой границей слева. Фон непрозрачный: шапка закреплена */ .stock-table thead tr.xl-groups th.col-rf{color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)} .stock-table .col-way{background:color-mix(in srgb,var(--warn) 6%,var(--surface))} .stock-table thead th.col-way{background:color-mix(in srgb,var(--warn) 11%,var(--surface-2));color:var(--warn-strong)} .stock-table thead tr.xl-groups th.col-way{background:color-mix(in srgb,var(--warn) 16%,var(--surface-2)); box-shadow:inset 0 3px 0 var(--warn),inset 2px 0 0 color-mix(in srgb,var(--warn) 55%,transparent)} .stock-table .col-way-start{box-shadow:inset 2px 0 0 color-mix(in srgb,var(--warn) 55%,transparent)} .stock-table tr.xl-total td.col-way{background:color-mix(in srgb,var(--warn) 15%,var(--surface));font-weight:650} .stock-table tbody tr:hover td.col-way{background:color-mix(in srgb,var(--warn) 11%,var(--surface-2))} .grid tr.group-row th.right{text-align:right} /* Телефон (правка 38): колонка модели узкая, название в две строки, без фото — рядом видны цифры */ @media (max-width: 860px){ .stock-table td.model-cell{white-space:normal;width:132px;min-width:132px;max-width:132px} .stock-table td.model-cell a.cell-link{white-space:normal} .stock-table td.model-cell .ph{display:none} } .stock-table td.model-cell .ph{vertical-align:middle;margin-right:6px} .grid td .ph-sm{vertical-align:middle} .factory-line.main{font-weight:600} .wide-form{max-width:100%;width:fit-content;overflow-x:auto} .wide-form .grid td .field{min-width:90px} .wide-form .grid td select.field{min-width:150px} .wide-form .grid td select.field[name$="-currency"]{min-width:90px} .chip{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap; margin:1px 2px 1px 0;background:var(--tone-bg);color:var(--tone-fg)} .legend-swatch.row-birthday{background:color-mix(in srgb,var(--accent) 28%,transparent)} .legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);margin:4px 0 8px} .legend-swatch{display:inline-block;width:22px;height:14px;border-radius:3px;border:1px solid var(--border)} .legend-swatch.row-attention{background:var(--surface);box-shadow:inset 3px 0 0 var(--bad)} /* Карточки под вопросом — вверху списка карточек */ .questions{border-color:color-mix(in srgb,var(--warn) 45%,transparent);margin-bottom:14px} .price-scopes{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px} .questions .decide{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .questions .decide .field.select{max-width:220px} .questions .decide-other summary{cursor:pointer;font-size:12px} /* «Карточки под вопросом» — свой экран (правка 151): рамка — на высоту окна, шапка закреплена */ .questions-wrap{max-height:calc(100vh - 150px);overflow:auto} .questions .decide{min-width:220px;flex-direction:column;align-items:flex-start} .questions .decide .inline-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .questions .decide .field.select{min-width:200px;max-width:220px} /* Кнопка справа в строке поиска — «Скачать в Excel» */ .toolbar .push-right{margin-left:auto} /* Закупочные цены: новая цена в одну строку, действующая цена — жирным */ .price-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:0 16px 16px} .price-field{display:flex;flex-direction:column;gap:4px;min-width:140px} .price-field .field{min-width:140px} .price-field.reason-field{flex:1 1 240px} .price-field.days-field,.price-field.days-field .field{min-width:0;width:120px} .safety-panel{min-width:min(100%,780px)} .safety-panel .grid{width:100%} .plan-table td,.plan-table th{white-space:nowrap;vertical-align:middle} .plan-table th.center{text-align:center} .plan-table .model-line{display:flex;align-items:center;gap:8px} .plan-table .model-line .sku{display:block} /* цвета маркетплейсов во всей программе (правки 150, 153): строка маркетплейса — 16 %, строка кабинета — 7 %, клетка «Кабинет» в строке карточки, запроса, документа — 10 %, шапка колонки маркетплейса — 16 %; класс mp-<код> (org.Marketplace.tone) даёт цвет, без него — серый */ :where(.plan-table tr.plan-market,.plan-table tr.plan-shop,.mp-market,.mp-shop,.mp-cell,.mp-head){--mp:var(--slate)} .mp-OZON{--mp:var(--ozon)} .mp-WB{--mp:var(--wb)} .mp-YM{--mp:var(--ym)} .grid tr.mp-market>td,.grid tr.group-row.mp-market>th{background-color:color-mix(in srgb,var(--mp) 16%,var(--surface))} .grid tr.mp-shop>td,.grid tr.group-row.mp-shop>th{background-color:color-mix(in srgb,var(--mp) 7%,var(--surface))} /* вложенная группа справочника (правка 157: кабинет под маркетплейсом) — с отступом; приписка — обычным шрифтом */ .grid tr.group-row[data-fold="2"] th .group-label{padding-left:var(--s5)} .grid tr.group-row .group-note{font-weight:400;color:var(--text-muted)} .grid td.mp-cell{background-color:color-mix(in srgb,var(--mp) 10%,var(--surface))} .grid thead th.mp-head{background-color:color-mix(in srgb,var(--mp) 16%,var(--surface-2))} .plan-table tr.plan-market td{background:color-mix(in srgb,var(--mp) 16%,var(--surface));font-weight:700} .plan-table tr.plan-shop td{background:color-mix(in srgb,var(--mp) 7%,var(--surface));font-weight:650; border-top:1px solid var(--rule)} /* факт — серо-голубым, расчёт и план — светло-зелёным (Дмитрий, 23.10); месяцы — линией и одной ширины */ .plan-table .col-fact{background:color-mix(in srgb,var(--accent) 6%,var(--surface))} .plan-table .col-plan{background:color-mix(in srgb,var(--good) 7%,var(--surface))} .plan-table tr.plan-market td.col-fact,.plan-table tr.plan-market td.col-plan{ background:color-mix(in srgb,var(--mp) 16%,var(--surface))} .plan-table tr.plan-shop td.col-fact,.plan-table tr.plan-shop td.col-plan{ background:color-mix(in srgb,var(--mp) 7%,var(--surface))} .plan-table thead th.col-fact{background:color-mix(in srgb,var(--accent) 13%,var(--surface-2));color:var(--accent)} .plan-table thead th.col-plan{background:color-mix(in srgb,var(--good) 14%,var(--surface-2));color:var(--good)} .plan-table tfoot td.col-fact{background:color-mix(in srgb,var(--accent) 12%,var(--surface))} .plan-table tfoot td.col-plan{background:color-mix(in srgb,var(--good) 13%,var(--surface))} .plan-table th.m-col{width:84px;min-width:84px;max-width:84px;white-space:normal;line-height:1.25} .plan-table th.m-col .muted{display:block;font-weight:400} .plan-table .m-start{border-left:1px solid var(--rule)} .plan-table tr.plan-shop td:first-child{padding-left:var(--s5)} .plan-table .plan-head{display:flex;align-items:center;gap:var(--s3)} .plan-table .plan-head .btn{margin-left:auto} .plan-table .pc-done{margin-left:auto;color:var(--good);font-weight:500} .plan-table th .pc-month{display:block;margin-left:auto;font-size:11.5px;font-weight:500} /* клетка плана (правка 60): ждёт решения — серым; принят расчёт — ✓; своя цифра — жирным и ✎ */ .plan-table td.pc-wait{color:var(--text-muted)} .plan-table td.pc-ok::after,.plan-table td.pc-own::after{display:inline-block;width:12px; margin-left:2px;font-size:11px;text-align:left} .plan-table td.pc-ok::after{content:"✓";color:var(--good)} .plan-table td.pc-own{font-weight:700} .plan-table td.pc-own::after{content:"✎";color:var(--accent)} .plan-table td.pc-wait::after{content:"";display:inline-block;width:12px;margin-left:2px} /* правка 137: подтверждённое заморожено; стрелка — куда изменился бы план, если утверждать сегодня; цветом — от заметного процента («Параметры плана продаж») */ .plan-table td.pc-up::before,.plan-table td.pc-down::before{display:inline-block;margin-right:3px;font-size:9px; color:var(--text-muted);vertical-align:1px} .plan-table td.pc-up::before{content:"▲"} .plan-table td.pc-down::before{content:"▼"} .plan-table td.pc-big.pc-up::before{color:var(--good)} .plan-table td.pc-big.pc-down::before{color:var(--bad)} /* сворачивание групп (правка 143, static/js/app.js foldTable): ▾/▸ у названия, щелчок по строке группы; над таблицей — уровни «1 2 3», как в Excel */ .grid tr.fold-hidden{display:none} .grid tr[data-fold]{cursor:pointer} .fold-sign{flex:none;width:18px;margin-right:var(--s1);padding:0;border:0;background:none;font:inherit;font-size:14px; line-height:1;color:var(--text);cursor:pointer} .fold-sign:hover{color:var(--accent)} .fold-count{font-weight:400;color:var(--text-muted)} .fold-levels{display:inline-flex;gap:var(--s1);margin:0 0 var(--s3)} .fold-level{min-width:28px;height:26px;padding:0 var(--s2);border:1px solid var(--field-border);border-radius:5px; background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer} .fold-level:hover{border-color:var(--accent);color:var(--accent)} .fold-level[aria-pressed="true"]{background:var(--btn-primary);border-color:var(--btn-primary);color:var(--on-accent)} .fold-level:disabled{opacity:.45;cursor:default} .plan-table .plan-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-left:auto} .plan-table .plan-head .plan-acts .btn{margin-left:0} .pc-pop{position:fixed;z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1); padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:6px; box-shadow:0 8px 24px var(--backdrop)} .pc-pop .link{font-size:12px;white-space:nowrap} .plan-table td.pc-edit{cursor:pointer} .plan-table td.pc-req{background-image:linear-gradient(225deg,var(--warn) 6px,transparent 6px)} .plan-table tr.row-alt>td.pc-req{background-image:linear-gradient(225deg,var(--warn) 6px,transparent 6px), linear-gradient(var(--zebra),var(--zebra))} .plan-table tr:hover>td.pc-req{background-image:linear-gradient(225deg,var(--warn) 6px,transparent 6px), linear-gradient(var(--row-hover),var(--row-hover))} .req-parts td.req-own{font-weight:700;color:var(--accent)} .req-parts .field.tiny{width:84px} .req-head{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:baseline;margin:0 0 var(--s4)} .req-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);padding:var(--s5)} .req-form .wide{grid-column:1/-1} .req-form .check-list{display:flex;flex-wrap:wrap;gap:var(--s4)} .req-form ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s4)} .req-panel{width:min(100%,900px)} /* кнопка формы — внутри рамки, по левому краю полей (27.10: «Сохранить» у входа в программу стояла на рамке) */ .req-panel .form-foot{margin:0;padding:var(--s4) var(--s5)} /* Права (правка 71) */ .rights-table{width:100%} /* права — одинаково везде (Дмитрий, 26.10): прочерк — чёрным, «смотрит» — серым, «правит» — синим */ .lvl-none{color:var(--text)} .lvl-view{color:var(--text-muted);font-weight:600} .lvl-edit{color:var(--accent);font-weight:700} /* «Роли и права» (правка 74): в клетке — слово своим цветом, щелчок переключает «— → смотрит → правит» */ /* страница ролей выровнена (Дмитрий, 26.10): колонки ролей одной ширины, таблица, полоса «Сохранить» и блок «Роли» — по ширине содержимого, с одной левой линии */ .roles-table{table-layout:fixed;width:auto} .roles-table th:first-child,.roles-table td:first-child{width:330px} .roles-table th.role-head,.roles-table td.center{width:108px} /* шапка ролей (Дмитрий, 26.10: «без хаоса»): названия одним шрифтом, прижаты к одной нижней линии, под ними — «N чел.»; удалить роль без людей — «×» в углу при наведении */ .roles-table th.role-head{white-space:normal;line-height:1.25;vertical-align:bottom;padding-top:var(--s3)} .role-title{display:flex;align-items:flex-end;justify-content:center;min-height:36px} .role-remove{position:absolute;top:2px;right:4px;width:18px;height:18px;padding:0;border:0;border-radius:50%; background:transparent;color:var(--text-muted);font:inherit;font-size:14px;line-height:18px;cursor:pointer;opacity:0} .roles-table th.role-head:hover .role-remove,.role-remove:focus-visible{opacity:1} .role-remove:hover{background:var(--bad-soft);color:var(--bad)} form[data-roles] .table-scroll,form[data-roles] .plan-bar{width:fit-content;max-width:100%} /* без своей прокрутки (Дмитрий, 26.10): таблица во всю высоту, шапка прилипает к верху окна */ form[data-roles] .table-scroll{max-height:none;overflow:visible} .roles-table thead th{position:sticky;top:0;z-index:3} .role-remove{font-size:11.5px} .roles-table .role-people{display:block;color:var(--text-muted);font-size:11.5px;font-weight:400} .roles-table td{padding-top:5px;padding-bottom:5px;vertical-align:middle} /* в клетке — слово своим цветом без рамки; при наведении — рамка и стрелка, щелчок открывает список (Дмитрий, 26.10: «выпадающее меню лучше, но вид уже лучше — давай что-то совместное») */ .lvl-cell{display:inline-block;min-width:74px;padding:2px 8px;font-size:12.5px;line-height:20px} .lvl-wrap{position:relative;display:inline-block} .lvl-wrap::after{content:"▾";position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:10px; color:var(--text-muted);opacity:0;pointer-events:none} .lvl-wrap:hover::after,.lvl-wrap:focus-within::after{opacity:1} .lvl-select{-webkit-appearance:none;appearance:none;min-width:88px;padding:2px 18px;border:1px solid transparent; border-radius:6px;background:transparent;font:inherit;font-size:12.5px;line-height:20px;text-align:center; text-align-last:center;cursor:pointer} .lvl-wrap:hover .lvl-select{border-color:var(--border);background:var(--surface-2)} .lvl-select:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .lvl-select option{background:var(--surface)} .lvl-select.changed{border-color:var(--accent);background:var(--accent-soft)} .lvl-select{width:98px;min-width:0} .lvl-select.lvl-view{font-weight:600} .lvl-select.lvl-edit{font-weight:700} td.has-hint{text-decoration:underline dotted var(--rule);text-underline-offset:3px;cursor:help} .role-name{display:block;width:100%;min-height:0;margin:0;padding:1px 4px;border:1px solid transparent;border-radius:6px; background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:600;line-height:1.25; text-align:center;resize:none;overflow:hidden} .role-name:hover{border-color:var(--border);background:var(--surface)} .role-name:focus{border-color:var(--focus);background:var(--surface);outline:none} .role-name.changed{border-color:var(--accent);background:var(--accent-soft)} .role-fixed{display:block;padding:1px 4px;border:1px solid transparent;color:var(--text);font-size:13px;font-weight:600} .roles-table .role-people{margin-top:2px} /* «Новая роль» — в шапке страницы, форма раскрывается под кнопкой */ .roles-add{position:relative} .roles-add > summary{list-style:none;cursor:pointer} .roles-add > summary::-webkit-details-marker{display:none} .roles-add-form{position:absolute;right:0;top:calc(100% + var(--s2));z-index:60;display:grid;gap:var(--s3);width:280px; padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:0 8px 24px var(--backdrop)} .roles-table td.center,.roles-table th.center{text-align:center} .roles-table .right-on{color:var(--good);font-weight:700} .roles-table td:first-child{min-width:300px;white-space:normal} .plan-table tr.plan-launch td:first-child{padding-left:var(--s6)} /* правка 129: «План продаж по менеджерам» — кабинет под маркетплейсом; отборы плана — по содержимому, не во всю ширину */ .plan-by-managers tr.plan-card td:first-child{padding-left:var(--s6)} .toolbar .plan-filter{width:auto;max-width:260px;flex:0 0 auto} .toolbar .link{white-space:nowrap} .plan-table tr.plan-launch td.pc-launch{font-style:italic} .launch-months{display:flex;flex-wrap:wrap;gap:var(--s4)} .launch-months .settings-field{width:110px} .req-form #id_months,.req-form #id_mode{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)} .req-form #id_months label,.req-form #id_mode label{display:inline-flex;align-items:center;gap:var(--s2);color:var(--text)} .plan-table td.pc-edit:hover{box-shadow:inset 0 0 0 1px var(--accent)} .plan-table td.pc-changed{box-shadow:inset 0 0 0 2px var(--accent);font-weight:700;color:var(--accent)} .plan-table td.pc-changed::after{content:""} .plan-table td.pc-changed::before{content:none} .plan-table td.pc-freed::after{content:"↺";display:inline-block;width:12px;margin-left:2px;font-size:11px} /* правка 141: «План продаж в деньгах» — по месяцу три колонки: штуки, средний чек, выручка; свой средний чек — жирным */ .money-table thead tr:nth-child(2) th{min-width:58px;font-weight:500} .money-table td.mp-own{font-weight:700;color:var(--accent)} .money-table td.mp-edit{cursor:pointer} /* выручка месяца в «Итого» — плашкой темнее строки (правка 160) */ .money-table .rev-total{display:inline-block;padding:var(--s1) var(--s3);border-radius:6px;font-weight:700; background:color-mix(in srgb,var(--accent) 26%,var(--surface))} .money-table td.col-plan .rev-total{background:color-mix(in srgb,var(--good) 28%,var(--surface))} .money-table td.mp-edit:hover{box-shadow:inset 0 0 0 1px var(--accent)} .plan-table .pc-input{width:70px;min-width:0;padding:2px 4px;text-align:right;font:inherit} /* шапка экранов плана продаж (правка 152): отбор слева, сведения справа — одной рамкой; ниже — срок и полоска подтверждённого */ .plan-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin:0 0 var(--s4); padding:var(--s3) var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} .plan-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)} .plan-filters .plan-filter{width:auto;max-width:260px;flex:0 0 auto} .plan-count{display:inline-block;min-width:22px;padding:0 var(--s2);border-radius:9px;background:var(--surface-3); color:var(--text-muted);font-size:12px;text-align:center} .plan-facts{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:0 0 0 auto} .plan-facts div{display:flex;flex-direction:column;gap:1px} .plan-facts dt{font-size:11.5px;color:var(--text-muted)} .plan-facts dd{margin:0;font-size:13.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap} .plan-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s6);margin:0 0 var(--s4);padding:0 var(--s2)} .plan-due{font-size:14px} .plan-done{color:var(--good);font-weight:600} .plan-progress{display:inline-flex;align-items:center;gap:var(--s3);font-size:13px;color:var(--text-muted)} .plan-progress b{color:var(--text)} .plan-meter{display:inline-block;width:120px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden} .plan-meter i{display:block;height:100%;background:var(--good)} .plan-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3); margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--rule);border-radius:8px} .plan-bar .field{width:auto;min-width:200px} .plan-bar[hidden]{display:none} .plan-table tr.plan-card td:first-child{padding-left:var(--s6)} .row-current td{font-weight:600} .queue-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .queue-actions form{margin:0} .form-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} .toolbar .list-filter{width:auto;max-width:240px} .toolbar .muted{white-space:nowrap} .questions > .form-actions{padding:0 16px 16px;margin-top:10px} /* шкала комиссии канала оплаты (правка 83) */ .steps-table{width:auto}.steps-table .field{width:170px;text-align:right} .rate-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4);padding:var(--s5)} .rate-form .settings-field .field{width:140px;text-align:right} .rates-table{width:auto} /* заказы фабрикам (правка 85) */ .status-chip{display:inline-block;padding:1px var(--s3);border-radius:10px;font-size:12px;background:var(--surface-3);color:var(--text);white-space:nowrap} .status-chip.st-draft{background:var(--violet-soft);color:var(--violet)} .status-chip.st-approved{background:var(--good-soft);color:var(--good)} .status-chip.st-approval,.status-chip.st-rev_approval{background:var(--warn-soft);color:var(--warn-strong)} .status-chip.st-placed{background:var(--accent-soft);color:var(--accent)} .status-chip.st-closed{background:var(--good-soft);color:var(--good)} .status-chip.st-cancelled{color:var(--text-muted)} .facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3) var(--s5);margin:0;padding:var(--s4) var(--s5)} .facts dt{font-size:12px;color:var(--text-muted)}.facts dd{margin:0} .order-lines .qty-input{width:84px;text-align:right}.order-lines .qty-input.changed{border-color:var(--warn-strong)} .order-lines .reason-select{min-width:150px}.order-lines .note-input{min-width:140px} .order-lines tr.row-zero td{color:var(--text-muted)} .order-lines tr:target .qty-input{outline:2px solid var(--focus);outline-offset:1px} .note-chip{display:inline-block;margin:1px var(--s2) 1px 0;padding:0 var(--s2);border-radius:6px;font-size:11.5px;background:var(--warn-soft);color:var(--warn-strong);white-space:nowrap} .blockers{padding:0 var(--s5)} .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)} .danger-row{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:flex-end;margin:var(--s4) 0} .order-head{width:min(100%,1180px)} .action-row .field{width:auto;flex:1 1 220px;max-width:340px} .toolbar .status-filter{width:auto;max-width:240px;flex:0 0 auto} /* партии заказа (правка 86) */ .split-tools{padding:0 var(--s5) var(--s3)} .split-tools .share{width:72px;flex:0 0 auto} .split-tools .new-form{width:auto;flex:0 0 auto} .tools-gap{flex:1 1 auto} .table-scroll{overflow-x:auto} .batch-matrix .batch-head{min-width:190px;vertical-align:top;font-weight:400} .batch-matrix .batch-head .field{width:100%;margin-top:var(--s1)} .batch-matrix .batch-head.pay-cash{box-shadow:inset 0 3px 0 var(--warn)} .batch-matrix .batch-head.pay-bank{box-shadow:inset 0 3px 0 var(--accent)} .batch-code{font-weight:700;font-size:14px;color:var(--text);display:flex;gap:var(--s3);align-items:baseline} .batch-matrix .cell{width:84px;text-align:right} .batch-matrix .cell.hand{background:var(--warn-soft)} .hand-text{border-bottom:1px dashed var(--warn-strong)} .link-btn{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font-size:12px;font-weight:400} .order-form .form-foot,#partii .form-foot{margin:0;padding:var(--s4) var(--s5)} .batch-matrix td:first-child{min-width:190px} .pf-letter{font-weight:400} /* оплата по партиям (правка 87) */ .pay-table .batch-first td{border-top:2px solid var(--rule)} .pay-table tr.pay-paid td{color:var(--text-muted)} .status-chip.st-pay-approved{background:var(--warn-soft);color:var(--warn-strong)} .status-chip.st-pay-paid{background:var(--good-soft);color:var(--good)} .was{color:var(--text-muted);font-size:11.5px;text-decoration:line-through;margin-left:var(--s2)} .inline-form{display:inline-flex;gap:var(--s2);align-items:center;margin:0} .btn-sm{padding:2px var(--s3);min-height:28px;font-size:12.5px} .pay-edit{display:inline-block;margin-left:var(--s2)} .pay-edit-form{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-end;padding:var(--s3) 0} .pay-edit-form .num{width:110px} .pay-status{min-width:210px} .pay-status .inline-form,.pay-status .pay-edit{margin-top:var(--s1)} .pay-status .inline-form{display:flex} /* правка размещённого заказа (правка 88) */ .revision-box{padding:0 var(--s5) var(--s3)} .revision-box .changes{margin:var(--s2) 0 0;padding-left:var(--s6);font-size:13px} .revision-box .changes li{margin:var(--s1) 0} .status-chip.st-revision{background:var(--teal-soft);color:var(--teal)} /* реестр заказов: шкала времени и «что приедет когда» (правка 89) */ .timeline{display:grid;gap:var(--s6);margin-bottom:var(--s6)} .tl-section{width:100%;min-width:0;margin:0;overflow:hidden} .tl-goods{--section-accent:var(--accent);--section-tint:var(--accent-soft)} .tl-payments{--section-accent:var(--good);--section-tint:var(--good-soft)} .tl-section-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);background:var(--section-tint);border-bottom:1px solid var(--border)} .tl-symbol{width:26px;height:26px;flex:none;fill:var(--section-accent)} .tl-section-head h2{margin:0;font-size:20px;line-height:1.2;color:var(--text)} .tl-section-head p{margin:var(--s1) 0 0;color:var(--text-muted);font-size:13px} .tl-chart-scroll{overflow-x:auto;margin:0 var(--s5);padding:var(--s3) 0} .tl-chart-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .tl-head .tl-name{font-size:12px;font-weight:600;color:var(--text-muted)} .tl-grid{min-width:760px} .tl-head,.tl-row{display:flex;align-items:center} .tl-name{width:220px;flex:none;padding-right:var(--s3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tl-row{border-top:1px solid var(--border);min-height:32px} .tl-order{background:var(--surface-2,transparent)} .tl-child .tl-name{padding-left:var(--s5)} .tl-track{position:relative;flex:1 1 auto;height:32px} .tl-axis{height:26px} .tl-month{position:absolute;top:6px;font-size:12px;color:var(--text-muted);padding-left:var(--s2);border-left:1px solid var(--border)} .tl-today-label{position:absolute;top:-4px;font-size:11px;color:var(--bad);transform:translateX(-50%);background:var(--surface);padding:0 var(--s1)} .tl-mline{position:absolute;top:0;bottom:0;border-left:1px solid var(--border)} .tl-now{position:absolute;top:0;bottom:0;border-left:2px solid var(--bad);z-index:2} .tl-bar{position:absolute;top:10px;height:12px;border-radius:3px} .st-prod{background:var(--tl-prod)}.st-wait{background:var(--tl-wait)}.st-road{background:var(--tl-road)} .st-cust{background:var(--tl-cust)}.st-acc{background:var(--tl-acc)} .tl-bar.plan,.tl-sample.plan,.tl-pbar.ps-plan,.tl-sample.ps-plan{background-image:repeating-linear-gradient(45deg,var(--hatch) 0 3px,transparent 3px 6px)} .tl-bar.draft,.tl-sample.draft,.tl-pbar.ps-draft,.tl-sample.ps-draft{opacity:.65;outline:1px dashed var(--text-muted);outline-offset:1px} .tl-sale{position:absolute;top:8px;font-size:11px;padding-left:var(--s2);white-space:nowrap;color:var(--text)} .tl-money{min-height:96px}.tl-pay{height:96px} .tl-pbar{position:absolute;border-radius:2px 2px 0 0} .pk-prepay{background:var(--tl-prepay)}.pk-rest{background:var(--tl-road)}.pk-customs{background:var(--tl-cust)} .pk-cargo{background:var(--tl-wait)} .tl-pbar.ps-approved,.tl-sample.ps-approved{box-shadow:inset 0 0 0 2px var(--text)} .tl-legend{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:var(--s2) var(--s4);margin:0;padding:var(--s3) var(--s5);border-top:1px solid var(--border)} .tl-legend dt{font-size:12px;font-weight:600;color:var(--text-muted)} .tl-legend dd{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:0;min-width:0} @media (max-width:600px){ .tl-grid{min-width:640px} .tl-name{width:132px} .tl-legend{grid-template-columns:1fr;gap:var(--s1)} .tl-legend dd+dt{margin-top:var(--s2)} } .tl-key{display:inline-flex;align-items:center;gap:var(--s2);max-width:100%;font-size:13px;line-height:1.35} .tl-key i{display:inline-block;flex:0 0 18px;height:10px;border-radius:2px} .tl-key .tl-sample{background-color:var(--text-muted)} .legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s4);font-size:12px;color:var(--text-muted)} .legend i{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:var(--s2);vertical-align:-1px} .arrive-table td{white-space:nowrap} .arr-cell{display:inline-block;padding:1px var(--s2);border-radius:4px;margin-left:var(--s1);font-variant-numeric:tabular-nums} .arr-cell sub{font-size:10px;color:var(--text-muted);margin-left:2px} .arr-road,.legend i.arr-road{background:var(--tl-road-soft)}.arr-ready,.legend i.arr-ready{background:var(--tl-wait-soft)} .arr-prod,.legend i.arr-prod{background:var(--surface-3)} .arr-draft,.legend i.arr-draft{outline:1px dashed var(--text-muted)} .panel .legend{padding:0 var(--s5) var(--s4)} .panel-note{padding:0 var(--s5) var(--s4)} /* отгрузка партий (правка 90) */ .ship-table td{vertical-align:top} .ship-form summary{list-style:none;display:inline-block;cursor:pointer} .ship-form summary::-webkit-details-marker{display:none} .ship-form[open] summary{margin-bottom:var(--s3)} .ship-lines{width:auto;margin-bottom:var(--s3)}.ship-lines .num{width:90px;text-align:right} .ship-foot{padding:0} /* платёжный календарь (правка 92) */ .cal-panel{width:100%} .cal-table{font-variant-numeric:tabular-nums} .cal-table th,.cal-table td{white-space:nowrap} /* предварительные платежи — заказ ещё не подтверждён фабрикой (правка 123): курсивом, тёплым цветом */ .cal-table tr.cal-prelim td{font-style:italic;color:var(--warn)} .cal-table .cal-name{position:sticky;left:0;background:var(--surface);min-width:170px;z-index:1} .cal-table thead th.cal-name,.cal-table tfoot th.cal-name{z-index:2} .cal-table thead th.cal-name{background:var(--surface-2)} .cal-table tfoot th.cal-name{background:var(--surface)} .cal-table th.cal-now{color:var(--accent)} .cal-table td.cal-late{color:var(--bad);font-weight:600} .cal-table tr.cal-sub td{font-weight:650;border-top:1px solid var(--rule)} .cal-table th.right{text-align:right} /* отметка оплаты: сколько рублей ушло на самом деле (правка 93) */ .pay-status .field.rub-paid{width:120px} /* План по карточкам: компактная рабочая область, единый контекст подтверждения. */ .sales-plan-page{min-width:0} .sales-plan-page .plan-workspace{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s6); padding:var(--s5);margin-bottom:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} .sales-plan-page .plan-card-filters{display:block;flex:1 1 460px;min-width:0} .sales-plan-page .plan-filter-fields{display:flex;flex-wrap:wrap;gap:var(--s4)} .sales-plan-page .plan-field-label{display:flex;flex:1 1 180px;max-width:280px;min-width:0;flex-direction:column; gap:var(--s2);font-size:12px;color:var(--text-muted)} .sales-plan-page .plan-field-label .field{width:100%;max-width:100%;font-size:13px;color:var(--text)} .sales-plan-page .plan-filter-checks{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4)} .sales-plan-page .plan-filter-checks .xl-check{font-size:12px;color:var(--text-muted)} .sales-plan-page .plan-facts{gap:var(--s4) var(--s5);margin-left:0;flex:0 1 auto} .sales-plan-page .plan-facts dd{font-size:14px;font-weight:650} .sales-plan-page .plan-approval-status{margin:0 0 var(--s5);padding:var(--s3) var(--s4);gap:var(--s3) var(--s5); border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} .sales-plan-page .plan-status-label{font-size:13px;font-weight:600} .sales-plan-page .plan-due{font-size:12px;color:var(--text-muted)} .sales-plan-page .plan-due b{color:var(--text)} .sales-plan-page .plan-wait-count{display:inline-flex;align-items:center;gap:var(--s3);font-size:12px} .sales-plan-page .plan-progress{margin-left:auto;font-size:12px} .sales-plan-page .plan-meter{width:72px} .sales-plan-page .plan-table-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s3) var(--s5);margin-bottom:var(--s3)} .sales-plan-page .plan-view-controls,.sales-plan-page .plan-table-options{display:flex;align-items:center;gap:var(--s3)} .sales-plan-page .plan-view-controls{flex-wrap:wrap} .sales-plan-page .plan-share-hint{cursor:help} :is(.sales-plan-page,.ps-plan) .plan-fact-depth{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s3)} :is(.sales-plan-page,.ps-plan) .plan-fact-depth .seg{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:8px} :is(.sales-plan-page,.ps-plan) .plan-fact-depth .seg-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; width:40px;height:32px;padding:0;font-size:12px;font-weight:600;line-height:1;text-decoration:none;color:var(--accent);background:var(--surface)} :is(.sales-plan-page,.ps-plan) .plan-fact-depth .seg-btn:hover{background:var(--accent-soft)} :is(.sales-plan-page,.ps-plan) .plan-fact-depth .seg-btn.on{background:var(--btn-primary);color:var(--on-accent)} :is(.sales-plan-page,.ps-plan) .plan-fact-depth .seg-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} :is(.sales-plan-page,.ps-plan) .plan-fact-depth .seg-btn.on:focus-visible{outline-color:var(--on-accent)} :is(.sales-plan-page,.ps-plan) .plan-table .col-fact.m-col{min-width:76px;width:76px} :is(.sales-plan-page,.ps-plan) .plan-table .col-fact{padding-left:var(--s3);padding-right:var(--s3);font-variant-numeric:tabular-nums} :is(.sales-plan-page,.ps-plan) .fact-partial{font-size:10px;line-height:0;vertical-align:super;color:var(--text-muted)} /* Общая правая ось чисел: статус и частичный факт не сдвигают значение. */ :is(.sales-plan-page,.ps-plan) .plan-table :is(th,td).right{ text-align:right;padding-left:var(--s3);padding-right:var(--s3);font-variant-numeric:tabular-nums} :is(.sales-plan-page,.ps-plan) .plan-table th.center{text-align:center} :is(.sales-plan-page,.ps-plan) .plan-table td.right{position:relative;vertical-align:middle} :is(.sales-plan-page,.ps-plan) .plan-table td.pc::after{ position:absolute;top:var(--s1);left:var(--s1);width:12px;margin:0;font-size:10px;line-height:12px} :is(.sales-plan-page,.ps-plan) .plan-table :is(td.pc-up,td.pc-down)::before{ position:absolute;bottom:var(--s1);left:var(--s1);margin:0;font-size:8px;line-height:10px} :is(.sales-plan-page,.ps-plan) .plan-table .fact-partial{display:inline-block;width:0;position:relative;left:var(--s1)} :is(.sales-plan-page,.ps-plan) .plan-table .rev-total{padding:var(--s1) var(--s2);margin-right:calc(-1 * var(--s2))} :is(.sales-plan-page,.ps-plan) .plan-table .pc-input{ width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:var(--s1) var(--s2);margin-right:-5px; text-align:right;font-variant-numeric:tabular-nums} .sales-plan-page .fold-levels{margin:0;gap:0;border:1px solid var(--border);border-radius:8px;overflow:hidden} .sales-plan-page .fold-level{height:32px;padding:var(--s2) var(--s4);border:0;border-radius:0;font-size:12px;font-weight:500} .sales-plan-page .fold-level[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:650} .sales-plan-page .fold-level:focus-visible{outline-offset:-3px} .sales-plan-page .plan-help{position:relative;font-size:12px} .sales-plan-page .plan-help summary{padding:var(--s2) var(--s3);border-radius:6px;cursor:pointer;color:var(--text-muted)} .sales-plan-page .plan-help summary:hover,.sales-plan-page .plan-help[open] summary{color:var(--accent);background:var(--accent-soft)} .sales-plan-page .plan-help-content{position:absolute;right:0;top:calc(100% + 8px);z-index:15;width:min(460px,calc(100vw - 48px)); padding:var(--s5);border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);color:var(--text)} .sales-plan-page .plan-help-content p{margin:0 0 var(--s4);line-height:1.5} .sales-plan-page .plan-help-content p:last-child{margin-bottom:0;color:var(--text-muted)} .sales-plan-page .plan-legend{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:var(--s3)} .sales-plan-page .plan-legend li{display:flex;gap:var(--s3);align-items:center} .sales-plan-page .plan-symbol{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:24px; border:1px solid var(--border);border-radius:4px;font-weight:600;background:var(--surface-2)} .sales-plan-page .plan-symbol-wait{color:var(--text-muted);font-weight:400} .sales-plan-page .plan-symbol-ok{color:var(--good)} .sales-plan-page .plan-symbol-own{color:var(--accent)} .sales-plan-page .plan-symbol-request{color:var(--warn)} .sales-plan-page .plan-hidden-note{margin:0 0 var(--s3);font-size:12px;color:var(--text-muted)} .sales-plan-page .plan-card-scroll{max-height:calc(100dvh - 340px);min-height:240px;scroll-padding-top:90px} .sales-plan-page .plan-table .plan-name-col,.sales-plan-page .plan-table td:first-child{width:392px;min-width:392px;max-width:392px;white-space:normal} .sales-plan-page .plan-table .plan-head{display:grid;grid-template-columns:18px minmax(0,1fr) 156px;align-items:center;gap:var(--s1) var(--s3)} .sales-plan-page .plan-table tr.plan-market>td,.sales-plan-page .plan-table tr.plan-shop>td{padding-top:var(--s1);padding-bottom:var(--s1)} .sales-plan-page .plan-table .plan-head .fold-sign{grid-column:1;grid-row:1 / span 2;margin-right:0} .sales-plan-page .plan-group-name{display:contents} .sales-plan-page .plan-group-title{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere} .sales-plan-page .plan-group-name .small{grid-column:2 / -1;grid-row:2;display:block;min-width:0;font-weight:400;font-size:11px;overflow-wrap:anywhere} .sales-plan-page .plan-table .plan-acts{grid-column:3;grid-row:1;margin-left:auto;gap:var(--s3);width:156px;flex:0 0 156px;max-width:156px;flex-direction:column;align-items:stretch} .sales-plan-page .plan-table .plan-acts .btn{width:100%;padding:2px var(--s3);min-height:26px;font-size:12px;white-space:normal} .sales-plan-page .plan-table .plan-acts .pc-done{margin-left:0;text-align:center} .sales-plan-page .plan-table .plan-acts .link{font-size:11px;text-align:center} .sales-plan-page .plan-table tr.plan-card td:first-child{padding-left:var(--s4)} .sales-plan-page .plan-model-name{min-width:0;overflow-wrap:anywhere;line-height:1.35} .sales-plan-page .plan-model-name .sku{font-size:11px;margin-top:var(--s1);color:var(--text-muted)} .sales-plan-page .plan-table .ph{flex:none} .sales-plan-page .plan-table td.pc-edit:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} .sales-plan-page .plan-table td.pc-edit:focus-within{position:relative;z-index:4} .sales-plan-page.plan-facts-hidden .plan-table .col-fact{display:none} .sales-plan-page .plan-save-state{display:flex;flex-direction:column;gap:var(--s1);margin-right:auto} .sales-plan-page .plan-bar{bottom:var(--s3);z-index:6;border-color:var(--accent)} .sales-plan-page .plan-bar .field{min-width:140px;flex:1;max-width:280px} .sales-plan-page .plan-bar .plan-bar-count{font-size:13px} @media(max-width:860px){ .sales-plan-page .plan-workspace{gap:var(--s4);padding:var(--s4)} .sales-plan-page .plan-card-filters{flex-basis:100%} .sales-plan-page .plan-field-label{flex-basis:140px;max-width:none} .sales-plan-page .plan-facts{width:100%;justify-content:space-between;border-top:1px solid var(--border);padding-top:var(--s3);gap:var(--s3)} .sales-plan-page .plan-facts dt{font-size:11px} .sales-plan-page .plan-facts dd{font-size:12px} .sales-plan-page .plan-approval-status{gap:var(--s3);padding:var(--s3)} .sales-plan-page .plan-progress{margin-left:0} .sales-plan-page .plan-status-label{flex-basis:100%} .sales-plan-page .plan-table-tools{gap:var(--s3)} .sales-plan-page .plan-view-controls{flex-wrap:wrap} .sales-plan-page .plan-table-options{margin-left:auto} .sales-plan-page .plan-card-scroll{max-height:65dvh} .sales-plan-page .plan-table .plan-name-col,.sales-plan-page .plan-table td:first-child{width:280px;min-width:280px;max-width:280px} .sales-plan-page .plan-table .stick-left{position:static!important} .sales-plan-page .plan-table thead .stick-left{position:sticky!important;left:auto!important} .sales-plan-page .plan-bar{bottom:64px} .sales-plan-page .plan-save-state{flex-basis:100%} } .sales-plan-page .plan-table tr.plan-launch a.cell-link{white-space:normal;overflow-wrap:anywhere} .sales-plan-page .plan-card-scroll{width:fit-content} @media(max-width:860px){ .sales-plan-page .plan-table .plan-head{grid-template-columns:18px minmax(0,1fr)} .sales-plan-page .plan-group-title{grid-column:2} .sales-plan-page .plan-table .plan-acts{grid-column:2;grid-row:3;flex-basis:auto;margin-left:0;max-width:none;align-items:flex-start} .sales-plan-page .plan-table .plan-acts .btn{width:156px;max-width:100%} }