:root{
  --bg:#f4f5f7; --panel:#ffffff; --border:#e2e4e9; --text:#1c1f26; --muted:#6b7280;
  --accent:#2563eb; --accent-weak:#e8effe; --danger:#dc2626; --hover:#f0f4ff; --row-highlight:#f7f9ff;
  --sticky-bg:#ffffff; --chip-bg:#eef0f4; --chip-active-bg:#2563eb; --chip-active-text:#ffffff;
  --company-bg-a:#f7f9fc; --company-bg-b:#eef1f7;
  --success:#16a34a; --success-weak:#dcfce7;
  --shadow:0 2px 10px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14161a; --panel:#1c1f26; --border:#2b2f38; --text:#e6e8ec; --muted:#9aa1ad;
    --accent:#5b9bff; --accent-weak:#1c2942; --danger:#f87171; --hover:#232a3a; --row-highlight:#2a3244;
    --sticky-bg:#1c1f26; --chip-bg:#262a33; --chip-active-bg:#5b9bff; --chip-active-text:#0b0e14;
    --company-bg-a:#20242c; --company-bg-b:#262b34;
    --success:#4ade80; --success-weak:#153320;
    --shadow:0 2px 12px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.app{max-width:none;margin:0;padding:14px 16px;}
h1{font-size:20px;margin:0 0 4px;}
.subtitle{color:var(--muted);font-size:13px;margin-bottom:16px;}

/* ---------- Боковая панель (основные разделы) ---------- */
.layout{display:flex;min-height:100vh;align-items:flex-start;}
.sidebar{display:flex;flex-direction:column;flex:0 0 220px;width:220px;background:var(--panel);border-right:1px solid var(--border);min-height:100vh;position:sticky;top:0;transition:flex-basis .15s,width .15s;}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:15px;padding:16px 20px;color:var(--text);border-bottom:1px solid var(--border);}
.sidebar-brand-text{white-space:nowrap;overflow:hidden;}
.sidebar-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border);border-radius:6px;background:none;color:var(--muted);cursor:pointer;padding:0;}
.sidebar-toggle:hover{color:var(--text);border-color:var(--accent);}
.sidebar-toggle svg{transition:transform .15s;}
.sidebar-nav{display:flex;flex-direction:column;padding:8px 0;}
.sidebar-nav-bottom{margin-top:auto;border-top:1px solid var(--border);}
.sidebar-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 20px;border:none;border-left:3px solid transparent;background:none;color:var(--muted);font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;text-decoration:none;box-sizing:border-box;}
.sidebar-item:hover{background:var(--hover);color:var(--text);}
.sidebar-item.active{color:var(--accent);background:var(--accent-weak);border-left-color:var(--accent);}
.sidebar-icon{flex:0 0 auto;display:inline-flex;}
.sidebar-label{overflow:hidden;text-overflow:ellipsis;}

.sidebar.collapsed{flex-basis:60px;width:60px;}
.sidebar.collapsed .sidebar-brand{justify-content:center;padding:16px 8px;}
.sidebar.collapsed .sidebar-brand-text{display:none;}
.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg);}
.sidebar.collapsed .sidebar-item{justify-content:center;padding:11px 0;}
.sidebar.collapsed .sidebar-label{display:none;}

.main-content{flex:1;min-width:0;}
.sidebar-section{display:none;}
.sidebar-section.active{display:block;}

.text-left{text-align:left;}
.text-center{text-align:center;}

/* ---------- Вкладки 1 уровня (разделы модуля) ---------- */
.tabs-level1{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:16px;}
.tabs-level1 .tab{padding:10px 16px;font-weight:600;font-size:14px;color:var(--muted);border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:none;cursor:pointer;font-family:inherit;}
.tabs-level1 .tab.active{color:var(--accent);border-color:var(--accent);}
.app-section{display:none;}
.app-section.active{display:block;}

.tabs-level2{display:flex;gap:8px;margin-bottom:16px;}
.tabs-level2 button{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500;}
.tabs-level2 button.active{background:var(--accent);color:#fff;border-color:var(--accent);}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);}
.hidden{display:none !important;}

.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:500;}
.btn:hover{background:var(--hover);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.primary:hover{filter:brightness(1.07);}
.btn.danger{color:var(--danger);border-color:var(--danger);}
.btn.success{color:var(--success);border-color:var(--success);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.upload-info{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.search-box{margin-bottom:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.search-input-wrap{position:relative;width:100%;max-width:420px;}
.search-input-wrap input{width:100%;padding:8px 28px 8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:13px;}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--muted);font-size:16px;line-height:1;display:none;user-select:none;}
.search-clear.visible{display:block;}
.search-clear:hover{color:var(--text);}
.search-box-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;}
.checkbox-label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);cursor:pointer;user-select:none;white-space:nowrap;}
.checkbox-label input{width:14px;height:14px;cursor:pointer;}

.dropzone{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;background:var(--bg);width:100%;}
.dropzone:hover{border-color:var(--accent);}
.dropzone.dragover{border-color:var(--accent);background:var(--accent-weak);}
.dropzone-icon{font-size:18px;line-height:1;flex:0 0 auto;color:var(--muted);}
.dropzone-text{display:flex;flex-direction:column;gap:2px;}
.dropzone-title{font-size:13.5px;color:var(--text);}
.dropzone-subtitle{font-size:12px;color:var(--muted);}

.filter-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.filter-row .label{font-size:12px;color:var(--muted);font-weight:600;padding-top:7px;min-width:70px;}
.chip-group{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:16px;background:var(--chip-bg);color:var(--text);font-size:12px;cursor:pointer;border:1px solid transparent;user-select:none;}
.chip:hover{border-color:var(--accent);}
.chip.active{background:var(--chip-active-bg);color:var(--chip-active-text);}
.chip .x{font-weight:700;opacity:.7;}
.chip.active .x:hover{opacity:1;}
.filter-actions{display:flex;gap:10px;padding-top:8px;white-space:nowrap;}
.filter-clear{font-size:11px;color:var(--muted);cursor:pointer;text-decoration:underline;white-space:nowrap;}

