/* Compact workspace headers: keep the work area visible without losing context. */
.section-title {
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.section-title > div { min-width: 0; }

.section-title .eyebrow {
  margin: 0 0 3px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .11em;
}

.section-title h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.18;
}

.section-title p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.section-title .primary {
  flex: 0 0 auto;
  padding: 9px 13px;
  white-space: nowrap;
}

/* Client development: title, market tabs, view switch and the action button share one row. */
#customers-card {
  padding-top: 12px;
}

#customers-card > .section-title {
  flex-wrap: wrap;
  row-gap: 8px;
  margin-bottom: 8px;
}

#customers-card > .section-title > div:first-child {
  flex: 0 1 auto;
}

/* Tabs sit in the free space between the title and the action button, centred. */
#customers-card .customers-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

#customers-card > .section-title > #new-customer {
  flex: 0 0 auto;
}

#customers-card .customers-tabs .market-tabs,
#customers-card .customers-tabs .view-switch {
  display: inline-flex;
  vertical-align: middle;
  margin: 0;
}

#customers-card .market-tabs {
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
}

#customers-card .market-tabs button,
#customers-card .view-switch button {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 13px;
  line-height: 1.15;
}

#customers-card .market-tabs button span {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

/* Reduce the tall first header block on each operational page. */
main > .hero,
main > section.hero {
  margin: 18px 0 12px;
  min-height: 0;
}

main > .hero .eyebrow,
main > section.hero .eyebrow {
  margin: 0 0 3px;
  font-size: 10px;
}

main > .hero h1,
main > section.hero h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1.15;
}

main > .hero p:not(.eyebrow),
main > section.hero p:not(.eyebrow) {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .section-title { align-items: flex-start; }
  .section-title .primary { padding: 8px 10px; }
  main > .hero h1,
  main > section.hero h1 { font-size: 22px; }
}

/* Global application header: compact, but keeps all operational controls visible. */
header {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding: 0 3.2vw;
  gap: 8px;
}

header > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

header b {
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

header span {
  margin-left: 0;
  font-size: 10px;
  line-height: 1.15;
  white-space: nowrap;
}

header label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
}

header select {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  margin-left: 0;
  padding: 4px 27px 4px 9px;
  font-size: 13px;
}

header button,
header a {
  box-sizing: border-box;
  min-height: 32px;
  height: 32px;
  padding: 4px 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* All controls in the right part of the header stay on one vertical centre line. */
body > header > .header-controls {
  height: 100%;
  min-height: 0;
  align-items: center;
}

body > header > .header-controls > button,
body > header > .header-controls > a,
body > header > .header-controls > label {
  align-self: center;
}

body > header > .header-controls > button,
body > header > .header-controls > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  header { padding: 0 18px; gap: 8px; }
  header > div:first-child span { display: none; }
  header button,
  header a { padding: 4px 8px; }
}

/* The sidebar must start immediately under the same compact header. */
.workspace-nav {
  top: 48px !important;
  height: calc(100vh - 48px);
  margin-top: 0 !important;
}

/* Компактні назви етапів на дошці розвитку клієнтів. */
.customer-column > header {
  min-height: 46px;
  padding: 9px 12px;
  gap: 8px;
}

.customer-column > header b {
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-column > header span {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* Щільна робоча область без зайвих зовнішніх полів. */
@media (min-width: 1024px) {
  main {
    max-width: none !important;
    margin: 0 !important;
    padding: 16px 24px 24px !important;
  }
}

/* Таблиця "Замовлення клієнтів": рівні відступи, компактні рядки, охайні дії. */
#orders-card .orders-table { min-width: 820px; }

#orders-card .orders-table th,
#orders-card .orders-table td {
  padding: 4px 10px;
  vertical-align: middle;
}

#orders-card .orders-table th {
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: nowrap;
}

#orders-card .orders-table td b { font-weight: 700; }
#orders-card .orders-table td small { display: block; margin-top: 2px; line-height: 1.3; }

/* Перша колонка: номер замовлення + дії одним акуратним рядом під ним. */
#orders-card .orders-table td:first-child { min-width: 150px; }

