/* ===== ChZ-WEB — фирменный стиль (палитра из мобильного приложения $CAN ChZ, Theme.kt) ===== */
:root {
  --bg: #1A0030;            /* Background */
  --bg-2: #24073D;          /* чуть светлее фона — панели, шапка таблиц */
  --bg-3: #2E0E4A;          /* наведение */
  --gold: #F7CD36;          /* Gold — заголовки, активные элементы */
  --mint: #0FFFC2;          /* Cream — отметки, «да» */
  --rose: #EE2864;          /* Orange — главные кнопки */
  --teal: #009688;          /* IconButtonBg — второстепенные кнопки */
  --lav: #B0BFCE;           /* LavenderText / LavenderBorder — рамки, подписи */
  --lav-dim: rgba(176, 191, 206, .35);
  --white: #FFFFFF;
  --err: #FF8686;           /* ErrorRed */
  --ok: #9EFF6E;            /* SuccessGreen */
  --sel: rgba(158, 255, 110, .33); /* SelectionHighlight */
  --progress: #29a8e0;      /* все прогресс-бары — голубые */
  --r: 12px;                /* скругление рамок, как в приложении */
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--white); font-family: var(--font); font-size: 15px; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* двойной разделитель, как в приложении */
.dbl-line { border: 0; border-top: 1px solid var(--lav-dim); border-bottom: 1px solid var(--lav-dim); height: 4px; margin: 14px 0; }

/* ----- каркас: шапка + меню + контент ----- */
.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 40px 1fr; min-height: 100vh; }
.topbar { grid-column: 1 / 3; display: flex; align-items: center; gap: 18px; padding: 0 20px;
          border-bottom: 1px solid var(--lav-dim); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.brand { font-size: 24px; font-weight: 800; color: var(--gold); letter-spacing: .5px; }
.brand small { font-size: 12px; font-weight: 600; color: var(--lav); margin-left: 8px; letter-spacing: 0; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--lav); font-size: 13px; }
.topbar .who b { color: var(--white); }
.side { border-right: 1px solid var(--lav-dim); padding: 16px 12px; }
.side .group { color: var(--lav); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 14px 8px 6px; }
.side a.item { display: block; padding: 9px 12px; margin: 2px 0; border-radius: var(--r); color: var(--white);
               border: 1px solid transparent; }
.side a.item:hover { text-decoration: none; border-color: var(--lav-dim); }
.side a.item.active { border-color: var(--gold); color: var(--gold); font-weight: 700; }
.side a.item .cnt { float: right; color: var(--lav); font-size: 12px; }
.main { padding: 18px 22px 40px; min-width: 0; }

/* ----- заголовок страницы и панель действий ----- */
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 22px; color: var(--gold); font-weight: 800; }
.page-head .spacer { flex: 1; }

/* ----- кнопки ----- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lav); background: transparent;
       color: var(--white); padding: 8px 14px; border-radius: var(--r); font: inherit; font-weight: 600; cursor: pointer; }
.btn:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.btn-primary { background: var(--rose); border-color: var(--rose); color: var(--white); }
.btn-primary:hover { filter: brightness(1.1); color: var(--white); border-color: var(--rose); }
.btn-teal { background: var(--teal); border-color: var(--teal); }
.btn-teal:hover { color: var(--white); border-color: var(--teal); filter: brightness(1.1); }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* ----- сообщения ----- */
.msg { padding: 10px 14px; border-radius: var(--r); border: 1.5px solid var(--ok); margin-bottom: 12px; }
.msg.error { border-color: var(--err); color: var(--err); }

/* ----- формы: поле в рамке с подписью «в разрыве линии», как в приложении ----- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 16px; }
.block { position: relative; border: 1px solid var(--lav-dim); border-radius: var(--r); padding: 26px 16px 16px; margin: 0 0 24px; }
.block > h2 { position: absolute; top: -11px; left: 14px; margin: 0; background: var(--bg); padding: 0 8px;
              font-size: 14px; line-height: 20px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.fld { position: relative; border: 1px solid var(--lav); border-radius: var(--r); padding: 12px 12px 8px; }
.fld:focus-within { border-color: var(--gold); border-width: 1.5px; }
.fld > label.cap { position: absolute; top: -9px; left: 12px; background: var(--bg); padding: 0 6px;
                   font-size: 12px; color: var(--lav); }
.fld:focus-within > label.cap { color: var(--gold); }
.fld.wide { grid-column: 1 / -1; }
.fld input[type=text], .fld input[type=password], .fld input[type=number], .fld input[type=email],
.fld input[type=date], .fld select, .fld textarea {
  width: 100%; background: transparent; border: 0; outline: 0; color: var(--white); font: inherit; font-size: 16px;
  font-weight: 600; padding: 2px 0; }
.fld select option { background: var(--bg); }
.fld textarea { resize: vertical; font-weight: 500; }
.fld input[type=date] { color-scheme: dark; }
.fld .help { color: var(--lav); font-size: 12px; margin-top: 4px; }
.fld .errs { color: var(--err); font-size: 13px; margin-top: 4px; }
.fld.has-err { border-color: var(--err); }
.fld input[readonly] { color: var(--lav); }
/* чекбокс-«плитка» */
.chk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--lav); border-radius: var(--r); cursor: pointer; }
.chk input { width: 22px; height: 22px; accent-color: var(--mint); }
.chk.on { border-color: var(--gold); }
/* список импортёров фабрики — плитки с галочками */
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pick-list label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--lav-dim);
                   border-radius: var(--r); cursor: pointer; }