.table-scroll{overflow:auto;max-height:65vh;border:1px solid var(--border);border-radius:8px;position:relative;}
table{border-collapse:separate;border-spacing:0;font-size:12.5px;white-space:nowrap;}
th,td{padding:6px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);}
thead th{position:sticky;top:0;background:var(--panel);z-index:3;font-weight:600;text-align:center;}
thead tr.sub th{top:var(--head1-h,33px);z-index:3;}
/* Артикул и Наименование — по левому краю, все остальные столбцы — по центру */
th.sticky-2,th.sticky-3,th.mult-sticky-1,th.mult-sticky-2{text-align:left;}
tbody tr:hover td{background:var(--hover);}
td.num{text-align:center;font-variant-numeric:tabular-nums;cursor:default;}
td.num[data-metric]{cursor:pointer;}
td.total{font-weight:700;background:var(--accent-weak);text-align:center;cursor:pointer;}
th.total{background:var(--accent-weak);text-align:center;}
td.company-cell{text-align:center;}
td.company-a{background:var(--company-bg-a);}
td.company-b{background:var(--company-bg-b);}
th.company-a,th.company-b{text-align:center;}
th.company-a{background:var(--company-bg-a);}
th.company-b{background:var(--company-bg-b);}
.sticky-1{position:sticky;left:0;z-index:2;background:var(--sticky-bg);width:36px;min-width:36px;max-width:36px;text-align:center;}
.sticky-2,.sticky-3,.sticky-4{position:sticky;z-index:2;background:var(--sticky-bg);overflow:hidden;text-overflow:ellipsis;}
thead th.sticky-1,thead th.sticky-2,thead th.sticky-3,thead th.sticky-4{z-index:4;}
.sticky-1,.sticky-2,.sticky-3,.sticky-4{box-shadow:1px 0 0 0 var(--border);}
.col-resizer{position:absolute;top:0;right:-4px;bottom:0;width:8px;cursor:col-resize;z-index:6;}
.col-resizer:hover{background:var(--accent);opacity:.5;}
.missing-flag{color:var(--danger);font-size:11px;font-weight:600;}
/* «Свободный остаток»: вчера было 0, сегодня больше нуля — см. isNewFreeStock/isNewFreeStockTotal
   в stock-control.js. Компаунд-селектор (а не просто .stock-cell-new) — чтобы специфичность точно
   перебивала td.total/td.company-a/td.company-b независимо от порядка правил в файле. */
td.num.stock-cell-new,td.total.stock-cell-new{background:var(--success-weak);color:var(--success);font-weight:700;}
.row-checkbox,.fav-checkbox{width:15px;height:15px;cursor:pointer;}
.empty-state{padding:40px;text-align:center;color:var(--muted);font-size:13px;}
.count-info{font-size:12px;color:var(--muted);margin-bottom:8px;}
.count-info-row{display:flex;align-items:center;gap:12px;margin-bottom:8px;}

.tag-cell{white-space:normal;vertical-align:top;padding:4px 6px;}
.tag-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:center;}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--chip-bg);border-radius:10px;padding:2px 6px;font-size:11px;white-space:nowrap;}
.tag-remove{cursor:pointer;color:var(--danger);font-weight:700;}
.tag-input{border:1px solid var(--accent);background:var(--bg);color:var(--text);font-size:11px;width:70px;padding:2px 4px;border-radius:6px;flex:0 0 auto;}
.tag-input:focus{outline:none;}
.tag-add-btn{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);background:var(--chip-bg);color:var(--muted);font-size:12px;line-height:1;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.tag-add-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

.bulk-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:14px;z-index:50;}
.bulk-bar span{font-size:13px;color:var(--muted);}

#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;z-index:200;opacity:0;transition:opacity .25s;pointer-events:none;}
#toast.show{opacity:1;}

/* ---------- Плавающие панели (попапы) — общий механизм из core.js ---------- */
.floating-panel{position:fixed;display:none;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);padding:10px 12px;font-size:12px;z-index:150;min-width:170px;}
.breakdown-title{font-weight:600;margin-bottom:6px;color:var(--text);}
.breakdown-line{display:flex;justify-content:space-between;gap:16px;padding:2px 0;color:var(--text);}
.breakdown-table{border-collapse:collapse;font-size:12px;}
.breakdown-table th,.breakdown-table td{padding:3px 10px;text-align:right;border:none;white-space:nowrap;}
.breakdown-table th:first-child,.breakdown-table td:first-child{text-align:left;}
.breakdown-table thead th{border-bottom:1px solid var(--border);font-weight:600;color:var(--muted);}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:300;}
.modal-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;width:440px;max-width:92vw;box-shadow:var(--shadow);}
.modal-title{font-weight:600;font-size:15px;margin-bottom:12px;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.sc-confirm-message{font-size:13px;color:var(--text);line-height:1.5;white-space:pre-line;}

/* ---------- Авторизация: блюр основного поля + модалка входа ----------
   Класс auth-locked — на <html>, не на <body>: выставляется синхронным inline-скриптом
   в самом начале <head> (см. index.html/unit-economics.html), ещё до того как браузер
   успеет что-то нарисовать, иначе при каждой перезагрузке/переходе между HTML-страницами
   было бы заметное мигание модалки, пока JS в конце body не подтвердит реальную сессию. */
html.auth-locked .layout{filter:blur(6px);pointer-events:none;user-select:none;}
#loginModal{display:none;z-index:500;}
html.auth-locked #loginModal{display:flex;}
.login-field{margin-bottom:12px;}
.login-field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px;}
.login-field input{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13.5px;padding:8px 10px;border-radius:8px;}
.login-field input:focus{outline:none;border-color:var(--accent);}
.login-error{color:var(--danger);font-size:12.5px;margin-top:-2px;margin-bottom:10px;}

th.sticky-1 input[type="checkbox"]{width:14px;height:14px;cursor:pointer;}

/* ---------- Строка добавления новой позиции («Добавить») ---------- */
.cell-input{width:100%;box-sizing:border-box;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;padding:4px 6px;border-radius:4px;}
.cell-input:focus{outline:none;border-color:var(--accent);}
.add-row-hint{color:var(--muted);font-size:11px;font-style:italic;white-space:nowrap;}
.add-row-highlight td{background:var(--accent-weak);}

/* ---------- Раздел «Кратность» ---------- */
/* max-height задаётся не здесь, а в JS (см. updateMultTableWrapHeight в multiplicity.js) — гадать
   фиксированным числом в CSS (calc(100vh - Npx)) ненадёжно: реальная высота того, что выше
   (заголовок, вкладки, паддинг панели, тулбар поиска), зависит от рендеринга конкретного браузера
   и на реальном экране пользователя разошлась с расчётной. Наследуемый .table-scroll{max-height:
   65vh} остаётся как запасной вариант до первого срабатывания JS. */
.mult-table{table-layout:fixed;width:100%;}
/* Столбцы намеренно ужаты (см. MULT_COL_DEFAULT_WIDTHS в multiplicity.js) — overflow:hidden
   гарантирует, что длинные подписи обрежутся многоточием и никогда не «вылезут» за границу
   ячейки, а не будут наезжать на соседний столбец. */
