/* =========================================================
SKLADAPLAN
GLOBAL UI
========================================================= */

:root {

/*
  ДИЗАЙН-ТОКЕНЫ SKLADAPLAN

  Единый источник цвета/скруглений/теней для всего
  приложения. Большинство компонентов (.sp-card, .sp-btn,
  .nav, таблицы, модалки) уже читают эти переменные, а не
  хранят цвет внутри себя — поэтому смена значений здесь
  перекрашивает интерфейс сразу везде, без правки каждого
  правила по отдельности.

  Палитра — по референсу интерфейса: тёмно-бирюзовый
  бренд-акцент вместо прежнего монохромного чёрного,
  янтарный — для «грузовых»/требующих внимания действий,
  изумрудный — как акцентный успех/прогресс.

  Функциональный смысл цвета (см. также .kpi-icon-* ниже):
    emerald/accent — приёмка, положительная динамика;
    amber          — сборка, «требует действия»;
    primary(teal)  — основной бренд-цвет, обычные кнопки;
    success        — подтверждённые/завершённые операции;
    danger         — ошибки, удаление.
*/

--bg: #f8fafc;
--surface: #ffffff;
--surface-soft: #f8fafc;

--text: #0f172a;
--muted: #64748b;

--line: #e2e8f0;

--primary: #1d1d1d;
--primary-hover: #333333;

--accent: #10b981;
--accent-light: #ecfdf5;

--amber: #f59e0b;
--amber-light: #fffbeb;
--amber-border: #fcd34d;

--success: #18794e;
--danger: #b42318;

--sidebar-bg: #ffffff;
--sidebar-width: 250px;

--radius: 16px;
--radius-lg: 20px;
--radius-btn: 10px;

--shadow-card:
  0 10px 25px -5px rgba(15, 23, 42, .06),
  0 4px 6px -4px rgba(15, 23, 42, .03);
}

/* =========================================================
RESET
========================================================= */

* {
  box-sizing: border-box;
  }

html,
body {
margin: 0;
padding: 0;

width: 100%;
min-height: 100%;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

background: var(--bg);
color: var(--text);
}

body {
overflow-x: hidden;
}

button,
input,
select,
textarea {
font: inherit;
}

button {
-webkit-tap-highlight-color: transparent;
}

/* =========================================================
APP
========================================================= */

.app {
display: flex;
width: 100%;
min-height: 100vh;
}

/* =========================================================
SIDEBAR
========================================================= */

.sidebar {
width: var(--sidebar-width);
min-width: var(--sidebar-width);

min-height: 100vh;
height: 100vh;

/* Светлый sidebar — минимализм (Apple / Notion).
   Белый фон, тонкая граница, серые заголовки секций,
   чёрные пункты меню. */
background: var(--sidebar-bg);

border-right: 1px solid #ececec;

display: flex;
flex-direction: column;

padding: 18px 12px;

position: sticky;
top: 0;

z-index: 200;
}

/* =========================================================
BRAND
========================================================= */

.brand {
display: flex;
align-items: center;
gap: 12px;

padding: 4px 8px 26px;
}

/* Логотип — иконка-куб (как на макете).
   SVG вшит как background-image, чтобы не трогать HTML.
   Если хочешь заменить на настоящий <svg> в разметке —
   покажи index.html, дам правку. */
.logo {
width: 34px;
height: 34px;

border-radius: 9px;

display: grid;
place-items: center;

background-color: #111;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
background-size: 20px 20px;
background-position: center;
background-repeat: no-repeat;

color: transparent;
font-size: 0;
}

.brand-text {
display: flex;
flex-direction: column;

min-width: 0;
}

.brand-text b {
font-size: 16px;
font-weight: 800;
letter-spacing: -.01em;

color: #111;
}

.brand-text span {
margin-top: 3px;

font-size: 10px;
font-weight: 400;
color: #8a8a8f;

letter-spacing: 0;
}

/* =========================================================
SIDEBAR NAV
========================================================= */

.sidebar-nav {
flex: 1;

overflow-y: auto;

padding-right: 2px;
}

.nav-section {
margin-bottom: 22px;
}

.nav-section-title {
padding: 0 10px 8px;

color: #a0a0a5;

font-size: 10px;
font-weight: 700;

letter-spacing: .08em;
text-transform: uppercase;
}

/* =========================================================
   НАВИГАЦИЯ — ЕДИНАЯ СИСТЕМА
   =========================================================

   Одно место, где описано всё меню:

     SIDEBAR
       → NAV            (кнопка пункта)
         → NAV ICON     (контейнер иконки, 20×20)
         → NAV LABEL    (подпись)
         → NAV BADGE    (счётчик .nav em)
       → HOVER
       → ACTIVE
     MOBILE NAV         (нижняя панель, @media <=700)

   ГЛАВНОЕ ПРАВИЛО ГЕОМЕТРИИ:

   :hover и .active меняют ТОЛЬКО цвет, фон и толщину
   линии SVG. Ни один селектор ниже не меняет в этих
   состояниях width / height / flex / padding / margin /
   border-width / transform — поэтому иконка физически
   не может «съехать» при выборе пункта.
   ========================================================= */


/* ---------------------------------------------------------
   1. SVG-ИКОНКА
   Общая для sidebar и мобильной панели. Размер иконки
   задаёт её контейнер (.nav-icon / .mobile-nav-btn > span),
   сама иконка всегда занимает его целиком.
   --------------------------------------------------------- */

.icon {
width: 100%;
height: 100%;

display: block;

fill: none;
stroke: currentColor;

stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;

/*
  overflow: visible — чтобы более толстая линия в
  активном состоянии не обрезалась краем viewport'а.
  На геометрию контейнера не влияет.
*/
overflow: visible;

pointer-events: none;
}


/* ---------------------------------------------------------
   2. КНОПКА ПУНКТА МЕНЮ
   --------------------------------------------------------- */

