/* ==========================================================================
   Мой склад — общие стили всех экранов (новый интерфейс)
   --------------------------------------------------------------------------
   Как устроено:
   1. Токены (цвета, отступы, радиусы) — переменные в :root. Меняете здесь —
      меняется везде.
   2. Каркас приложения: .frame > .app > (меню + .content).
      .frame — «контейнер» для адаптивности: раскладка зависит от ширины
      самого приложения (container queries), а не окна браузера, поэтому
      телефонные превью на холсте ведут себя как настоящий телефон.
   3. Компоненты: кнопки, чипы, карточки, поля, сегменты, списки-таблицы,
      диалоги, уведомления. Имена классов говорят сами за себя.
   4. Адаптивность — в самом конце файла, три точки:
      ≤ 1100px — планшет в альбомной ориентации: колонки сужаются;
      ≤ 900px  — планшет: меню сворачивается в верхнюю панель;
      ≤ 640px  — телефон: таблицы становятся карточками, окна — панелями снизу.
   ========================================================================== */

/* Шрифт Onest (лицензия SIL OFL) — с нашего сервера: страница не ждёт сторонних сайтов. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/onest-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 1. Токены ---------- */
:root {
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Фон и поверхности */
  --bg: #F3F4F0;
  --surface: #FFFFFF;
  --surface-2: #F7F8F5;
  --line: #E2E5DF;
  --line-soft: #EEF0EC;

  /* Текст */
  --ink: #17211C;
  --ink-2: #3D4A43;
  --muted: #5E6B64;

  /* Фирменный зелёный — действия и «наш склад» */
  --brand: #1D6B4E;
  --brand-hover: #165A41;
  --brand-soft: #E2F2E8;
  --brand-ink: #14583A;

  /* Меню */
  --nav-bg: #15241D;
  --nav-ink: #C9D4CE;
  --nav-muted: #8FA399;
  --nav-active: #264536;
  --nav-accent: #7BD3A6;

  /* Ozon — синий; «в пути» и предупреждения — оранжевый */
  --ozon: #2B5BD7;
  --ozon-soft: #E6EDFC;
  --ozon-ink: #1F48B0;
  --warn: #E08A3C;
  --warn-soft: #FCEBDD;
  --warn-ink: #8F3A05;
  --danger-soft: #FBE7E4;
  --danger-ink: #9B2C1F;

  --radius: 16px;
  --radius-sm: 10px;
  --gap: 20px;
  --pad: 32px;
}