.mult-table th,.mult-table td{overflow:hidden;text-overflow:ellipsis;}
.mult-sticky-1,.mult-sticky-2{position:sticky;background:var(--sticky-bg);box-shadow:1px 0 0 0 var(--border);overflow:hidden;text-overflow:ellipsis;z-index:2;}
thead .mult-sticky-1,thead .mult-sticky-2{z-index:4;}
.mult-sticky-1{left:0;}
.mult-sticky-2{left:100px;} /* дефолт до первого рендера — дальше пересчитывается в multUpdateStickyOffset() */
.delete-cell{text-align:center;}
.row-delete-btn{cursor:pointer;color:var(--danger);font-weight:700;}
.mult-input{display:block;width:100%;box-sizing:border-box;margin:0 auto;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;padding:4px 6px;border-radius:4px;text-align:center;}
.mult-input:focus{outline:none;border-color:var(--accent);}
.mult-input::-webkit-outer-spin-button,.mult-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mult-input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
.mult-select{display:block;width:100%;box-sizing:border-box;margin:0 auto;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;padding:4px 6px;border-radius:4px;text-align:center;text-align-last:center;}
.mult-select:focus{outline:none;border-color:var(--accent);}

/* ---------- Сортировка по столбцам (Артикул / Наименование) ---------- */
.sort-arrows{display:inline-flex;flex-direction:column;margin-left:4px;vertical-align:middle;line-height:1;gap:1px;}
.sort-arrow{cursor:pointer;font-size:8px;color:var(--muted);}
.sort-arrow:hover{color:var(--text);}
.sort-arrow.active{color:var(--accent);}

/* ---------- Подсказка при добавлении строки ---------- */
.hint-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:10px 16px;font-size:13px;color:var(--muted);z-index:60;}

