/* ==========================================================================
   MarkFlow — MK Illumination · operational console theme
   Layered on top of Bootstrap 5.3 via --bs-* variables (no JS contract broken).
   Motif: Data Matrix grid (L-finder) · Accent: amber "illumination" glow.
   ========================================================================== */

/* ---------- Design tokens ------------------------------------------------- */
:root {
  /* Brand / neutrals */
  --ink-900:#15171c;
  --ink-800:#1d2027;
  --ink-700:#272b34;
  --ink-600:#3a3f4b;
  --canvas:#eef0f3;
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --text:#1b1e24;
  --text-2:#4a4f59;
  --muted:#727a86;
  --line:#e4e7ec;
  --line-2:#d3d8e0;

  /* Amber — "illumination" */
  --amber-300:#f6b45a;
  --amber-500:#e8912a;
  --amber-600:#cf7a14;
  --amber-700:#a8600f;
  --amber-on:#241704;            /* text on amber surfaces (AA) */
  --amber-glow:rgba(232,145,42,.30);

  /* Semantic */
  --ok-500:#1f9d57;  --ok-700:#147a41; --ok-bg:#e8f6ee; --ok-line:#a6e0c0;
  --warn-500:#e2a400; --warn-700:#9a7100; --warn-bg:#fdf4dd; --warn-line:#f1d488;
  --err-500:#dc3545; --err-700:#b02331; --err-bg:#fbeaec; --err-line:#f1b4ba;
  --info-500:#2f6bd6; --info-bg:#e9f0fc; --info-line:#b9d0f4;

  /* Рабочая область.
     --shell-max ограничивает рост на широких мониторах: строка таблицы во всю стену читается
     хуже, чем та же строка с полями по краям — глазу не за что зацепиться при возврате на
     следующую строку. --shell-pad растёт вместе с окном, поэтому на ноутбуке поля тонкие
     (площадь дороже), а на большом мониторе становятся заметными сами собой. */
  --shell-max:1880px;
  --shell-pad:clamp(1rem, 1.8vw, 3rem);

  /* Shape & depth */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,24,33,.05), 0 2px 6px rgba(20,24,33,.06);
  --sh-2:0 6px 22px rgba(20,24,33,.09);
  --sh-pop:0 22px 60px rgba(13,15,20,.34);

  /* Type */
  --font-display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bootstrap retheme */
  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--text);
  --bs-body-bg:var(--canvas);
  --bs-primary:var(--amber-500);
  --bs-primary-rgb:232,145,42;
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r-sm);
  --bs-link-color:var(--amber-700);
  --bs-link-hover-color:var(--amber-600);
}

/* ---------- Base ---------------------------------------------------------- */
* { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body {
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1200px 480px at 100% -8%, rgba(232,145,42,.06), transparent 60%),
    var(--canvas);
  min-height:100vh;
  letter-spacing:.005em;
}

h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); letter-spacing:-.01em; color:var(--text); }

::selection { background:var(--amber-300); color:var(--amber-on); }

/* ---------- App bar ------------------------------------------------------- */
.appbar {
  background:linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(0,0,0,.4);
  position:sticky; top:0; z-index:1030;
}
.appbar-inner {
  width:100%; max-width:var(--shell-max); margin:0 auto;
  display:flex; align-items:center; gap:1.25rem;
  padding:.7rem var(--shell-pad);
}

.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:0 0 auto; }
.brand-mark { width:30px; height:30px; display:block; filter:drop-shadow(0 0 10px var(--amber-glow)); }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.brand-text strong {
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:#fff; letter-spacing:.01em;
}
.brand-text small {
  font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--amber-300); margin-top:.22rem; font-weight:600;
}

.appnav { display:flex; align-items:center; gap:.2rem; margin-left:.5rem; overflow-x:auto; scrollbar-width:none; }
.appnav::-webkit-scrollbar { display:none; }
.appnav-link {
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  padding:.5rem .85rem; border-radius:var(--r-pill);
  color:rgba(255,255,255,.62); text-decoration:none;
  font-size:.875rem; font-weight:500; letter-spacing:.005em;
  transition:color .15s ease, background-color .15s ease;
}
.appnav-link i { font-size:1rem; opacity:.85; }
.appnav-link:hover { color:#fff; background:rgba(255,255,255,.07); }
.appnav-link.is-active { color:var(--amber-on); background:var(--amber-500); box-shadow:0 4px 14px var(--amber-glow); }
.appnav-link.is-active i { opacity:1; }

.appbar-user { margin-left:auto; display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.user-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.82); font-size:.8rem; font-weight:500; max-width:160px;
}
.user-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Метка узла. Видна только на складском: на основном её отсутствие и означает «здесь ЧЗ». */
.mode-chip {
  display:inline-flex; align-items:center; margin-left:.7rem;
  padding:.24rem .6rem; border-radius:var(--r-pill);
  background:rgba(232,145,42,.14); border:1px solid rgba(232,145,42,.38);
  color:var(--amber-300); font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.btn-logout {
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78); border-radius:var(--r-sm);
  padding:.34rem .8rem; font-size:.8rem; font-weight:600; cursor:pointer;
  transition:all .15s ease;
}
.btn-logout:hover { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3); }