/* ---------- 2. Каркас ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
input, select, textarea, button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.frame { container-type: inline-size; container-name: app; min-height: 100vh; font-family: var(--font); color: var(--ink); background: var(--bg); }
.app { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; padding: 28px var(--pad) 56px; display: flex; flex-direction: column; gap: var(--gap); }

/* Заголовок страницы: название + подпись слева, действия справа */
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.page-head h1 { font-size: 30px; line-height: 1.15; font-weight: 700; }
.page-head p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.section-title { font-size: 18px; font-weight: 600; }
.hint { font-size: 14px; color: var(--muted); line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Меню (компонент Nav.dc.html) ---------- */
/* Меню растягивается на всю высоту колонки */
/* На компьютере меню закреплено: низ меню (Ozon, «Выйти», «Старый интерфейс») всегда виден. */
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: flex-start; }
.sidebar { width: 256px; flex: none; background: var(--nav-bg); color: var(--nav-ink); padding: 22px 14px; display: flex; flex-direction: column; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--nav-accent); color: var(--nav-bg); display: grid; place-items: center; flex: none; }
.brand strong { display: block; color: #fff; font-size: 17px; }
.brand small { display: block; color: var(--nav-muted); font-size: 12px; }
.menu-toggle { display: none; margin-left: auto; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #2C4438; background: #1B2E25; color: #fff; font-weight: 600; cursor: pointer; }
.nav-links { display: flex; flex-direction: column; gap: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title { padding: 0 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-muted); }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--nav-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-link:hover { background: #1E3329; color: #fff; }
.nav-link.is-active { background: var(--nav-active); color: #fff; }
.nav-link .badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--nav-accent); color: var(--nav-bg); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.nav-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #2C4438; display: flex; flex-direction: column; gap: 8px; }
.ozon-status { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; color: var(--nav-muted); }
.ozon-status::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--nav-accent); }
.ozon-status[data-state="off"]::before { background: var(--nav-muted); }
.ozon-status[data-state="error"]::before { background: #E5484D; }
.nav-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--nav-ink); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; text-align: left; }
.nav-btn:hover { background: #1E3329; color: #fff; }

/* ---------- 3. Компоненты ---------- */
/* Карточка */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* Сетки, которые сами перестраиваются по ширине */
.grid-auto { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-auto-lg { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.split { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.split > .main { flex: 999 1 560px; min-width: 0; }
.split > .aside { flex: 1 1 300px; max-width: 380px; }

/* Показатель (KPI) */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.kpi span { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi strong { display: block; margin-top: 4px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.kpi.is-dark { background: var(--nav-bg); border-color: var(--nav-bg); color: #fff; }
.kpi.is-dark span, .kpi.is-dark small { color: #B6C6BD; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid #D5DAD3; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--surface-2); color: var(--ink); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); color: #fff; }
.btn-danger { color: var(--danger-ink); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid #D5DAD3; background: var(--surface); cursor: pointer; flex: none; }

/* Чипы-статусы. Цвет = смысл: зелёный — наш склад/готово, синий — Ozon,
   оранжевый — в пути/внимание, серый — нейтрально, красный — ошибка. */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; background: var(--line-soft); color: var(--ink-2); }
.chip-green { background: var(--brand-soft); color: var(--brand-ink); }
.chip-blue { background: var(--ozon-soft); color: var(--ozon-ink); }
.chip-orange { background: var(--warn-soft); color: var(--warn-ink); }
.chip-red { background: var(--danger-soft); color: var(--danger-ink); }

/* Фильтр-чипы (кнопки с выбранным состоянием) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #D5DAD3; background: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer; }
.filter.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Сегмент-переключатель (вкладки внутри страницы) */
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #E7E9E3; max-width: 100%; overflow-x: auto; }
.seg button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(23,33,28,.12); }

/* Поля формы: подпись сверху, поле снизу */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); min-width: 0; }
.field input, .field select, .field textarea { min-height: 44px; padding: 0 12px; border: 1px solid #D5DAD3; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 15px; width: 100%; }
.field textarea { padding: 10px 12px; min-height: 80px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.toolbar .field { flex: 1 1 180px; }
.search { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #D5DAD3; border-radius: var(--radius-sm); background: var(--surface); flex: 1 1 260px; }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; font-size: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; margin: 1px 0 0; }
.check small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* Список-таблица. На широком экране — строки с колонками (grid),
   на телефоне — карточки, где у каждого значения подпись из data-label. */
.rows { overflow-x: auto; container-type: inline-size; container-name: table; }
/* Широкие таблицы на ноутбуке: первая колонка (товар) встаёт отдельной строкой, цифры — под ней без прокрутки вбок.
   Таблица включает это атрибутом data-compact и переменными --cols-compact / --rows-min-compact. */
@container table (max-width: 1199px) {
  .rows-inner[data-compact] { min-width: var(--rows-min-compact, 0); }
  .rows-inner[data-compact] > .row { grid-template-columns: var(--cols-compact, var(--cols)); row-gap: 8px; }
  .rows-inner[data-compact] > .row > :first-child { grid-column: 1 / -1; }
}
.rows-inner { min-width: var(--rows-min, 0); }
.row { display: grid; grid-template-columns: var(--cols); gap: 0 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.row.is-head { padding-top: 12px; padding-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom-color: var(--line); background: var(--surface); }
.row.is-selected { background: #F1F7F3; }
.row.is-total { background: var(--surface-2); font-weight: 600; border-bottom: 0; }
.row .r { text-align: right; }
.row .cell-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* Кнопки-значки в строке таблицы — в одну линию и чуть компактнее (на телефоне строка становится карточкой). */
.row .cell-actions:has(> .icon-btn) { flex-wrap: nowrap; }
.row .cell-actions > .icon-btn { width: 38px; height: 38px; }
.item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.item-pic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--line-soft); }
.item-text { min-width: 0; }
.item-text > strong { display: block; font-weight: 600; }
/* Длинные названия в таблицах — не больше двух строк; полное название в подсказке и карточке. */
.row .item-text > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-text > span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; min-height: 44px; display: flex; align-items: center; }
.link-btn:hover strong { color: var(--brand); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font-size: 13px; color: var(--muted); }

/* Полоса долей (капитал, где лежит товар) */
.bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--line-soft); }
.legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.progress { height: 6px; border-radius: 3px; background: var(--line-soft); }
.progress > div { height: 6px; border-radius: 3px; background: var(--brand); }

/* Пары «подпись — значение» */
.pairs { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; font-size: 14px; }
.pairs dt { color: var(--muted); }
.pairs dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Было → изменение → стало */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.flow .arrow { color: #9AA59F; }
.flow .minus { color: var(--warn-ink); font-weight: 600; }
.flow .plus { color: var(--brand-ink); font-weight: 600; }

/* Диалог: по центру на компьютере, панель снизу на телефоне */
.backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(21,36,29,.45); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dialog { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); border-radius: 20px; box-shadow: 0 20px 60px rgba(21,36,29,.25); }
.dialog.is-wide { width: min(980px, 100%); }
.dialog-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 20px 22px 0; }
.dialog-head h2 { font-size: 20px; font-weight: 700; }
.dialog-head p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.dialog-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 14px 22px 20px; background: var(--surface); border-top: 1px solid var(--line-soft); }
.note { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.note.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.note.is-ok { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- 4. Адаптивность ---------- */

/* Планшет в альбомной ориентации */
@container app (max-width: 1100px) {
  .content { --pad: 24px; }
  .sidebar { width: 224px; }
  .split > .aside { max-width: none; }
}

/* Планшет: меню превращается в верхнюю панель с кнопкой «Меню» */
@container app (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar { width: auto; padding: 12px 16px; gap: 12px; position: static; height: auto; overflow: visible; align-self: stretch; }
  .sidebar-top { display: flex; align-items: center; gap: 12px; }
  .brand { padding: 0; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .nav-links, .nav-foot { display: none; }
  .sidebar.is-open .nav-links, .sidebar.is-open .nav-foot { display: flex; }
  .sidebar.is-open .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .nav-foot { margin-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .content { padding: 20px 20px 48px; }
}

/* Телефон */
@container app (max-width: 640px) {
  .content { padding: 16px 14px 40px; gap: 16px; }
  .page-head h1 { font-size: 24px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }
  .card { padding: 16px; }
  .kpi strong { font-size: 20px; }
  .grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Строки таблицы → карточки с подписями */
  .rows-inner, .rows-inner[data-compact] { min-width: 0; }
  .rows-inner[data-compact] > .row { grid-template-columns: 1fr 1fr; }
  .row.is-head { display: none; }
  .row { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; }
  .row > * { min-width: 0; }
  .row > [data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
  .row > .span-all { grid-column: 1 / -1; }
  .row .r { text-align: left; }
  .row .cell-actions { justify-content: flex-start; grid-column: 1 / -1; }
  .row .cell-actions .btn { flex: 1 1 auto; }
  .row .cell-actions > .icon-btn { width: 44px; height: 44px; }

  /* Окна — панелью снизу */
  .backdrop { align-items: flex-end; padding: 0; }
  .dialog, .dialog.is-wide { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; }
  .dialog-foot .btn { flex: 1 1 auto; }
}

/* ---------- 5. Дополнения рабочего интерфейса ---------- */
[hidden] { display: none !important; }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--ozon); outline-offset: 2px; }

/* Загрузка и пустые состояния */
.loading { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.error-box { padding: 14px 16px; border-radius: 12px; background: var(--danger-soft); color: var(--danger-ink); font-size: 14px; }

/* Уведомления внизу экрана */
.toasts { position: fixed; z-index: 40; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(21,36,29,.25); }
.toast.is-error { background: var(--danger-ink); }

/* Сортируемые заголовки таблиц */
.sort-btn { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.sort-btn.is-on { color: var(--ink); }

/* Ссылка на старый интерфейс в меню */
.nav-classic { font-size: 13px; color: var(--nav-muted); padding: 0 12px; text-decoration: underline; }
.nav-classic:hover { color: #fff; }

/* Страница входа */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--nav-bg); font-family: var(--font); }
.login-box { width: min(440px, 100%); display: flex; flex-direction: column; gap: 20px; }

/* Фото товара */
.item-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.item-pic { overflow: hidden; }

/* Вкладки-разделы внутри страницы прокручиваются на телефоне */
@container app (max-width: 640px) {
  .toasts { left: 16px; right: 16px; max-width: none; }
}

/* ---------- Форма партии поставщика: шаги, реестр товаров, итог справа ---------- */
.dialog.is-xl { width: min(1280px, 100%); }
.pf { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.pf-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pf-aside { flex: 1 1 250px; max-width: 300px; position: sticky; top: 0; }
.pf-summary { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pf-summary h3 { font-size: 17px; }
.pf-sum { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: 14px; }
.pf-sum dt { color: var(--muted); }
.pf-sum dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-sum dd small { display: block; font-weight: 500; color: var(--muted); }
.pf-sum .pf-sum-total { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-size: 16px; font-weight: 700; }
.pf-sum-debt { padding-top: 10px; border-top: 1px dashed var(--line); }
.pf-calc-state { font-size: 13px; color: var(--muted); line-height: 1.4; }
.pf-calc-state.is-ok { color: var(--brand-ink); }
.pf-calc-state.is-wait { color: var(--warn-ink); }
.pf-calc-state.is-error { color: var(--danger-ink); }

.pf-step { border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.pf-step-head { display: flex; gap: 12px; align-items: flex-start; }
.pf-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.pf-step-head h3 { font-size: 17px; line-height: 28px; }
.pf-count { color: var(--muted); font-weight: 500; }
.pf-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pf-seg button { min-height: 34px; padding: 0 12px; font-size: 13px; }
.pf-add { align-self: flex-start; }

.pf-fx-party { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.pf-rate-field { flex: 0 1 300px; }
.pf-rate-input { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; }
.pf-rate-input input { min-height: 44px; padding: 0 12px; border: 1px solid #D5DAD3; border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; width: 130px; }

.pf-products { overflow: hidden; border: 1px solid #D5DAD3; border-radius: 12px; background: var(--surface); }
.pf-products-head, .pf-product-row { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(188px, 1.05fr) minmax(155px, .9fr) minmax(180px, 1fr) 38px; column-gap: 12px; }
.pf-products-head { padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
.pf-lines { display: flex; flex-direction: column; gap: 14px; }
.pf-products .pf-lines { gap: 0; }
.pf-line { border: 1px solid #D5DAD3; border-left: 4px solid var(--brand); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.pf-product-row { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px; background: var(--surface); align-items: start; }
.pf-product-row:last-child { border-bottom: 0; }
.pf-product-row:focus-within { background: #FCFDFB; box-shadow: inset 3px 0 0 var(--brand); }
.pf-product-cell { min-width: 0; }
.pf-product-cell-item { display: flex; grid-column: 1; flex-direction: column; gap: 9px; }
.pf-product-cell-qty { grid-column: 2; }
.pf-product-cell-price { grid-column: 3; }
.pf-product-cell-total { grid-column: 4; }
.pf-product-cell-actions { grid-column: 5; }
.pf-product-ident { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.pf-product-tools { display: flex; align-items: center; gap: 8px; padding-left: 36px; }
.pf-change-item { flex: none; font-size: 12px; }
.pf-line-comment { min-width: 0; flex: 1; }
.pf-line-comment input { width: 100%; min-height: 28px; padding: 0 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); font-size: 12px; }
.pf-line-comment input::placeholder { color: #7C8881; }
.pf-line-comment input:hover { border-color: var(--line); background: var(--surface); }
.pf-line-comment input:focus { border-color: #D5DAD3; background: var(--surface); outline: 2px solid var(--ozon); outline-offset: 1px; }
.pf-product-cell-head { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.pf-cell-label { display: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.pf-product-cell-actions { display: flex; justify-content: flex-end; }
.pf-product-cell-actions .icon-btn { width: 34px; height: 34px; border-color: transparent; color: var(--muted); }
.pf-product-cell-actions .icon-btn:hover { border-color: #D5DAD3; color: var(--danger-ink); background: var(--danger-soft); }
.pf-product-row .pf-picker { grid-column: 1 / -1; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.pf-product-row[data-item=""] > .pf-product-cell { display: none; }
.pf-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-picker-head b { font-size: 13px; }
.pf-picker-head .icon-btn { width: 32px; height: 32px; border-color: transparent; color: var(--muted); }
.pf-product-row .pf-seg { padding: 2px; border-radius: 8px; }
.pf-product-row .pf-seg button { min-height: 28px; padding: 0 8px; border-radius: 6px; font-size: 11px; }
.pf-product-row .pf-formula { flex-wrap: nowrap; gap: 5px; align-items: flex-end; }
.pf-product-row .pf-mini { min-width: 0; max-width: none; flex: 1 1 72px; }
.pf-product-row .pf-mini input { min-height: 38px; padding: 0 8px; font-size: 14px; }
.pf-product-row .pf-op { padding: 0 0 8px; font-size: 15px; }
.pf-product-row .pf-out, .pf-product-row .pf-rate-text { min-height: 38px; font-size: 13px; }
.pf-product-cell-qty [data-mode="boxes"] { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.pf-product-cell-qty [data-mode="boxes"] .pf-op-equals { display: none; }
.pf-product-cell-qty [data-mode="boxes"] .pf-out { grid-column: 1 / -1; min-height: 24px; justify-self: end; }
.pf-product-cell-price .pf-formula { align-items: stretch; }
.pf-price-conversion { min-width: 72px; display: flex; flex: 0 1 auto; flex-direction: column; justify-content: flex-end; padding-bottom: 2px; }
.pf-product-row .pf-price-conversion .pf-rate-text, .pf-product-row .pf-price-conversion .pf-out { min-height: 0; display: block; white-space: nowrap; }
.pf-product-row .pf-price-conversion .pf-rate-text { color: var(--muted); font-size: 10px; }
.pf-product-row .pf-price-conversion .pf-out { margin-top: 4px; color: var(--ink); font-size: 13px; font-weight: 700; }
.pf-product-row .pf-fx-toggle { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pf-product-row .pf-fx { grid-template-columns: 1fr; gap: 7px; margin-top: 8px; padding-top: 8px; }
.pf-product-row .pf-fx .field { font-size: 11px; }
.pf-product-row .pf-fx .field input, .pf-product-row .pf-fx .field select { min-height: 36px; font-size: 13px; }
.pf-received-note { margin-top: 6px; color: var(--warn-ink); font-size: 11px; }
.pf-line-head { display: flex; gap: 12px; align-items: center; }
.pf-num { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.pf-item { flex: 1; min-width: 0; }
.pf-line-head .icon-btn { width: 38px; height: 38px; }
.pf-picker { display: flex; flex-direction: column; gap: 8px; }
.pf-results { max-height: 260px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 12px; }
.pf-result-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line-soft); background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.pf-result-item:hover, .pf-result-item:focus-visible { background: var(--surface-2); }
.pf-result-item .item-text { flex: 1; }
.pf-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pf-block { background: var(--surface-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pf-block-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.pf-formula { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.pf-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1 1 90px; min-width: 80px; max-width: 160px; }
.pf-mini input { min-height: 44px; padding: 0 10px; border: 1px solid #D5DAD3; border-radius: var(--radius-sm); background: var(--surface); font-size: 16px; font-weight: 600; color: var(--ink); width: 100%; }
.pf-op { font-size: 18px; color: #9AA59F; padding-bottom: 10px; }
.pf-out { min-height: 44px; display: flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pf-rate-text { min-height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.pf-fx { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pf-fx-toggle { font-size: 13px; }
.pf-result { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); }
.pf-product-row .pf-result { min-height: 100%; padding: 0; border-radius: 0; background: transparent; gap: 10px; }
.pf-result-total, .pf-result-cost { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-result-total > span, .pf-result-cost > span { color: var(--muted); font-size: 11px; }
.pf-result-total b { color: var(--ink); font-size: 14px; }
.pf-result-cost { padding-top: 7px; border-top: 1px solid var(--line-soft); }
.pf-result-cost b { color: var(--brand-ink); font-size: 16px; }
.pf-result-total small, .pf-result-cost small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; }
.pf-result-empty { color: var(--muted); font-size: 12px; line-height: 1.4; }
.pf-result-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--ink-2); }
.pf-result-row.hint { justify-content: flex-start; }
.pf-cost span { color: var(--brand-ink); font-size: 16px; }

.pf-expenses { display: flex; flex-direction: column; gap: 10px; }
.pf-expense { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(120px, .8fr) minmax(160px, 2fr) auto; gap: 10px; align-items: end; }
.pf-alloc { display: flex; flex-direction: column; gap: 8px; }
.pf-foot-total { margin-right: auto; align-self: center; font-size: 14px; color: var(--ink-2); }
.pf-foot-total b { color: var(--ink); font-size: 16px; }

@container app (max-width: 900px) {
  .pf-aside { max-width: none; position: static; }
  .pf-summary { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(280px, 1.35fr); align-items: start; }
  .pf-summary h3 { grid-column: 1 / -1; }
  .pf-calc-state { grid-column: 1 / -1; }
  .pf-products-head { display: none; }
  .pf-product-row { grid-template-columns: minmax(210px, 1.1fr) minmax(190px, 1fr) 36px; row-gap: 12px; }
  .pf-product-cell-item { grid-column: 1 / 2; grid-row: 1 / 3; }
  .pf-product-cell-qty { grid-column: 2 / 3; }
  .pf-product-cell-price { grid-column: 2 / 3; }
  .pf-product-cell-total { grid-column: 1 / 3; display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--line-soft); }
  .pf-result-cost { padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--line-soft); }
  .pf-product-cell-actions { grid-column: 3; grid-row: 1; }
  .pf-cell-label { display: inline; }
}

@container app (max-width: 640px) {
  .pf-aside { max-width: none; position: static; }
  .pf-step { padding: 14px; }
  .pf-summary { display: flex; }
  .pf-product-row { grid-template-columns: 1fr 34px; padding: 12px; row-gap: 14px; }
  .pf-product-cell-item, .pf-product-cell-qty, .pf-product-cell-price, .pf-product-cell-total { grid-column: 1 / -1; grid-row: auto; }
  .pf-product-cell-actions { grid-column: 2; grid-row: 1; }
  .pf-product-ident { padding-right: 36px; }
  .pf-product-row .pf-picker { grid-column: 1 / -1; }
  .pf-product-row .pf-result { grid-template-columns: 1fr 1fr; }
  .pf-product-tools { padding-left: 36px; }
  .pf-line:not(.pf-product-row) { padding: 12px; }
  .pf-line-grid { grid-template-columns: 1fr; }
  .pf-line:not(.pf-product-row) .pf-line-head { flex-wrap: wrap; }
  .pf-line:not(.pf-product-row) .pf-item { flex: 1 1 calc(100% - 44px); }
  .pf-line:not(.pf-product-row) .pf-line-head > .actions { width: 100%; justify-content: flex-end; }
  .pf-expense { grid-template-columns: 1fr 1fr auto; }
  .pf-expense > .field:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .pf-foot-total { flex-basis: 100%; text-align: center; }
}

/* ---------- Приёмка по партии: прогресс строки и состояния ---------- */
.rc-progress { display: flex; flex-direction: column; gap: 8px; }
.rc-bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.rc-bar span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.rc-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.rc-facts b { color: var(--ink); }
.rc-line.is-off { border-left-color: #C9CFC8; }
.rc-line.is-off .pf-result { background: var(--surface-2); }
.rc-line.is-error { border-color: var(--danger-ink); border-left-color: var(--danger-ink); }
.rc-line.is-error .pf-result { background: var(--danger-soft); }
.rc-warn { color: var(--danger-ink); font-weight: 600; }

/* Расход партии: на всю партию / на один товар, валюта и курс, способ деления */
.pf-expense-card { border: 1px solid #D5DAD3; border-left: 4px solid var(--warn); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.pf-expense-head { display: flex; gap: 12px; align-items: center; }
.pf-expense-head .seg { margin-right: auto; }
.pf-expense-head .icon-btn { width: 38px; height: 38px; }
.pf-expense-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pf-expense-result { font-size: 14px; color: var(--ink-2); padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); }
.pd-expenses { display: flex; flex-direction: column; padding: 8px 22px 20px; }
.pd-expense { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.pf-result.is-stale { opacity: .55; }
.pf-result.is-stale::after { content: "пересчитывается…"; font-size: 12px; color: var(--muted); }


.dialog.is-xl { width: min(1500px, calc(100vw - 28px)); }
.pf.pf-compact { flex-wrap: nowrap; gap: 14px; }
.pf-compact .pf-main { gap: 12px; flex-basis: 860px; }
.pf-compact .pf-aside { flex: 0 0 276px; max-width: 276px; }
.pf-panel { border: 1px solid var(--line-soft); border-radius: 13px; padding: 13px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 11px; }
.pf-panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pf-panel-title h3 { font-size: 16px; line-height: 1.35; }
.pf-panel-title .hint { margin-top: 2px; }
.pf-party-fields { display: grid; grid-template-columns: 1fr 1.15fr .9fr .9fr; gap: 10px; }
.pf-party-fields .field, .pf-payment-panel .field { min-width: 0; }
.pf-party-fields input, .pf-payment-panel input { min-height: 40px; }
.pf-party-fx { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pf-party-fx > .pf-label { align-self: center; }
.pf-party-fx .pf-rate-field { flex: 0 1 270px; }
.pf-rate-input input { min-height: 38px; }
.pf-compact .pf-seg { flex-wrap: nowrap; }
.pf-compact .pf-seg button { min-height: 32px; padding: 0 10px; font-size: 12px; white-space: nowrap; }

.pf-products-panel { min-height: 386px; overflow: hidden; }
.pf-products-head { width: calc(100% - 404px); display: grid; grid-template-columns: minmax(210px, 2fr) minmax(82px, .7fr) minmax(92px, .75fr) minmax(132px, 1fr); gap: 8px; padding: 7px 11px; border: 1px solid var(--line-soft); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.pf-product-list { position: relative; min-height: 315px; padding-right: 404px; gap: 0; border: 1px solid var(--line-soft); border-radius: 0 10px 10px 10px; background: var(--surface); overflow: hidden; }
.pf-product-row { display: block; position: static; padding: 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: var(--surface); }
.pf-product-row:last-child { border-bottom: 0; }
.pf-product-row:focus-within { background: var(--surface); box-shadow: none; }
.pf-product-summary { position: relative; width: 100%; min-height: 68px; display: grid; grid-template-columns: minmax(190px, 2fr) minmax(78px, .7fr) minmax(88px, .75fr) minmax(124px, 1fr) 14px; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.pf-product-summary:hover { background: var(--surface-2); }
.pf-product-row.is-selected .pf-product-summary { border-left-color: var(--brand); background: var(--brand-soft); }
.pf-product-name { min-width: 0; display: flex; align-items: center; gap: 8px; }
.pf-product-name > [data-item-view] { min-width: 0; flex: 1; }
.pf-product-name .item, .pf-editor-item .item { min-width: 0; }
.pf-product-name .item-text strong, .pf-product-name .item-text span, .pf-editor-item .item-text strong, .pf-editor-item .item-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-empty-item { display: flex; flex-direction: column; min-width: 0; }
.pf-empty-item small { color: var(--muted); font-size: 11px; }
.pf-product-metric { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-product-metric small { display: none; color: var(--muted); font-size: 10px; }
.pf-product-metric b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pf-product-sum { min-height: 0 !important; padding: 0 !important; gap: 2px !important; border-radius: 0 !important; background: transparent !important; }
.pf-product-sum em { color: var(--brand-ink); font-size: 10px; font-style: normal; line-height: 1.25; }
.pf-product-chevron { color: var(--muted); font-size: 22px; }
.pf-product-row.is-selected .pf-product-chevron { color: var(--brand-ink); transform: rotate(180deg); }

.pf-product-editor { display: none; position: absolute; z-index: 1; top: 0; right: 0; width: 403px; min-height: 100%; padding: 13px; border-left: 1px solid var(--line); background: #FBFCFA; flex-direction: column; gap: 11px; }
.pf-product-row.is-selected .pf-product-editor { display: flex; }
.pf-editor-head, .pf-editor-item, .pf-editor-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-editor-head > div { display: flex; flex-direction: column; min-width: 0; }
.pf-editor-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-editor-kicker { color: var(--muted); font-size: 11px; }
.pf-editor-head .icon-btn { width: 32px; height: 32px; color: var(--muted); }
.pf-editor-item { padding: 9px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }
.pf-editor-item > span { min-width: 0; flex: 1; }
.pf-editor-section { padding-top: 10px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.pf-editor-label > span { font-size: 12px; font-weight: 700; }
.pf-product-editor .pf-seg { padding: 2px; }
.pf-product-editor .pf-seg button { min-height: 27px; padding: 0 8px; font-size: 11px; }
.pf-product-editor .pf-formula { flex-wrap: nowrap; align-items: flex-end; gap: 6px; }
.pf-product-editor .pf-mini { min-width: 0; max-width: none; flex: 1 1 100px; }
.pf-product-editor .pf-mini-wide { flex: 1 1 150px; }
.pf-product-editor .pf-mini input { min-height: 38px; font-size: 14px; }
.pf-product-editor .pf-op { padding-bottom: 8px; }
.pf-product-editor .pf-out, .pf-product-editor .pf-rate-text { min-height: 38px; font-size: 13px; }
.pf-product-editor .pf-price-conversion { min-width: 88px; }
.pf-product-editor .pf-fx { margin-top: 2px; padding-top: 8px; grid-template-columns: 1fr 1fr; }
.pf-product-editor .pf-fx input, .pf-product-editor .pf-fx select { min-height: 36px; }
.pf-editor-comment input { min-height: 38px; }
.pf-editor-cost { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px; border-radius: 9px; background: var(--brand-soft); }
.pf-editor-cost span { color: var(--brand-ink); font-size: 11px; }
.pf-editor-cost b { color: var(--brand-ink); text-align: right; }
.pf-editor-cost small { grid-column: 1 / -1; color: var(--muted); text-align: right; }
.pf-product-editor .pf-picker { padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.pf-product-editor .pf-results { max-height: 180px; }

.pf-expenses { gap: 7px; }
.pf-expense-row { display: grid; grid-template-columns: 28px minmax(135px, 1.15fr) minmax(115px, .9fr) minmax(120px, 1fr) minmax(95px, .65fr) minmax(80px, .55fr) auto 34px; gap: 7px; align-items: end; padding: 9px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); }
.pf-expense-row .pf-num { width: 26px; height: 26px; align-self: center; }
.pf-expense-row .field { min-width: 0; font-size: 10px; }
.pf-expense-row input, .pf-expense-row select { min-height: 36px; padding-left: 8px; padding-right: 8px; font-size: 12px; }
.pf-expense-more { min-height: 36px; }
.pf-expense-row > .icon-btn { width: 34px; height: 34px; color: var(--muted); }
.pf-expense-details { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(130px, .8fr) minmax(160px, 1fr) minmax(200px, 1.5fr); gap: 7px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pf-expense-result { grid-column: 2 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 6px 8px; border-radius: 7px; background: var(--warn-soft); color: var(--ink-2); font-size: 12px; }

.pf-allocation { margin-top: 3px; padding: 11px; border: 1px solid #CFE1D5; border-radius: 11px; background: #F6FAF7; display: flex; flex-direction: column; gap: 9px; }
.pf-allocation-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pf-allocation-head > div:first-child { min-width: 180px; }
.pf-allocation-head .hint { max-width: 620px; margin-top: 3px; }
.pf-auto-rule { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid #DCE9E0; }
.pf-allocation-list { display: flex; flex-direction: column; border: 1px solid #DCE9E0; border-radius: 9px; overflow: hidden; background: var(--surface); }
.pf-allocation-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, .8fr) 112px minmax(160px, 1fr); gap: 10px; align-items: center; min-height: 52px; padding: 7px 9px; border-bottom: 1px solid var(--line-soft); }
.pf-allocation-row:last-child { border-bottom: 0; }
.pf-allocation-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-allocation-product > b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; }
.pf-allocation-product > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pf-allocation-row > label { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 11px; }
.pf-money-input { display: flex; align-items: center; border: 1px solid #D5DAD3; border-radius: 8px; background: var(--surface); overflow: hidden; }
.pf-money-input input { width: 110px; min-height: 34px; padding: 0 7px; border: 0; font-size: 13px; font-weight: 650; }
.pf-money-input b { padding-right: 8px; color: var(--ink); }
.pf-money-input input:disabled { background: var(--surface-2); color: var(--ink); opacity: 1; }
.pf-lock { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.pf-lock > span:first-child { color: #AAB4AE; font-size: 9px; }
.pf-lock.is-locked { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.pf-lock.is-locked > span:first-child { color: var(--brand); }
.pf-allocation-impact { color: var(--muted); font-size: 11px; text-align: right; }
.pf-allocation-impact b { color: var(--brand-ink); }
.pf-allocation-balance { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-radius: 8px; font-size: 12px; }
.pf-allocation-balance.is-ok { background: var(--brand-soft); color: var(--brand-ink); }
.pf-allocation-balance.is-error { background: var(--danger-soft); color: var(--danger-ink); }

@container app (max-width: 1100px) {
  .pf.pf-compact { flex-wrap: wrap; }
  .pf-compact .pf-aside { position: static; flex: 1 1 100%; max-width: none; }
  .pf-compact .pf-summary { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(280px, 1.3fr); }
  .pf-compact .pf-summary h3, .pf-compact .pf-calc-state { grid-column: 1 / -1; }
  .pf-expense-row { grid-template-columns: 28px repeat(3, minmax(120px, 1fr)) auto 34px; }
}
@container app (max-width: 820px) {
  .pf-products-head { width: 100%; border-radius: 10px 10px 0 0; }
  .pf-product-list { min-height: 0; padding-right: 0; border-radius: 0 0 10px 10px; }
  .pf-product-editor { position: static; width: auto; min-height: 0; border-left: 3px solid var(--brand); border-top: 1px solid var(--line); }
  .pf-party-fields { grid-template-columns: 1fr 1fr; }
  .pf-expense-row { grid-template-columns: 28px repeat(2, minmax(120px, 1fr)) 34px; }
  .pf-expense-row > .icon-btn { grid-column: 4; grid-row: 1; }
  .pf-expense-details, .pf-expense-result { grid-column: 2 / -1; }
  .pf-expense-details { grid-template-columns: 1fr 1fr; }
  .pf-allocation-head { flex-direction: column; }
  .pf-allocation-row { grid-template-columns: minmax(120px, 1fr) minmax(170px, 1fr) 100px; }
  .pf-allocation-impact { grid-column: 1 / -1; text-align: right; }
}
@container app (max-width: 640px) {
  .dialog.is-xl { width: 100%; }
  .pf-panel { padding: 11px; border-radius: 11px; }
  .pf-panel-title { align-items: center; }
  .pf-panel-title .hint { display: none; }
  .pf-party-fields { grid-template-columns: 1fr; }
  .pf-party-fx { align-items: stretch; }
  .pf-party-fx > .pf-label { width: 100%; }
  .pf-party-fx .pf-seg, .pf-party-fx .pf-rate-field { width: 100%; flex-basis: 100%; }
  .pf-party-fx .pf-seg button { flex: 1; }
  .pf-products-head { display: none; }
  .pf-product-list { border-radius: 10px; }
  .pf-product-summary { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 28px 10px 10px; }
  .pf-product-name { grid-column: 1 / -1; }
  .pf-product-metric small { display: block; }
  .pf-product-metric b { font-size: 12px; }
  .pf-product-chevron { position: absolute; top: 16px; right: 9px; }
  .pf-product-editor { padding: 11px; }
  .pf-editor-item { align-items: flex-start; }
  .pf-product-editor .pf-formula { flex-wrap: wrap; }
  .pf-product-editor .pf-fx { grid-template-columns: 1fr; }
  .pf-expense-row { grid-template-columns: 28px 1fr 34px; }
  .pf-expense-row .field, .pf-expense-row .pf-expense-more { grid-column: 2; }
  .pf-expense-row > .icon-btn { grid-column: 3; grid-row: 1; }
  .pf-expense-details, .pf-expense-result { grid-column: 1 / -1; }
  .pf-expense-details { grid-template-columns: 1fr; }
  .pf-allocation { margin-left: -2px; margin-right: -2px; padding: 9px; }
  .pf-allocation-head .pf-seg { width: 100%; overflow-x: auto; }
  .pf-allocation-head .pf-seg button { flex: 1 0 auto; }
  .pf-auto-rule { align-items: stretch; flex-direction: column; }
  .pf-auto-rule .pf-seg { width: 100%; }
  .pf-auto-rule .pf-seg button { flex: 1; }
  .pf-allocation-row { grid-template-columns: 1fr auto; gap: 7px; padding: 9px; }
  .pf-allocation-product { grid-column: 1 / -1; }
  .pf-allocation-row > label { justify-content: flex-start; }
  .pf-lock { min-width: 96px; }
  .pf-allocation-impact { grid-column: 1 / -1; text-align: left; }
  .pf-money-input input { width: 96px; }
  .pf-payment-panel .form-grid { grid-template-columns: 1fr; }
  .pf-compact .pf-summary { display: flex; }
  .pf-foot-total { flex-basis: 100%; text-align: center; }
}