#orders-card .orders-table td:first-child .order-messages,
#orders-card .orders-table td:first-child .repeat-order {
  display: inline-flex;
  align-items: center;
  margin: 8px 6px 0 0;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

/* Позиції: щільніший розділювач між рядками позицій. */
#orders-card .order-item + .order-item {
  margin-top: 8px;
  padding-top: 8px;
}
#orders-card .order-progress { margin-top: 2px; }
#orders-card .create-production { margin-top: 3px; }

/* Дата відвантаження в один рядок; статусні пігулки не переносяться. */
#orders-card .orders-table td { white-space: normal; }
#orders-card .transport-pill,
#orders-card .order-status {
  padding: 4px 9px;
  white-space: nowrap;
}

/* Панель фільтрів над таблицею — той самий ритм, без зайвого відступу знизу. */
#orders-card .order-filters { margin: 10px 0 12px; padding: 10px 14px; }

/* ==========================================================================
   Системне ущільнення робочої області (правка 5).
   Не переписуємо структуру — стискаємо наявні відступи, шрифти і рядки.
   Усе тут іде ПІСЛЯ базових стилів, тож перебиває їх без !important
   там, де специфічність достатня.
   ========================================================================== */

/* --- картки: менше повітря по краях і між ними --- */
main > section.card,
main .card { margin-top: 10px; padding: 12px 16px; border-radius: 11px; }

/* --- заголовок секції: нижчий блок, менший h2, коротший опис --- */
.section-title { gap: 10px; margin-bottom: 6px; }
.section-title h2 { font-size: 17px; line-height: 1.15; }
.section-title p { margin: 2px 0 4px; font-size: 12.5px; line-height: 1.3; }
.section-title .eyebrow { margin: 0 0 2px; font-size: 9.5px; }
.section-title > .primary,
.section-title > .secondary,
.section-title-actions > button { padding: 7px 12px; min-height: 34px; font-size: 13px; }

/* --- KPI-плитки: щільніше і нижче --- */
/* .metrics сам по собі не мав розкладки — її давав лише .analytics-metrics,
   тож нові плитки лягали в стовпчик на всю ширину. Задаємо сітку тут. */
.metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.supply-stock-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.supply-stock-metrics .metric { min-width: 0; }
.metric { padding: 9px 13px; border-radius: 9px; min-width: 112px; }
.metric span { font-size: 11.5px; }
.metric strong { font-size: 17px; line-height: 1.2; display: block; }
.metric small { font-size: 11px; line-height: 1.25; }