/* ---------- Раздел «Аналитика поставок» ---------- */
.supply-toolbar{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
.supply-toolbar-group{display:flex;flex-direction:column;gap:5px;}
/* Единый шрифт подписей над контролами тулбара («Артикул»/«Склад отгрузки»/«Таймслот» и т.п., см.
   ТЗ пользователя) — раньше .label тут не переопределялся вообще и подписи рендерились дефолтным
   шрифтом браузера (крупнее и другого начертания, чем весь остальной интерфейс), из-за чего три
   подписи визуально не были похожи друг на друга. Та же типографика, что и у .filter-row .label
   (см. выше) — единый паттерн «подпись над контролом» по всему приложению. */
.supply-toolbar-group .label{padding-top:0;min-width:0;font-size:12px;color:var(--muted);font-weight:600;}
.supply-toolbar-group.hidden{display:none;}
/* «Выгрузить XLSX» («По товарам», см. scExportXlsxGroup в index.html) — крайняя справа в строке
   тулбара, тем же приёмом margin-left:auto, что и .sc-wh-reset-all (см. ниже). */
.sc-export-group{margin-left:auto;}
.supply-ms-group{position:relative;}
.supply-ms-wrap{width:260px;max-width:260px;}
.supply-ms-dropdown{position:absolute;top:100%;left:0;margin-top:4px;width:360px;max-height:280px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);z-index:40;padding:4px;}
.supply-ms-option{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;font-size:12.5px;border-radius:6px;}
.supply-ms-option:hover{background:var(--hover);}
.supply-ms-option input[type="checkbox"]{flex:none;}
.supply-ms-option-code{font-weight:600;color:var(--text);white-space:nowrap;}
.supply-ms-option-name{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.supply-ms-empty{padding:10px;font-size:12px;color:var(--muted);text-align:center;}

/* Столбцы: Артикул/Кластер, Продажи(бар), Период(график), Остаток на ЦС, Доля, В кластер,
   Из кластера, Уходимость(шт/день), Остаток FBO, Оборачиваемость, В ПУТИ, Осталось, Довезти —
   см. buildSupplyMetricCellsHtmlFor в supply-analytics.js. */
.supply-row,.supply-header-row{display:grid;grid-template-columns:220px minmax(120px,1fr) 170px 90px 90px 60px 70px 85px 70px 85px 100px 70px 90px;align-items:center;gap:12px;min-width:1470px;}

/* Заголовки зафиксированы при скролле вниз (position:sticky в .supply-header-row) — как и в
   остальных таблицах приложения (см. .table-scroll), для этого контейнеру нужна СВОЯ
   ограниченная высота с overflow:auto: если overflow-x:auto стоит без max-height (как было
   раньше), CSS-спека всё равно молча вычисляет overflow-y тоже как auto (это правило нельзя
   обойти, явно прописав overflow-y:visible рядом — по спеке «visible» в паре с любым другим
   значением всегда даёт auto), а раз контейнер никогда реально не скроллится сам по себе
   (высота равна контенту) — sticky залипает относительно него и просто уезжает вместе со
   страницей. Только один контейнер должен реально скроллиться в обе стороны. */
/* max-height задаётся не здесь, а в JS (см. updateSupplyChartWrapHeight в supply-analytics.js) —
   захардкоженное число (было calc(100vh - 256px)) один раз разошлось с реальной высотой того, что
   выше wrap на конкретном экране пользователя, и вместо скролла внутри рабочего поля начинала
   скроллиться вся страница целиком. */
#supplyChartWrap{overflow:auto;border:1px solid var(--border);border-radius:8px;position:relative;scrollbar-width:thin;}
/* Тонкий скроллбар — без этого стандартный (~17px, Windows) горизонтальный скроллбар внизу
   таблицы (грид шире панели, см. min-width на .supply-row) съедал заметно больше места, чем
   боковой отступ панели, из-за чего нижний отступ казался намного больше бокового. */
#supplyChartWrap::-webkit-scrollbar{height:8px;width:8px;}
#supplyChartWrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
#supplyChartWrap::-webkit-scrollbar-track{background:transparent;}
.supply-chart{display:flex;flex-direction:column;transition:opacity .15s;}
.supply-chart-loading{opacity:.5;}

/* Названия столбцов закреплены при скролле вниз (см. п.1.2) — свой background обязателен,
   иначе строки кластеров/товаров будут просвечивать сквозь залипшую шапку. Все столбцы —
   по центру (text-align:center ниже общий для .supply-header-cell). */
.supply-header-row{position:sticky;top:0;z-index:5;background:var(--panel);padding:0 4px 8px;border-bottom:1px solid var(--border);margin-bottom:2px;}
/* overflow-wrap: длинные однословные названия («Оборачиваемость» и т.п.) переносятся внутри
   своей колонки, а не вылезают за её границы (столбцы узкие и фиксированной ширины). */
.supply-header-cell{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;text-align:center;overflow-wrap:break-word;}
.supply-header-sub{display:block;font-weight:500;text-transform:none;letter-spacing:0;margin-top:1px;}

/* Вертикальные границы между столбцами — на прямых детях грида (и в шапке, и в строках), чтобы
   не задеть вложенные элементы (span внутри ячейки с фото и т.п.). Последний столбец — без
   границы справа (край таблицы). */
.supply-header-row > *,.supply-row > *{border-right:1px solid var(--border);padding-right:8px;}
.supply-header-row > *:last-child,.supply-row > *:last-child{border-right:none;padding-right:0;}

.supply-row{padding:4px 4px;border-bottom:1px solid var(--border);cursor:pointer;}
/* Наведение/последняя строка без нижней рамки — общее для всех строк-гридов приложения (было
   продублировано по одной и той же паре правил в 4 местах: .supply-row/.sc-row/.sc-cluster-row/
   .sc-booking-row), теперь один общий селектор. */
.supply-row:hover,.sc-row:hover,.sc-cluster-row:hover,.sc-booking-row:hover,.sc-current-row:hover{background:var(--hover);}
.supply-row:last-child,.sc-row:last-child,.sc-cluster-row:last-child,.sc-booking-row:last-child,.sc-current-row:last-child{border-bottom:none;}
.supply-row-label{font-size:12.5px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.supply-row-track{background:var(--bg);border-radius:4px;height:20px;overflow:hidden;}
.supply-row-bar{height:100%;background:var(--accent);border-radius:0 4px 4px 0;min-width:3px;}
.supply-row-value{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:center;color:var(--text);font-weight:600;}
.supply-row-stock{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:center;color:var(--accent);cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}
/* «Остаток на ЦС» построчно (см. stockCsCellHtml в supply-analytics.js) — тот же вид, что у
   остальных числовых столбцов (.supply-row-value: размер/жирность/выравнивание), плюс кликабельный
   акцент, как у «Остаток FBO» (.supply-row-stock) — попап по компаниям вместо складов. */
.supply-row-stock-cs{font-size:12.5px;font-variant-numeric:tabular-nums;text-align:center;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}

/* Строка раскрытого кластера закрепляется сразу под основной шапкой (см. п.4) — top берётся из
   реально отрисованной высоты шапки (--supply-head-h, см. syncSupplyHeaderOffset() в JS). Если
   раскрыто несколько кластеров одновременно — та, что выше по списку, естественно уступает
   место следующей при скролле (стандартное поведение нескольких sticky-соседей на одном top). */
.supply-row-sticky{position:sticky;top:var(--supply-head-h,64px);z-index:4;background:var(--panel);box-shadow:0 1px 0 0 var(--border);}

/* ---------- Раскрывающийся список товаров внутри кластера ---------- */
.supply-expand-arrow{display:inline-block;width:14px;color:var(--muted);transition:transform .12s;user-select:none;}
.supply-expand-arrow.expanded{transform:rotate(90deg);}
.supply-product-row{background:var(--bg);cursor:default;}
.supply-product-row:hover{background:var(--hover);}
.supply-product-row .supply-row-label{font-weight:400;padding-left:18px;}
/* «По товарам»: строки-кластеры внутри раскрытого товара — то же цветовое отделение от строки
   товара сверху, что и у строк-товаров внутри раскрытого кластера в «По кластерам» (см. выше). */
.supply-cluster-subrow{background:var(--bg);cursor:default;}
.supply-cluster-subrow:hover{background:var(--hover);}
.supply-cluster-subrow .supply-row-label{font-weight:400;padding-left:18px;}
.supply-product-empty{padding:8px 4px 8px 38px;font-size:12px;color:var(--muted);font-style:italic;border-bottom:1px solid var(--border);}

/* Фото — не отдельная колонка грида (сломало бы выравнивание с колонками кластера), а
   миниатюра перед текстом артикула внутри той же ячейки. Увеличено в 4 раза (было 22px). */
.supply-row-photo-cell{display:flex;align-items:center;gap:8px;}
.supply-row-photo-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.supply-row-photo{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:var(--bg);border:1px solid var(--border);}
.supply-row-photo-empty{border-style:dashed;}
/* Артикул и SKU — двумя строками в одной ячейке рядом с фото (см. buildOfferIdSkuLabelHtml) —
   можно искать/узнавать товар по любому из двух идентификаторов сразу. */
.supply-row-photo-cell-text{display:flex;flex-direction:column;gap:1px;justify-content:center;min-width:0;}
.supply-row-offerid{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;display:block;}
.supply-row-sku{font-size:10.5px;color:var(--muted);font-weight:500;}

.supply-row-chart-cell{position:relative;cursor:default;}
.supply-chart-svg{display:block;}
.supply-chart-crosshair{stroke:var(--muted);stroke-width:1;transition:opacity .1s;}
.supply-chart-dot{fill:var(--accent);stroke:var(--panel);stroke-width:2;transition:opacity .1s;}
.supply-chart-hit{cursor:crosshair;}
.supply-chart-empty{font-size:11px;color:var(--muted);height:30px;display:flex;align-items:center;}
.supply-chart-value-label,.supply-chart-date-label{position:relative;height:13px;}
.supply-chart-badge{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:600;color:var(--accent);background:var(--panel);padding:0 3px;font-variant-numeric:tabular-nums;pointer-events:none;}
.supply-chart-date-label .supply-chart-badge{color:var(--muted);font-weight:500;}

/* ---------- Всплывающий календарь («Свой период») ---------- */
.supply-calendar-popup{width:260px;}
.supply-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.supply-cal-nav{cursor:pointer;padding:2px 8px;border-radius:6px;color:var(--muted);font-size:16px;user-select:none;}
.supply-cal-nav:hover{background:var(--hover);color:var(--text);}
.supply-cal-title{font-size:13px;font-weight:600;color:var(--text);}
.supply-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10.5px;color:var(--muted);margin-bottom:4px;}
.supply-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.supply-cal-day{display:flex;align-items:center;justify-content:center;height:28px;font-size:12px;color:var(--text);cursor:pointer;border-radius:6px;user-select:none;}
.supply-cal-day:hover{background:var(--hover);}
.supply-cal-day-blank{cursor:default;}
.supply-cal-day-blank:hover{background:none;}
/* Прошедшая дата в таймслоте — недоступна для выбора (см. ТЗ пользователя): приглушена и не
   реагирует на клики/наведение вообще (pointer-events:none — событие клика не долетает до неё,
   а закрывающий :not(.supply-cal-day-disabled) в JS-обработчике — подстраховка на этот случай). */
.supply-cal-day-disabled{cursor:default;color:var(--muted);opacity:.35;pointer-events:none;}
.supply-cal-day-today{font-weight:700;box-shadow:inset 0 0 0 1px var(--accent);}
.supply-cal-day-in-range{background:var(--accent-weak);border-radius:0;}
.supply-cal-day-start,.supply-cal-day-end{background:var(--accent);color:#fff;}
.supply-cal-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}
.supply-cal-range-label{font-size:11px;color:var(--muted);}
.supply-cal-footer-actions{display:flex;align-items:center;gap:12px;}
.supply-cal-footer-actions .btn{padding:5px 12px;font-size:12px;}
.supply-cal-footer-actions .btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- «Создание поставок» ---------- */
/* Ручной список позиций для планирования поставки (товар + кластер + количество) — независим
   от данных «Аналитика поставок» (см. supply-creation.js), оформление в её стиле переиспользует
   те же примитивы (.supply-toolbar/.supply-ms-*/.supply-expand-arrow/.chip и т.п.). Тот же расчёт
   отступа снизу, что и у #supplyChartWrap (см. там) — тут ещё вкладка «По товарам/По кластерам»
   строкой выше, поэтому смещение чуть больше. */