.nav {
position: relative;

box-sizing: border-box;

width: 100%;
min-height: 42px;

display: flex;
align-items: center;

gap: 10px;

padding: 9px 10px;
margin: 1px 0;

border: 0;
border-radius: 10px;

background: transparent;

/* неактивный пункт на светлом сайдбаре — почти чёрный */
color: #222;

font-family: inherit;
text-align: left;

cursor: pointer;

transition:
background .15s ease,
color .15s ease;
}


/* ---------------------------------------------------------
   3. КОНТЕЙНЕР ИКОНКИ
   Фиксированная коробка 20×20 у каждого пункта.
   --------------------------------------------------------- */

.nav-icon {
flex: 0 0 20px;

width: 20px;
height: 20px;

display: grid;
place-items: center;

padding: 0;
margin: 0;

border: 0;
border-radius: 0;

background: transparent;
box-shadow: none;

color: inherit;
line-height: 1;
}


/* ---------------------------------------------------------
   4. ПОДПИСЬ
   Забирает всю оставшуюся ширину и сжимается сама
   (min-width: 0), а не за счёт иконки.
   --------------------------------------------------------- */

.nav-label,
.nav > span:not(.nav-icon) {
flex: 1 1 auto;
min-width: 0;

font-size: 13px;
font-weight: 600;
line-height: 1.25;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   5. БЕЙДЖ (счётчик «Сборка»)
   Текст в него пишет updateAssemblyBadges() в app.js,
   оформление — только здесь.
   --------------------------------------------------------- */

.nav em {
flex: 0 0 auto;

min-width: 20px;
height: 20px;

padding: 0 6px;

display: grid;
place-items: center;

border-radius: 999px;

background: var(--primary);
color: #fff;

font-size: 10px;
font-style: normal;
font-weight: 700;

line-height: 1;
}

.nav em:empty {
display: none;
}


/* ---------------------------------------------------------
   6. HOVER / ACTIVE
   Только цвет, фон и толщина линии.
   --------------------------------------------------------- */

.nav:hover {
background: #f4f4f5;
color: #111;
}

.nav.active {
background: #f4f4f5;
color: #111;
font-weight: 700;
}

.nav.active .nav-label {
font-weight: 700;
}

/*
  Подсветка и значок — одно целое.

  Цвет задаётся явно на контейнере иконки, подписи и на
  самой SVG, а не только наследуется от .nav через
  currentColor. Причина: внутри <use>, ссылающегося на
  <symbol> из спрайта, унаследованный currentColor в
  части браузеров (заметнее всего в WebKit на iOS) не
  пересчитывается при смене класса — фон пункта
  становился чёрным, а линия иконки оставалась тёмной,
  и значок «выпадал» из выделения.

  color здесь нужен не только тексту: у части символов
  спрайта внутренние точки залиты fill="currentColor".
*/

.nav.active .nav-icon,
.nav.active .nav-label,
.nav.active > span {
color: #111;
}

/*
  CSS-часть подсветки иконки. Основную работу в браузерах
  с багом наследования currentColor через <use> (см.
  applyNavIconColor() в app.js) делает инлайн-стиль —
  он ставится на каждый render() и имеет наивысший
  приоритет. Правила ниже остаются как база для
  браузеров, где наследование работает штатно, и как
  запасной вариант, если JS почему-то не успел
  отработать (первая отрисовка до полной загрузки и т.п.).
*/

.nav.active .icon,
.nav.active .icon use {
color: #111;
stroke: #111;
stroke-width: 1.9;
}

.nav.active em {
background: var(--primary);
color: #fff;
}


/* ---------------------------------------------------------
   7. МОБИЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ
   Тот же принцип: фиксированный контейнер иконки,
   active меняет только фон/цвет/толщину линии.
   --------------------------------------------------------- */

.mobile-nav {
display: none;
}

@media (max-width: 700px) {

.mobile-nav {
position: fixed;

left: 0;
right: 0;
bottom: 0;

height: 68px;

display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;

gap: 2px;

padding:
6px 6px
calc(6px + env(safe-area-inset-bottom));

background: rgba(255, 255, 255, .96);
border-top: 1px solid var(--line);

backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);

box-shadow: 0 -4px 20px rgba(0, 0, 0, .05);

z-index: 900;
}

.mobile-nav-btn {
position: relative;

box-sizing: border-box;

min-width: 0;
min-height: 54px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

gap: 4px;

padding: 6px 3px;

border: 0;
border-radius: 12px;

background: transparent;
color: #888;

font-family: inherit;
text-align: center;

cursor: pointer;
outline: none;
box-shadow: none;

-webkit-tap-highlight-color: transparent;

transition:
background .15s ease,
color .15s ease;
}

.mobile-nav-btn > span {
flex: 0 0 24px;

width: 24px;
height: 24px;

display: grid;
place-items: center;

padding: 0;
margin: 0;

border: 0;
border-radius: 0;

background: transparent;
box-shadow: none;

color: inherit;
line-height: 1;
}

.mobile-nav-btn > small {
display: block;

max-width: 100%;

font-size: 9px;
font-weight: 600;
line-height: 1.2;

color: inherit;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.mobile-nav-btn:hover {
background: #f7f7f7;
color: #555;
}

.mobile-nav-btn.active {
background: var(--accent-light);
color: var(--primary);
}

.mobile-nav-btn.active > span,
.mobile-nav-btn.active > small {
color: var(--primary);
}

.mobile-nav-btn.active .icon,
.mobile-nav-btn.active .icon use {
color: var(--primary);
stroke: var(--primary);
stroke-width: 2;
}

.mobile-nav-btn > em {
position: absolute;

top: 4px;
right: 18%;

min-width: 16px;
height: 16px;

padding: 0 4px;

display: grid;
place-items: center;

border-radius: 999px;

background: var(--primary, #0f766e);
color: #fff;

font-size: 9px;
font-style: normal;
font-weight: 700;

line-height: 1;
}

.mobile-nav-btn > em:empty {
display: none;
}

.mobile-nav button:focus,
.mobile-nav button:active {
outline: none;
box-shadow: none;
}

}


/* =========================================================
SIDEBAR FOOT
========================================================= */

.sidebar-foot {
padding: 14px 8px 2px;

border-top: 1px solid #ececec;
}

.offline {
display: flex;
align-items: center;

gap: 7px;

margin-bottom: 12px;

font-size: 11px;
color: #555;
}

.offline i {
width: 7px;
height: 7px;

border-radius: 50%;

background: var(--accent);
}

.sidebar-foot small {
color: #999;

font-size: 9px;
line-height: 1.5;
}

/* =========================================================
MAIN
========================================================= */

main {
flex: 1;

min-width: 0;
min-height: 100vh;
}

/* =========================================================
TOPBAR
========================================================= */

.topbar {
height: 82px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

padding: 16px 28px;

background: rgba(255, 255, 255, .92);

border-bottom: 1px solid var(--line);

position: sticky;
top: 0;

z-index: 100;

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}

.topbar-title {
min-width: 0;
}

.crumb {
color: #999;

font-size: 10px;

margin-bottom: 4px;
}

.crumb span {
color: #555;
}

.topbar h1 {
margin: 0;

font-size: 20px;
line-height: 1.2;
}

.top-actions {
display: flex;
align-items: center;

gap: 8px;

flex-shrink: 0;
}

.mobile-menu {
display: none;
}

/* =========================================================
CONTENT
========================================================= */

#content {
width: 100%;
max-width: 1600px;

margin: 0 auto;

padding: 28px;
}

/* =========================================================
BUTTONS
========================================================= */

.primary,
.ghost {
min-height: 40px;

border-radius: 10px;

padding: 0 14px;

cursor: pointer;

font-size: 12px;
font-weight: 600;

transition:
background .15s ease,
color .15s ease,
border-color .15s ease,
transform .15s ease;
}

.primary {
border: 0;

background: var(--primary);
color: #fff;
}

.primary:hover {
background: var(--primary-hover);
}

.ghost {
border: 1px solid var(--line);

background: #fff;
color: var(--text);
}

.ghost:hover {
background: var(--bg);
}

/* =========================================================
LOADING
========================================================= */

.sp-loading {
padding: 40px;

text-align: center;

color: #777;
}

/* =========================================================
GENERIC GRID
========================================================= */

.sp-grid {
display: grid;

grid-template-columns:
repeat(
auto-fit,
minmax(180px, 1fr)
);

gap: 14px;

margin-bottom: 20px;
}

.sp-card {
background: var(--surface);

border: 1px solid var(--line);

border-radius: var(--radius);

padding: 18px;

box-shadow: var(--shadow-card);
}

.sp-card-label {
color: var(--muted);

font-size: 13px;

margin-bottom: 8px;
}

.sp-card-value {
font-size: 28px;

font-weight: 700;
}

/* =========================================================
TOOLBAR
========================================================= */

.sp-toolbar {
display: flex;

gap: 10px;

flex-wrap: wrap;

align-items: center;

margin-bottom: 16px;
}

.sp-toolbar input,
.sp-toolbar select,
.sp-toolbar button,
.sp-form input,
.sp-form select,
.sp-form textarea {
min-height: 40px;

border: 1px solid #ddd;

border-radius: 9px;

padding: 0 12px;

background: #fff;
}

.sp-toolbar input {
min-width: 240px;
}

/* =========================================================
GENERIC BUTTONS
========================================================= */

.sp-btn {
border: 0;

border-radius: var(--radius-btn);

padding: 10px 15px;

cursor: pointer;

font-weight: 600;

background: var(--primary);
color: #fff;

transition: background .15s ease;
}

.sp-btn:hover {
background: var(--primary-hover);
}

.sp-btn.secondary {
background: var(--bg);
color: var(--text);
border: 1px solid var(--line);
}

.sp-btn.secondary:hover {
background: var(--line);
}

.sp-btn.danger {
background: #b42318;
}

.sp-btn.success {
background: #18794e;
}

.sp-btn:disabled {
opacity: .45;

cursor: not-allowed;
}

/* =========================================================
TABLES
========================================================= */

.sp-table-wrap {
width: 100%;

overflow: auto;

background: #fff;

border: 1px solid #e7e7e7;

border-radius: 14px;
}

.sp-table {
width: 100%;

border-collapse: collapse;

min-width: 900px;
}

.sp-table th,
.sp-table td {
padding: 11px 12px;

border-bottom: 1px solid #eee;

text-align: left;

white-space: nowrap;

font-size: 13px;
}

.sp-table th {
background: #f8f8f8;

font-weight: 700;

position: sticky;

top: 0;

z-index: 2;
}

.sp-table tr.selected {
background: #f1f7ff;
}

.sp-table tr:hover {
background: #fafafa;
}

.sp-status {
display: inline-flex;

align-items: center;

padding: 5px 9px;

border-radius: 999px;

background: #f1f1f1;

font-size: 12px;

font-weight: 600;
}

/* =========================================================
PAGINATION
========================================================= */

.sp-pagination {
display: flex;

justify-content: space-between;
align-items: center;

gap: 10px;

padding: 15px 0;
}

.sp-pagination-buttons {
display: flex;

gap: 7px;
}

/* =========================================================
MODAL
========================================================= */

.sp-modal-backdrop {
position: fixed;
inset: 0;

background: rgba(0, 0, 0, .5);

z-index: 9990;

display: flex;

align-items: center;
justify-content: center;

padding: 20px;
}

.sp-modal {
background: #fff;

width: min(650px, 100%);

max-height: 90vh;

overflow: auto;

border-radius: 18px;

padding: 22px;

box-shadow:
0 25px 80px rgba(0, 0, 0, .25);
}

.sp-modal-head {
display: flex;

justify-content: space-between;
align-items: center;

margin-bottom: 20px;
}

.sp-modal-close {
border: 0;

background: transparent;

font-size: 24px;

cursor: pointer;
}

/* =========================================================
FORM
========================================================= */

.sp-form {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 14px;
}

.sp-form label {
display: flex;

flex-direction: column;

gap: 6px;

font-size: 13px;
font-weight: 600;
}

.sp-form .full {
grid-column: 1 / -1;
}

.sp-form-actions {
grid-column: 1 / -1;

display: flex;

justify-content: flex-end;

gap: 10px;

margin-top: 8px;
}

/* =========================================================
SCANNER
========================================================= */

.sp-scanner {
display: grid;

gap: 16px;
}

.sp-scanner-input {
width: 100%;

height: 60px;

border: 2px solid #ddd;

border-radius: 14px;

font-size: 22px;

padding: 0 16px;
}

.sp-pallet {
padding: 15px;

background: #f7f7f7;

border-radius: 14px;
}

.sp-big-number {
font-size: 40px;

font-weight: 800;
}

.sp-muted {
color: #777;
}

.sp-empty {
padding: 35px;

text-align: center;

color: #777;
}

/* =========================================================
SCAN MODAL
========================================================= */

.scan-modal {
position: fixed;
inset: 0;

background: rgba(0, 0, 0, .48);

display: none;

align-items: center;
justify-content: center;

z-index: 9999;

padding: 20px;
}

.scan-modal.show {
display: flex;
}

.scan-box {
width: min(520px, 100%);

background: #fff;

border-radius: 20px;

padding: 24px;

box-shadow:
0 20px 70px rgba(0, 0, 0, .2);
}

.scan-head {
display: flex;

justify-content: space-between;
align-items: center;

margin-bottom: 18px;
}

.scan-head h2 {
margin: 0;

font-size: 20px;
}

.scan-close {
border: 0;

background: #f1f2f4;

border-radius: 10px;

width: 36px;
height: 36px;

cursor: pointer;
}

.scan-input {
width: 100%;

font-size: 22px;

padding: 15px;

border: 2px solid #dfe2e7;

border-radius: 12px;

outline: none;
}

.scan-input:focus {
border-color: var(--primary, #0f766e);
}

.scan-status {
margin-top: 14px;

padding: 15px;

border-radius: 12px;

background: #f5f6f8;

min-height: 52px;
}

.scan-status.ok {
background: #eaf7ef;
color: #16733d;
}

.scan-status.bad {
background: #fff0f0;
color: #a52323;
}

.scan-controls {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

margin: 14px 0;
}

.scan-controls label {
font-size: 11px;
color: #747b85;
}

.scan-controls input {
width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 9px;

margin-top: 5px;
}

.scan-hint {
font-size: 11px;

color: #747b85;

margin-top: 12px;
}

/* =========================================================
ASSEMBLY
========================================================= */

.assembly-tools {
display: grid;

grid-template-columns:
1fr 160px 120px;

gap: 10px;

margin-bottom: 12px;
}

.assembly-tools input {
padding: 11px;

border: 1px solid #ddd;

border-radius: 10px;
}

.route-note {
font-size: 11px;

color: #747b85;

margin: 8px 0 14px;
}

.pick-done {
background: #eaf7ef !important;
}

.pick-done td {
opacity: .65;
}

/* =========================================================
IMPORT
========================================================= */

.sp-import-preview {
max-height: 450px;

overflow: auto;

border: 1px solid #eee;

border-radius: 10px;

margin-top: 15px;
}

.sp-import-preview table {
width: 100%;

border-collapse: collapse;

font-size: 12px;
}

.sp-import-preview th,
.sp-import-preview td {
padding: 8px;

border-bottom: 1px solid #eee;

white-space: nowrap;
}

/* =========================================================
ASSEMBLY CARDS
========================================================= */

.cards {
display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap: 14px;

width: 100%;

margin-bottom: 14px;
}

.card {
display: block;

width: 100%;
min-width: 0;

background: #fff;

border: 1px solid #e5e5e7;

border-radius: 16px;

padding: 18px;

box-shadow:
0 4px 18px rgba(0, 0, 0, .035);
}

.card .label {
color: #777;

font-size: 12px;
font-weight: 600;

margin-bottom: 8px;
}

.card .value {
color: #111;

font-size: 30px;
line-height: 1;

font-weight: 750;

margin-bottom: 8px;
}

.card .sub {
color: #999;

font-size: 11px;
}

/* =========================================================
ASSEMBLY PANELS
========================================================= */

.panel {
display: block;

width: 100%;

background: #fff;

border: 1px solid #e5e5e7;

border-radius: 16px;

padding: 18px;

box-shadow:
0 4px 18px rgba(0, 0, 0, .035);
}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title {
display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 16px;

margin-bottom: 15px;
}

.section-title h3 {
margin: 0 0 5px;

font-size: 16px;

line-height: 1.25;

font-weight: 700;
}

.muted {
color: #777;

font-size: 12px;

line-height: 1.5;
}

/* =========================================================
ASSEMBLY TOOLBAR
========================================================= */

.toolbar {
display: flex;

align-items: center;

gap: 10px;

flex-wrap: wrap;

width: 100%;

margin-bottom: 16px;
}

.toolbar:first-child {
margin-top: 0;
}

.toolbar .search {
min-height: 40px;

border: 1px solid #ddd;

border-radius: 9px;

padding: 0 12px;

background: #fff;

color: #111;

outline: none;

box-sizing: border-box;
}

.toolbar .search:focus {
border-color: #999;

box-shadow:
0 0 0 3px rgba(0, 0, 0, .05);
}

.toolbar .ghost,
.toolbar .primary {
min-height: 40px;
}

.toolbar button {
min-height: 40px;
}

/* =========================================================
ASSEMBLY TABLE
========================================================= */

.table-wrap {
width: 100%;

overflow-x: auto;
overflow-y: hidden;

background: #fff;

border: 1px solid #e7e7e7;

border-radius: 14px;

-webkit-overflow-scrolling: touch;
}

.data-table {
width: 100%;

min-width: 900px;

border-collapse: collapse;

table-layout: auto;
}

.data-table th {
height: 44px;

padding: 10px 12px;

background: #f7f7f8;

color: #555;

border-bottom: 1px solid #e4e4e6;

text-align: left;

font-size: 11px;

font-weight: 700;

white-space: nowrap;
}

.data-table td {
padding: 11px 12px;

border-bottom: 1px solid #eeeeef;

color: #222;

text-align: left;

font-size: 12px;

vertical-align: middle;

white-space: nowrap;
}

.data-table tbody tr:last-child td {
border-bottom: 0;
}

.data-table tbody tr:hover {
background: #fafafa;
}

.data-table input[type="checkbox"] {
width: 17px;
height: 17px;

margin: 0;

accent-color: var(--primary, #0f766e);

cursor: pointer;
}

.data-table tr.selected {
background: #f4f7fa;
}

.data-table tr.selected:hover {
background: #f1f4f7;
}

/* =========================================================
ASSEMBLY STATUS
========================================================= */

.status {
display: inline-flex;

align-items: center;

min-height: 26px;

padding: 0 9px;

border-radius: 999px;

background: #f1f1f3;

color: #555;

font-size: 10px;

font-weight: 650;
}

.status.stock {
background: #eef7f1;
color: #18794e;
}

.status.pick {
background: #f2f2f2;
color: #333;
}

.status.collected {
background: #eaf7ef;
color: #18794e;
}

/* =========================================================
NOTICE
========================================================= */

.notice {
min-height: 42px;

display: flex;

align-items: center;

padding: 10px 13px;

border-radius: 10px;

background: #f5f5f6;

color: #666;

font-size: 12px;

line-height: 1.4;
}

.notice.ok {
background: #edf8f1;
color: #18794e;
}

.notice.error {
background: #fff1f0;
color: #b42318;
}

/* =========================================================
EMPTY
========================================================= */

.empty {
padding: 45px 20px;

text-align: center;

color: #888;

font-size: 13px;
}

/* =========================================================
DASHBOARD
========================================================= */

.sp-dashboard-kpi-grid button,
.sp-dashboard-actions button {
font-family: inherit;
}

.sp-dashboard-actions .sp-card {
transition:
transform .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}

.sp-dashboard-actions .sp-card:hover {
transform: translateY(-2px);

border-color: #cfcfcf !important;

box-shadow:
0 8px 24px rgba(0, 0, 0, .06);
}

/* =========================================================
DASHBOARD — КОМПАКТНЫЙ БЫСТРЫЙ ДОСТУП
(«Рабочие процессы» и «Инструменты» на Главной)
========================================================= */

.sp-quick-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.sp-quick-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid #e8e8e8;
border-radius: 12px;
background: #fafafa;
color: #111;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
background .15s ease,
border-color .15s ease,
transform .15s ease;
}

.sp-quick-item:hover {
background: #f0f0f0;
border-color: #d8d8d8;
transform: translateY(-1px);
}

.sp-quick-item:active {
transform: translateY(0);
}

.sp-quick-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #555;
flex-shrink: 0;
}

.sp-quick-icon .icon {
width: 100%;
height: 100%;
}

@media (max-width: 480px) {

.sp-quick-item {
flex: 1 1 calc(50% - 8px);
justify-content: center;
padding: 12px 10px;
}

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 900px) {

:root {
--sidebar-width: 220px;
}

#content {
padding: 20px;
}

.sp-dashboard-kpi-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}