/* ---------- Page shell ---------------------------------------------------- */
/* Шапка и содержимое делят одни и те же границы — иначе логотип и первая колонка таблицы
   разъезжаются, и страница перестаёт читаться как одно полотно. */
.app-main { width:100%; max-width:var(--shell-max); margin:0 auto; padding:1.8rem var(--shell-pad) 4rem; }

.page-head { margin-bottom:1.6rem; }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--amber-700);
  margin-bottom:.5rem;
}
.eyebrow::before {
  content:""; width:18px; height:2px; background:var(--amber-500); border-radius:2px;
}
.page-title { font-size:1.7rem; font-weight:600; margin:0; }
.page-sub { color:var(--muted); margin:.4rem 0 0; font-size:.95rem; max-width:60ch; }

/* Кружок «i» у заголовка: описание страницы живёт в нём, а не абзацем под заголовком. Стоит
   вплотную к названию — иначе непонятно, к чему относится. */
.page-help {
  vertical-align:.14em; margin-left:.55rem;
  width:1.6rem; height:1.6rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); background:var(--surface);
  color:var(--text-2); font-family:var(--font-display); font-weight:600; font-size:.8rem;
  cursor:pointer; transition:all .15s ease;
}
.page-help:hover, .page-help:focus-visible { border-color:var(--amber-500); color:var(--amber-700); }
.help-body dt { font-weight:600; color:var(--text); }
.help-body dd { color:var(--text-2); }
.help-body { font-size:.875rem; }

/* ---------- Panels / cards ------------------------------------------------ */
.panel,
.card.card-body,
.card-body.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
}
.panel { padding:1.4rem; position:relative; }