.pick-list input { width: 18px; height: 18px; accent-color: var(--mint); }
.pick-list label:has(input:checked) { border-color: var(--gold); }
.pick-search { margin-bottom: 10px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.ok { color: var(--bg); background: var(--mint); }
.badge.off { color: var(--white); background: var(--rose); }
.ro-line { color: var(--lav); font-size: 14px; }
.ro-line b { color: var(--white); }
.sscc-next { font-family: Consolas, "Courier New", monospace; font-size: 17px; color: var(--gold); letter-spacing: 1px; }

/* ----- вход ----- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-box { width: 100%; max-width: 420px; }
.login-box .brand { display: block; text-align: center; font-size: 40px; margin-bottom: 4px; }
.login-box .sub { text-align: center; color: var(--lav); margin-bottom: 10px; }
.login-box .fld { margin-bottom: 20px; }
.login-box .btn-primary { width: 100%; justify-content: center; font-size: 22px; font-weight: 800; padding: 14px; border-radius: 16px; }

/* ===== Tabulator в фирменных цветах (поверх темы midnight) ===== */
.tbl-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tbl-tools .search { flex: 1; min-width: 220px; max-width: 380px; background: transparent; border: 1px solid var(--lav);
                     border-radius: var(--r); color: var(--white); padding: 8px 12px; font: inherit; outline: 0; }
.tbl-tools .search:focus { border-color: var(--gold); }
.tbl-tools .info { color: var(--lav); font-size: 13px; }
.tabulator { background: var(--bg); border: 1px solid var(--lav-dim); border-radius: var(--r); font-size: 14px; }
.tabulator .tabulator-header { background: var(--bg-2); color: var(--gold); border-bottom: 1px solid var(--lav); }
.tabulator .tabulator-header .tabulator-col { background: var(--bg-2); border-right: 1px solid var(--lav-dim); }
.tabulator .tabulator-header .tabulator-col:hover { background: var(--bg-3) !important; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { font-weight: 700; }
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select {
  background: var(--bg); color: var(--white); border: 1px solid var(--lav-dim); border-radius: 6px; padding: 3px 6px; }
.tabulator .tabulator-tableholder { background: var(--bg); }
.tabulator .tabulator-header .tabulator-col.tabulator-frozen,
.tabulator .tabulator-header .tabulator-col.range-header-col { background: var(--bg-2) !important; color: var(--gold); }
.tabulator-row .tabulator-cell.tabulator-frozen { background: inherit; }
.tabulator-row .tabulator-cell.range-header-col,
.tabulator-row .tabulator-cell.tabulator-row-header { background: var(--bg-2) !important; color: var(--lav); border-right: 1px solid var(--lav-dim); }
.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-row-header { color: var(--gold); }
.tabulator .tabulator-tableholder .tabulator-table { background: var(--bg); color: var(--white); }
.tabulator-row { background: var(--bg); border-bottom: 1px solid rgba(176, 191, 206, .12); }
.tabulator-row.tabulator-row-even { background: #1E0436; }
.tabulator-row .tabulator-cell { border-right: 1px solid rgba(176, 191, 206, .12); }
.tabulator-row.tabulator-selectable:hover { background: var(--bg-3); cursor: pointer; }
.tabulator-row.tabulator-selected, .tabulator-row.tabulator-selected:hover { background: var(--sel); }
.tabulator .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected),
.tabulator .tabulator-cell.tabulator-range-only-cell-selected { background: rgba(247, 205, 54, .22) !important; }
.tabulator .tabulator-row .tabulator-cell.tabulator-range-only-cell-selected { outline: 2px solid var(--gold); }
.tabulator .tabulator-footer { background: var(--bg-2); color: var(--lav); border-top: 1px solid var(--lav-dim); }
.tabulator .tabulator-footer .tabulator-page { color: var(--white); background: transparent; border: 1px solid var(--lav-dim); border-radius: 6px; }
.tabulator .tabulator-footer .tabulator-page.active { color: var(--gold); border-color: var(--gold); }
.tabulator .tabulator-footer .tabulator-page-size { background: var(--bg); color: var(--white); border: 1px solid var(--lav-dim); border-radius: 6px; }
.tabulator .tabulator-placeholder span { color: var(--lav) !important; }
.tabulator-row .tabulator-cell .yes { color: var(--mint); font-weight: 800; }
.tabulator-row .tabulator-cell .no { color: var(--rose); font-weight: 800; }
.tabulator-row .tabulator-cell a { color: var(--gold); font-weight: 700; }
.tabulator .tabulator-col-resize-handle:hover { background: var(--gold); }
.tabulator-popup-container, .tabulator-menu { background: var(--bg-2); color: var(--white); border: 1px solid var(--lav); }
.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { background: var(--bg-3); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .topbar { grid-column: 1; flex-wrap: wrap; padding: 8px 16px; }
  .side { border-right: 0; border-bottom: 1px solid var(--lav-dim); display: flex; overflow-x: auto; padding: 8px; }
  .side .group { display: none; }
  .main { padding: 14px 16px 30px; }
}

/* ----- меню: чей кабинет ----- */
.who-co { color: var(--lav); font-size: 12px; margin: 0 4px 14px; padding-bottom: 10px; border-bottom: 1px solid var(--lav-dim); }
.who-co b { display: block; color: var(--gold); font-size: 14px; margin-top: 2px; }
/* ----- заказ: суммы ----- */
.sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 16px; }
.sums div { border: 1px solid var(--lav-dim); border-radius: var(--r); padding: 8px 12px; color: var(--lav); font-size: 12px; }
.sums b { display: block; color: var(--white); font-size: 18px; margin-top: 2px; }
.sums .debt b { color: var(--err); }
.sums .paid b { color: var(--ok); }

/* ----- приём кодов ----- */
.drop { display: block; border: 2px dashed var(--lav); border-radius: var(--r); padding: 22px; text-align: center; color: var(--lav); cursor: pointer; }
.drop.over, .drop:hover { border-color: var(--gold); color: var(--white); }
.drop input { display: none; }
.drop b { color: var(--gold); }
.file-list { margin: 10px 0 0; color: var(--white); font-size: 14px; }
.bar { height: 14px; border: 1px solid var(--lav); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.bar > div { height: 100%; width: 0; background: var(--progress); transition: width .4s; }
.sums .acc b { color: var(--ok); }
.sums .ref b { color: var(--gold); }
.sums .bad b { color: var(--err); }
.hidden { display: none !important; }

/* таблицы с правкой */
.need { color: var(--err); font-weight: 700; }
.tabulator .tabulator-cell.tabulator-editable { cursor: text; }
.tabulator-row .tabulator-cell.changed { background: rgba(247, 205, 54, .18) !important; }
.tabulator .tabulator-cell input { background: var(--bg-3) !important; color: var(--white) !important; }
.errlist { margin: 8px 0 0; padding-left: 18px; color: var(--err); }
.actions-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* ===== Таблица «как в MS Excel» (серо-белая) — исключение из тёмной темы, для GTIN info ===== */
.xl.tabulator { background: #fff; border: 1px solid #bfbfbf; border-radius: 4px; color: #000;
                 font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 14px; }
.xl.tabulator .tabulator-header, .xl.tabulator .tabulator-header .tabulator-col,
.xl.tabulator .tabulator-header .tabulator-col.range-header-col {
  background: #f2f2f2 !important; color: var(--xl-head, #1f3864) !important; border-color: #d4d4d4; }
.xl.tabulator .tabulator-header { border-bottom: 1px solid #bfbfbf; }
.xl.tabulator .tabulator-header .tabulator-col:hover { background: #e6e6e6 !important; }
/* заголовки колонок во всех таблицах — тёмно-синие */
:root { --xl-head: #1f3864; }
.xl.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
.xl.tabulator .tabulator-header .tabulator-col .chz-ttl { color: var(--xl-head) !important; font-weight: 700; }
.xl.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
  background: #fff; color: #000; border: 1px solid #c6c6c6; border-radius: 2px; }
.xl.tabulator .tabulator-tableholder, .xl.tabulator .tabulator-tableholder .tabulator-table { background: #fff; color: #000; }
.xl .tabulator-row, .xl .tabulator-row.tabulator-row-even { background: #fff !important; color: #000; border-bottom: 1px solid #d4d4d4; }
.xl .tabulator-row .tabulator-cell { border-right: 1px solid #d4d4d4; color: #000; }
.xl .tabulator-row.tabulator-selectable:hover { background: #f7f7f7 !important; }
.xl .tabulator-row .tabulator-cell.range-header-col, .xl .tabulator-row .tabulator-cell.tabulator-row-header {
  background: #f2f2f2 !important; color: #595959; border-right: 1px solid #bfbfbf; }
.xl .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) { background: #d9eadf !important; }
.xl .tabulator-row .tabulator-cell.tabulator-range-only-cell-selected,
.xl .tabulator-row .tabulator-cell.tabulator-range-highlight { box-shadow: inset 0 0 0 2px #217346; }
.xl .tabulator-row .tabulator-cell.changed { background: #fff2cc !important; }
.xl .tabulator-row .tabulator-cell.tabulator-editing { box-shadow: inset 0 0 0 2px #217346; }
.xl.tabulator .tabulator-cell input { background: #fff !important; color: #000 !important; }
.xl.tabulator .tabulator-footer, .xl.tabulator .tabulator-calcs-holder, .xl .tabulator-row.tabulator-calcs {
  background: #f2f2f2 !important; color: #000; font-weight: 700; border-top: 1px solid #bfbfbf; }
.xl.tabulator .tabulator-placeholder .tabulator-placeholder-contents { color: #8c8c8c; }
.xl .need { color: #c00000; }
.xl .yes { color: #217346; }
.xl.tabulator .tabulator-footer .tabulator-calcs-holder, .xl.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row,
.xl.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs,
.xl.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-cell {
  background: #f2f2f2 !important; color: #000 !important; border-color: #bfbfbf; }

/* поиск по таблице: маленькая панель и подсветка найденного */
.tbl-tools.mini { margin: 0 0 6px; }
.tbl-tools.mini .search { max-width: 320px; padding: 5px 10px; font-size: 13px; }
mark.chz-hl { background: #FFE14D; color: #000; border-radius: 2px; padding: 0 1px; }

/* ===== Меню колонки ▾ (как в Access / Excel) ===== */
.xl.tabulator .tabulator-col .tabulator-col-title { display: flex; align-items: center; gap: 4px; }
.chz-ttl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.chz-dd { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
          border: 1px solid #bfbfbf; border-radius: 2px; background: #fff; color: #444; font-size: 11px; line-height: 1;
          cursor: pointer; }
.chz-dd:hover { border-color: #217346; color: #217346; }
.xl.tabulator .tabulator-col.chz-filtered { background: #e2efda !important; }
.xl.tabulator .tabulator-col.chz-filtered .chz-dd { background: #217346; border-color: #217346; color: #fff; }
.xl.tabulator .tabulator-col.chz-filtered .chz-dd::before { content: "⏷"; font-size: 10px; }
.xl.tabulator .tabulator-col.chz-filtered .chz-dd { font-size: 0; }

.chz-menu { position: absolute; z-index: 10000; width: 280px; background: #fff; color: #000; border: 1px solid #a6a6a6;
            box-shadow: 2px 3px 8px rgba(0,0,0,.25); font: 13px "Segoe UI", Calibri, Arial, sans-serif; padding: 4px 0; }
.chz-menu .mi { display: flex; align-items: center; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.chz-menu .mi:hover { background: #e5f1fb; }
.chz-menu .mi.dis { color: #a0a0a0; cursor: default; }
.chz-menu .mi.dis:hover { background: none; }
.chz-menu .mi .ic { display: inline-block; width: 24px; color: #217346; font-weight: 700; font-size: 11px; }
.chz-menu .mi .arr { margin-left: auto; color: #555; }
.chz-menu .sep { height: 1px; background: #d9d9d9; margin: 4px 0; }
.chz-menu .cond { display: flex; flex-direction: column; gap: 5px; padding: 4px 10px 6px 34px; }
.chz-menu .cond select, .chz-menu .cond input, .chz-menu .ms {
  font: inherit; color: #000; background: #fff; border: 1px solid #a6a6a6; border-radius: 2px; padding: 3px 6px; }
.chz-menu .ms { display: block; width: calc(100% - 20px); margin: 4px 10px; }
.chz-menu .vals { margin: 0 10px; max-height: 240px; overflow: auto; border: 1px solid #a6a6a6; padding: 3px 0; }
.chz-menu .vals label { display: flex; align-items: center; gap: 6px; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.chz-menu .vals label:hover { background: #e5f1fb; }
.chz-menu .vals label.all { font-weight: 600; }
.chz-menu .vals input { margin: 0; accent-color: #217346; }
.chz-menu .vals .cnt { margin-left: auto; color: #8c8c8c; font-size: 11px; padding-left: 8px; }
.chz-menu .note { color: #7f7f7f; font-size: 12px; padding: 2px 10px 4px; }
.chz-menu .btns { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px 4px; }
.chz-menu .btns button { min-width: 74px; font: inherit; padding: 4px 10px; background: #fdfdfd; color: #000;
                         border: 1px solid #a6a6a6; border-radius: 2px; cursor: pointer; }
.chz-menu .btns button:hover { background: #e5f1fb; border-color: #217346; }
.chz-menu .btns .ok { border-color: #217346; }
.chz-menu .hidden { display: none !important; }

/* ссылки и отметки в светлых таблицах */
.xl.tabulator a { color: #0563c1; font-weight: 600; }
.xl.tabulator .no { color: #c00000; }
.tbl-tools .clear-flt { border-color: #217346; }
.xl.tabulator .yes { color: #217346 !important; font-weight: 700; }

/* поля, заполненные браузером (автозаполнение), — в тёмной теме, а не светло-голубые */
.fld input:-webkit-autofill, .fld input:-webkit-autofill:hover, .fld input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; -webkit-text-fill-color: var(--white); caret-color: var(--white);
  transition: background-color 9999s; }

/* пароли фабрик/импортёров — видит только админ MXB */
.pw { font-family: Consolas, "Courier New", monospace; letter-spacing: .5px; }
.pw-now { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* название страницы — в верхней строке, рядом с ChZ-WEB */
/* ширина бренда подобрана так, чтобы название начиналось ровно над таблицей: 220 (меню) + 22 (отступ) − 20 − 18 */
.topbar .brand { width: 204px; flex: none; white-space: nowrap; }
.top-title { margin: 0; font-size: 22px; color: var(--gold); font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) { .topbar .brand { width: auto; } .top-title { font-size: 18px; } }

/* шапка ниже: шрифты те же, отступы меньше */
.topbar .btn-sm { padding: 3px 10px; }
.topbar .brand, .top-title { line-height: 1; }

/* ----- заголовок карточки заказа: КМ ▾ · Упаковочные · АГРЕГАЦИЯ · МОНИТОРИНГ ----- */
.order-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.order-nav .spacer { flex: 1; }
.order-nav .btn-teal.wide { letter-spacing: 4px; padding-left: 20px; padding-right: 16px; }
.order-nav .btn-teal.on { box-shadow: 0 0 0 2px var(--gold); }
.order-nav .dd { position: relative; }
.order-nav .dd-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: 184px;   /* −20% */
  background: var(--bg-2); border: 1px solid var(--lav); border-radius: var(--r); padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.order-nav .dd.open > .dd-menu { display: block; }   /* только своё меню — вложенное подменю не открывается вместе с ним */
.order-nav .dd-menu a { white-space: nowrap; display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; color: var(--white); text-decoration: none; }
.order-nav .dd-menu a:hover { background: var(--bg-3); }
.order-nav .dd-menu a.on { color: var(--gold); }
.order-nav .dd-menu i { font-style: normal; color: var(--gold); font-weight: 800; width: 14px; }
.top-title .badge { font-size: 11px; vertical-align: middle; margin-left: 6px; }
.stub { border: 1px dashed var(--lav-dim); border-radius: var(--r); padding: 18px; }

/* страница во весь экран (без бренда и меню слева) — например, «Коды маркировки» */
.app.full { grid-template-columns: 1fr; }
.app.full .topbar { grid-column: 1; }

/* поле «только для чтения» в таблице кодов: текст выделяется, но не меняется */
.xl .tabulator-cell input.chz-ro { width: 100%; height: 100%; border: 0; outline: 2px solid #217346; background: #fff;
  color: #000; font: inherit; padding: 0 4px; box-sizing: border-box; cursor: text; }

/* подменю «Печать этикеток» в меню КМ: открывается щелчком (и при наведении), справа от пункта */
.order-nav .dd-sub { position: relative; }
.order-nav .dd-sub > a .dd-arrow { margin-left: auto; color: var(--lav); }
.order-nav .dd-menu.sub { left: calc(100% + 6px); top: -6px; display: none; }
.order-nav .dd-sub.open > .dd-menu.sub { display: block; }   /* подменю — только по щелчку, не при наведении */
.order-nav .dd-sub.open > a { background: var(--bg-3); }

/* печать этикеток: последняя колонка — выбор шаблона + кнопка принтера */
.xl .tabulator-cell.pr-col { padding: 2px 6px; }
.pr-cell { display: flex; gap: 6px; align-items: center; height: 100%; }
.pr-cell select { flex: 1; min-width: 0; height: 24px; border: 1px solid #bfbfbf; border-radius: 4px; background: #fff; color: #000; font: inherit; }
.pr-cell select:disabled { color: #888; background: #f3f3f3; }
/* название шаблона в таблице — по правому краю (ближе к кнопке 🖨) */
.pr-cell select { text-align: right; text-align-last: right; padding-right: 4px; }
.pr-cell select option { text-align: right; }
.pr-cell .pr-btn { width: 32px; height: 24px; border: 1px solid #217346; border-radius: 4px; background: #e8f3ec; cursor: pointer; font-size: 15px; line-height: 1; }
.pr-cell .pr-btn:hover:not(:disabled) { background: #cfe8d8; }
.pr-cell .pr-btn:disabled { opacity: .35; cursor: default; border-color: #bfbfbf; background: #f3f3f3; }
/* «Печать SSCC1»: выбор шаблона — на всю ширину ячейки, название слева; 🖨 — у правого края */
#t-s1 .tabulator-cell.pr-col { justify-content: flex-end; }
#t-s1 .pr-col .pr-cell { width: 100%; }
#t-s1 .pr-cell select { text-align: left; text-align-last: left; padding: 0 4px; }
#t-s1 .pr-cell select option { text-align: left; }
/* закреплённые колонки (слева и справа) — непрозрачные, поверх прокручиваемых */
.xl .tabulator-row .tabulator-cell.tabulator-frozen { z-index: 11; }
.xl .tabulator-row .tabulator-cell.tabulator-frozen:not(.tabulator-range-selected):not(.tabulator-row-header):not(.range-header-col) { background: #fff !important; }
.xl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-range-only-cell-selected { background: #fff !important; }
.xl .tabulator-row .tabulator-cell.b { font-weight: 700; }

/* конструктор шаблона этикетки (pdfme) */
.sh-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sh-tools label { color: var(--lav); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.sh-tools input { width: 80px; padding: 6px 8px; border: 1px solid var(--lav); border-radius: 8px; background: transparent; color: #fff; font: inherit; }
.sh-tools #sh-kr { width: 170px; }
.sh-tools .sh-size { gap: 4px; }
.sh-tools .sh-size input { width: 64px; }
.sh-tools .sh-size .x { color: #fff; font-size: 15px; padding: 0 2px; }
.sh-tools .dd { position: relative; }
.sh-tools .dd-menu { display: none; position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: 440px; max-height: 60vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--lav); border-radius: var(--r); padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.sh-tools .dd.open .dd-menu { display: block; }
.sh-tools .dd-menu a { display: block; padding: 6px 8px; border-radius: 6px; color: #fff; text-decoration: none; font-size: 13px; }
.sh-tools .dd-menu a:hover { background: var(--bg-3); }
.sh-tools .dd-menu code { color: var(--gold); }
#designer { height: calc(100vh - 130px); min-height: 420px; border: 1px solid var(--lav-dim); border-radius: 8px; overflow: hidden; background: #fff; }
/* зелёная кнопка «Шаблон этикетки» и её меню */
.btn-green { background: #1e8e3e; border-color: #1e8e3e; color: #fff; }
.btn-green:hover { filter: brightness(1.1); color: #fff; border-color: #1e8e3e; }
.tbl-tools .dd { position: relative; }
.tbl-tools .sh-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 300px;
  background: var(--bg-2); border: 1px solid var(--lav); border-radius: var(--r); padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  flex-direction: column; gap: 10px; }
.tbl-tools .dd.open .sh-menu { display: flex; }
.tbl-tools .sh-menu .cap { color: var(--lav); font-size: 12px; }
.tbl-tools .sh-menu select { padding: 8px; border-radius: 8px; border: 1px solid var(--lav); background: var(--bg); color: #fff; font: inherit; }
.tbl-tools .sh-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; padding-right: 2px; }  /* много шаблонов — прокрутка */
.tbl-tools .sh-item { display: flex; gap: 4px; }
.tbl-tools .sh-use { flex: 1; text-align: left; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--lav);
  background: var(--bg); color: #fff; font: inherit; cursor: pointer; }
.tbl-tools .sh-use:hover:not(:disabled) { border-color: var(--gold); background: var(--bg-2); }
.tbl-tools .sh-use:disabled { opacity: .6; cursor: default; }
.tbl-tools .sh-ed { display: flex; align-items: center; justify-content: center; width: 38px; flex: none; border-radius: 8px; border: 1px solid var(--lav);
  color: #fff; text-decoration: none; }
.tbl-tools .sh-ed:hover { border-color: var(--gold); }
/* вопрос после печати */
.pr-ask { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; padding: 10px 14px;
  border: 1px solid var(--gold); border-radius: var(--r); background: var(--bg-2); color: #fff; }
.sh-tools .lib-menu { width: min(860px, 92vw); max-height: 80vh; }
.sh-tools .lib-body { display: flex; gap: 10px; align-items: stretch; }
.sh-tools .lib-body select { width: 280px; flex: none; }
.sh-tools .lib-prev { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #4a4a4a; border-radius: 8px; overflow: hidden; }
.sh-tools .lib-prev-t { color: #eee; font-size: 12px; padding: 6px 10px; background: #3a3a3a; }
.sh-tools #lib-view { flex: 1; position: relative; min-height: 340px; }
.sh-tools .lib-menu select { width: 280px; background: var(--bg); color: #fff; border: 1px solid var(--lav); border-radius: 8px; padding: 4px; font: inherit; }
.sh-tools .lib-menu select optgroup { color: var(--gold); }
.sh-tools .lib-menu select option { color: #fff; padding: 3px 6px; }
.sh-tools #sh-state { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sh-tools .btn { padding-top: 6px; padding-bottom: 6px; }
.sh-tools { gap: 8px; }
.sh-tools #sh-w, .sh-tools #sh-h { width: 62px; }
.sh-tools #sh-kr { width: 130px; }
.sh-tools #sh-state { max-width: 200px; }
/* опасное действие (удалить) */
.btn-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn-danger:hover { background: #d0362c; border-color: #d0362c; }
/* ---------- Экспорт этикеток в PDF */
.ex-wrap { display: grid; grid-template-columns: minmax(380px, 460px) 1fr; gap: 24px; align-items: start; }
.ex-left { display: flex; flex-direction: column; gap: 14px; }
.ex-box { border: 1px solid var(--lav); border-radius: 12px; padding: 14px 16px 16px; margin: 0; }
.ex-box legend { color: var(--gold); font-weight: 700; font-size: 20px; padding: 0 8px; }
.ex-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-po input { padding: 8px 12px; border: 1px solid var(--lav); border-radius: 8px; background: transparent;
  color: #fff; font: inherit; font-size: 17px; width: 100%; box-sizing: border-box; }
/* поля страницы — общий стиль .fld (подпись в разрыве рамки); значения только для чтения — белые */
.ex-left .fld input[readonly], .ex-right .fld input[readonly] { color: var(--white); }
.ex-box > .fld { margin-top: 10px; }
.ex-box .ex-grid2 { row-gap: 20px; padding-top: 8px; }
.ex-wide { grid-column: 1 / -1; }
.ex-all { display: flex; gap: 10px; align-items: center; font-size: 19px; color: #fff; padding: 2px 4px 10px; border-bottom: 1px solid var(--lav); }
.ex-all input { width: 20px; height: 20px; }
.ex-all { white-space: nowrap; }
.ex-all small { font-size: 12px; color: var(--lav); white-space: normal; flex: 1; }
.ex-btn { border: 0; border-radius: 8px; padding: 10px 12px; font: inherit; font-weight: 700; font-size: 17px; color: #fff; cursor: pointer; }
.ex-btn:disabled, .ex-pdf:disabled { opacity: .5; cursor: default; }
.ex-red { background: #e3161b; } .ex-red:hover:not(:disabled) { filter: brightness(1.1); }
.ex-green { background: #2e9e63; } .ex-green:hover:not(:disabled) { filter: brightness(1.1); }
.ex-ask { margin-top: 12px; padding: 10px; border: 1px solid var(--gold); border-radius: 8px; font-size: 14px; color: #fff;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ex-dir { display: flex; gap: 8px; align-items: center; }
.ex-dir input { flex: 1; min-width: 0; }
#x-name { font-size: 15px !important; }
.ex-cbs { display: flex; justify-content: space-between; gap: 8px; padding: 12px 4px 8px; border-bottom: 1px solid var(--lav); margin-bottom: 14px; }
.ex-cbs label { color: #fff; display: flex; gap: 5px; align-items: center; }
.ex-po { display: flex; align-items: center; gap: 10px; }
.ex-po > span { color: #fff; font-size: 22px; white-space: nowrap; }
.ex-po .x { font-size: 26px; }
.ex-po input { width: 110px; text-align: center; font-size: 19px; }
.ex-po input#x-parts { width: 78px; }
.ex-pdf { margin-left: auto; background: #d9d9d9; color: #111; border: 0; border-radius: 8px; padding: 10px 18px; font: inherit;
  font-weight: 800; font-size: 20px; cursor: pointer; }
.ex-pdf:hover:not(:disabled) { background: #fff; }
.ex-prog-f { margin-top: 12px; font-size: 12px; color: var(--lav); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-prog-f + .ex-prog { margin-top: 4px; }
.ex-prog { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.ex-bar { position: relative; flex: 1; height: 26px; border: 1px solid var(--lav); border-radius: 8px; overflow: hidden; }
.ex-bar-f { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--progress); transition: width .25s linear; }  /* голубой */
.ex-bar span { position: relative; display: block; text-align: center; line-height: 24px; font-weight: 700; color: #fff; font-size: 14px; }
.ex-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ex-shrow { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.ex-sh { flex: 1; max-width: 560px; }
.ex-back { margin-left: auto; white-space: nowrap; }
.ex-prev { position: relative; background: #4a4a4a; border-radius: 4px; height: 70vh; min-height: 300px; display: flex; flex-direction: column; overflow: hidden; }
.ex-prev-t { position: absolute; left: 10px; top: 6px; z-index: 5; color: #000; font-weight: 800; font-size: 16px; background: transparent; pointer-events: none; }
#x-view { flex: 1; position: relative; min-height: 0; }
@media (max-width: 1000px) { .ex-wrap { grid-template-columns: 1fr; } }
/* Экспорт: левая колонка компактнее (~на 30%) — меньше отступы и шрифты; значения позиции и счётчиков — по центру */
.ex-left { gap: 8px; }
.ex-left .ex-box { padding: 3px 12px 11px; }
.ex-left .ex-box legend { font-size: 17px; padding: 0 6px; }
.ex-left .fld { padding: 7px 10px 4px; }
.ex-left .fld > label.cap { top: -8px; font-size: 11px; }
.ex-left .fld input[type=text] { font-size: 15px; padding: 1px 0; }
.ex-left .ex-box .ex-grid2 { row-gap: 15px; column-gap: 10px; padding-top: 9px; }
.ex-left .ex-box > .fld { margin-top: 12px; }
#x-gtin, #x-plu, #x-pal, #x-box, #x-razmer, #x-cvet, #x-artikul, #x-pr, #x-nopr { text-align: center; }
.ex-left .ex-all { font-size: 17px; padding: 0 4px 6px; }
.ex-left .ex-btn { padding: 7px 10px; font-size: 15px; }
.ex-left .ex-ask { margin-top: 8px; padding: 6px 8px; }
.ex-left .ex-cbs { padding: 8px 4px 6px; margin-bottom: 8px; font-size: 14px; }
.ex-left .ex-po { gap: 8px; }
.ex-left .ex-po > span { font-size: 18px; }
.ex-left .ex-po .x { font-size: 20px; }
.ex-left .ex-po input { padding: 5px 10px; font-size: 16px; }
.ex-left .ex-pdf { padding: 6px 14px; font-size: 17px; }
.ex-left .ex-prog-f { margin-top: 8px; }
.ex-ask { flex-direction: column; align-items: stretch; }
.ex-ask-btns { display: flex; gap: 8px; }
.ex-ask .ex-ask-red { background: #e3161b; border-color: #e3161b; color: #fff; }
.ex-ask .ex-ask-green { background: #2e9e63; border-color: #2e9e63; color: #fff; }
.ex-ask .ex-ask-red:hover, .ex-ask .ex-ask-green:hover { filter: brightness(1.1); }
.ex-ask .nw { white-space: nowrap; }
#x-dir-btn { padding: 3px 10px; font-size: 13px; white-space: nowrap; }
/* стрелки ▲▼ у чисел «Печать по» и «× частей» — видны всегда, не только при наведении */
.ex-po input[type=number]::-webkit-inner-spin-button, .ex-po input[type=number]::-webkit-outer-spin-button { opacity: 1; height: 26px; cursor: pointer; }
.ex-po input[type=number] { color-scheme: dark; }
/* «Шаблон» на экспорте: шрифт +5% (16 → 16,8 px), высота поля прежняя (47 px) */
.ex-sh select#x-sh { font-size: 16.8px; height: 25px; padding-top: 0; padding-bottom: 0; }
/* листание образцов GTIN («Все позиции») — в панели масштаба pdfme */
.ex-pager { display: inline-flex; align-items: center; gap: 4px; color: #fff; }
.ex-pager button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #fff; font-size: 14px; cursor: pointer; }
.ex-pager button:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.ex-pager button:disabled { opacity: .35; cursor: default; }
.ex-pager b { font-size: 14px; min-width: 54px; text-align: center; white-space: nowrap; }
.ex-pager i { width: 1px; height: 24px; margin: 0 6px; background: #fff; opacity: .45; }
.ex-pager-solo { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: rgba(40,40,40,.9); border-radius: 8px; padding: 4px 8px; }
.ex-pager-solo .ex-pager i { display: none; }
.ex-prev-pdf { position: absolute; right: 10px; top: 6px; z-index: 5; background: #d9d9d9; color: #111; border: 0; border-radius: 8px;
  padding: 5px 12px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.ex-prev-pdf:hover:not(:disabled) { background: #fff; }
.ex-prev-pdf:disabled { opacity: .5; cursor: default; }
.sh-tools { margin-top: -7px; }   /* конструктор: отступ от шапки 18 → 11 px (−40%) */
/* «Взять дизайн…»: список и образец уже на 20% (280 → 224, 556 → 445 px), окно — по содержимому */
.sh-tools .lib-menu { width: auto; }
.sh-tools .lib-body select, .sh-tools .lib-menu select { width: 224px; }
.sh-tools .lib-prev { flex: none; width: 445px; }
/* вопрос «применить шаблон ко всем GTIN?» — в строке с выбором шаблона */
.ex-sh-ask { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; border: 1px solid var(--gold); border-radius: 8px;
  color: #fff; font-size: 14px; max-width: 520px; }
.ex-sh-ask.hidden { display: none; }
.ex-sh-ask .ex-ask-green { background: #2e9e63; border-color: #2e9e63; color: #fff; }
.km-gs { color: var(--gold); opacity: .8; }   /* разделитель GS в полном коде маркировки */
/* полный код маркировки — моноширинным шрифтом: все символы одной ширины, коды одной длины выглядят одинаково */
.tabulator-cell.km-mono, .tabulator-cell.km-mono input.chz-ro { font-family: Consolas, "Cascadia Mono", "Lucida Console", "Courier New", monospace; font-size: 13px; }
.km-mono .km-gs { display: inline-block; width: 1ch; overflow: hidden; text-align: center; vertical-align: bottom; }   /* значок GS — ровно одна позиция */
.add-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
/* стрелки сортировки в заголовках не показываем — сортировка есть в меню колонки ▾ (во всех таблицах) */
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter { display: none !important; }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { padding-right: 0 !important; }
.btn-save-sm { padding-top: 4.5px; padding-bottom: 4.5px; }   /* «Сохранить изменения» на ГТИН инфо — ниже на 20% */
/* ----- левое меню: выезжающая панель (по умолчанию скрыта), кнопка ☰ в шапке ----- */
.app, .app.full { grid-template-columns: 1fr; }
.app .topbar, .app.full .topbar { grid-column: 1; }
.topbar .brand { width: auto; }
.side-tg { flex: none; width: 34px; height: 30px; border: 1px solid var(--lav-dim); border-radius: 8px; background: transparent;
  color: var(--white); font-size: 18px; line-height: 1; cursor: pointer; margin-right: -6px; }
.side-tg:hover, .side-tg.on { border-color: var(--gold); color: var(--gold); }
.app > .side { position: fixed; top: 40px; left: 0; bottom: 0; width: 220px; z-index: 60; background: var(--bg);
  overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; display: block; }
.app.side-open > .side { transform: translateX(0); box-shadow: 6px 0 18px rgba(0,0,0,.35); }
.app > .main { transition: margin-left .2s ease; }
.app.side-open > .main { margin-left: 220px; }
@media (max-width: 760px) {
  .app > .side { top: 0; display: block; border-bottom: 0; }
  .app > .side .group { display: block; }
  .app.side-open > .main { margin-left: 0; }        /* на телефоне меню поверх страницы */
}
/* неактивная кнопка видна как неактивная (например «Сохранить изменения», пока нечего сохранять) */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: default; filter: grayscale(.3); }
.btn:disabled:hover { border-color: inherit; color: inherit; }
.btn-primary:disabled:hover { border-color: var(--rose); color: var(--white); }
/* общий PLU — светлый фон строки своего цвета (chzPlu в chz-tovar.js); выделение и правки видны поверх */
.xl .tabulator-row.plu-c, .xl .tabulator-row.plu-c.tabulator-row-even, .xl .tabulator-row.plu-c.tabulator-selectable:hover { background: var(--plu) !important; }
/* номера строк во всех таблицах — шрифт 11,8 px (было 14; 11,2 оказалось мелко, +5%) */
.tabulator .tabulator-row .tabulator-cell.range-header-col, .tabulator .tabulator-row .tabulator-cell.tabulator-row-header { font-size: 11.8px !important; }
/* ✂ Разделить на «ГТИН инфо»: колонка «В резерв, шт.» */
.xl .tabulator-row .tabulator-cell.rz-col { background: #e7f1fb !important; font-weight: 700; }
.xl .tabulator-row .tabulator-cell.rz-err { box-shadow: inset 0 0 0 2px #c00000; }
#rz-bar { display: inline-flex; align-items: center; gap: 8px; }
#rz-bar.hidden { display: none; }
.rz-warn { color: var(--gold); font-weight: 700; }

/* итоговая строка таблиц товаров: Кол-во, SSCC1, SSCC2 — тёмно-красным */
.calc-hot { color: #a00000; font-weight: 700; }
.calc-c { display: block; text-align: center; }   /* подсчитанные итоги таблиц товаров — по центру */
/* MixKol: мелкая подсказка Кол-во / MixKol в правом нижнем углу ячейки */
.xl .tabulator-cell[tabulator-field="mix_kol"] { position: relative; }
.mix-q { position: absolute; right: 3px; bottom: 1px; font-size: 10px; line-height: 1; color: #a0522d; pointer-events: auto; }
/* карточка заказа: «Заказ создан / Изменён / Закрыт» в шапке; галочка «Закрыт» рядом с «Кол-во кодов» */
.top-info { color: var(--lav); font-size: 13px; white-space: nowrap; border-left: 1px solid var(--lav-dim); padding: 4px 0 4px 16px; margin-left: 4px; }
.top-info b { color: var(--white); }
.top-info b.no { color: #ff6b6b; }
.sums.sums-chk { align-items: stretch; }
.sums.sums-chk > div:has(> .chk) { padding: 0; border: 0; background: none; display: flex; align-items: stretch; font-size: 15px; }
.sums.sums-chk .chk { margin: 0; height: 100%; width: 100%; box-sizing: border-box; font-size: 15px; color: var(--white); }
/* карточка заказа — плотнее по высоте (−15%) */
.ord-card .block { padding: 18px 14px 10px; margin-bottom: 15px; }
.ord-card .form-grid { gap: 12px 16px; }
.ord-card .fld { padding: 8px 12px 4px; }
.ord-card .fld .help { margin-top: 2px; line-height: 1.25; }
.ord-card .sums { margin-top: 11px; }
.ord-card .sums > div { padding-top: 6px; padding-bottom: 6px; }
/* выпадающие меню разделов заказа — зелёные: каждое меню на 30% темнее своей кнопки/родителя
   кнопка #009688 → меню #00695F → подменю #004A43 */
.order-nav .dd > .dd-menu { background: #00695F; border-color: rgba(255,255,255,.28); }
.order-nav .dd-menu.sub { background: #004A43; }
.order-nav .dd-menu a { gap: 7px; }                 /* зазор «цифра — надпись»: только gap, цифра без запаса ширины */
.order-nav .dd-menu i { width: auto; font-variant-numeric: tabular-nums; }
.order-nav .dd-menu a:hover, .order-nav .dd-sub.open > a { background: rgba(0,0,0,.18); }
.order-nav .dd-sub > a .dd-arrow { color: rgba(255,255,255,.75); }
/* меню «Упаковки (SSCC)» и «АГРЕГАЦИЯ» — шириной ровно с кнопку-родителя */
.order-nav .dd.dd-eq > .dd-menu { min-width: 0; width: 100%; box-sizing: border-box; }
/* таблица с объединёнными ячейками (группы PLU) — «как в Excel», как .xl */
.grp-wrap { overflow: auto; background: #fff; border: 1px solid #bfbfbf; border-radius: 4px; }
.grp-tbl { width: 100%; border-collapse: separate; border-spacing: 0; color: #000; background: #fff;
           font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 14px; }
.grp-tbl th, .grp-tbl td { border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; padding: 4px 8px; vertical-align: middle; }
.grp-tbl thead th { position: sticky; top: 0; z-index: 2; background: #f2f2f2; color: #262626; font-weight: 700; text-align: left;
                    border-bottom: 1px solid #bfbfbf; white-space: nowrap; }
.grp-tbl tfoot td { position: sticky; bottom: 0; z-index: 2; background: #f2f2f2; font-weight: 700; border-top: 1px solid #bfbfbf; }
.grp-tbl tr.g-end td, .grp-tbl td[rowspan] { border-bottom: 1px solid #a6a6a6; }   /* граница между группами PLU — темнее */
.grp-tbl td.c { text-align: center; }
.grp-tbl td.b { font-weight: 700; }
.grp-tbl td.ph { text-align: center; color: #8c8c8c; padding: 30px; }
.grp-tbl td.pr-col { width: 290px; padding: 2px 6px; }
.grp-tbl .need { color: #c00000; font-weight: 700; }
.grp-tbl tbody tr:hover td:not([rowspan]) { background: #f7f7f7; }
/* Tabulator-таблица с «объединёнными» ячейками группы (Печать SSCC1): первая ячейка группы растягивается
   на все строки группы, остальные прячутся; граница между группами — темнее */
.span-tbl .tabulator-row { overflow: visible; }
.span-tbl .tabulator-row .tabulator-cell.span-top { overflow: visible; position: relative; }
.span-tbl .span-ov { position: absolute; left: 0; top: 0; right: 0; z-index: 2; background: #fff; display: flex; align-items: center;
                     padding: 0 6px; box-sizing: border-box; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #a6a6a6; }
.span-tbl .span-ov.b { font-weight: 700; }
.span-tbl .span-ov .pr-cell { width: 100%; }
.span-tbl .tabulator-row .tabulator-cell.span-hid { visibility: hidden; }
.span-tbl .tabulator-row.g-end { border-bottom-color: #a6a6a6; }
.span-tbl .tabulator-cell.pr-col .pr-cell { width: 100%; }
/* Печать SSCC1: «Состав короба» — GTIN группы построчно в одной ячейке */
.xl .tabulator-row .tabulator-cell.ss-cell { white-space: normal; line-height: 1.35; padding-top: 5px; padding-bottom: 5px; }
.ss-line { white-space: nowrap; }
.ss-line b { color: #7a4a00; }
.ss-line b.need { color: #c00000; }
.ss-box { display: flex; flex-direction: column; }
/* длинный заголовок в шапке не раздвигает страницу: сжимается с «…» (полный текст — в подсказке) */
.topbar { min-width: 0; }
.topbar .top-title { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.topbar .who { white-space: nowrap; }
label.btn.disabled { opacity: .45; pointer-events: none; }
/* АвтоАгрегация: выбор этапа в строке кнопок */
.aa-st { display: inline-flex; align-items: center; gap: 5px; color: var(--white, #fff); font-size: 14px; cursor: pointer; white-space: nowrap; }
.aa-st input { accent-color: #F7CD36; }
.aa-sep { color: var(--lav, #B0BFCE); font-size: 18px; margin: 0 2px; }
/* Печать агрегированных: три шаблона в строку, образец — настоящий PDF во фрейме */
.pa-shrow { gap: 12px; }
.pa-shrow .ex-sh { max-width: 252px; min-width: 0; }   /* −30% (было 360px) */
.pa-shrow .ex-sh.hidden { display: none; }
.fld select.pa-plu { width: 100%; background: transparent; color: var(--white, #fff); border: 0; font: inherit; font-size: 15px; font-weight: 700; text-align: center; }
/* Печать Агрегированных: образец — PDF во фрейме под заголовком (заголовок чёрный, без фона — как на других страницах) */
.pa-view { flex: 1; width: 100%; border: 0; background: #4a4a4a; margin-top: 32px; }
/* фон окна образца = фон просмотрщика PDF браузера (#282828), заголовок — светлый, чтобы читался */
.pa-prev, .pa-prev .pa-view { background: #282828; }
.pa-prev .ex-prev-t { color: #e6e6e6; }
/* «Печать Агрегированных» и «Экспорт этикеток КМ» (класс pa-wrap; также экспорт SSCC1/SSCC2): отступ от верхней панели −60% (18→7px), зазоры между полями −10% */
.pa-wrap { margin-top: -10.8px; }
.pa-wrap .ex-shrow { margin-top: 4px; }
.pa-wrap .ex-left { gap: 7.2px; }
.pa-wrap .ex-left .ex-box .ex-grid2 { row-gap: 13.5px; }
.pa-wrap .ex-left .ex-box > .fld { margin-top: 10.8px; }
/* «Печать Агрегированных»: поля выбора шаблонов ниже на 40% (45→27px) — только за счёт внутренних отступов */
.pa-wrap .ex-shrow .fld.ex-sh { padding-top: 4px; padding-bottom: 2px; }
.pa-wrap .ex-shrow .fld.ex-sh select { padding-top: 0; padding-bottom: 0; }
.pa-wrap .ex-shrow .ex-back { padding-top: 4px; padding-bottom: 4px; }
/* Экспорт КМ и SSCC1/SSCC2 (select #x-sh): шрифт шаблона крупнее — поле 47→28px (−40%) */
.pa-wrap .ex-shrow .fld.ex-sh:has(#x-sh) { padding-top: 2px; padding-bottom: 1px; }
.pa-wrap .ex-shrow #x-sh { height: 23px; }
/* АвтоАгрегация в фоне: прогресс задачи */
.aa-prog { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.aa-prog-t { font-size: 13px; color: var(--lav); }
.aa-prog .ex-bar { flex: none; height: 24px; }
.aa-prog .ex-bar span { line-height: 22px; }
/* экспорт PDF: два прогресс-бара — верхний (текущий файл, зелёный) и нижний (всего) */
.ex-prog1 { margin-top: 4px; }
.ex-prog1 .ex-bar-f { background: #2e9d5b; }
.ex-prog1 + .ex-prog { margin-top: 6px; }
/* экспорт PDF: полосы прогресса ниже на 30% (26 → 18px) */
.ex-prog .ex-bar { height: 18px; }
.ex-prog .ex-bar span { line-height: 16px; font-size: 12px; }
/* «Нагрузка сервера» (perfmon) */
.pm-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pm-seg { display: inline-flex; border: 1px solid var(--lav-dim); border-radius: 8px; overflow: hidden; }
.pm-seg button { background: transparent; color: var(--lav); border: 0; padding: 5px 11px; cursor: pointer; font: inherit; font-size: 13px; }
.pm-seg button + button { border-left: 1px solid var(--lav-dim); }
.pm-seg button.on { background: var(--gold); color: #1A0030; font-weight: 700; }
.pm-auto { display: inline-flex; gap: 5px; align-items: center; }
.pm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pm-cards > div { border: 1px solid var(--lav-dim); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.pm-cards span { font-size: 12px; color: var(--lav); }
.pm-cards b { font-size: 18px; color: var(--white); }
.pm-cards small { font-size: 12px; color: var(--lav); }
.pm-hint { border-left: 3px solid var(--gold); padding: 6px 12px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.pm-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pm-chart { border: 1px solid var(--lav-dim); border-radius: 10px; padding: 8px 10px 6px; position: relative; background: var(--bg-2); }
.pm-ct { font-weight: 700; color: var(--gold); font-size: 14px; margin-bottom: 4px; }
.pm-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--lav); margin-top: 2px; }
.pm-leg i { display: inline-block; width: 10px; height: 3px; margin-right: 5px; vertical-align: middle; }
.pm-tip { position: absolute; top: 30px; background: rgba(26, 0, 48, .95); border: 1px solid var(--lav-dim); border-radius: 6px;
  padding: 5px 8px; font-size: 12px; pointer-events: none; min-width: 150px; }
.pm-h2 { color: var(--gold); font-size: 17px; margin: 18px 0 8px; }
/* МОНИТОРИНГ заказа */
.mn-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mn-sum { border-collapse: collapse; font-size: 14px; }
.mn-sum th { color: var(--gold); font-weight: 700; padding: 2px 14px; text-align: right; font-size: 13px; }
.mn-sum td { padding: 3px 14px; text-align: right; color: var(--white); font-weight: 700; font-size: 16px; border-top: 1px solid var(--lav-dim); }
.mn-sum td:first-child { text-align: left; color: var(--lav); font-weight: 400; font-size: 14px; padding-left: 0; }
.mn-sum td.ok { color: #3fd27f; }
.mn-sum td.low { color: #ff6b8a; }
.mn-sel { min-width: 330px; }
.mn-sel select { width: 100%; }
.mn-more { font-size: 13px; line-height: 1.5; }
.mn-hint { font-size: 12px; margin: 0 0 6px; }
.mn-bad { color: #d0103a; font-weight: 700; }
.mn-over { color: #b06a00; font-weight: 700; }
/* МОНИТОРИНГ: отступ от верхней панели −50% (18→9px), поле «Отчёт» 45→29px (−35%), поиск 35→26px (−25%) */
.mn-top { margin-top: -13.5px; }   /* отступ от верхней панели: 18 → 4,5px (ещё −50%) */
.mn-sel.fld { padding-top: 3px; padding-bottom: 1px; }
.mn-rep .tbl-tools .search { padding-top: 4px; padding-bottom: 3px; }
/* сообщения в зелёной рамке (.msg) — ниже на 35% за счёт внутренних отступов: 39 → 25px (красные .msg.error не трогаем) */
.msg:not(.error) { padding-top: 3px; padding-bottom: 3px; }

/* ----- счётчик SSCC импортёра: проверка и подтверждение ----- */
.sscc-next.bad { color: var(--err); }
.sscc-state { margin-top: 10px; padding: 6px 12px; border-radius: var(--r); border: 1.5px solid var(--lav-dim); font-size: 14px; }
.sscc-state.good { border-color: var(--ok); }
.sscc-state.warn { border-color: var(--gold); }
.sscc-state.warn div { color: var(--gold); margin-top: 3px; }
.sscc-state.bad { border-color: var(--err); color: var(--err); }
.sscc-log { margin-top: 10px; font-size: 13px; }
.sscc-log summary { cursor: pointer; color: var(--lav); }
.sscc-log table { border-collapse: collapse; margin-top: 6px; }
.sscc-log th, .sscc-log td { border: 1px solid var(--lav-dim); padding: 3px 8px; text-align: left; vertical-align: top; }
.sscc-log th { background: var(--bg-2); color: var(--gold); font-weight: 600; }
.sscc-log td.nt { color: var(--gold); max-width: 520px; }
.sscc-dlg { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.sscc-dlg[hidden], .sscc-dlg [hidden], .sscc-state[hidden] { display: none; }
.sscc-dlg .box { background: var(--bg-2); border: 1.5px solid var(--gold); border-radius: var(--r); padding: 16px 20px; max-width: 620px; width: calc(100% - 32px); }
.sscc-dlg h3 { margin: 0 0 10px; color: var(--gold); }
.sscc-dlg .row { margin: 8px 0; }
.sscc-dlg .row.w { color: var(--gold); }
.sscc-dlg .ack { display: flex; gap: 8px; align-items: flex-start; color: var(--err); cursor: pointer; }
.sscc-dlg .form-actions { margin-top: 14px; }


/* ===== Стартовая страница оператора (без входа): поле для скана + «АДМИН» ===== */
.kiosk .k-code { width: 100%; height: 34px; padding: 4px 12px; font-size: 16px; background: transparent; color: var(--white);
                 border: 1.5px solid var(--gold); border-radius: var(--r); outline: none; font-family: Consolas, "Courier New", monospace; }
.kiosk .k-msg { min-height: 22px; margin: 6px 4px 10px; font-size: 14px; color: var(--lav); text-align: center; }
.kiosk .k-msg.bad { color: var(--err); font-weight: 700; }
.kiosk .k-admin { width: 100%; justify-content: center; font-size: 22px; font-weight: 800; padding: 14px; border-radius: 16px;
                  background: var(--teal); border-color: var(--teal); color: var(--white); letter-spacing: 6px; }
.kiosk .k-admin:hover { filter: brightness(1.12); text-decoration: none; color: var(--white); }

/* Страница входа: «Войти» — зелёная, под ней красная «Оператор» (→ стартовая страница оператора) */
.login-box .login-go { background: var(--teal); border-color: var(--teal); }
.login-box .login-go:hover { border-color: var(--teal); }
.login-box .login-op { margin-top: 12px; text-decoration: none; }
.login-box .login-op:hover { text-decoration: none; color: var(--white); }

/* поле поверх ячейки — выделить часть текста (chz-table.js, textSelect) */
.chz-cell-text { position: fixed; z-index: 10050; box-sizing: border-box; padding: 0 6px; margin: 0;
  background: var(--bg-3, #2a1440); color: var(--white, #fff); border: 2px solid var(--gold, #f7cd36); border-radius: 0;
  outline: none; cursor: text; user-select: text; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.chz-cell-text::selection { background: #3b6fd8; color: #fff; }
.chz-cell-text.xl { background: #fff; color: #000; border-color: #217346; }
/* Мониторинг: окно «Расформировать агрегацию?» */
.rf-box { max-width: 760px !important; }
.rf-kinds { display: flex; flex-direction: column; gap: 6px; }
.rf-k { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.rf-what ul { margin: 4px 0; padding-left: 20px; }
.rf-what li { margin: 3px 0; }
.rf-smp { color: var(--lav); font-size: 12px; font-family: monospace; }
/* Мониторинг: пометка «микс» — коробы/паллеты смешанные (в них и другие GTIN) */
.mn-mix { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; font-size: 11px; line-height: 15px;
  background: #fff2cc; color: #7a4a00; border: 1px solid #e6c870; vertical-align: 1px; }

/* ===== ОТГРУЗКИ: список фур — крупно и своим цветом (--oc) ===== */
.og-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.og-new { border: 1.5px solid var(--gold); border-radius: var(--r); padding: 16px 14px 12px; margin-bottom: 14px; background: var(--bg-2); }
.og-new-row { display: flex; gap: 12px; flex-wrap: wrap; }
.og-new-row .fld { min-width: 180px; }
.og-new-row .og-c { flex: 1; min-width: 260px; }
.og-new-row select, .og-new-row input { width: 100%; }
.og-name { margin: 10px 2px 4px; color: var(--lav); }
.og-name b { color: var(--gold); font-size: 18px; }
.og-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.og-card { border: 2px solid var(--oc); border-left-width: 10px; border-radius: var(--r); padding: 12px 14px; background: var(--bg-2);
           display: flex; flex-direction: column; gap: 8px; }
.og-card.done { opacity: .75; border-style: dashed; }
.og-head { display: flex; align-items: center; gap: 10px; }
.og-nm { flex: 1; font-size: 26px; font-weight: 800; color: var(--oc); word-break: break-all; line-height: 1.15; }
.og-st { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--lav); color: var(--lav); white-space: nowrap; }
.og-st.open { border-color: var(--mint); color: var(--mint); }
.og-sub { color: var(--lav); font-size: 13px; }
.og-nums { display: flex; flex-wrap: wrap; gap: 6px 5px; font-size: 13px; color: var(--lav); align-items: baseline; }
.og-nums i { font-style: normal; color: var(--lav); opacity: .55; }   /* разделитель « | » */
.og-nums b { color: var(--white); font-size: 16.7px; }   /* 13 : 16,7 — то же соотношение, что было 14 : 18 */
.og-ci { width: 100%; background: transparent; border: 1px solid var(--lav-dim, #554); border-radius: 6px; color: var(--white); padding: 5px 8px; font-size: 14px; }
.og-ci:focus { border-color: var(--gold); outline: none; }
.og-ci.saved { border-color: var(--mint); }
.og-act { display: flex; gap: 6px; flex-wrap: nowrap; }      /* все кнопки карточки — в одну строку */
.og-act .btn { padding-left: 10px; padding-right: 10px; white-space: nowrap; flex: 0 0 auto; }
.og-act .og-go { flex: 1 1 auto; text-align: center; }
.og-card { min-width: 0; }
@media (max-width: 520px) {                                      /* телефон: кнопки сжимаются, но остаются в одну строку */
  .og-act { gap: 4px; }
  .og-act .btn { flex: 1 1 auto; min-width: 0; padding: 6px 5px; font-size: 12.5px; letter-spacing: 0; }
}
.og-go { background: var(--oc); border-color: var(--oc); color: #1a0533; font-weight: 800; letter-spacing: 1px; }
.og-go:hover { color: #1a0533; filter: brightness(1.1); border-color: var(--oc); }
.og-del:hover { border-color: #ff6b6b; color: #ff6b6b; }
.og-empty { padding: 30px 4px; font-size: 16px; }
@media (max-width: 520px) { .og-list { grid-template-columns: 1fr; } .og-nm { font-size: 21px; } }
.og-pk-sum { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.og-pk-sum span { color: var(--gold); font-weight: 700; }
.og-pk-sum small { color: var(--lav); margin-right: 8px; }
.og-pk-sum b { color: var(--white); font-size: 18px; }
/* отчёт отгрузки (PackingList) */
.og-rep-head { margin: 0; flex: 0 1 auto; max-width: 640px; }
/* шапка отчёта: слева карточка, справа — выбор отчёта (вверху) и кнопки (внизу справа) */
.og-rep-top { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 10px; }
.og-rep-side { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.og-rep-side .mn-sel { max-width: 336px; min-width: 264px; flex: 1; }   /* на 20% уже, чем было */
.og-rep-sel { display: flex; gap: 8px; align-items: stretch; }      /* кнопка Excel — по высоте поля «Отчёт» */
.og-xl { padding: 0 8px; display: inline-flex; align-items: center; height: auto; }
.og-xl svg { width: 28px; height: 28px; }
.og-rep-btn { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.og-rep-btn .btn { padding: 9px 18px; }
.og-export { background: #23a33a; border-color: #23a33a; color: #fff; font-weight: 800; }   /* закрыть отгрузку и Export кодов ЧЗ */
.og-export:hover { background: #2bbb45; border-color: #2bbb45; color: #fff; }
.og-back { align-self: flex-start; }
.og-unexp { background: transparent; border-color: var(--err, #FF8686); color: var(--err, #FF8686); font-weight: 700; }
.og-exp-info { align-self: center; color: var(--lav); font-size: 13px; }
.og-rep-com { color: var(--white); margin: 2px 0 4px; }
/* заголовок отчёта: «| Отчёт: Фабрика → Импортёр» — «Отчёт:» жирным, остальное обычным */
.og-tt { font-weight: 400; }
/* отчёт отгрузки: поле поиска ниже — внутренние отступы на 35% меньше (8×12 → 5,2×7,8) */
#t-og-tools .search, .og-rep .tbl-tools .search { padding: 5.2px 7.8px; }
.og-tt b { font-weight: 800; }
.og-tt-sep { color: var(--lav); opacity: .6; margin-right: 10px; font-weight: 400; }
/* общий отчёт (Invoice) по нескольким отгрузкам: список отгрузок их цветами */
.og-inv-list { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 6px; }
.og-inv-it { border-left: 6px solid var(--oc); padding-left: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.og-inv-it b { color: var(--oc); font-size: 16px; }
/* список отгрузок: значок QR на кнопке «Карточка» */
.og-qr { width: 17px; height: 17px; vertical-align: -3px; margin-right: 3px; }
/* список отгрузок: галочка «в Отчёт(Invoice)» на карточке */
.og-inv-chk { display: flex; align-items: center; gap: 5px; margin-left: auto; padding-left: 6px; cursor: pointer; white-space: nowrap;
              color: var(--lav); font-size: 12px; }
.og-inv-chk input { width: 22px; height: 22px; accent-color: #1e8e3e; cursor: pointer; }

/* «Мониторинг» ▸ «🚚 В отгрузку»: что уйдёт — по PLU */
.sh-tbl { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.sh-tbl th, .sh-tbl td { border: 1px solid var(--lav); padding: 2px 8px; text-align: center; }
.sh-tbl td { font-weight: 700; min-width: 70px; }
#sh-new { display: flex; gap: 10px; flex-wrap: wrap; }
#sh-new.hidden { display: none; }
#sh-new .og-c { flex: 1; min-width: 220px; }

/* ----- аккаунт и «Выйти» — внизу левого меню; в шапке справа — кнопка возврата (22.10.2026) ----- */
.app > .side { display: flex; flex-direction: column; }
.side-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 4px 2px; border-top: 1px solid var(--lav-dim); }
.side-user { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--lav); }
.side-user b { color: var(--white); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user svg { flex: none; }
.top-back { display: flex; flex: none; }
.top-back:empty { display: none; }
.top-back .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px; line-height: 1; box-sizing: border-box; gap: 0; }
.top-back .tb-arr { display: inline-block; margin-right: 5px; line-height: 1; transform: translateY(-1px); }
@media (max-width: 760px) { .app > .side { display: flex; } }
/* после «ChZ-MXB» — вертикальная черта на одной линии с правым краем левого меню (220 px), во всю высоту шапки (23.10.2026) */
.topbar .brand { flex: none; align-self: stretch; display: flex; align-items: center; box-sizing: border-box;
  width: 154px; border-right: 1px solid var(--lav-dim); margin-right: -6px; }
.topbar .brand + .top-info { border-left: 0; padding-left: 0; margin-left: 0; }
@media (max-width: 760px) { .topbar .brand { width: auto; border-right: 0; margin-right: 0; } }