.sp-dashboard-columns {
grid-template-columns: 1fr !important;
}

.sp-dashboard-actions {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}
}

/* =========================================================
MOBILE <= 700
========================================================= */

@media (max-width: 700px) {

body {
padding-bottom: 78px;

overflow-x: hidden;

}


.crumb {
font-size: 9px;

margin-bottom: 2px;

}

.topbar h1 {
font-size: 16px;

line-height: 1.2;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.top-actions {
gap: 5px;
}

.top-actions .ghost {
display: none;
}

.top-actions .primary {
padding: 8px 10px;

font-size: 11px;

}

/* -------------------------------------------------------
CONTENT
------------------------------------------------------- */

#content {
width: 100%;

max-width: none;

padding: 12px 12px 90px;

}

/* -------------------------------------------------------
GENERIC
------------------------------------------------------- */

.sp-grid {
grid-template-columns: 1fr;
}

.sp-toolbar {
align-items: stretch;
}

.sp-toolbar input,
.sp-toolbar select,
.sp-toolbar button {
width: 100%;

min-width: 0;

}

.sp-form {
grid-template-columns: 1fr;
}

.sp-form .full,
.sp-form-actions {
grid-column: auto;
}

.sp-form-actions {
flex-direction: column;
}

.sp-form-actions button {
width: 100%;
}

.sp-table-wrap {
border-radius: 12px;
}

.sp-table {
min-width: 850px;
}

.sp-card {
padding: 15px;

border-radius: 14px;

}

.sp-big-number {
font-size: 34px;
}

/* -------------------------------------------------------
ASSEMBLY
------------------------------------------------------- */

.cards {
grid-template-columns: 1fr;
}

.card {
padding: 15px;
}

.card .value {
font-size: 27px;
}

.panel {
padding: 14px;

border-radius: 14px;

}

.section-title {
flex-direction: column;

gap: 8px;

}

.toolbar {
width: 100%;

align-items: stretch;

}

.toolbar .search,
.toolbar button {
width: 100%;

max-width: none !important;

}

.table-wrap {
width: 100%;

margin: 0;

}

.assembly-tools {
grid-template-columns: 1fr;
}

.scan-controls {
grid-template-columns: 1fr;
}

.scan-box {
padding: 18px;
}

}