.panel-head { display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.panel-icon {
  width:38px; height:38px; flex:0 0 auto; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.15rem;
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--line);
}
.panel-icon.is-receipt { background:var(--ok-bg); color:var(--ok-700); border-color:var(--ok-line); }
.panel-icon.is-move    { background:#eef0fb; color:var(--info-500); border-color:var(--info-line); }
.panel-title { font-size:1.08rem; font-weight:600; margin:0; line-height:1.2; }
.panel-title + small { color:var(--muted); font-size:.8rem; }

/* Data Matrix L-finder registration marks on active scan panels */
.scan-form { position:relative; overflow:hidden; }
.scan-form::before,
.scan-form::after {
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
  opacity:.5; transition:opacity .2s ease;
}
.scan-form::before { top:12px; right:12px; border-top:2px solid var(--amber-500); border-right:2px solid var(--amber-500); border-radius:0 4px 0 0; }
.scan-form::after  { bottom:12px; left:12px; border-bottom:2px solid var(--line-2); border-left:2px solid var(--line-2); border-radius:0 0 0 4px; }
.scan-form.is-running::after { border-color:var(--ok-500); opacity:.9; }

/* ---------- Forms --------------------------------------------------------- */
.form-label { font-size:.78rem; font-weight:600; color:var(--text-2); margin-bottom:.35rem; letter-spacing:.01em; }

/* Подсказка кружком «i» у заголовка поля.
   Подпись под полем делала колонки разной высоты: строка выровнена по нижнему краю, и поле
   с подписью уезжало вверх относительно соседнего без неё. Здесь подсказка не занимает места
   в потоке вовсе, поэтому все поля строки стоят на одной линии. */
.field-hint {
  display:inline-flex; align-items:center; justify-content:center;
  width:.95rem; height:.95rem; margin-left:.3rem; vertical-align:middle;
  border:1px solid var(--line-2); border-radius:50%;
  color:var(--muted); font-size:.62rem; font-weight:700; font-style:normal; line-height:1;
  cursor:help; position:relative;
}
.field-hint:hover, .field-hint:focus-visible { border-color:var(--amber-500); color:var(--amber-700); outline:none; }
.field-hint::after {
  content:attr(data-hint);
  position:absolute; left:50%; bottom:calc(100% + .45rem); transform:translateX(-50%);
  width:max-content; max-width:17rem; padding:.45rem .6rem;
  background:var(--ink-900); color:#fff; border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:.75rem; font-weight:400; line-height:1.35;
  letter-spacing:0; text-align:left; white-space:normal;
  box-shadow:var(--sh-2); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .12s ease; z-index:30;
}
.field-hint:hover::after, .field-hint:focus-visible::after { opacity:1; visibility:visible; }
/* У крайних полей всплывающая подсказка иначе вылезает за край панели. */
.field-hint.is-left::after { left:0; transform:none; }
.field-hint.is-right::after { left:auto; right:0; transform:none; }
/* Значок ⓘ рядом со статусом в таблице и подсказка к нему (см. initFloatingHints в app.js). */
.status-cell { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.row-hint {
  display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:none;
  color:var(--muted); font-size:.9rem; line-height:1; cursor:help;
}
.row-hint:hover, .row-hint:focus-visible { color:var(--amber-700); outline:none; }
.row-hint.is-danger { color:#c0392b; }
.row-hint.is-danger:hover, .row-hint.is-danger:focus-visible { color:#962d22; }
/* Длинный текст в ячейке: одна строка с многоточием, целиком — в подсказке по наведению. */
.cell-clip {
  display:inline-block; max-width:26rem; vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:help; border-bottom:1px dotted currentColor;
}
.cell-clip.is-danger { color:#c0392b; }
.cell-clip:focus-visible { outline:2px solid var(--amber-500); outline-offset:2px; }
.float-tip {
  position:fixed; z-index:1080; max-width:24rem; padding:.5rem .65rem;
  background:var(--ink-900); color:#fff; border-radius:var(--r-sm); box-shadow:var(--sh-2);
  font-family:var(--font-body); font-size:.76rem; line-height:1.4; white-space:pre-line;
  overflow-wrap:anywhere; pointer-events:none;
}
.float-tip.is-danger { border-left:3px solid #e0604f; }
.form-control, .form-select {
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.58rem .8rem; font-size:.92rem; color:var(--text);
  background:var(--surface); transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color:#9aa1ad; }
.form-control:focus, .form-select:focus {
  border-color:var(--amber-500); box-shadow:0 0 0 3px var(--amber-glow); outline:none;
}
.form-control:disabled, .form-select:disabled { background:var(--surface-2); color:var(--muted); }

/* Date fields — themed plашка with a calendar icon (native popup is OS-drawn) */
input[type="date"].form-control {
  cursor:pointer;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  min-width:8rem;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--surface-2);
}
input[type="date"].form-control:hover { border-color:var(--line-2); background:var(--surface-2); }
/* Replace the native indicator with an on-theme calendar glyph (WebKit / Blink) */
input[type="date"].form-control::-webkit-calendar-picker-indicator {
  width:1.05rem; height:1.05rem; margin-left:.4rem; cursor:pointer; opacity:.7;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cf7a14' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.2' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.6h12'/%3E%3Cpath d='M5.2 1.7v2.7M10.8 1.7v2.7'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transition:opacity .15s ease, transform .15s ease;
}
input[type="date"].form-control:hover::-webkit-calendar-picker-indicator,
input[type="date"].form-control:focus::-webkit-calendar-picker-indicator { opacity:1; transform:scale(1.08); }

/* Flatpickr visible input — themed field with the on-brand calendar glyph */
.fp-date.form-control {
  cursor:pointer; font-variant-numeric:tabular-nums;
  width:8rem; min-width:0; padding-right:1.9rem; background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cf7a14' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.2' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.6h12'/%3E%3Cpath d='M5.2 1.7v2.7M10.8 1.7v2.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:1rem;
}
.fp-date.form-control:hover { border-color:var(--line-2); }

/* Flatpickr calendar — branded "плашка" matching the design system */
.flatpickr-calendar {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-pop); font-family:var(--font-body); margin-top:.35rem;
}
.flatpickr-calendar.arrowTop::before { border-bottom-color:var(--line); }
.flatpickr-calendar.arrowTop::after { border-bottom-color:var(--surface); }
.flatpickr-calendar.arrowBottom::before { border-top-color:var(--line); }
.flatpickr-calendar.arrowBottom::after { border-top-color:var(--surface); }

.flatpickr-months { padding-top:.35rem; }
.flatpickr-months .flatpickr-month { color:var(--text); }
.flatpickr-current-month { font-family:var(--font-display); font-weight:600; font-size:1rem; }
.flatpickr-current-month input.cur-year { font-weight:600; color:var(--text); }
.flatpickr-current-month .flatpickr-monthDropdown-months { color:var(--text); font-weight:600; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background:var(--surface-2); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill:var(--text-2); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill:var(--amber-600); }
.numInputWrapper span.arrowUp:hover::after { border-bottom-color:var(--amber-600); }
.numInputWrapper span.arrowDown:hover::after { border-top-color:var(--amber-600); }

.flatpickr-weekday {
  color:var(--muted); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.flatpickr-day {
  color:var(--text); border-radius:var(--r-sm); font-weight:500;
  transition:background-color .12s ease, color .12s ease;
}
.flatpickr-day:hover, .flatpickr-day:focus { background:var(--surface-2); border-color:var(--surface-2); }
.flatpickr-day.today { border-color:var(--amber-500); color:var(--amber-700); font-weight:600; }
.flatpickr-day.today:hover { background:var(--amber-500); border-color:var(--amber-500); color:var(--amber-on); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background:var(--amber-500); border-color:var(--amber-500); color:var(--amber-on);
  box-shadow:none; font-weight:600;
}
.flatpickr-day.inRange { background:rgba(232,145,42,.14); border-color:rgba(232,145,42,.14); box-shadow:none; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:var(--muted); opacity:.45; }

/* Scan field — the hero of the console */
.scan-input {
  font-family:var(--font-mono) !important; font-size:1.25rem !important;
  letter-spacing:.02em; padding:.85rem 1rem;
  border:2px solid var(--line-2); border-radius:var(--r-sm);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--surface);
}
.scan-input:focus {
  border-color:var(--amber-500);
  box-shadow:0 0 0 4px var(--amber-glow), 0 0 26px var(--amber-glow);
}
.scan-input:disabled { background:repeating-linear-gradient(135deg,#f4f5f7,#f4f5f7 9px,#eef0f3 9px,#eef0f3 18px); }

/* Главное поле операции — «Объект». Куда уехал товар, по кодам потом не восстановить: в базе
   останутся статусы, но не адрес. Поэтому поле крупнее остальных и обведено золотом, а не стоит
   в ряду одинаковых строк формы, где его пропускают. */
.field-lead > .form-label { font-size:.95rem; font-weight:600; color:var(--text); margin-bottom:.35rem; }
.field-lead .form-control {
  font-size:1.05rem; padding:.68rem .9rem; border-width:2px; border-color:var(--amber-500);
  background:#fffaf2;
}
.field-lead .form-control:focus { box-shadow:0 0 0 4px var(--amber-glow); background:var(--surface); }
.field-lead .form-control:disabled { border-color:var(--line-2); background:var(--surface-2); }
/* Поле со значком: рамка должна быть общей, иначе значок отваливается от подсвеченного поля. */
.field-lead .input-group > .input-group-text {
  border-width:2px; border-right:0; border-color:var(--amber-500); background:#fffaf2; color:var(--amber-700);
}
.field-lead .input-group > .form-control { border-left:0; }
.field-lead .input-group:focus-within > .input-group-text { background:var(--surface); }
.field-lead .form-text { margin-top:.3rem; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  --bs-btn-font-weight:600;
  --bs-btn-border-radius:var(--r-sm);
  --bs-btn-padding-y:.52rem; --bs-btn-padding-x:1rem;
  --bs-btn-font-size:.9rem;
  letter-spacing:.01em; transition:transform .08s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:active { transform:translateY(1px); }
.btn-primary {
  --bs-btn-bg:var(--amber-500); --bs-btn-border-color:var(--amber-500); --bs-btn-color:var(--amber-on);
  --bs-btn-hover-bg:var(--amber-600); --bs-btn-hover-border-color:var(--amber-600); --bs-btn-hover-color:var(--amber-on);
  --bs-btn-active-bg:var(--amber-700); --bs-btn-active-border-color:var(--amber-700); --bs-btn-active-color:#fff;
  --bs-btn-disabled-bg:#f0d9b8; --bs-btn-disabled-border-color:#f0d9b8; --bs-btn-disabled-color:#9c8155;
  box-shadow:0 2px 10px var(--amber-glow);
}
.btn-success {
  --bs-btn-bg:var(--ok-500); --bs-btn-border-color:var(--ok-500);
  --bs-btn-hover-bg:var(--ok-700); --bs-btn-hover-border-color:var(--ok-700);
  --bs-btn-active-bg:var(--ok-700); --bs-btn-disabled-bg:#a9d9be; --bs-btn-disabled-border-color:#a9d9be;
}
.btn-danger { --bs-btn-bg:var(--err-500); --bs-btn-border-color:var(--err-500); --bs-btn-hover-bg:var(--err-700); --bs-btn-hover-border-color:var(--err-700); }
.btn-outline-success { --bs-btn-color:var(--ok-700); --bs-btn-border-color:var(--ok-line); --bs-btn-hover-bg:var(--ok-500); --bs-btn-hover-border-color:var(--ok-500); }
.btn-outline-secondary { --bs-btn-color:var(--text-2); --bs-btn-border-color:var(--line-2); --bs-btn-hover-bg:var(--ink-800); --bs-btn-hover-border-color:var(--ink-800); --bs-btn-hover-color:#fff; }
.btn-light { --bs-btn-bg:var(--surface); --bs-btn-border-color:var(--line-2); --bs-btn-color:var(--text); }

/* ---------- Stat chips ---------------------------------------------------- */
.statline { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.stat-chip {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem .9rem; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
.stat-chip .stat-val { font-family:var(--font-display); font-weight:600; font-size:1.5rem; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.stat-chip .stat-key { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; }
.stat-chip.is-accent { background:var(--amber-500); border-color:var(--amber-500); }
.stat-chip.is-accent .stat-val { color:var(--amber-on); }
.stat-chip.is-accent .stat-key { color:var(--amber-on); opacity:.75; }

/* ---------- Status legend ------------------------------------------------- */
.legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:var(--text-2); }
.legend span { display:inline-flex; align-items:center; gap:.4rem; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.legend .l-ok  { background:var(--ok-500); }
.legend .l-dup { background:var(--warn-500); }
.legend .l-err { background:var(--err-500); }

/* ---------- Tables -------------------------------------------------------- */
/* Сортируемый заголовок. Стрелка нарисована через ::after, а не картинкой: она должна занимать
   место всегда, иначе колонка дёргается при первом клике. */
.th-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.th-sortable:hover { color:var(--text); }
.th-sortable::after {
  content:"\2195"; margin-left:.35rem; font-size:.8em; opacity:.28;
}
.th-sortable.is-sorted::after { content:"\2191"; opacity:1; color:var(--amber-600); }
.th-sortable.is-sorted.is-desc::after { content:"\2193"; }

.table-scroll { max-height:58vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.table-scroll::-webkit-scrollbar { width:10px; height:10px; }
.table-scroll::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:3px solid var(--surface); }

.table {
  --bs-table-bg:transparent; margin:0; font-size:.86rem; color:var(--text);
}
.table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface-2); color:var(--text-2);
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.7rem .8rem; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.table tbody td { padding:.62rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover td { background:var(--surface-2); }
.table-bordered, .table-bordered td, .table-bordered th { border:0 !important; }

/* Полный код открывается диалогом: в ячейку он не помещается, а нужен целиком. */
code.code-open { cursor:pointer; }
code.code-open:hover { border-color:var(--line-2); background:var(--info-bg); }

code.codecell, .codecell {
  font-family:var(--font-mono); font-size:.76rem; word-break:break-all;
  color:var(--text); background:var(--surface-2);
  padding:.12rem .4rem; border-radius:var(--r-xs); border:1px solid var(--line);
}

/* Scan result rows — strong, scannable status coding */
.scan-form .table tbody td:first-child { border-left:3px solid transparent; }
.scan-row-OK        { background:var(--ok-bg) !important; }
.scan-row-OK td:first-child { border-left-color:var(--ok-500); }
.scan-row-OK td:nth-child(2) { color:var(--ok-700); font-weight:600; }
.scan-row-DUPLICATE { background:var(--warn-bg) !important; }
.scan-row-DUPLICATE td:first-child { border-left-color:var(--warn-500); }
.scan-row-DUPLICATE td:nth-child(2) { color:var(--warn-700); font-weight:600; }
.scan-row-ERROR     { background:var(--err-bg) !important; }
.scan-row-ERROR td:first-child { border-left-color:var(--err-500); }
.scan-row-ERROR td:nth-child(2) { color:var(--err-700); font-weight:600; }

/* Empty state hint inside tables */
.table tbody:empty::after { content:none; }
.table-empty { text-align:center; color:var(--muted); padding:2.4rem 1rem; font-size:.9rem; }

/* ---------- Alerts -------------------------------------------------------- */
.alert {
  border-radius:var(--r-sm); border:1px solid transparent; font-size:.88rem; padding:.7rem .9rem;
  display:flex; align-items:center; gap:.5rem;
}
.alert-info    { background:var(--info-bg); border-color:var(--info-line); color:#1f4f9e; }
.alert-success { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-700); }
.alert-warning { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-700); }
.alert-danger  { background:var(--err-bg); border-color:var(--err-line); color:var(--err-700); }

/* ---------- Toolbar / filter rows ---------------------------------------- */
.toolbar {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); padding:1rem 1.1rem; margin-bottom:1.2rem;
}

/* Печать в PDF и её размеры — одна группа: поля без кнопки бессмысленны, и при переносе строки
   они должны переезжать вместе, а не оставлять кнопку в одиночестве на краю панели. */
.pdf-group { display:flex; align-items:flex-end; gap:.5rem; flex-wrap:wrap; }
.pdf-group .form-label { margin-bottom:.25rem; }

/* ---------- Tabs (reports) ----------------------------------------------- */
.nav-tabs {
  border-bottom:1px solid var(--line); gap:.25rem; margin-bottom:1.3rem;
}
.nav-tabs .nav-link {
  border:0; border-bottom:2px solid transparent; border-radius:0;
  color:var(--muted); font-weight:600; font-size:.9rem; padding:.6rem .95rem;
  display:inline-flex; align-items:center; gap:.45rem;
}
.nav-tabs .nav-link:hover { color:var(--text); border-bottom-color:var(--line-2); }
.nav-tabs .nav-link.active { color:var(--amber-700); background:transparent; border-bottom-color:var(--amber-500); }

.dropdown-menu { border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-2); padding:.3rem; font-size:.88rem; }
.dropdown-item { border-radius:var(--r-xs); padding:.45rem .7rem; }
.dropdown-item:active { background:var(--amber-500); color:var(--amber-on); }

/* ---------- Pagination ---------------------------------------------------- */
.pagination { gap:.25rem; flex-wrap:wrap; margin-top:1.2rem; }
.page-link {
  border:1px solid var(--line); border-radius:var(--r-sm) !important;
  color:var(--text-2); font-size:.85rem; font-weight:500; min-width:38px; text-align:center;
  padding:.4rem .6rem;
}
.page-link:hover { background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
.page-item.active .page-link { background:var(--amber-500); border-color:var(--amber-500); color:var(--amber-on); }

/* ---------- Modal (custom, JS-driven) — refined ------------------------- */
.app-modal-overlay {
  position:fixed; inset:0; z-index:1080;
  background:rgba(13,15,20,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.app-modal {
  background:var(--surface); border-radius:var(--r-lg); padding:1.9rem 1.6rem;
  width:100%; max-width:440px; text-align:center;
  box-shadow:var(--sh-pop); border-top:6px solid var(--line-2);
  animation:app-modal-pop .14s cubic-bezier(.2,.8,.3,1);
}
@keyframes app-modal-pop { from { transform:scale(.94) translateY(6px); opacity:0; } to { transform:none; opacity:1; } }
.app-modal-title { font-family:var(--font-display); font-size:1.35rem; font-weight:600; margin-bottom:.55rem; }
.app-modal-msg { font-size:1.02rem; margin-bottom:1.4rem; color:var(--text-2); word-break:break-word; line-height:1.45; }
.app-modal-footer { display:flex; gap:.6rem; justify-content:center; flex-wrap:nowrap; }
.app-modal-footer .btn { font-weight:600; }

/* Карточка товара — не диалог с одним вопросом, а форма: шире, по левому краю и со скроллом,
   потому что полное наименование из Каталога бывает длиннее экрана. */
.app-modal-wide { max-width:min(52rem, 100%); text-align:left; }
/* Поле ввода внутри диалога: на белой подложке и по левому краю — на цветном фоне поле и ошибка не читаются. */
.app-modal-field {
  margin:1rem 0 .2rem; padding:.85rem 1rem; text-align:left;
  background:var(--surface); color:var(--text); border-radius:var(--r-sm);
}
.app-modal-field .form-label { font-weight:600; color:var(--text); margin-bottom:.35rem; }
.app-modal-field .form-control { max-width:12rem; }
/* Поля на всю ширину диалога — с одинаковыми отступами слева и справа (форма, а не одно число). */
.app-modal-field.is-full .form-control { max-width:none; width:100%; }
.app-modal-field .form-text { font-size:.8rem; line-height:1.4; color:var(--muted); }
.app-modal-error { margin-top:.5rem; font-size:.85rem; font-weight:600; color:#b3261e; }
.app-modal-wide .app-modal-msg { max-height:min(62vh, 34rem); overflow:auto; margin-bottom:1.1rem; }
.app-modal-wide .app-modal-footer { justify-content:flex-end; flex-wrap:wrap; }

/* Карточка товара — не уведомление, у неё нет «тона»: цветная полоска сверху только сбивала бы
   с толку, намекая на статус там, где его нет. */
.app-modal-plain { border-top:0; }

.app-modal-info    { border-top-color:var(--info-500); }
.app-modal-danger  { background:var(--err-500); border-top-color:var(--err-700); }
.app-modal-danger  .app-modal-title, .app-modal-danger .app-modal-msg { color:#fff; }
.app-modal-danger  .btn { background:#fff; border-color:#fff; color:var(--err-700); }
.app-modal-success { background:var(--ok-500); border-top-color:var(--ok-700); }
.app-modal-success .app-modal-title, .app-modal-success .app-modal-msg { color:#fff; }
.app-modal-success .btn { background:#fff; border-color:#fff; color:var(--ok-700); }
.app-modal-warning { background:var(--warn-500); border-top-color:var(--warn-700); }
.app-modal-warning .app-modal-title, .app-modal-warning .app-modal-msg { color:#231b00; }
.app-modal-warning .btn { background:#231b00; border-color:#231b00; color:#fff; }
.app-modal-warning .app-modal-footer .btn { flex:1 1 0; }

/* ---------- Login --------------------------------------------------------- */
.login-shell {
  min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(232,145,42,.18), transparent 60%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
  position:relative; overflow:hidden;
}
.login-grid-bg {
  position:absolute; inset:0; opacity:.04; pointer-events:none;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000, transparent 70%);
          mask-image:radial-gradient(circle at 50% 35%, #000, transparent 70%);
}
.login-card {
  position:relative; width:100%; max-width:380px;
  background:var(--surface); border-radius:var(--r-lg); padding:2.2rem 2rem;
  box-shadow:var(--sh-pop); border:1px solid rgba(255,255,255,.08);
}
.login-brand { display:flex; flex-direction:column; align-items:center; gap:.7rem; margin-bottom:1.6rem; }
.login-brand .brand-mark { width:46px; height:46px; }
.login-brand h1 { font-size:1.25rem; font-weight:600; margin:0; }
.login-brand small { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-700); }

/* ---------- Accessibility & motion --------------------------------------- */
:focus-visible { outline:2px solid var(--amber-500); outline-offset:2px; border-radius:3px; }
.btn:focus-visible, .form-control:focus-visible, .scan-input:focus-visible { outline:none; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width:1199.98px) {
  /* На узком экране поля — потерянная площадь: таблице кодов нужна каждая колонка. */
  :root { --shell-pad:.85rem; }
}
@media (max-width:991.98px) {
  .appbar-inner { flex-wrap:wrap; gap:.6rem .9rem; padding:.6rem var(--shell-pad); }
  .appnav { order:3; width:100%; margin-left:0; }
  .appbar-user { margin-left:auto; }
  .app-main { padding:1.3rem var(--shell-pad) 3rem; }
  .page-title { font-size:1.4rem; }
}
@media (max-width:575.98px) {
  .brand-text small { display:none; }
  .scan-input { font-size:1.1rem !important; }
}

/* ---------- Выпадающий список с пояснениями (enhanceSelect в app.js) ----------------------- */
.app-select { position:relative; display:block; max-width:100%; }
.app-select-btn {
  display:flex; align-items:center; gap:.5rem; width:100%;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface);
  padding:.58rem .8rem; font-size:.92rem; line-height:1.5; color:var(--text); text-align:left; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.app-select-btn:hover { border-color:var(--amber-300); }
.app-select-btn:focus-visible, .app-select.is-open .app-select-btn {
  border-color:var(--amber-500); box-shadow:0 0 0 3px var(--amber-glow); outline:none;
}
.app-select-btn:disabled { background:var(--surface-2); color:var(--muted); cursor:default; }
.app-select-label { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-select-caret { flex:none; color:var(--muted); font-size:.8rem; transition:transform .15s ease; }
.app-select.is-open .app-select-caret { transform:rotate(180deg); }
.app-select-icon { flex:none; width:1.1rem; text-align:center; color:var(--amber-600); }
.app-select-menu {
  /* Координаты ставит JS (place в enhanceSelect): меню живёт в <body>, над диалогами (1080). */
  position:fixed; z-index:1090; top:0; left:0;
  min-width:100%; width:max-content; max-width:min(26rem, calc(100vw - 2rem)); max-height:22rem; overflow:auto;
  margin:0; padding:.3rem; list-style:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-2);
  outline:none; animation:app-select-in .12s ease-out;
}
@keyframes app-select-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.app-select-option {
  display:flex; align-items:flex-start; gap:.6rem; padding:.55rem .65rem;
  border-radius:var(--r-xs); cursor:pointer; color:var(--text);
}
.app-select-option .app-select-icon { margin-top:.12rem; }
.app-select-option.is-active { background:var(--surface-2); }
.app-select-option.is-selected { background:#fdf1e2; }
.app-select-option.is-selected.is-active { background:#fbe6cc; }
.app-select-text { display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1 1 auto; }
.app-select-title { font-size:.9rem; font-weight:500; line-height:1.3; }
.app-select-hint { font-size:.76rem; color:var(--muted); line-height:1.35; }
.app-select-check { flex:none; margin-top:.1rem; color:var(--amber-600); font-size:1rem; }
@media (prefers-reduced-motion: reduce) { .app-select-menu { animation:none; } .app-select-caret { transition:none; } }

/* ---------- Наименование в таблице кодов: не шире колонки, до двух строк ------------------- */
.name-clamp {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; white-space:normal; max-width:22rem; min-width:10rem; line-height:1.35;
}
.name-clamp[data-tip] { cursor:help; }

/* Партия перед получением кодов: выделена, потому что её выбор — решение, а не деталь формы. */
.batch-callout {
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.5rem 1.25rem;
  padding:.85rem 1rem; border:1px solid var(--warn-line); border-left:3px solid var(--amber-500);
  background:var(--warn-bg); border-radius:var(--r-sm);
}
.batch-callout .form-label { margin-bottom:.35rem; }
.batch-callout p { max-width:34rem; padding-bottom:.55rem; }
/* Партия в таблице кодов. */
.batch-pill {
  display:inline-flex; align-items:center; gap:.3rem; max-width:12rem; padding:.12rem .55rem;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--surface-2);
  font-size:.78rem; color:var(--text-2); white-space:nowrap;
}
.batch-pill > span { overflow:hidden; text-overflow:ellipsis; }
.batch-pill i { color:var(--amber-600); }
.batch-pill[data-tip] { cursor:help; }

/* Код без криптохвоста — целиком, одной строкой; хвост серийного номера выделен для поиска глазами. */
.ki-cell { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
code.ki-code {
  word-break:normal; white-space:nowrap; color:var(--text-2);
  font-size:.92rem; padding:.2rem .5rem; letter-spacing:.01em;
}
.ki-tail { color:var(--text); font-weight:700; }
/* Полный код — только кнопка копирования. */
.copy-full { display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .55rem; font-size:.78rem; white-space:nowrap; }
/* Множественный выбор: галочки слева, счётчик выбранного на кнопке. */
.app-select-box { flex:none; margin-top:.15rem; color:var(--muted); }
.app-select-option.is-multi.is-selected { background:transparent; }
.app-select-option.is-multi.is-selected.is-active, .app-select-option.is-multi.is-active { background:var(--surface-2); }
.app-select-option.is-multi.is-selected .app-select-box { color:var(--amber-600); }
.app-select-count {
  flex:none; min-width:1.2rem; padding:0 .35rem; border-radius:var(--r-pill);
  background:var(--amber-500); color:var(--amber-on); font-size:.7rem; font-weight:700; text-align:center;
}
.app-select.has-value .app-select-btn { border-color:var(--amber-500); }
.app-select-clear {
  display:flex; align-items:center; gap:.45rem; padding:.45rem .65rem; margin-bottom:.2rem;
  border-bottom:1px solid var(--line); color:var(--text-2); font-size:.82rem; cursor:pointer;
}
.app-select-clear:hover { color:var(--amber-700); }

/* ---------- БД DM кодов: карточка фильтров над таблицей ------------------------------------- */
.filter-card { margin-bottom:1rem; }
.filter-card-head { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; margin-bottom:1rem; }
.filter-grid {
  display:grid; gap:.85rem 1rem;
  grid-template-columns:repeat(auto-fill, minmax(12.5rem, 1fr));
}
.filter-field { min-width:0; }
.filter-field.is-wide { grid-column:span 2; }
@media (max-width:575px) { .filter-field.is-wide { grid-column:auto; } }
.filter-field .form-label { font-size:.78rem; font-weight:600; color:var(--text-2); margin-bottom:.3rem; }
.filter-field .form-control, .filter-field .app-select { width:100%; }
.filter-field .app-select { width:100% !important; }
/* Заполненный фильтр подсвечен — чтобы было видно, почему строк меньше, чем ожидалось. */
.filter-field .form-control.is-set { border-color:var(--amber-500); background:#fffaf2; }
.filter-card-foot {
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  margin-top:1rem; padding-top:.85rem; border-top:1px dashed var(--line);
}

/* Период «Получен»: одно поле с календарём-диапазоном. */
.date-range-field { position:relative; }
.date-range-field .form-control {
  cursor:pointer; padding-right:3.4rem; font-variant-numeric:tabular-nums; background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23cf7a14' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.2' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.6h12'/%3E%3Cpath d='M5.2 1.7v2.7M10.8 1.7v2.7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:1rem;
}
.date-range-clear {
  position:absolute; top:50%; right:2.2rem; transform:translateY(-50%);
  border:0; background:none; padding:.1rem .25rem; color:var(--muted); font-size:.75rem; line-height:1;
}
.date-range-clear:hover { color:var(--err-700); }
/* Быстрые периоды — полоской под календарём. */
.fp-presets {
  display:flex; flex-wrap:wrap; gap:.35rem; padding:.55rem .6rem .6rem; border-top:1px solid var(--line);
}
.fp-presets button {
  border:1px solid var(--line-2); background:var(--surface); color:var(--text-2);
  border-radius:var(--r-pill); padding:.2rem .65rem; font-size:.78rem; font-weight:500;
}
.fp-presets button:hover { border-color:var(--amber-500); color:var(--amber-700); background:#fffaf2; }
.flatpickr-calendar.rangeMode.multiMonth { width:auto; }

.filter-count {
  display:inline-block; min-width:1.2rem; margin-left:.4rem; padding:0 .35rem; border-radius:var(--r-pill);
  background:var(--amber-500); color:var(--amber-on); font-size:.72rem; font-weight:700;
}
.card-open { color:var(--muted); font-size:1rem; }
.card-open:hover { color:var(--amber-700); }

/* Статус у нас — плашка своего цвета, чтобы отличать от статуса ЧЗ с первого взгляда. */
.stock-pill {
  display:inline-flex; align-items:center; gap:.3rem; padding:.12rem .55rem; white-space:nowrap;
  border-radius:var(--r-pill); font-size:.76rem; font-weight:600;
  background:var(--surface-2); color:var(--text-2); border:1px solid var(--line-2);
}
.stock-pill.is-new      { background:#f1f3f6; color:#4a4f59; }
.stock-pill.is-printed  { background:var(--info-bg); color:var(--info-500); border-color:var(--info-line); }
.stock-pill.is-stock    { background:var(--ok-bg); color:var(--ok-700); border-color:var(--ok-line); }
.stock-pill.is-customs  { background:var(--warn-bg); color:var(--warn-700); border-color:var(--warn-line); }
.stock-pill.is-site     { background:#efe9fb; color:#5b3fa0; border-color:#d6c9f3; }
.stock-pill.is-shipped  { background:#e6f4f5; color:#1d6f75; border-color:#b5dfe2; }
.stock-pill.is-used     { background:#f3efe8; color:#6d5a3a; border-color:#e0d5c2; }
.stock-pill.is-lost     { background:var(--err-bg); color:var(--err-700); border-color:var(--err-line); }

/* Карточка кода. */
.code-card { text-align:left; }
.code-card-ki { margin-bottom:.9rem; }
.code-card-ki .codecell { font-size:.95rem; padding:.3rem .6rem; }
.code-card-grid { display:grid; grid-template-columns:1fr; gap:.1rem; font-size:.88rem; color:var(--text); }
.code-card-row { display:grid; grid-template-columns:11rem 1fr; gap:.75rem; padding:.35rem 0; border-bottom:1px dashed var(--line); }
.code-card-row > span { color:var(--muted); }
@media (max-width:600px) { .code-card-row { grid-template-columns:1fr; gap:.1rem; } }