#scTableWrap{overflow:auto;max-height:calc(100vh - 300px);border:1px solid var(--border);border-radius:8px;position:relative;scrollbar-width:thin;}
#scTableWrap::-webkit-scrollbar{height:8px;width:8px;}
#scTableWrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
#scTableWrap::-webkit-scrollbar-track{background:transparent;}

/* «Строка с товаром» (buildScProductRowHtml) — одна пара (товар, кластер); используется и как
   разбивка внутри групповой строки товара («По товарам»), и внутри строки-кластера («По
   кластерам»), см. buildScBreakdownHtml. Артикул/Название/Остаток на ЦС/Остаток на FBO/
   Оборачиваемость/Кратность — те же самые ячейки и у групповой строки товара
   (buildScProductGroupRowHtml), поэтому у обеих один и тот же .sc-row/.sc-header-row грид (иначе
   колонки не совпадали бы по ширине). Единый шрифт по всей таблице — 12.5px/обычное начертание/
   var(--text), как у «Наименование» (.sc-name) — остальные ячейки ниже приведены к этому же виду
   (см. также блок «единый шрифт» в конце секции), с двумя запланированными исключениями: остаток
   на ЦС/FBO/оборачиваемость — мельче (см. .sc-cell-text/.sc-stock-cell), кластер/«Выбрать кластер»
   — акцентный цвет и подчёркивание сохранены как признак кликабельности. */
.sc-row,.sc-header-row{display:grid;grid-template-columns:190px minmax(160px,1fr) 170px 100px 100px 130px 110px 90px 100px 100px 30px;align-items:center;gap:10px;min-width:1380px;padding:6px 4px;border-bottom:1px solid var(--border);}
/* «По кластерам» — разбивка внутри раскрытого кластера (SC_PRODUCT_HEADER_NESTED, cargoColumn=true
   в buildScProductRowHtml) добавляет отдельный столбец «Кластер» сразу после «Название» — 12
   колонок вместо 11, свой grid-template (тот же набор ширин + 150px под кластер). */
.sc-row-has-cluster-col{grid-template-columns:190px minmax(160px,1fr) 150px 100px 100px 130px 170px 110px 90px 100px 100px 30px;min-width:1540px;}
/* Липкая шапка + типографика — общая для .sc-header-row/.sc-cluster-header-row/.sc-booking-header-row
   (все три были дословно скопированы друг у друга, теперь один общий селектор). */
.sc-header-row,.sc-cluster-header-row,.sc-booking-header-row,.sc-current-header-row{position:sticky;top:0;z-index:5;background:var(--panel);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;text-align:center;border-bottom:1px solid var(--border);}
.sc-cluster-header-row > *:first-child,.sc-booking-header-row > *:first-child,.sc-current-header-row > *:first-child{text-align:left;}
/* Заголовок разбивки внутри раскрытого кластера («По кластерам», см. SC_PRODUCT_HEADER_NESTED в
   supply-creation.js) — не должен «прилипать» к верху скролла: там уже есть свой sticky-заголовок
   для строк-кластеров (.sc-cluster-header-row), а второй sticky на том же top съезжал бы поверх
   контента при скролле. */
.sc-header-row-nested{position:static;}
.sc-row{cursor:default;}
.sc-row.add-row-highlight{background:var(--accent-weak);}
.sc-product-group-row{cursor:pointer;}
/* Вложенная строка разбивки (товар внутри группы/кластера) — единая таблица без визуального
   разрыва (см. buildScBreakdownHtml в supply-creation.js: без обёртки и без повторного
   заголовка), чуть более тёмный фон и небольшой отступ слева у артикула — тот же приём, что и
   .supply-product-row/.supply-cluster-subrow в «Аналитика поставок». */
.sc-product-row{background:var(--bg);}
.sc-product-row:hover{background:var(--hover);}
.sc-product-row .sc-article{padding-left:18px;}
/* Каждая прямая ячейка грида — свой собственный контейнер обрезки (min-width:0 обязателен: по
   умолчанию у элементов грида автоматический минимальный размер равен размеру их содержимого,
   overflow/text-overflow на самой ячейке этого не отменяют, из-за чего длинный текст — длинное
   название товара, «сырое» значение зоны из Ozon вроде DANGEROUS_GOOD, длинное имя кластера —
   мог визуально вылезать поверх соседних колонок вместо обрезки по границе ячейки). */