/* =========================================================
VERY SMALL PHONES
========================================================= */

@media (max-width: 430px) {

.top-actions .primary {
max-width: 90px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.mobile-nav-btn small {
font-size: 7px;
}
}

/* =========================================================
DASHBOARD SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

.sp-dashboard-kpi-grid {
grid-template-columns: 1fr !important;
}

.sp-dashboard-actions {
grid-template-columns: 1fr !important;
}
}



/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu {
  border: 0;
  outline: 0;

  background: transparent;

  color: #111;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   CONTENT
   ========================================================= */

#content {
  min-width: 0;
}


/* =========================================================
   ASSEMBLY
   ========================================================= */

/*
   Три карточки статистики на компьютере.
*/

.cards {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;

  width: 100%;
}

.card {
  min-width: 0;
}


/*
   Общая панель.
*/

.panel {
  width: 100%;
  min-width: 0;
}


/*
   Заголовок секции.
*/

.section-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;
}


/*
   Панель инструментов.
*/

.toolbar {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  width: 100%;
}


/*
   Поле поиска.
*/

.search {
  min-height: 40px;

  border: 1px solid #ddd;
  border-radius: 10px;

  background: #fff;

  color: #111;

  padding: 0 12px;

  outline: none;
}

.search:focus {
  border-color: var(--primary, #0f766e);
}


/*
   Таблица сборки.
*/

.table-wrap {
  width: 100%;

  overflow-x: auto;
  overflow-y: visible;

  border: 1px solid #e7e7e7;
  border-radius: 14px;

  background: #fff;
}

.data-table {
  width: 100%;

  min-width: 850px;

  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 11px 12px;

  border-bottom: 1px solid #eee;

  text-align: left;

  font-size: 13px;

  white-space: nowrap;
}

.data-table th {
  background: #f8f8f8;

  font-weight: 700;
}

.data-table tr:hover {
  background: #fafafa;
}


/* =========================================================
   STATUS
   ========================================================= */

.status {
  display: inline-flex;

  align-items: center;

  min-height: 24px;

  padding: 4px 9px;

  border-radius: 999px;

  background: #f1f1f1;

  font-size: 12px;
  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   NOTICE
   ========================================================= */

.notice {
  padding: 14px 16px;

  border-radius: 12px;

  background: #f5f5f5;

  color: #555;

  font-size: 13px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.empty {
  padding: 40px 20px;

  text-align: center;

  color: #777;

  font-size: 13px;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard {
  width: 100%;
}

.dashboard-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(220px, 1fr));

  gap: 14px;
}

.dashboard-card {
  min-width: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {


  /* -------------------------------------------------------
     APP
     ------------------------------------------------------- */

  .app {
    display: block;

    min-height: 100vh;
  }


  /* -------------------------------------------------------
     SIDEBAR
     ------------------------------------------------------- */

  .sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 280px;
    min-width: 280px;

    height: 100vh;
    min-height: 100vh;

    transform: translateX(-105%);

    transition:
      transform .22s ease;

    z-index: 1000;

    box-shadow:
      15px 0 40px rgba(0,0,0,.12);
  }


  .sidebar.open {
    transform: translateX(0);
  }


  /* -------------------------------------------------------
     MAIN
     ------------------------------------------------------- */

  main {
    width: 100%;

    min-height: 100vh;

    padding-bottom: 76px;
  }


  /* -------------------------------------------------------
     TOPBAR
     ------------------------------------------------------- */

  .topbar {
    height: 68px;

    padding:
      12px
      16px;

    gap: 12px;
  }


  .mobile-menu {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 10px;

    font-size: 20px;
  }


  .mobile-menu:hover {
    background: #f3f3f3;
  }


  .topbar-title {
    min-width: 0;

    flex: 1;
  }


  .crumb {
    font-size: 9px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .topbar h1 {
    font-size: 17px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .top-actions {
    display: none;
  }


  /* -------------------------------------------------------
     CONTENT
     ------------------------------------------------------- */

  #content {
    width: 100%;

    padding:
      18px
      14px
      24px;
  }




  /* -------------------------------------------------------
     ASSEMBLY
     ------------------------------------------------------- */

  .cards {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .card {
    width: 100%;
  }


  .panel {
    width: 100%;

    overflow: hidden;
  }


  .section-title {
    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }


  .toolbar {
    width: 100%;

    flex-direction: column;

    align-items: stretch;
  }


  .toolbar > * {
    width: 100% !important;

    max-width: none !important;
  }


  .search {
    width: 100%;

    max-width: none !important;
  }


  .table-wrap {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }


  .data-table {
    min-width: 850px;
  }


  /* -------------------------------------------------------
     SP COMPONENTS
     ------------------------------------------------------- */

  .sp-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .sp-toolbar {
    flex-direction: column;

    align-items: stretch;
  }


  .sp-toolbar input,
  .sp-toolbar select,
  .sp-toolbar button {
    width: 100%;

    min-width: 0;
  }


  .sp-form {
    grid-template-columns: 1fr;
  }


  .sp-form .full,
  .sp-form-actions {
    grid-column: 1;
  }


  .sp-table-wrap {
    border-radius: 12px;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
  }


  .sp-table {
    min-width: 900px;
  }


  .sp-modal-backdrop {
    padding: 12px;
  }


  .sp-modal {
    max-height: 92vh;

    padding: 18px;

    border-radius: 16px;
  }


  /* -------------------------------------------------------
     SCANNER
     ------------------------------------------------------- */

  .sp-scanner-input {
    height: 54px;

    font-size: 19px;
  }


  .scan-modal {
    padding: 12px;
  }


  .scan-box {
    padding: 18px;

    border-radius: 16px;
  }


  .scan-controls {
    grid-template-columns: 1fr;
  }


  /* -------------------------------------------------------
     DASHBOARD
     ------------------------------------------------------- */

  .dashboard-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }


}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 380px) {


  #content {
    padding-left: 10px;
    padding-right: 10px;
  }


  .topbar {
    padding-left: 10px;
    padding-right: 10px;
  }


  .mobile-nav {
    padding-left: 3px;
    padding-right: 3px;
  }


  .mobile-nav-btn > small {
    font-size: 8px;
  }



}

/* =========================================================
   FIX — BUTTONS IN SP TOOLBAR
   ========================================================= */

.sp-toolbar button.sp-btn {
  background: var(--primary, #0f766e);
  color: #fff;
  border: 0;
}

.sp-toolbar button.sp-btn:hover {
  background: var(--primary-hover);
}

.sp-toolbar button.sp-btn.success {
  background: #18794e;
  color: #fff;
}

.sp-toolbar button.sp-btn.success:hover {
  background: #146a43;
}

.sp-toolbar button.sp-btn.danger {
  background: #b42318;
  color: #fff;
}

.sp-toolbar button.sp-btn.secondary {
  background: #f2f2f2;
  color: #111;
}

.sp-toolbar button.sp-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}


/* =========================================================
   FOCUS
   ========================================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:
    2px solid var(--primary, #0f766e);

  outline-offset:
    2px;
}

/* =========================================================
   VIEWER MODE
   ========================================================= */

.viewer-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

.viewer-disabled:hover {
  transform: none !important;
}

body.viewer-mode .viewer-edit-only {
  opacity: .45 !important;
  cursor: not-allowed !important;
}


/* =========================================================
СОБРАНО — ФОРМИРОВАНИЕ ПОДДОНОВ К ОТГРУЗКЕ
(разметку строит collectedPalletBuilderHtml() в app.js)
========================================================= */

.cpb {
margin-bottom: 12px;
}

.cpb-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}