/* План та аналітика: KPI — короткий рядок показників, без високих «табло». */
#analytics-card .analytics-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:6px 0 9px; }
#analytics-card .analytics-kpis article { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr 1fr; gap:1px 8px; min-width:0; min-height:52px; padding:7px 9px; border:1px solid #dbe4f1; border-radius:8px; background:#f8faff; }
#analytics-card .analytics-kpis small { overflow:hidden; align-self:end; color:#667c9c; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#analytics-card .analytics-kpis b { grid-row:1/3; grid-column:2; align-self:center; margin:0; font-size:17px; line-height:1; white-space:nowrap; }
#analytics-card .analytics-kpis span { overflow:hidden; align-self:start; margin:0; color:#8b9ab0; font-size:9px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
#analytics-card .analytics-head { align-items:center; margin-bottom:0; }
#analytics-card .analytics-actions { display:flex; align-items:center; gap:7px; }
#analytics-card .analytics-actions .analytics-period { order:-1; height:32px; gap:5px; font-size:11px; }
#analytics-card .analytics-actions .analytics-period input { width:154px; height:32px; padding:4px 7px; }
#analytics-card .analytics-actions button { min-height:32px; padding:5px 10px; font-size:12px; }
@media(max-width:1000px){#analytics-card .analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:620px){#analytics-card .analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}#analytics-card .analytics-actions{flex-wrap:wrap;justify-content:flex-end;}}

/* Рецептура редагується внизу реєстру, без окремого модального вікна. */
.recipe-inline-editor { position:relative; margin-top:6px; padding:0; border-color:#b9c9e3; }
.recipe-inline-editor .inline-workspace-editor-head { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:7px 44px 7px 11px; border-bottom:1px solid #cdd9e9; background:#e8efff; }
.recipe-inline-editor .inline-workspace-editor-head h3 { margin:0; font-size:15px; }
.recipe-inline-editor .inline-workspace-editor-close { top:6px; right:7px; }
.recipe-inline-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; border-bottom:1px solid #d8e2ee; }
.recipe-inline-grid label { display:grid; gap:3px; min-width:0; padding:7px 9px; border-right:1px solid #e0e7f0; color:#526b92; font-size:10px; font-weight:700; text-transform:uppercase; }
.recipe-inline-grid label:last-child { border-right:0; }
.recipe-inline-grid input,.recipe-inline-grid select { width:100%; min-width:0; height:30px; padding:4px 7px; border:1px solid #cbd8e8; border-radius:5px; color:var(--ink); font:13px Inter,Segoe UI,Arial,sans-serif; }
.recipe-inline-parts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.recipe-inline-editor .recipe-editor-part { min-width:0; padding:8px 10px; border-right:1px solid #dbe4f0; }
.recipe-inline-editor .recipe-editor-part:last-child { border-right:0; }
.recipe-inline-editor .recipe-editor-part.is-disabled { opacity:.42; background:#f6f8fb; }
.recipe-part-title { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.recipe-part-title h3 { flex:1; margin:0; font-size:13px; }
.recipe-part-title .secondary { min-height:27px; padding:3px 7px; font-size:11px; }
.recipe-components { display:grid; gap:4px; }
.recipe-component { display:grid; grid-template-columns:minmax(0,1fr) 82px 27px; gap:4px; }
.recipe-component select,.recipe-component input { width:100%; min-width:0; height:29px; padding:4px 6px; border:1px solid #cbd8e8; border-radius:4px; }
.recipe-component .recipe-component-remove { min-height:29px; padding:0; font-size:16px; line-height:1; }
.recipe-inline-editor .actions { justify-content:flex-start; margin:0; padding:7px 10px; border-top:1px solid #dbe4f0; }
.recipe-inline-editor .actions button { min-height:30px; padding:5px 10px; font-size:12px; }
@media(max-width:1050px){.recipe-inline-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.recipe-inline-parts{grid-template-columns:1fr;}.recipe-inline-editor .recipe-editor-part{border-right:0;border-bottom:1px solid #dbe4f0;}.recipe-inline-editor .recipe-editor-part:last-child{border-bottom:0;}}

.inventory-summary { gap: 8px; margin: 4px 0 12px; }
.inventory-summary article { padding: 9px 12px; border-radius: 9px; gap: 2px; }
.inventory-summary article span { font-size: 11.5px; }
.inventory-summary article b { font-size: 17px; }
.inventory-summary article small { font-size: 10.5px; }

/* --- таблиці: щільність як у звичних обліковках (BAS/1С) ---
   Правити щільність треба САМЕ ТУТ. Нижче в цьому файлі колись з'явився
   другий набір правил через `main td` — і мовчки не діяв: `main table td`
   специфічніше (три типові селектори проти двох), тож перемагало це правило
   незалежно від порядку. Два місця для однієї величини — гарантована
   розбіжність. */
main table th { padding: 4px 10px; font-size: 11px; line-height: 1.25; }
main table td { padding: 4px 10px; line-height: 1.3; vertical-align: middle; }
main table td small { line-height: 1.25; font-size: 11px; }

/* --- підзаголовки всередині карток --- */
.inventory-title { margin: 0 0 7px; font-size: 15px; }
.card h3 { font-size: 15px; }

/* --- вкладки: нижчі --- */
.reference-nav{display:flex;align-items:center;gap:8px;margin:0 0 8px}.reference-tabs { gap: 6px; margin:0; }.reference-nav-actions{margin-left:auto;display:flex;align-items:center;gap:6px}.reference-nav-actions .secondary{height:32px;padding:6px 10px;font-size:12px;white-space:nowrap}
.reference-tabs button,
.raw-stock-tabs button { padding: 6px 12px; font-size: 13px; }

/* --- фільтри й допоміжні панелі --- */
.warehouse-filter select { min-width: 180px; }
.supply-stock-metrics { margin: 0 0 12px; }
.metric-more { background: #f6f9fc; }

/* --- група кнопок у заголовку: сегментований ряд --- */
.button-group { display: inline-flex; align-items: center; gap: 0; }
.button-group > button { border-radius: 0; margin: 0; }
.button-group > button:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.button-group > button:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.button-group > button + button { margin-left: -1px; }
.button-group > .primary { position: relative; z-index: 1; }

/* --- «Приходи» як окремий блок, але без зайвої висоти --- */
.supply-receipts.card-block { margin-top: 14px; padding-top: 12px; }
.supply-receipts-title h2 { font-size: 16px; }

@media (max-width: 760px) {
  main > section.card, main .card { padding: 11px 12px; }
  .button-group { flex-wrap: wrap; }
}

/* --- Бокове меню на ноутбуці ----------------------------------------------
   18 пунктів × 40 px кроку + відступи = ~710 px вмісту. На 15" ноуті під
   браузер лишається ~600 px висоти, тому три нижні пункти («Рецептури та
   норми», «Журнал змін», «Собівартість») ховались за прокруткою всередині
   сайдбару.

   Лікуємо кроком меню, а не прокруткою: чим нижчий viewport, тим щільніший
   пункт. Вище за 900 px не змінюється нічого — на великому екрані меню
   лишається рівно таким, як було (крок пункту 36 px; перевіряє контрольний
   розмір 1920×1080 у diag/sidebar_fit.py).

   min-width:901px обов'язковий: нижче 900 px ширини меню стає горизонтальною
   стрічкою нагорі (@media(max-width:900px) у style.css), і крок пункту там
   означає зовсім інше. Ці правила — лише про вертикальний сайдбар.

   Числа підібрані під найгірший реальний випадок (1366×768 мінус хром
   браузера ≈ 648 px viewport, ~600 px видимого меню): 18 × 28 + 16 = 520 px.
   Перевіряє diag/sidebar_fit.py. */
@media (min-width: 901px) and (max-height: 900px) {
  .workspace-nav { padding: 10px 10px; }
  .nav-item { padding: 6px 10px; margin: 2px 0; font-size: 14px; line-height: 1.25; }
  .nav-item i { font-size: 15px; width: 17px; }
}
@media (min-width: 901px) and (max-height: 780px) {
  .workspace-nav { padding: 8px 9px; }
  .nav-item { gap: 8px; padding: 5px 9px; margin: 1px 0; font-size: 13.5px; line-height: 1.2; }
  .nav-item i { font-size: 14px; width: 16px; }
}
/* overflow-y:auto лишається як сітка безпеки для зовсім низьких вікон
   (наприклад, розділений екран): краще прокрутка, ніж обрізаний пункт.
   На жодному з перевірених ноутбучних розмірів вона не спрацьовує. */

/* --- Плитка «На складі» в розділі Котушки ---------------------------------
   Два числа в одній плитці (ВPL і МPL окремо), тому не одне велике число, як
   у сусідніх плитках, а два рядки з підписом типу. «не ведеться» — це не
   помилка й не нуль: складської позиції немає в довіднику, тобто обліку
   котушок цього типу просто не існує. */
.reel-stock-tile .reel-stock-line {
  display: flex; align-items: baseline; gap: 9px;
  margin-top: 3px; font-size: 17px;
}
.reel-stock-tile .reel-stock-line i {
  min-width: 34px; color: var(--muted); font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.reel-stock-tile .reel-stock-untracked { color: #8a94a6; font-size: 14px; font-weight: 600; }

/* ===========================================================================
   ЩІЛЬНІСТЬ ТАБЛИЦЬ (03.09.2026)
   Рядки були надто високі: 13px вертикального падінгу в td плюс body-шрифт
   15px/1.45 давали ~48 px на рядок, а місцями й 91 px. У звичних обліковках
   (BAS, 1С) рядок — це 28–32 px: на екран влазить утричі більше даних, і
   таблиця читається як таблиця, а не як список карток.
   Правила лежать саме тут, бо цей файл підключається ПІСЛЯ production.css,
   тож не доводиться воювати за пріоритет !important-ами.
   =========================================================================== */
main table { font-size: 13px; }
main table td b, main table td strong { font-weight: 650; }

/* Кнопки й значки в комірках теж тримали висоту: 9px падінгу кнопки — це
   ще +8 px до рядка. Робимо їх під розмір рядка, не втрачаючи клікабельності. */
main table td button, main table td .primary, main table td .secondary, main table td .link-button {
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.35;
}
main table td .badge, main table td .status, main table td .doc-chip, main table td .reel-operation {
  padding: 2px 7px;
  font-size: 11px;
}
main table td input, main table td select { padding: 3px 6px; font-size: 12px; min-height: 0; }

/* Таблиці з власним падінгом — під ту саму щільність, інакше вони
   лишились би острівцями старого вигляду. */
.analytics-panel th, .analytics-panel td,
.finance-table th, .finance-table td,
.drawer-dialog .table-wrap th, .drawer-dialog .table-wrap td { padding: 5px 8px; }
.finance-table td { font-size: 12.5px; }
.finance-table td small { font-size: 11px; }

/* Порожній стан лишається просторим: один рядок «даних поки немає» не має
   виглядати як обрізаний. */
main table tbody tr:only-child td[colspan] { padding: 14px 10px; }

/* Стосики значків усередині комірки тримали висоту рядка більше за падінги:
   три бейджі по 7px відступу — це +21px до рядка на порожньому місці.
   Зменшуємо саме проміжки, не чіпаючи самі значки. */
main table td .order-readiness { margin-top: 3px; padding: 2px 7px; }
main table td .order-messages { margin-top: 3px; }
#orders-card .orders-table td small { margin-top: 1px; }
#orders-card .orders-table td .badge { margin-top: 2px; }

/* Значки трьох осей стану: підпис осі над значенням давав два рядки в кожній
   комірці. Підпис лишається (він пояснює, що це за вісь), але щільніше. */
main table td .supply-chip { padding: 2px 8px; line-height: 1.2; }
main table td .supply-chip i { font-size: 9px; letter-spacing: .04em; }

/* ---------------------------------------------------------------------------
   «Загальні завдання на виробництво» — та сама щільність, що й у таблиць.
   Цей блок НЕ таблиця, а grid із карток `.job`, тож правила `main table td`
   вище його не зачіпали: рядки лишались 74 px заввишки при 14–15 px падингу,
   тоді як сусідні таблиці вже мали 4 px. Приводимо до обліковки (BAS/1С).
   --------------------------------------------------------------------------- */
#jobs-card .jobs { gap: 4px; }
#jobs-card .job {
  padding: 5px 10px;
  border-radius: 7px;
  gap: 10px;
  min-height: 0;
}
#jobs-card .job strong { font-size: 13px; line-height: 1.25; }
#jobs-card .job .muted { font-size: 11px; line-height: 1.2; }
#jobs-card .job b { font-size: 13px; }
#jobs-card .job .badge { padding: 1px 7px; font-size: 11px; }
#jobs-card .job .progress { font-size: 12px; }
#jobs-card .job button { padding: 4px 9px; font-size: 12px; min-height: 0; }

/* ---------------------------------------------------------------------------
   Черга відвантаження на Складі ГП.
   --------------------------------------------------------------------------- */
.shipment-queue { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.shipment-queue .shipment-queue-heading h3 { margin: 0 0 3px; }
.shipment-queue .shipment-queue-heading p { margin: 0 0 10px; max-width: 78ch; }
/* Таблиця має вміщатися в картку: глобальне `table{min-width:900px}` плюс
   довгий перелік SKU у клітинці виштовхували кнопку дії за межі .table-wrap. */
.shipment-queue-table { min-width: 0; width: 100%; table-layout: fixed; }
.shipment-queue-table td small { white-space: normal; word-break: break-word; }

/* 04.09.2026. Горизонтальна прокрутка тут бралася з `.inventory-table td,
   .inventory-table th { white-space: nowrap }` (production.css) + широких
   текстових колонок. Лікування — фіксований розкрій: кожна колонка знає свою
   частку, довгий текст обрізається трикрапкою, а повний лишається в title.
   Тому ж підходу вже підпорядковані реєстри Постачання. */
.shipment-queue-table th, .shipment-queue-table td { padding: 9px 8px; }
.shipment-queue-table col, .shipment-queue-table th { overflow: hidden; }
.shipment-queue-table th:nth-child(1), .shipment-queue-table td:nth-child(1) { width: 17%; }
.shipment-queue-table th:nth-child(2), .shipment-queue-table td:nth-child(2) { width: 14%; }
.shipment-queue-table th:nth-child(3), .shipment-queue-table td:nth-child(3) { width: 9%; }
.shipment-queue-table th:nth-child(4), .shipment-queue-table td:nth-child(4) { width: 9%; }
.shipment-queue-table th:nth-child(5), .shipment-queue-table td:nth-child(5) { width: 9%; }
.shipment-queue-table th:nth-child(6), .shipment-queue-table td:nth-child(6) { width: 11%; }
.shipment-queue-table th:nth-child(7), .shipment-queue-table td:nth-child(7) { width: 17%; }
.shipment-queue-table th:nth-child(8), .shipment-queue-table td:nth-child(8) { width: 14%; }
/* Обрізаємо ВМІСТ клітинки, а не саму клітинку: `display:block` на <td>
   виймає її з рядка таблиці, і колонка «Рахунок» розсипалась білою плямою.
   Тому правило вішається лише на внутрішні <b>/<small>. */
.shipment-queue-table .queue-order b, .shipment-queue-table .queue-model b,
.shipment-queue-table .queue-doc b, .shipment-queue-table .queue-order small,
.shipment-queue-table .queue-model small, .shipment-queue-table .queue-doc small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shipment-queue-table .queue-doc b { font-weight: 600; }
.shipment-queue-table td.num { text-align: right; white-space: nowrap; }
.shipment-queue-table th.num { text-align: right; }
.shipment-queue-table td.num small { text-align: right; }
.shipment-queue-table .queue-date { white-space: nowrap; }
.shipment-queue .queue-empty { padding: 10px 2px; }
.shipment-queue-table td { vertical-align: top; }
.shipment-queue-table td small { display: block; }
.queue-badge {
  display: inline-block; border-radius: 99px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; line-height: 1.3;
}
.queue-badge.ready { background: var(--green); color: #176f40; }
.queue-badge.done { background: #e6eefc; color: #274b93; }
.queue-badge.waiting { background: #fff2d9; color: #855614; }
/* Кнопка дії БІЛЬШЕ не nowrap: при table-layout:fixed саме її мінімальна
   ширина (рядок «Підтвердити відвантаження» в один рядок) не давала таблиці
   стиснутись і повертала горизонтальну прокрутку. */
.shipment-queue-table .queue-ship,
.shipment-queue-table .queue-reserve { white-space: normal; width: 100%;
  padding: 5px 8px; font-size: 12px; line-height: 1.25; }
.shipment-queue-table .queue-ship:disabled { background: #aeb6c8; cursor: not-allowed; }

/* Кнопка скасування транспорту — окремо від «Закрити»/«Зберегти». */
.transport-actions { align-items: center; }
.transport-actions .actions-spacer { flex: 1; }
.transport-actions .danger-action { border-color: #e2b4b6; color: #b52f35; }
.transport-actions .danger-action:hover { background: #fdf2f2; }

/* ---------------------------------------------------------------------------
   Розкладка картки завдання (05.09.2026).

   Дві біди з одного місця — `.job{grid-template-columns:110px 1fr 120px 135px
   145px}` у style.css, написаного ще до кнопок керування завданням:

   1. друга колонка (модель/маршрут) була ЄДИНОЮ гнучкою і забирала весь
      вільний простір картки — звідси порожня зона посеред рядка;
   2. остання колонка мала фіксовані 145 px, а в неї з часом додали три кнопки
      («Пауза»/«В роботу», «Завершити», «Редагувати») — вони не влазили і
      переносились у другий ряд.

   Тепер вільний простір ділиться між ЗМІСТОВНИМИ колонками (кожна має свій
   мінімум), а колонка дій береться під власний вміст (`auto`) — саме тому
   кнопки лишаються в один ряд і за різного набору: «В роботу» замість «Пауза»,
   картка без «Редагувати», довша назва моделі.
   Щільність із vidvantazhennya-lantsyug-2026-09 (п. 6) не чіпаємо: падинги,
   кеглі та висота рядка лишаються ті самі.
   --------------------------------------------------------------------------- */
#jobs-card .job {
  /* Перша колонка — `auto`: підпис «у виробництві з 05.09.2026» при жорстких
     104 px ламався на два рядки і сам собою робив картку вищою. */
  grid-template-columns: auto minmax(150px, 1.3fr) minmax(104px, .75fr) minmax(146px, .95fr) auto;
  align-items: center;
}
/* Стан і кнопки — ОДИН ряд, притиснутий до правого краю: «✓ Передано в роботу»
   стоїть поруч із кнопками, а не окремим рядком над ними. Так блок дій займає
   свою природну ширину (менше порожнечі посеред картки) і не додає картці
   зайвої висоти. */
#jobs-card .job > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#jobs-card .job-controls { flex-wrap: nowrap; margin-top: 0; }

/* Вузький екран: спершу дозволяємо кнопкам стати акуратним стосиком, і лише
   потім (760 px — та сама межа, що й у style.css) картка стає двоколонковою. */
@media (max-width: 1150px) {
  #jobs-card .job { grid-template-columns: auto minmax(120px, 1.2fr) minmax(92px, .7fr) minmax(126px, .85fr) auto; }
  /* «✓ Передано в роботу» — той самий факт, що й значок «✓ Перевірено» в
     сусідній колонці. На вузькому екрані прибираємо саме підпис, а не кнопки:
     звільненої ширини вистачає, щоб три кнопки лишились в один ряд. */
  #jobs-card .job .progress { display: none; }
  #jobs-card .job-controls { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 760px) {
  #jobs-card .job { grid-template-columns: 1fr 1fr; }
  #jobs-card .job > div:last-child { justify-items: start; }
}

/* «Документи та оплати»: заголовок без дублюючого службового опису.
   Назва лишається впізнаваною, а реєстр починається майже одразу під нею. */
#finance-card > .section-title.finance-title-compact {
  min-height: 0;
  margin: 0 0 5px;
  padding: 0;
}
#finance-card > .section-title.finance-title-compact h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}
#finance-card > .section-title.finance-title-compact .eyebrow,
#finance-card > .section-title.finance-title-compact p { display: none !important; }
#finance-card .accounting-tasks { margin-top: 0; margin-bottom: 4px; }

/* Довідники: лише робоча назва, без дублюючого опису над вкладками. */
#reference-card > .reference-title-compact {
  min-height: 0;
  margin: 0 0 5px;
  padding: 0;
}
#reference-card > .reference-title-compact h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}
#reference-card > .reference-title-compact .eyebrow,
#reference-card > .reference-title-compact p { display: none !important; }
@media(max-width:760px){.reference-nav{align-items:flex-start;flex-wrap:wrap}.reference-nav-actions{margin-left:0}}

/* Копіювання рецептури: назва в реєстрі й у картці, кнопка «Копіювати».
   Правила стоять після блоку .recipe-inline-* вище — і мають ту саму
   специфічність, тож перекривають його лише там, де це задумано. */
.recipe-inline-editor .inline-workspace-editor-actions { display:flex; align-items:center; gap:7px; }
.recipe-inline-editor .recipe-copy-action { height:27px; min-height:27px; padding:0 10px; font-size:12px; line-height:1; }
.recipe-inline-editor .recipe-copy-hint { display:block; margin-top:1px; color:#5b7496; font-size:11px; font-weight:400; }
/* Назва — на власному рядку на всю ширину: у шість колонок сітки вона не
   влазить, а обрізане поле назви редагувати неможливо. */
.recipe-inline-grid .recipe-name-field { grid-column:1/-1; border-right:0; border-bottom:1px solid #e0e7f0; }
#recipe-catalog-body .recipe-name-cell b { color:#163860; font-weight:600; }
#recipe-catalog-body .recipe-row-actions { width:1%; padding-right:10px; text-align:right; white-space:nowrap; }
#recipe-catalog-body .recipe-copy { height:26px; min-height:26px; padding:0 9px; font-size:12px; line-height:1; }