.sc-row > *,.sc-header-row > *{border-right:1px solid var(--border);padding-right:8px;overflow:hidden;min-width:0;}
.sc-row > *:last-child,.sc-header-row > *:last-child{border-right:none;padding-right:0;}
.sc-article{max-width:100%;overflow:hidden;display:flex;align-items:center;gap:8px;}
.sc-name{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.sc-mult-cell{display:flex;flex-direction:column;align-items:center;line-height:1.3;min-width:0;max-width:100%;}
.sc-mult-main{font-size:12.5px;font-weight:400;color:var(--text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;}
.sc-mult-sub{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;}
.sc-cluster-cell{display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%;}
.sc-cluster-value,.sc-cluster-pick,.sc-cluster-summary-text{cursor:pointer;color:var(--accent);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;text-align:center;font-size:12.5px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;}
.sc-cluster-pick,.sc-cluster-summary-text{color:var(--muted);}
.sc-qty-input{width:100%;}
/* ▲/▼ рядом с «Кол-во коробок»/«Кол-во палет» — построчно добавляет/убирает одну кратность в
   «Количестве» (см. buildScProductRowHtml/scCargoStepArrowsHtml в supply-creation.js). Стрелки
   в столбик, мельче основного текста — самостоятельный спиннер, не часть числа рядом. */
.sc-cargo-step-group{display:inline-flex;flex-direction:column;margin-left:6px;vertical-align:middle;line-height:1;}
.sc-cargo-step{cursor:pointer;color:var(--accent);font-size:8px;line-height:1;}
.sc-cargo-step:hover{color:var(--text);}
.sc-add-row-actions{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.sc-add-row-actions .btn{padding:4px 10px;font-size:11.5px;}
/* «Оборачиваемость 30 дней»/«Кластер» текстом (booking-снимок) — мельче базового шрифта таблицы,
   как и «Остаток на ЦС» (.sc-stock-cell, тоже по центру) ниже. */
.sc-cell-text{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;}
.sc-stock-cell{font-size:11px;text-align:center;}

/* Единый шрифт по всей таблице (12.5px/обычное начертание/var(--text), как у «Наименование») —
   переопределяет общие классы .supply-row-offerid/.supply-row-value внутри «Создание поставок»,
   не трогая их собственный (жирный) стиль в «Аналитика поставок» (см. supply-analytics.js). */
.sc-row .supply-row-offerid{font-size:12.5px;font-weight:400;}
.sc-row .supply-row-value,.sc-cluster-row .supply-row-value{font-size:12.5px;font-weight:400;color:var(--text);}

/* «По товарам»: групповая строка на артикул (buildScProductGroupRowHtml) — раскрывается в
   разбивку по кластерам (тот же .sc-row/.sc-header-row, см. выше). «По кластерам»: строка-агрегат
   (Кластер / Кол-во товаров всего / Кол-во коробок / Кол-во палет) — раскрывается в разбивку по
   товарам, тем же .sc-row — без зазора и без повторного заголовка (см. buildScBreakdownHtml). */
/* Настройки доставки (режим/склады/таймслот/настройки, см. .sc-cluster-actions-cell ниже) и
   кнопки «Создать поставку»/«Удалить» — теперь в ОДНОЙ строке с кластером (было отдельным блоком
   под строкой) — отсюда 6 колонок вместо 4: Кластер | действия доставки | 3 суммы | кнопки. */
.sc-cluster-row,.sc-cluster-header-row{display:grid;grid-template-columns:220px minmax(480px,1fr) 130px 110px 110px 320px;align-items:center;gap:12px;min-width:1310px;padding:8px 4px;border-bottom:1px solid var(--border);}
.sc-cluster-row{cursor:pointer;}
.sc-cluster-row > *,.sc-cluster-header-row > *{overflow:hidden;min-width:0;}
.sc-cluster-row-sticky{position:sticky;top:var(--supply-head-h,40px);z-index:4;background:var(--panel);box-shadow:0 1px 0 0 var(--border);}
.sc-cluster-actions-cell{overflow:visible;cursor:default;}
.sc-cluster-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap;overflow:visible;}
.sc-cluster-row-actions .btn{padding:6px 10px;font-size:12px;white-space:nowrap;}
.sc-cluster-name{font-size:12.5px;font-weight:400;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

.sc-empty-breakdown{padding:8px 4px;font-size:12px;color:var(--muted);font-style:italic;}

/* ---------- «Планирование»/«Бронирование» — уровень вкладок ОДИН НИЖЕ .tabs-level1 в шапке
   (см. #tabsLevel1 в index.html) — переиспользует тот же класс .tab для визуала (см. showSection
   выше в этом файле), но панели переключает своя switchScTopTab() (supply-creation.js), НЕ
   showSection(): та гасит .app-section плоским querySelectorAll по всему разделу боковой панели,
   без учёта вложенности — если бы вложенные панели тоже были .app-section, переключение на
   соседний раздел 1 уровня (напр. «Кратность») погасило бы их тоже. Поэтому свой класс. */
.sc-top-tabs{margin-bottom:12px;}
.sc-top-pane{display:none;}
.sc-top-pane.active{display:block;}

/* ---------- «Бронирование»: строки поставок, которые сейчас создаются в ЛК Ozon ---------- */
.sc-booking-row,.sc-booking-header-row{display:grid;grid-template-columns:200px 110px minmax(220px,1fr) 200px 150px 120px 110px 120px;align-items:center;gap:12px;min-width:1320px;padding:8px 4px;border-bottom:1px solid var(--border);}
/* Строка кликабельна целиком — раскрывает состав товаров (см. buildScBookingBreakdownHtml в
   supply-creation.js), тот же приём, что и у .sc-cluster-row в «Планировании». */
.sc-booking-row{cursor:pointer;}
.sc-booking-row > *,.sc-booking-header-row > *{overflow:hidden;min-width:0;text-align:center;}
/* Единый шрифт по всей строке (12.5px/обычное начертание/var(--text)) — как у «Кластер»
   (.sc-booking-cluster ниже), см. ТЗ пользователя. */
.sc-booking-row > *{font-size:12.5px;font-weight:400;color:var(--text);}
.sc-booking-cluster{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-booking-status{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;display:inline-block;}
.sc-booking-status-in_progress{color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, transparent);}
.sc-booking-status-created{color:#2fa876;background:color-mix(in srgb, #2fa876 16%, transparent);}
/* Красным была именно цифра попыток — по ТЗ пользователя, пока бронь «В работе», это должен быть
   обычный (белый/var(--text)) цвет, ошибка последней попытки остаётся только в тексте подсказки
   (title, см. buildScBookingRowHtml), а не в цвете самой цифры. */
.sc-booking-attempts-error{color:var(--text);font-weight:600;cursor:help;}
.sc-booking-remove-btn{cursor:pointer;color:var(--danger);font-weight:700;}
/* «Отменить» — тот же визуал, что у «Удалить» в «Планировании» (.sc-cluster-row-actions .btn),
   см. ТЗ пользователя. Там кнопка — прямой ребёнок flex-контейнера .sc-cluster-row-actions,
   поэтому браузер сам блокифицирует её (inline -> block) и она выглядит полноценной «таблеткой»;
   здесь же .btn лежит просто внутри обычного grid-ячейки <div>, ничего её не блокифицирует, и
   inline-span с паддингом/рамкой выглядит плоско, как обычный текст с чёрточками по бокам —
   отсюда и визуальная разница, которую не показывали одни только padding/font-size. */
.sc-booking-cancel-btn,.sc-cluster-row-actions .btn{padding:6px 10px;font-size:12px;white-space:nowrap;}
.sc-booking-cancel-btn{display:inline-block;}
/* Компактная подпись «Складов: N» в столбце «Склад» (см. ТЗ пользователя) — тот же приём, что и
   «Кластеров: N» в «Планировании» (см. .sc-cluster-summary-text), клик открывает попап со списком
   складов (см. openScBookingWarehousesPopup в supply-creation.js). */
.sc-booking-wh-count{cursor:pointer;}
.sc-booking-wh-popup{width:320px;}
/* overflow-y:auto без явного overflow-x «включает» и горизонтальный скролл по спецификации (обе
   оси считаются вместе — visible‑одна‑при‑не‑visible‑другой не бывает), поэтому длинные имена
   складов уезжали вбок вместо переноса на новую строку — overflow-x:hidden + перенос слов чинят
   это (см. ТЗ пользователя: склады должны полностью влезать в окно попапа). */
.sc-booking-wh-popup-list{max-height:240px;overflow-y:auto;overflow-x:hidden;}
.sc-booking-wh-popup-row{padding:5px 0;font-size:12.5px;color:var(--text);border-bottom:1px solid var(--border);white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.sc-booking-wh-popup-row:last-child{border-bottom:none;}

/* ---------- «Текущие» — реальные заявки на поставку из ЛК Ozon (см. ТЗ пользователя: структура
   колонок как в самом Ozon) ---------- */
.sc-current-row,.sc-current-header-row{display:grid;grid-template-columns:170px 160px 150px minmax(220px,1fr) 120px 100px 120px 50px;align-items:center;gap:12px;min-width:1180px;padding:8px 4px;border-bottom:1px solid var(--border);}
.sc-current-row{cursor:pointer;font-size:12.5px;font-weight:400;color:var(--text);}
.sc-current-row > *,.sc-current-header-row > *{overflow:hidden;min-width:0;text-align:center;}
.sc-current-order,.sc-current-cluster{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-current-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-current-tag{display:inline-block;font-size:10.5px;font-weight:600;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, transparent);border-radius:8px;padding:1px 6px;margin-left:5px;vertical-align:middle;}
.sc-current-status{font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px;display:inline-block;white-space:nowrap;}
.sc-current-status-DATA_FILLING{color:#e0a634;background:color-mix(in srgb, #e0a634 16%, transparent);}
.sc-current-status-READY_TO_SUPPLY,.sc-current-status-ACCEPTED_AT_SUPPLY_WAREHOUSE,.sc-current-status-ACCEPTANCE_AT_STORAGE_WAREHOUSE,.sc-current-status-COMPLETED{color:#2fa876;background:color-mix(in srgb, #2fa876 16%, transparent);}
.sc-current-status-IN_TRANSIT,.sc-current-status-REPORTS_CONFIRMATION_AWAITING{color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, transparent);}
.sc-current-status-CANCELLED,.sc-current-status-REJECTED_AT_SUPPLY_WAREHOUSE,.sc-current-status-REPORT_REJECTED,.sc-current-status-OVERDUE{color:var(--danger);background:color-mix(in srgb, var(--danger) 16%, transparent);}
.sc-current-gear-btn{cursor:pointer;font-size:15px;text-align:center;color:var(--muted);}
.sc-current-gear-btn:hover{color:var(--text);}
.sc-current-menu-popup{width:220px;padding:6px;}
.sc-current-menu-item{display:block;width:100%;text-align:left;padding:8px 10px;font-size:12.5px;color:var(--text);border-radius:6px;cursor:pointer;background:none;border:none;}
.sc-current-menu-item:hover{background:var(--hover);}
.sc-current-menu-item[disabled]{color:var(--muted);cursor:default;}
.sc-current-menu-item[disabled]:hover{background:none;}
/* Фон отличается от строки заявки (та наследует var(--panel)) — тот же приём, что и у
   .sc-product-row в «Планировании» (см. ТЗ пользователя: раскрытый список должен быть отделён
   цветом так же). */
.sc-current-breakdown-wrap{padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg);}
/* Своя таблица состава (не .breakdown-table — та жёстко правит text-align:right через
   .breakdown-table td, специфичность класс+тег перебивает одиночный класс .text-left/.text-center
   на самой ячейке, пришлось бы !important) — Артикул/Название по левому краю, остальное по
   центру (см. ТЗ пользователя), плюс «Кратность»/«Кол-во коробок»/«Кол-во палет» теми же
   формулами, что и в «Планировании» (см. buildScCurrentBreakdownHtml/scCommonRowCellsHtml). */
.sc-current-item-table{border-collapse:collapse;font-size:12.5px;width:100%;color:var(--text);}
.sc-current-item-table th,.sc-current-item-table td{padding:5px 10px;text-align:center;white-space:nowrap;}
.sc-current-item-table th:nth-child(1),.sc-current-item-table td:nth-child(1),
.sc-current-item-table th:nth-child(2),.sc-current-item-table td:nth-child(2){text-align:left;}
.sc-current-item-table td:nth-child(2){white-space:normal;}
.sc-current-item-table thead th{border-bottom:1px solid var(--border);font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.02em;}

/* ---------- Попап выбора кластера(ов) для строки «Создание поставок» ---------- */
#scClusterPickerPopup{width:280px;}
.sc-cluster-picker-list{max-height:280px;overflow-y:auto;}
.sc-cluster-picker-footer{display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.sc-cluster-picker-footer .btn{padding:5px 12px;font-size:12px;}

/* ---------- Активный кабинет (раздел «Настройки») ---------- */
.active-cabinet-row td{background:var(--accent-weak);}

/* ---------- Юнит-экономика: расчёт ---------- */
.ue-hide-details .ue-col-detail{display:none;}
.ue-negative{color:var(--danger);}
/* table-layout:fixed — ширина столбцов управляется <colgroup>/<col>, чтобы столбцы можно было
   тянуть за границу в шапке (см. .ue-col-resize). border-collapse:separate (не collapse!) —
   с collapse в Chrome закреплённые (position:sticky) ячейки при горизонтальном скролле
   «просвечивают» соседними столбцами (баг рендеринга collapsed-границ поверх sticky), см.
   .table-scroll/table в общих стилях, где по той же причине используется separate. */
#ueTableWrap table{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap;table-layout:fixed;}
#ueTableWrap th,#ueTableWrap td{padding:5px 8px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;}
#ueTableWrap thead th{position:sticky;top:0;background:var(--sticky-bg);text-align:center;font-weight:600;color:var(--muted);font-size:11px;z-index:2;}
#ueTableWrap thead th.ue-sticky-1,#ueTableWrap thead th.ue-sticky-2{text-align:left;}
.ue-sticky-1,.ue-sticky-2{position:sticky;background:var(--sticky-bg);box-shadow:1px 0 0 0 var(--border);overflow:hidden;text-overflow:ellipsis;z-index:2;}
#ueTableWrap thead th.ue-sticky-1,#ueTableWrap thead th.ue-sticky-2{z-index:4;}
.ue-sticky-1{left:0;}
.ue-sticky-2{left:90px;} /* дефолт до первого рендера — дальше пересчитывается в ueUpdateStickyOffset() */

/* Постоянная подсветка строки по клику на артикул — чуть светлее hover, чтобы наведение
   на уже подсвеченную строку по-прежнему было заметно (у tbody tr:hover td выше специфичность). */
#ueTableWrap td.ue-sticky-1{cursor:pointer;}
.ue-row-highlighted td{background:var(--row-highlight);}

/* Ручка изменения ширины столбца — тонкая полоса у правого края заголовка, тянется мышью
   (thead th уже position:sticky выше — этого достаточно как контекст позиционирования).
   При скрытых деталях ширина автоматическая (см. ueColgroupHtml() в unit-economics-page.js) —
   тянуть нечего, поэтому ручку прячем, чтобы не обманывать курсором col-resize. */
.ue-col-resize{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:5;}
.ue-hide-details .ue-col-resize{display:none;}
.ue-col-resize:hover,.ue-col-resize:active{background:var(--accent);opacity:.5;}

/* ---------- «Создание поставок»: строка кластера — режим/склады/таймслот/настройки ---------- */
/* Встроено в саму строку кластера, в её ячейку .sc-cluster-actions-cell (см. renderScClusterMode
   в supply-creation.js) — одной строкой с названием кластера и суммами, а не отдельным блоком
   под ней. Не показывается у «Без кластера»: доставлять в реальный склад/кластер Ozon для строки
   без назначенного кластера продаж бессмысленно. flex-wrap:wrap — подстраховка на случай нехватки
   ширины колонки (см. minmax(480px,1fr) у .sc-cluster-row), в норме умещается в одну линию. */
.sc-cluster-toolbox{display:flex;align-items:center;gap:16px;flex-wrap:wrap;cursor:default;}
/* Переключатель Прямая/Кросс-докинг — сегментированная пара кнопок с ОДНОЙ общей границей: у
   первой кнопки скруглены только левые углы, у второй — только правые, середина — без скругления
   с обеих сторон. margin-left:-1px у второй кнопки схлопывает две соседние границы в одну линию
   (иначе была бы двойная толщина); z-index на активной кнопке гарантирует, что именно её акцентная
   граница окажется поверх соседней (не зависит от того, какая из двух кнопок активна). */
.sc-mode-btn-group{display:inline-flex;flex:0 0 auto;}
.sc-mode-btn-group button{position:relative;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:5px 12px;font-size:11.5px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;}
.sc-mode-btn-group button:first-child{border-radius:8px 0 0 8px;}
.sc-mode-btn-group button:last-child{border-radius:0 8px 8px 0;margin-left:-1px;}
.sc-mode-btn-group button.active{background:var(--accent);border-color:var(--accent);color:#fff;z-index:1;}
.sc-cluster-toolbox-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sc-cluster-toolbox-actions .btn{font-size:11.5px;padding:5px 10px;white-space:nowrap;}
/* «Заполненная» кнопка — уже что-то выбрано (склад/таймслот) — тот же акцентный приём, что и
   активные вкладки/чипы в остальном приложении. Не привязана к .sc-cluster-toolbox-actions —
   тот же класс используют и общие кнопки «Склад отгрузки»/«Таймслот» в тулбаре «Артикул» (см.
   #scGlobalWhBtn/#scGlobalTimeslotBtn, единый стиль оформления по ТЗ пользователя). */
.btn.filled{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);}
/* Пометки «КГТ»/«Super» после «Настройки» (см. buildScClusterToolboxHtml) — та же вёрстка, что и
   .row-delete-btn (голая надпись, без фона/рамки/паддинга), только синяя (var(--accent)) и
   некликабельная (cursor:default — пометки нередактируемые, см. клик-хендлер .sc-tb-tag). */
.sc-tb-tag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--accent);cursor:default;}
.supply-toolbar-hint{font-weight:400;color:var(--muted);font-size:11px;}

/* ---------- Модал выбора складов/кластера размещения (без информационной панели — убрана по ТЗ
   пользователя, список складов/кластеров теперь один на всю ширину модала). ---------- */
.modal-box-wide{width:560px;max-width:94vw;display:flex;flex-direction:column;max-height:85vh;}
.sc-wh-modal-body{display:flex;flex:1;min-height:0;}
.sc-wh-modal-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
.sc-wh-search-wrap{max-width:none;}
.sc-wh-fav-toggle{align-items:center;}
.sc-wh-fav-toggle .btn{padding:5px 12px;font-size:12px;}
.sc-wh-fav-toggle .btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.sc-wh-found-count{font-size:12px;color:var(--muted);}
/* «Сбросить все» — прижата к правому краю строки (Избранные/Все/Найдено складов — слева). */
.sc-wh-reset-all{margin-left:auto;padding:5px 12px;font-size:12px;white-space:nowrap;}
.sc-wh-list{flex:1;overflow-y:auto;min-height:0;max-height:52vh;}
.sc-wh-group-title{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--accent);padding:8px 4px 4px;}
/* Чекбокс вместо ссылки «выбрать все» — отмечен, когда выбраны ВСЕ склады этой группы;
   промежуточное (indeterminate, см. renderScWarehousePicker) — когда выбрана только часть. */
.sc-wh-group-select-all{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);cursor:pointer;white-space:nowrap;}
.sc-wh-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12.5px;cursor:pointer;}
.sc-wh-option:hover{background:var(--hover);}
.sc-wh-fav-star{cursor:pointer;color:var(--border);font-size:14px;flex:0 0 auto;line-height:1;}
.sc-wh-fav-star.active{color:#f5b400;}

/* ---------- Переключатель вкл/выкл («Настройки» строки кластера) ---------- */
.switch{position:relative;display:inline-block;width:36px;height:20px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch .slider{position:absolute;inset:0;background:var(--border);border-radius:20px;transition:.15s;cursor:pointer;}
.switch .slider:before{content:'';position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider:before{transform:translateX(16px);}
.sc-settings-list{display:flex;flex-direction:column;gap:14px;margin:6px 0 4px;}
.sc-settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px;color:var(--text);cursor:pointer;}

/* ---------- Таймслот — модал «Выбор периода и временных интервалов»: диапазон дат/отдельные дни
   + сетка часовых интервалов (см. openScTimeslotModal в supply-creation.js). Календарь периода —
   отдельный плавающий попап (#scTimeslotCalendarPopup, переиспользует вёрстку .supply-cal-* из
   общего календаря «Аналитики поставок», но со своим состоянием — не завязан на её calendarCtx). */
.modal-box-timeslot{width:520px;max-width:92vw;}
.sc-ts-section-label{font-size:12.5px;font-weight:600;color:var(--text);margin:16px 0 8px;}
.sc-ts-section-label:first-of-type{margin-top:2px;}
.sc-ts-mode-tabs{margin-bottom:12px;}
.sc-ts-period-btn{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;box-sizing:border-box;}
.sc-ts-period-icon{font-size:14px;}
.sc-ts-hours-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.sc-ts-hours-toolbar > span{font-size:12px;color:var(--muted);}
.sc-ts-hours-actions{display:flex;gap:10px;}
.sc-ts-hours-actions .btn{padding:5px 12px;font-size:12px;}
.sc-ts-hours-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:260px;overflow-y:auto;}
.sc-ts-hour-chip{border:1px solid var(--border);border-radius:8px;padding:8px 4px;text-align:center;font-size:11.5px;color:var(--text);cursor:pointer;user-select:none;white-space:nowrap;}
.sc-ts-hour-chip:hover{border-color:var(--accent);}
.sc-ts-hour-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
/* Открывается из кнопки ВНУТРИ #scTimeslotModal (.modal-overlay, z-index:300) — базовый
   .floating-panel (z-index:150) оказался бы под затемнением модала и был бы невидим, хотя
   технически «открыт» (display:block). Поэтому здесь z-index выше, чем у .modal-overlay. */
.sc-ts-calendar-popup{width:260px;z-index:350;}
.sc-timeslot-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}
.sc-timeslot-footer .btn{padding:5px 12px;font-size:12px;}