.cpb-head h3 {
margin: 0;
font-size: 16px;
}

.cpb-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px;
margin-bottom: 12px;
}

.cpb-field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
flex: 1 1 180px;
}

.cpb-field-narrow {
flex: 0 0 120px;
}

.cpb-field-wide {
flex: 1 1 100%;
}

.cpb-field > span {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 11px;
font-weight: 600;
color: #777;
letter-spacing: .02em;
}

.cpb-field input,
.cpb-field select {
min-height: 40px;
padding: 0 11px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
outline: none;
}

.cpb-field input:focus,
.cpb-field select:focus {
border-color: var(--primary, #0f766e);
}

#cpbScan {
font-size: 16px;
font-weight: 600;
}

.cpb-empty {
padding: 14px 0;
font-size: 13px;
}

.cpb-groups {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}

.cpb-group {
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px;
}

.cpb-group-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 9px;
}

.cpb-group-head .cpb-group-remove {
margin-left: auto;
}

.cpb-boxes {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.cpb-box {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 10px;
border-radius: 999px;
background: #f4f4f4;
font-size: 12px;
font-weight: 600;
}

.cpb-box-remove {
width: 20px;
height: 20px;
display: inline-grid;
place-items: center;
border: 0;
border-radius: 999px;
background: transparent;
color: #888;
cursor: pointer;
}

.cpb-box-remove:hover {
background: #e2e2e2;
color: #111;
}

.cpb-box-remove .icon {
width: 11px;
height: 11px;
stroke-width: 2.2;
}

.cpb-target {
padding-top: 12px;
border-top: 1px solid var(--line);
}

.cpb-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

@media (max-width: 640px) {

.cpb-field,
.cpb-field-narrow {
flex: 1 1 100%;
}

.cpb-actions .sp-btn {
flex: 1 1 100%;
}

}

/* =========================================================
СОБРАНО — ЧИПЫ ПОДДОНА / НАПРАВЛЕНИЯ В ТАБЛИЦЕ
========================================================= */

.pallet-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 999px;
background: var(--primary, #0f766e);
color: #fff;
font-weight: 600;
font-size: 12px;
white-space: nowrap;
}

.pallet-chip .icon {
width: 12px;
height: 12px;
stroke-width: 2.2;
}

.pallet-note-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #f5a623;
flex-shrink: 0;
}

