/* ===== Дизайн-система PromParser поверх Pico.css v1 ===== Идёт после pico.min.css. Токены повторяют специфичность Pico (:root:not([data-theme=dark])), иначе его тема перебивает нашу; тема принудительно светлая (data-theme="light" на ). Раскладка: левый сайдбар (навигация + аккаунт) + рабочая область. Шрифты завендорены локально (fonts/), без CDN. */ /* ---------- Шрифты ---------- */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/golos-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/golos-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/golos-cyrillic-500.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/golos-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/golos-cyrillic-600.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/golos-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/golos-cyrillic-700.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/golos-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/mono-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/mono-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/mono-cyrillic-500.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/mono-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/mono-cyrillic-600.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/mono-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/mono-cyrillic-700.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/mono-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2116,U+2122; } /* ---------- Токены ---------- */ :root:not([data-theme="dark"]), :root[data-theme="light"] { --primary: #f5be0b; /* яркая жёлтая заливка (кнопки, active) */ --primary-hover: #e8ae00; --primary-focus: rgba(217, 164, 6, .22); --primary-inverse: #241c05; /* тёмный текст на жёлтом — читаемо */ --on-primary: #241c05; --primary-ink: #8a6608; /* тёмное золото — текст/ссылки на белом */ --primary-deep: #d9a406; /* иконки, прогресс, фокус-обводка */ --primary-soft: #fdf3d0; /* фон активного пункта меню, чипов */ --primary-tint: #fdf9e9; /* лёгкая подсветка строк на hover */ --background-color: #eceef1; --color: #33414d; --muted-color: #616f7c; /* AA на белом (5.16:1) для функц. текста: артикулы, навигация */ --faint: #6b7683; /* AA (≈4.5:1) для мелких меток; было #94a3b1 (2.6:1) */ --h1-color: #1b2732; --h2-color: #1b2732; --h3-color: #1b2732; --font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --border-radius: var(--r-sm); --font-size: 15px; --spacing: .9rem; --typography-spacing-vertical: 1.1rem; --form-element-border-color: #adb8c2; /* ≈3:1 (WCAG 1.4.11) — граница поля видна на белой карточке */ --form-element-active-border-color: var(--primary-deep); --form-element-focus-color: var(--primary-focus); --form-element-spacing-vertical: .5rem; --form-element-spacing-horizontal: .75rem; --ink: #1b2732; --line: #dde3e9; --line-soft: #eef1f4; --surface: #fff; --surface-dim: #f6f8fa; --danger: #dc2626; --danger-dim: #fdeceb; --danger-ink: #b91c1c; /* текст статуса на -dim (темнее --danger ради контраста) */ --danger-border: #f6cccc; /* граница danger-hover */ --ok: #16a34a; --ok-dim: #e7f6ec; --ok-ink: #157a3a; /* текст/точка статуса «в наличии» на -dim */ --warn-dim: #fdf3d0; --primary-border: #ecd9a0; /* граница жёлто-фоновых элементов (active, hover икон-кнопки) */ /* Нейтральные заливки и «чернила» контролов (раньше — россыпь близких hex) */ --fill-neutral: #eef1f4; /* фон нейтральных чипов/бейджей/пилюль; НЕ путать с --line-soft (границы) */ --control-ink: #3a4753; /* текст ghost-кнопок, топбара, пагинации */ --control-ink-soft: #566472; /* иконки в строках, нейтральные чипы */ --line-strong: #c4ccd4; /* граница ghost-контролов при наведении */ --shadow-1: 0 1px 2px rgba(20, 30, 42, .05); --shadow-2: 0 10px 28px -14px rgba(20, 30, 42, .16); --shadow-cta: 0 1px 2px rgba(20, 30, 42, .06), 0 4px 12px -5px rgba(217, 164, 6, .6); --ease: cubic-bezier(.2, .7, .3, 1); /* Шкала радиусов (была россыпь 4–14px) */ --r-xs: 6px; /* превью-фото, мелкие чипы */ --r-sm: 8px; /* кнопки, инпуты, икон-кнопки, топбар, пагинация */ --r-md: 10px; /* comp-btn, подгруппы */ --r-lg: 12px; /* карточки, модалки, группы */ --r-pill: 999px; /* Шкала слоёв (легенда перекрытий) */ --z-topbar: 20; --z-scrim: 50; --z-drawer: 60; --z-modal: 150; --z-lightbox: 200; --side-w: 246px; } html { font-size: 15px; } body { font-family: var(--font-family); background: var(--background-color); background-image: radial-gradient(920px 380px at 22% -12%, rgba(245, 190, 11, .07), transparent 60%); color: var(--color); min-height: 100vh; } body.app { display: grid; grid-template-columns: var(--side-w) 1fr; } .muted { color: var(--muted-color); } /* ---------- Сайдбар ---------- */ .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: .7rem; padding: 1.05rem 1.15rem .95rem; border-bottom: 1px solid var(--line-soft); text-decoration: none; } .brand:hover { background: transparent; } /* Локап бренда «ziphol ЗАКУПКИ» — инлайновый SVG (см. partials/brand_lockup.html): тёмная плашка + янтарный знак ziphol + бейдж-корзина + надпись. Надпись рендерим шрифтом приложения (Golos Text), иначе SVG взял бы системный фолбэк. */ /* Явная ширина: инлайновый SVG с width:auto во flex-контейнере схлопывался в width:0 (Chromium) и логотип был не виден. viewBox 440×120 → при height:40px ширина 147px (40×440/120). flex:0 0 auto — чтобы контейнер не сжимал. */ .brand-lockup { display: block; height: 40px; width: 147px; flex: 0 0 auto; } .brand-lockup text { font-family: var(--font-family); } /* Аккаунт — под логотипом */ .account { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.15rem; border-bottom: 1px solid var(--line-soft); } .avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--primary-soft); border: 1px solid var(--primary-border); border-radius: var(--r-sm); font-family: var(--font-mono); font-weight: 700; font-size: .72rem; color: var(--primary-ink); } .account-who { font-size: .82rem; font-weight: 500; color: var(--ink); line-height: 1.25; } .account-who small { display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--faint); font-weight: 400; } .account form { margin: 0 0 0 auto; } .logout-btn { width: 1.9rem; height: 1.9rem; padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--faint); } .logout-btn:hover { background: var(--danger-dim); border-color: var(--danger-border); color: var(--danger); } .logout-btn .icon { margin: 0; width: 1rem; height: 1rem; } /* Навигация */ .sidenav { flex: 1; overflow-y: auto; padding: .55rem .7rem; } .nav-group { margin: .95rem .55rem .28rem; font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); } .nav-group:first-child { margin-top: .35rem; } .sidenav a { display: flex; align-items: center; gap: .62rem; padding: .5rem .6rem; border-radius: var(--r-sm); border-left: 2px solid transparent; color: var(--muted-color); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); } .sidenav a .icon { width: 1rem; height: 1rem; flex: none; opacity: .8; } .sidenav a:hover { background: #f1f4f6; color: var(--ink); } .sidenav a.on { background: var(--primary-soft); color: var(--primary-ink); border-left-color: var(--primary); font-weight: 600; } .sidenav a.on .icon { opacity: 1; } .sidenav a .badge { margin-left: auto; } .sidefoot { padding: .85rem 1.3rem 1.1rem; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em; color: var(--faint); } /* ---------- Верхний бар ---------- */ .workspace { grid-column: 2; min-width: 0; display: flex; flex-direction: column; } body.guest .workspace { grid-column: auto; } .topbar { position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: .6rem; min-height: 3.5rem; padding: .5rem 2rem; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; } .topbar-link { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--control-ink); font-size: .87rem; font-weight: 500; text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .topbar-link .icon { width: 1rem; height: 1rem; opacity: .85; } .topbar-link:hover { background: var(--surface-dim); border-color: var(--line-strong); color: var(--ink); } .topbar-link.on { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-ink); } .topbar-link.on .icon { opacity: 1; } .topbar-link .badge { margin-left: .05rem; } /* Слот бейджа всегда в DOM (для OOB-обновления 0→1); пустой — не занимает места */ .badge-slot:empty { display: none; } /* На активной (жёлто-фоновой) кнопке жёлтый бейдж сливался — делаем его тёмным. */ .topbar-link.on .badge { background: var(--primary-ink); color: #fff; } /* ---------- Рабочая область ---------- */ main.content { width: 100%; max-width: 1400px; margin-inline: auto; padding: 1.6rem 2rem 3.5rem; } body.guest { display: block; } body.guest main.content { max-width: none; padding-top: 2rem; } main.content > h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: .3rem; color: var(--ink); } main.content > h3 + p { color: var(--muted-color); font-size: .9rem; margin-bottom: 1.25rem; } main.content > h3 + p a { color: var(--primary-ink); font-weight: 500; } /* ---------- Карточки ---------- */ article, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 1.05rem 1.25rem; margin: 1.1rem 0 1.25rem; } article > header { display: flex; align-items: center; gap: .75rem; background: transparent; border-bottom: 1px solid var(--line-soft); margin: -1.05rem -1.25rem .95rem; padding: .8rem 1.25rem; } article > header strong { font-size: .92rem; color: var(--ink); font-weight: 600; } article > header .spacer { flex: 1; } /* Статусные карточки */ article.ok { border-left: 3px solid var(--ok); background: var(--ok-dim); } article.warn { border-left: 3px solid var(--primary-deep); background: var(--warn-dim); } article.error { border-left: 3px solid var(--danger); background: var(--danger-dim); } article.note { border-left: 3px solid var(--line-strong); background: var(--surface-dim); } /* нейтральное: отмена, валидация */ article.ok > :last-child, article.warn > :last-child, article.error > :last-child, article.note > :last-child { margin-bottom: 0; } article.ok p, article.warn p, article.error p, article.note p { display: flex; align-items: center; gap: .5rem; } article.ok .icon { color: var(--ok); } article.warn .icon { color: var(--primary-deep); } article.error .icon { color: var(--danger); } article.note .icon { color: var(--muted-color); } /* Пустые состояния */ .empty-state { text-align: center; color: var(--muted-color); padding: 2.8rem 1rem; font-size: .92rem; } .empty-state .icon { width: 1.7rem; height: 1.7rem; display: block; margin: 0 auto .6rem; opacity: .4; color: var(--faint); } /* ---------- Кнопки ---------- */ /* Первичная (жёлтая) кнопка — главное действие экрана (Найти, Войти, OK...). Крупнее ghost-кнопок, с чёткой золотой границей и мягкой тенью, чтобы уверенно считываться как основной CTA на ПК; тёмный текст на жёлтом даёт контраст ≈9:1. */ button, [type="submit"], [type="button"], [role="button"] { width: auto; padding: .62rem 1.35rem; font-family: var(--font-family); font-size: .92rem; font-weight: 600; line-height: 1.2; border-radius: var(--r-sm); background: var(--primary); border: 1px solid var(--primary-deep); color: var(--on-primary); box-shadow: var(--shadow-cta); transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .06s ease; } button:hover, [type="submit"]:hover { background: var(--primary-hover); border-color: #c99700; color: var(--on-primary); box-shadow: 0 2px 4px rgba(20, 30, 42, .08), 0 9px 22px -8px rgba(217, 164, 6, .8); } button:active { transform: translateY(1px); } button .icon { margin-right: .42rem; vertical-align: -.16em; } /* Нейтральная ghost-кнопка (Pico .outline / .secondary) — вторичное действие: компактнее и тише первичной, без тени, чтобы не спорить с главным CTA. */ button.outline, button.secondary, button.outline.secondary, button.secondary.outline, [type="submit"].outline, [type="submit"].secondary { padding: .5rem 1.05rem; font-size: .87rem; background: var(--surface); border: 1px solid var(--line); color: var(--control-ink); box-shadow: none; } button.outline:hover, button.secondary:hover, button.outline.secondary:hover, button.secondary.outline:hover, [type="submit"].outline:hover, [type="submit"].secondary:hover { background: var(--surface-dim); border-color: var(--line-strong); color: var(--ink); box-shadow: none; } /* Разрушающие действия */ button.danger, .icon-btn.danger { color: var(--danger) !important; border-color: var(--line) !important; background: var(--surface) !important; } button.danger:hover, .icon-btn.danger:hover { background: var(--danger-dim) !important; border-color: var(--danger-border) !important; box-shadow: none; } /* Квадратные кнопки-иконки в строках таблиц */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--control-ink-soft); box-shadow: none; } .icon-btn:hover { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-border); box-shadow: none; } .icon-btn[disabled] { opacity: .5; pointer-events: none; } .icon { width: 1em; height: 1em; vertical-align: -.14em; } .icon-btn .icon { margin: 0; width: .95rem; height: .95rem; } /* ---------- Видимый фокус клавиатуры (WCAG 2.4.7) ---------- Наши интерактивные элементы перекрашены и имели состояние только на :hover — на Tab фокус был не виден. Даём явную обводку через outline (box-shadow у .icon-btn погашен, а outline им не затрагивается). Поля ввода не трогаем — у них уже сильное фокус-кольцо Pico. */ a:focus-visible, button:focus-visible, [type="submit"]:focus-visible, [type="button"]:focus-visible, [role="button"]:focus-visible, .icon-btn:focus-visible, .topbar-link:focus-visible, .comp-btn:focus-visible, .nav-toggle:focus-visible, .sidenav a:focus-visible, .pagination a:focus-visible, summary:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; border-radius: var(--r-xs); } /* ---------- Тулбары ---------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: .2rem 0 1rem; } .toolbar .spacer { flex: 1; } .toolbar form { margin: 0; } /* ---------- Формы ---------- */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: .9rem; } input[type="checkbox"] { border-radius: 4px; } input[type="checkbox"]:checked { background-color: var(--primary-deep); border-color: var(--primary-deep); } label { font-size: .87rem; } input[type="file"] { padding: .32rem .4rem; font-size: .865rem; } input[type="file"]::file-selector-button { width: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-dim); color: var(--control-ink); padding: .3rem .8rem; margin-right: .7rem; font-size: .84rem; font-weight: 600; transition: background .15s var(--ease); } input[type="file"]::file-selector-button:hover { background: var(--fill-neutral); } .search-bar { display: flex; gap: .65rem; } .search-bar input { flex: 1 1 auto; margin: 0; } .search-bar button { flex: 0 0 auto; margin: 0; display: inline-flex; align-items: center; } /* Фильтр под поисковой строкой */ form.card > details { margin: .9rem 0 0; padding-bottom: 0; border-bottom: 0; } form.card > details > summary { width: max-content; font-size: .865rem; color: var(--muted-color); transition: color .15s var(--ease); } form.card > details > summary:hover { color: var(--ink); } form.card > details[open] > summary { margin-bottom: .7rem; color: var(--ink); } details fieldset { columns: 3 220px; margin: .45rem 0 .2rem; } details fieldset label { break-inside: avoid; margin-bottom: .3rem; } .filter-extra { border-top: 1px dashed var(--line); margin-top: .7rem; padding-top: .7rem; } .filter-extra label { margin-bottom: 0; } /* ---------- Группы (details-карточки корзины/ЛО/результатов) ---------- */ details.group-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin: 0 0 1rem; padding: 0; } details.group-card > summary { display: flex; align-items: center; gap: .55rem; padding: .82rem 1.1rem; font-size: .95rem; color: var(--ink); background: var(--surface-dim); /* «полка» заголовка: отделяет шапку группы от таблицы */ border-radius: var(--r-lg); transition: background .15s var(--ease); } details.group-card > summary strong { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } details.group-card > summary:hover { background: var(--fill-neutral); } details.group-card[open] > summary { border-bottom: 1px solid var(--line); /* чёткий раздел шапка/тело (было --line-soft — почти невидимо) */ border-radius: var(--r-lg) var(--r-lg) 0 0; margin-bottom: 0; } details.group-card > summary::after { margin-left: .5rem; } details.group-card > summary > :last-child:not(strong) { margin-left: auto; } /* Итог поставщика — смысловой якорь карточки: тёплая «пилюля» на нейтральной полке, единственная точка, на которой глаз останавливается в шапке. */ details.group-card > summary .group-total { font-family: var(--font-mono); font-weight: 700; font-size: .92rem; color: var(--primary-ink); background: var(--primary-soft); border: 1px solid var(--primary-border); border-radius: var(--r-pill); padding: .2rem .65rem; white-space: nowrap; } /* Общий артикул в шапке группы листа ожидания — правый смысловой якорь (аналог group-total у корзины), но нейтральный: это не сумма, а метка. */ details.group-card > summary .group-code { font-size: .82rem; color: var(--muted-color); white-space: nowrap; } details.group-card > *:not(summary) { margin-left: 1.15rem; margin-right: 1.15rem; } details.group-card > .toolbar { margin: .8rem 1.15rem .6rem; } details.group-card > .table-wrap { margin: .4rem 0 0; } details.group-card > p { padding-bottom: .9rem; margin-bottom: 0; color: var(--muted-color); font-size: .875rem; } /* ---------- Таблицы ---------- */ table { font-size: .865rem; margin-bottom: 0; } thead th { font-family: var(--font-mono); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-color); white-space: nowrap; } /* Сортируемые шапки таблицы результатов: клик по колонке сортирует строки. Нейтральная стрелка ↕ подсказывает кликабельность, активная ↑/↓ — направление. */ .results-lg thead th[data-sort] { cursor: pointer; user-select: none; transition: color .12s var(--ease); } .results-lg thead th[data-sort]:hover { color: var(--ink); } .results-lg thead th[data-sort]::after { content: "↕"; display: inline-block; width: 1em; margin-left: .2em; text-align: center; opacity: .4; font-weight: 400; } .results-lg thead th.sorted-asc { color: var(--ink); } .results-lg thead th.sorted-desc { color: var(--ink); } .results-lg thead th.sorted-asc::after { content: "↑"; opacity: 1; color: var(--primary-deep); } .results-lg thead th.sorted-desc::after { content: "↓"; opacity: 1; color: var(--primary-deep); } .results-lg thead th[data-sort]:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: -2px; border-radius: var(--r-xs); color: var(--ink); } tbody tr { transition: background .12s var(--ease); } tbody tr:hover { background: var(--primary-tint); } tbody td { vertical-align: middle; } figure { margin-bottom: 0; } .table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); } .table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: 1.15rem; } .table-wrap table th:last-child, .table-wrap table td:last-child { padding-right: 1.15rem; } .table-wrap tbody tr:last-child td { border-bottom: 0; } .results-table td, .results-table th { padding: .5rem .55rem; } /* Миниатюра — фиксированный бокс: колонка не пляшет по ширине от пропорций фото, object-fit сохраняет кадр целиком (у товарных фото фон обычно белый). */ .results-table img { width: 56px; height: 40px; object-fit: contain; border-radius: var(--r-xs); display: block; cursor: zoom-in; transition: filter .15s var(--ease); } .results-table img:hover { filter: brightness(.94); } .results-table .col-art { font-family: var(--font-mono); font-size: .8rem; color: var(--muted-color); } /* Числовые колонки — по правому краю с табличными цифрами: разряды выстраиваются по вертикали, столбец цен/остатков легко сканировать сверху вниз. */ .results-table .col-cost { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .results-table td.col-qty { text-align: right; font-variant-numeric: tabular-nums; } .results-table th.num-h { text-align: right; } .results-table .col-src a { color: var(--primary-ink); } /* Таблица истории корзины: тот же скин, но БЕЗ продуктовых спец-правил .results-table (nth-child 1/2/3 = №/фото/наименование и скрытие первой колонки на десктопе) — у неё другие колонки, и «Когда» не должна исчезать. */ .history-table td, .history-table th { padding: .5rem .55rem; } .history-table .col-art { font-family: var(--font-mono); font-size: .8rem; color: var(--muted-color); } .history-table .col-qty { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .history-table th.num-h { text-align: right; } /* Порядковый № малополезен в корзине/ЛО — прячем на десктопе. DOM сохраняем: карточная раскладка (≤860px) опирается на позиции nth-child (фото=2, наименование=3). */ @media (min-width: 861px) { .results-table:not(.results-lg) thead th:first-child, .results-table:not(.results-lg) tbody td:first-child { display: none; } .results-table:not(.results-lg) thead th:nth-child(2), .results-table:not(.results-lg) tbody td:nth-child(2) { padding-left: 1.15rem; } } /* Крупная таблица результатов поиска (search_results.html) */ .results-lg { font-size: .95rem; } .results-lg thead th { font-size: .69rem; } .results-lg td, .results-lg th { padding: .68rem .72rem; } .results-lg .col-art { font-size: .86rem; } .results-lg img { width: 80px; height: 56px; border-radius: var(--r-sm); } /* Лайтбокс фото товара */ .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; background: rgba(18, 24, 32, .72); backdrop-filter: blur(4px); cursor: zoom-out; } .lightbox[hidden] { display: none; } /* Единый размер просмотра: раньше стояли только max-*, поэтому маленькое фото открывалось в своём натуральном размере (условные 90×70) и рассмотреть его было нельзя. Фиксированный бокс + object-fit: contain — мелкие увеличиваются до него, крупные вписываются, пропорции сохраняются у всех. */ .lightbox img { width: min(92vw, 820px); height: min(86vh, 620px); object-fit: contain; border-radius: var(--r-lg); background: #fff; padding: 5px; box-shadow: 0 24px 70px -12px rgba(0, 0, 0, .55); } @media (prefers-reduced-motion: no-preference) { .lightbox { animation: fadein .16s ease-out; } .lightbox img { animation: rise .2s var(--ease); } } /* Конкуренты: карточка-обзор сверху + попапы с таблицами */ .competitors-block > header { display: flex; align-items: baseline; gap: .5rem; } .competitors-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; } .comp-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 600; cursor: pointer; } .comp-btn:hover { border-color: var(--primary-deep); background: var(--primary-soft); color: var(--ink); box-shadow: var(--shadow-1); } .comp-from { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: .06rem .42rem; border-radius: var(--r-xs); } .comp-btn:hover .comp-from { background: var(--surface); } .comp-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 4vh 3vw; background: rgba(18, 24, 32, .55); backdrop-filter: blur(3px); } .comp-modal[hidden] { display: none; } .comp-modal-card { display: flex; flex-direction: column; width: min(1100px, 96vw); max-height: 90vh; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; } .comp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); font-size: 1rem; } .comp-modal-body { padding: 1rem 1.15rem 1.25rem; overflow: auto; } .comp-modal-body article { border: 0; box-shadow: none; padding: 0; margin: 0; } @media (prefers-reduced-motion: no-preference) { .comp-modal { animation: fadein .16s ease-out; } .comp-modal-card { animation: rise .22s var(--ease); } } /* Ячейки действий и количества */ .cart-actions-cell, .wl-actions-cell, .item-actions-cell { white-space: nowrap; } .cart-actions-cell form, .wl-actions-cell form, .item-actions-cell form { display: inline-block; margin: 0 .12rem 0 0; } /* Инлайн-корзина в результатах поиска: контрол на два состояния. Селекторы с тегом (input)/двойным классом — чтобы перебить ширину 100% и стили кнопок из Pico, которые специфичнее одиночного класса. */ .item-actions-cell .cart-inline { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .3rem 0 0; vertical-align: middle; } .item-actions-cell .btn-add { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .85rem; border: 1px solid #c99700; border-radius: var(--r-sm); background: var(--primary); color: var(--primary-inverse); font-size: .85rem; font-weight: 700; box-shadow: var(--shadow-cta); } .item-actions-cell .btn-add:hover { background: var(--primary-hover); border-color: #c99700; color: var(--primary-inverse); } .item-actions-cell .btn-add .icon { width: .95rem; height: .95rem; margin: 0; } .item-actions-cell .btn-add.oos { background: var(--surface); color: var(--muted-color); border-color: var(--line); box-shadow: none; } .item-actions-cell .btn-add.oos:hover { background: var(--surface-dim); color: var(--muted-color); } .item-actions-cell .search-prestep, .item-actions-cell .search-stepper { display: inline-flex; align-items: stretch; height: 2.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } /* ± одного размера и на всю высоту контрола — глиф центрируется по вертикали (раньше кнопка была ниже поля и знак «липнул» к верху); одинаково в обоих состояниях, чтобы «в корзине» и «не в корзине» не отличались геометрией. */ .item-actions-cell .search-prestep .step, .item-actions-cell .search-stepper .step { flex: none; width: 1.9rem; height: 100%; padding: 0; border: none; box-shadow: none; background: var(--surface); color: var(--control-ink); font-size: 1.1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .item-actions-cell .search-prestep .step:hover, .item-actions-cell .search-stepper .step:hover { background: var(--surface-dim); box-shadow: none; } /* Середина (поле ввода / счётчик) — одинаковая ширина и вид в обоих состояниях, чтобы ± стояли на одном месте при переключении в корзину и обратно. */ .item-actions-cell .search-prestep input.qty-input, .item-actions-cell .search-stepper input.qty-input { flex: none; width: 2.8em; height: 100%; margin: 0 !important; padding: 0 !important; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--primary-inverse); font-family: var(--font-mono); font-size: .85rem !important; font-variant-numeric: tabular-nums; font-weight: 700; } .item-actions-cell .search-stepper { border-color: var(--primary-border); background: var(--primary-soft); } .item-actions-cell .search-stepper .step { background: transparent; color: var(--primary-ink); } .item-actions-cell .search-stepper .step:hover { background: #f9e6ac; color: var(--primary-ink); } /* Поле «в корзине» — золотые разделители в тон степперу */ .item-actions-cell .search-stepper input.qty-input { border-left-color: var(--primary-border); border-right-color: var(--primary-border); } /* Фокус поля показываем подсветкой рамки самого контрола — Pico-кольцо обрезается overflow:hidden в тонкие полоски по бокам. */ .item-actions-cell .search-prestep:focus-within, .item-actions-cell .search-stepper:focus-within { border-color: var(--primary-deep); } .item-actions-cell .search-prestep input.qty-input:focus, .item-actions-cell .search-stepper input.qty-input:focus { box-shadow: none; } .item-actions-cell .incart-tag { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--primary-ink); text-transform: uppercase; } .qty-form { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; margin: 0; } .qty-input { width: 4.6em; margin: 0 !important; padding: .3rem .45rem !important; height: 1.9rem; font-size: .84rem !important; font-family: var(--font-mono); } /* ---------- Чипы и бейджи ---------- */ .badge { display: inline-block; min-width: 1.4em; text-align: center; background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill); padding: .04rem .44rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; line-height: 1.5; vertical-align: .08em; } .badge.subtle, .chip.subtle { background: var(--fill-neutral); color: var(--control-ink-soft); } .chip { display: inline-flex; align-items: center; gap: .34rem; border-radius: var(--r-pill); padding: .1rem .55rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; white-space: nowrap; vertical-align: .05em; } .chip::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; flex: none; } .chip.ok { background: var(--ok-dim); color: var(--ok-ink); } .chip.no { background: var(--danger-dim); color: var(--danger-ink); } .chip.unk { background: var(--fill-neutral); color: var(--control-ink-soft); } .chip.plain::before { display: none; } /* ---------- Прогресс операций ---------- */ .progress-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: .95rem 1.15rem; margin: 0 0 1rem; } .progress-wrap p { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; font-size: .88rem; font-weight: 500; color: var(--ink); } .progress-wrap p::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--primary-deep); animation: pulse 1.2s ease-in-out infinite; } .progress-wrap progress { height: .4rem; margin-bottom: .65rem; } .progress-wrap progress::-webkit-progress-value { background: var(--primary); } .progress-wrap progress::-moz-progress-bar { background: var(--primary); } .progress-wrap progress:indeterminate { background: var(--primary-soft); } .progress-wrap form { margin: 0; } .progress-wrap button { padding: .32rem .78rem; font-size: .8rem; } /* ---------- Прогресс поиска (плавное обновление через morph) ---------- */ .search-op { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: .95rem 1.15rem 1.05rem; margin: 0 0 1rem; } .search-op .op-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .62rem; font-size: .88rem; } .op-spin { width: .9rem; height: .9rem; flex: none; border: 2px solid var(--primary-soft); border-top-color: var(--primary-deep); border-radius: 50%; animation: spin .7s linear infinite; } .op-label { font-weight: 600; color: var(--ink); } .op-count { margin-left: auto; font-family: var(--font-mono); font-size: .78rem; color: var(--muted-color); font-variant-numeric: tabular-nums; } .op-bar { height: .5rem; border-radius: var(--r-pill); background: var(--primary-soft); overflow: hidden; } .op-bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary-deep), var(--primary)); /* значение приходит раз в 2s — плавно доводим ширину до цели без рывка */ transition: width 1.8s cubic-bezier(.33, .1, .25, 1); } .op-suppliers { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .85rem 0 0; padding: 0; } .op-sup { display: inline-flex; align-items: center; gap: .38rem; padding: .16rem .58rem .16rem .5rem; border-radius: var(--r-pill); font-size: .74rem; font-weight: 500; background: var(--fill-neutral); color: var(--control-ink-soft); transition: background .45s var(--ease), color .45s var(--ease); } .op-sup-mark { width: .48rem; height: .48rem; border-radius: 50%; flex: none; background: var(--primary-deep); animation: pulse 1.2s ease-in-out infinite; } .op-sup.done { background: var(--ok-dim); color: var(--ok-ink); } .op-sup.done .op-sup-mark { background: var(--ok-ink); animation: none; } .op-cancel { margin: .9rem 0 0; } .op-cancel button { padding: .32rem .78rem; font-size: .8rem; } /* Спиннер для htmx-индикаторов */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } span.htmx-indicator { width: .85rem; height: .85rem; border: 2px solid rgba(0, 0, 0, .15); border-top-color: var(--primary-deep); border-radius: 50%; vertical-align: -.15em; animation: spin .6s linear infinite; } span.htmx-indicator::before { content: none !important; } .icon-btn span.htmx-indicator { position: absolute; } .icon-btn.busy-swap { position: relative; } .icon-btn.busy-swap.htmx-request .icon, form.htmx-request .icon-btn.busy-swap .icon { visibility: hidden; } /* Вложенные результаты внутри групп (1С, Excel-результаты) */ details.group-card > article { margin: .9rem 1.15rem 1.05rem; box-shadow: none; } details.subgroup { border: 1px solid var(--line); border-radius: var(--r-md); margin: 0 0 .7rem; padding: 0; background: var(--surface); } details.subgroup > summary { display: flex; align-items: center; gap: .55rem; padding: .58rem .9rem; font-size: .885rem; color: var(--ink); transition: background .15s var(--ease); border-radius: var(--r-md); } details.subgroup > summary:hover { background: var(--surface-dim); } details.subgroup > summary::after { margin-left: auto; } details.subgroup[open] > summary { border-bottom: 1px solid var(--line-soft); border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 0; } details.subgroup > article { border: 0; box-shadow: none; margin: 0; border-radius: 0 0 var(--r-md) var(--r-md); } details.subgroup > article > header { margin-top: -1.05rem; } details.subgroup .empty-state { padding: 1.3rem; margin: 0; border: 0; box-shadow: none; } /* ---------- Пагинация ---------- */ .pagination { padding: .3rem 0 0; } .pagination ul { display: flex; align-items: center; gap: .7rem; margin: 0; padding: 0; } .pagination li { list-style: none; padding: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--muted-color); } .pagination a { display: inline-block; padding: .32rem .72rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--control-ink); text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease); } .pagination a:hover { background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-ink); } /* ---------- Разное ---------- */ .inline-form { display: inline; } /* Узкая колонка для одиночных форм/результатов (хэш) — раньше style="max-width:36rem" */ .narrow-col { max-width: 36rem; } /* Карточка целиком под таблицу без отступов (справочники): рамка скругления обрезает углы таблицы — раньше инлайн padding:0/overflow + магический 12px. */ .table-card { padding: 0; overflow: hidden; } .hash-result code { font-family: var(--font-mono); font-size: .875rem; word-break: break-all; } a { color: var(--primary-ink); transition: color .12s var(--ease); } main.content a[target="_blank"] { text-decoration-color: color-mix(in srgb, var(--primary-deep) 40%, transparent); } mark { background: var(--warn-dim); color: #7a5b06; padding: .05rem .3rem; border-radius: 4px; } /* Логин */ .login-card { max-width: 24rem; margin: 4.5rem auto 0; padding: 1.8rem 1.9rem 1.6rem; box-shadow: var(--shadow-2); } .login-head { text-align: center; margin-bottom: 1.4rem; } .login-mark { display: inline-block; width: 56px; height: 56px; } .login-mark img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 18px rgba(15, 39, 64, .3)); } .login-card input { margin-bottom: .8rem; } .login-card button { width: 100%; margin-top: .3rem; } /* ---------- Анимации появления ---------- */ @media (prefers-reduced-motion: no-preference) { #search-results > *, #cart-content, #wl-content, #exr-content, #cart-ops > *, #wl-ops > *, .progress-wrap, main > article, main > h3 { animation: rise .26s var(--ease); } .sidenav a { animation: slidein .3s var(--ease) backwards; } .sidenav a:nth-child(3) { animation-delay: .02s; } .sidenav a:nth-child(4) { animation-delay: .04s; } .sidenav a:nth-child(6) { animation-delay: .06s; } .sidenav a:nth-child(7) { animation-delay: .08s; } .sidenav a:nth-child(9) { animation-delay: .1s; } .sidenav a:nth-child(10) { animation-delay: .12s; } details[open] > *:not(summary) { animation: fadein .18s ease-out; } } @keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes slidein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ================= Мобильная адаптация ================= */ /* На десктопе гамбургер, мобильная марка и затемнение скрыты */ .nav-toggle, .topbar-brand, .scrim { display: none; } @media (max-width: 860px) { body.app { display: block; } .workspace { grid-column: auto; } /* Сайдбар -> выезжающий слева дровер */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: min(84vw, 300px); z-index: var(--z-drawer); transform: translateX(-100%); transition: transform .25s var(--ease); box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .35); } body.nav-open .sidebar { transform: none; } .scrim { display: block; position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(18, 24, 32, .5); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } body.nav-open .scrim { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } /* Топбар: гамбургер + марка слева, действия справа */ .topbar { padding: .45rem .9rem; gap: .55rem; } .nav-toggle { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); } .nav-toggle:hover { background: var(--surface-dim); } .nav-toggle .icon { width: 1.2rem; height: 1.2rem; margin: 0; } .topbar-brand { display: inline-flex; align-items: center; text-decoration: none; } .topbar-brand .brand-lockup { height: 26px; width: 95px; } .topbar-actions { gap: .55rem; } /* Рабочая область компактнее */ main.content { padding: 1.1rem .9rem 2.5rem; } main.content > h3 { font-size: 1.3rem; } /* На узком экране рамка просмотра ближе к квадрату — меньше пустых полей */ .lightbox img { height: min(62vh, 520px); } /* Попап конкурента — почти во весь экран */ .comp-modal { padding: 2.5vh 2.5vw; } .comp-modal-body { padding: .85rem .9rem 1rem; } } @media (max-width: 520px) { /* Узкий экран: у кнопок корзины/ЛО прячем текстовую подпись (иконка + бейдж-слот остаются); текст оставляем доступным скринридерам. Только прямой span-лейбл, не слот бейджа. */ .topbar-link > span:not(.badge-slot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topbar-link { padding: .5rem .6rem; gap: .35rem; } .topbar-actions { gap: .5rem; } /* Плотные таблицы чуть меньше — меньше горизонтального скролла */ .results-lg { font-size: .9rem; } .results-lg td, .results-lg th { padding: .55rem .55rem; } } /* Карточная адаптация таблиц результатов/корзины/ЛО на узких экранах. Порог = порогу дровера (860px): на планшете-портрете (768px) тяжёлая корзина (13 колонок) больше не уезжает в горизонтальный скролл, а сворачивается в карточки. */ @media (max-width: 860px) { .results-table thead, .history-table thead { display: none; } .results-table, .results-table tbody, .results-table tr, .results-table td, .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: auto; } .results-table tr, .history-table tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin: 0 0 .7rem; padding: .5rem .15rem .6rem; } .results-table td, .history-table td { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .3rem .85rem; border: 0; text-align: right; white-space: normal; } .results-table td::before, .history-table td::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } /* № строки в карточке не нужен */ .results-table td:nth-child(1) { display: none; } /* фото — превью без метки */ .results-table td:nth-child(2) { justify-content: flex-start; padding-top: .1rem; } .results-table td:nth-child(2):empty { display: none; } .results-table td:nth-child(2)::before { content: none; } .results-table td:nth-child(2) img { width: 130px; height: 92px; } /* наименование — заголовок карточки */ .results-table td:nth-child(3) { justify-content: flex-start; text-align: left; font-weight: 600; font-size: 1rem; color: var(--ink); padding: .15rem .85rem .5rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line-soft); } .results-table td:nth-child(3)::before { content: none; } /* ячейки с действиями/количеством: метка на всю строку, контролы рядком ниже */ .results-table td.cart-qty-cell, .results-table td.cart-actions-cell, .results-table td.item-actions-cell, .results-table td.wl-actions-cell { flex-wrap: wrap; justify-content: flex-start; gap: .5rem; text-align: left; padding-top: .5rem; } .results-table td.cart-qty-cell::before, .results-table td.cart-actions-cell::before, .results-table td.item-actions-cell::before, .results-table td.wl-actions-cell::before { flex: 0 0 100%; } /* Тап-таргеты ~44px и крупное поле количества — удобно попадать пальцем */ .results-table td.cart-qty-cell .icon-btn, .results-table td.cart-actions-cell .icon-btn, .results-table td.item-actions-cell .icon-btn, .results-table td.wl-actions-cell .icon-btn { width: 2.75rem; height: 2.75rem; } .results-table td.item-actions-cell .btn-add, .results-table td.item-actions-cell .search-prestep, .results-table td.item-actions-cell .search-stepper { height: 2.75rem; } .results-table td.item-actions-cell .search-prestep .step, .results-table td.item-actions-cell .search-stepper .step { width: 2.4rem; } .results-table td.cart-qty-cell .qty-input, .results-table td.item-actions-cell .qty-input { height: 2.75rem; width: 5em; font-size: .95rem !important; } /* внутри карточки таблица не скроллится */ .table-wrap { overflow-x: visible; } } /* Альбомная ориентация телефона (низкий вьюпорт): не даём липкому топбару съедать высоту. Именно с max-height, иначе правило зацепит десктоп в ландшафте. */ @media (orientation: landscape) and (max-height: 480px) { .topbar { min-height: 2.75rem; } } /* ---------- Раздел «Из 1С»: обособленные карточки заявок ---------- */ #api-results .api-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: .7rem; box-shadow: 0 1px 2px rgba(20, 30, 42, .04); transition: box-shadow .15s var(--ease), border-color .15s var(--ease); } #api-results .api-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 12px -5px rgba(20, 30, 42, .28); } .api-card > summary.api-row { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1.2rem; padding: .9rem 1.05rem; } .api-card > summary.api-row::-webkit-details-marker { display: none; } .api-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; } .api-nameline { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .api-nameline strong { font-weight: 700; font-size: 1rem; color: var(--ink); } .api-art { font-family: var(--font-mono); font-size: .78rem; color: var(--muted-color); } .api-bestline { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .api-best-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-color); } .api-best-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--ink); } .api-instock { display: inline-flex; align-items: center; gap: .28rem; font-size: .72rem; color: var(--ok-ink); } .api-instock::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--ok); } .api-backorder { font-size: .72rem; color: var(--muted-color); } .api-best-none { font-size: .86rem; color: var(--muted-color); font-style: italic; } .api-side { text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: .3rem; } .api-side .api-r { display: flex; align-items: baseline; justify-content: flex-end; gap: .5rem; } .api-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-color); } .api-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: .92rem; color: var(--ink); } .api-v.api-buy { color: var(--primary-ink); } .api-v.api-dash { color: var(--muted-color); font-weight: 500; } .api-chev { align-self: center; flex: none; width: .5rem; height: .5rem; margin-top: -.15rem; border-right: 2px solid var(--muted-color); border-bottom: 2px solid var(--muted-color); transform: rotate(45deg); transition: transform .15s var(--ease); } .api-card[open] > summary .api-chev { transform: rotate(-135deg); margin-top: .15rem; } .api-body { padding: 0 1.05rem 1.05rem; } @media (max-width: 640px) { .api-card > summary.api-row { flex-wrap: wrap; } .api-side { text-align: left; } .api-side .api-r { justify-content: flex-start; } }