.direction-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border-radius: 999px;
background: #eef2ff;
color: #111;
font-weight: 600;
font-size: 12px;
white-space: nowrap;
}

.direction-chip .icon {
width: 12px;
height: 12px;
stroke-width: 2.2;
}


/* =========================================================
СОБРАНО — СПИСОК УЖЕ СФОРМИРОВАННЫХ ПОДДОНОВ
(collectedPalletBuilderHtml)
========================================================= */

.cpb-existing {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}

.cpb-existing-label {
font-size: 12px;
color: #777;
font-weight: 600;
}

.cpb-existing-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}

.cpb-existing-btn:hover {
background: #f5f5f5;
}

.cpb-existing-btn.is-current {
background: var(--primary, #0f766e);
border-color: var(--primary, #0f766e);
color: #fff;
}

.cpb-existing-btn small {
font-weight: 700;
opacity: .7;
}


/* =========================================================
ЗАМЕТКА ПО ПОДДОНУ
(используется и в «Собрано», и в «Проверке скомплектованного»)
========================================================= */

.cpb-field textarea {
padding: 9px 11px;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
outline: none;
font: inherit;
resize: vertical;
}

.cpb-field textarea:focus {
border-color: var(--primary, #0f766e);
}

.cpb-note-save {
margin-left: 8px;
border: 0;
background: transparent;
color: #111;
font-size: 11px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
padding: 0;
}


/* =========================================================
ПРОВЕРКА СКОМПЛЕКТОВАННОГО — ПАНЕЛЬ ПОДДОНОВ
(встроена в модальное окно проверки)
========================================================= */

.cv-pallet-panel {
margin: 0 0 12px;
padding: 14px;
}

.cv-pallet-panel .cpb-groups {
margin-bottom: 4px;
}

/* =========================================================
КАРТА СКЛАДА — ЗАНЯТОСТЬ
(computeMapOccupancy / mapOccupancyBadgeHtml в app.js)
========================================================= */

.map-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 14px;
}

.map-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #555;
}

.map-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}

.map-occ-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}

.map-occ-free,
.map-legend-dot.map-occ-free {
background: #f1f5f9;
color: #64748b;
}

.map-occ-busy,
.map-legend-dot.map-occ-busy {
background: #ecfdf5;
color: #0f766e;
}

.map-occ-reserved,
.map-legend-dot.map-occ-reserved {
background: #fffbeb;
color: #b45309;
}

.map-occ-summary {
background: #eef2ff;
color: #3730a3;
}

/* точки-индикаторы на кнопках мест склада НС */

.map-place-btn.map-place-busy {
box-shadow: inset 0 -3px 0 #10b981;
}

.map-place-btn.map-place-reserved {
box-shadow: inset 0 -3px 0 #f59e0b;
}

.map-place-btn.map-place-free {
box-shadow: inset 0 -3px 0 #e2e8f0;
}

/* =========================================================
   SKLADAPLAN — FINAL NAV ICON GEOMETRY
   Фикс: SVG не должен съезжать относительно текста.
   Работает одинаково на Главной, Планировщике и остальных
   страницах, потому что sidebar общий.
   ========================================================= */

.sidebar .nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 10px !important;
}

.sidebar .nav-icon {
  flex: 0 0 20px !important;

  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;

  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 0 !important;
  align-self: center !important;

  transform: none !important;
}

.sidebar .nav-icon > svg.icon {
  display: block !important;

  width: 20px !important;
  height: 20px !important;

  min-width: 20px !important;
  min-height: 20px !important;

  max-width: 20px !important;
  max-height: 20px !important;

  margin: 0 !important;
  padding: 0 !important;

  vertical-align: middle !important;
  align-self: center !important;

  transform: none !important;
}

.sidebar .nav-label {
  flex: 1 1 auto !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.25 !important;
  align-self: center !important;
}

/* SVG внутри <use> не должен влиять на высоту строки */
.sidebar .nav-icon > svg.icon use {
  display: block;
}

/* =========================================================
   SKLADAPLAN — FINAL MOBILE NAV FIX
   Полоса: 100% ширины / 5 равных пунктов / видимые SVG.
   ========================================================= */

@media (max-width: 700px) {

  /* Верхняя панель — светлая, как и desktop */
  .topbar {
    background: #ffffff !important;
    color: #111 !important;
    border-bottom-color: #ececec !important;
  }

  .topbar h1,
  .topbar-title,
  .crumb,
  .crumb span {
    color: #111 !important;
  }

  .mobile-menu {
    background: #f4f4f5 !important;
    color: #111 !important;
  }


  /* Нижняя панель — светлая */
  .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;

    gap: 2px !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    border-top: 1px solid #ececec !important;
  }


  /* Каждый пункт занимает всю свою 1/5 ячейку */
  .mobile-nav .mobile-nav-btn {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 6px 3px !important;
    gap: 4px !important;

    background: transparent !important;
    color: #555 !important;
  }


  /* Контейнер иконки */
  .mobile-nav .mobile-nav-btn > span {
    flex: 0 0 24px !important;

    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    color: inherit !important;
  }


  /* Сама SVG — явно задаём размер и stroke */
  .mobile-nav .mobile-nav-btn > span > svg.icon {
    display: block !important;

    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;

    color: currentColor !important;
    overflow: visible !important;
  }

  .mobile-nav .mobile-nav-btn > span > svg.icon use {
    stroke: currentColor !important;
    color: currentColor !important;
  }


  /* Подпись */
  .mobile-nav .mobile-nav-btn > small {
    display: block !important;

    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }


  /* Активный пункт */
  .mobile-nav .mobile-nav-btn.active {
    background: #f4f4f5 !important;
    color: #111 !important;
  }

  .mobile-nav .mobile-nav-btn.active > span,
  .mobile-nav .mobile-nav-btn.active > small,
  .mobile-nav .mobile-nav-btn.active .icon,
  .mobile-nav .mobile-nav-btn.active .icon use {
    color: #111 !important;
    stroke: #111 !important;
  }


  /* Счётчик */
  .mobile-nav .mobile-nav-btn > em {
    background: var(--primary) !important;
    color: #fff !important;
  }

  .mobile-nav .mobile-nav-btn.active > em {
    background: var(--primary) !important;
    color: #fff !important;
  }
}

/* =========================================
   SCROLLBAR HIDE — SIDEBAR
   Полоса прокрутки скрыта визуально,
   но прокрутка колесом/тачем работает.
   ========================================= */

.sidebar,
.sidebar * {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* старый Edge/IE */
}

.sidebar::-webkit-scrollbar,
.sidebar *::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

/* =========================================================
   КАРТА СКЛАДА — НОВАЯ ИЕРАРХИЯ
   ========================================================= */

.map-landmarks-card {
  margin-bottom: 14px;
  padding: 14px 16px;
}
.map-landmarks-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 8px;
}
.map-landmarks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.map-landmark {
  padding: 4px 10px;
  background: #f2f2f7;
  border-radius: 999px;
  font-size: 12px;
  color: #555;
  font-weight: 600;
}

/* --- Легенда --- */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 12px 0 16px;
  font-size: 12px;
  color: #666;
}
.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.map-legend-free     { background: #e5e7eb; }
.map-legend-busy     { background: #fbbf24; }
.map-legend-reserved { background: #60a5fa; }

/* --- Зона / Линия --- */
.map-zone-block {
  margin-bottom: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ececf1;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.02);
}

.map-zone-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  text-align: left;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.map-zone-toggle:hover { background: #fafafa; }
.map-zone-icon { color: #666; }
.map-zone-title { flex-shrink: 0; }
.map-zone-hint {
  flex: 1;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #999;
}

.map-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f2f2f7;
  color: #666;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.map-chevron { color: #999; flex-shrink: 0; }

/* --- Ряд --- */
.map-zone-content {
  padding: 6px 12px 12px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.map-row-block {
  margin-top: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ececf1;
  overflow: hidden;
}

.map-row-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-align: left;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.map-row-toggle:hover { background: #fafafa; }
.map-row-title { flex: 1; text-align: left; }

.map-badge-sm {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f2f7;
  color: #777;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.map-badge-sm.is-busy {
  background: #fef3c7;
  color: #92400e;
}

/* --- Места (плашки) --- */
.map-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
  padding: 12px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.map-place {
  position: relative;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.map-place:hover {
  border-color: #111;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.map-place.is-free { /* по умолчанию белый */ }
.map-place.is-busy {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}
.map-place.is-reserved {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af;
}

.map-place-num { line-height: 1; }

/* --- Мобильная адаптация --- */
@media (max-width: 640px) {
  .map-zone-toggle { font-size: 14px; padding: 12px 14px; }
  .map-zone-hint { display: none; }
  .map-places { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; padding: 10px; }
  .map-place { min-height: 46px; font-size: 12px; }
}

.map-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid #fcd34d;
  background: #fef3c7;
  color: #92400e;
  cursor: pointer;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.map-place-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.map-place-cnt {
  font-size: 10px;
  font-weight: 600;
  opacity: .75;
  line-height: 1;
}