/* Фаза 4 (m1, обвивката - доклад на собственика 16.10.2026: „при отваряне/рефреш страницата се рисува преди лявото меню и целият екран се размества“,
   „в тъмната тема мига светлата“). ЕДИНСТВЕНИЯТ статичен файл на обвивката, зареждан в края на <head> на всяка страница с nav.js (преди първото
   рисуване, на мястото, където nav.js досега вмъкваше същите стилове - редът на каскадата е същият). Части:
   1. обвивката до построяването ѝ (запазеното място на менюто, скриването до готовност);
   2. общите променливи, които екраните ползват без да са дефинирани (--wms-card, --wms-surface-2, --wms-primary, --wms-highlight, --wms-card-bg);
   3. тъмният слой (§214/§285) - досега вмъкван от nav.js при изпълнението му (след първото рисуване - кадър в светлата тема);
   4. стиловете на менюто и на лявата лента - досега вмъквани от renderAppNav() след мрежовите заявки;
   5. съобщенията (toast) в тъмната тема - бяха бели.
   Пълното уеднаквяване на палитрите (bs-theme.css, wms-base.css, тук) - отделна задача (редизайнът чака избора на собственика). */

/* ---------- 1. обвивката до построяването ѝ ----------
   До класа wms-shell-ready на <html> (nav.js го слага в finally след менюто, пътечката, стъпките и колоната на съдържанието):
   - мястото на лявото меню е запазено (232px - ширината на #wms-sidebar по-долу) и се вижда като празна лента в цвета на менюто;
   - съдържанието под заглавната лента и самата лента са скрити (visibility - мястото им остава): показват се наведнъж, на окончателното си място;
   - ако nav.js не стигне до края (грешка в страницата), съдържанието се показва след 4 s (резервна анимация) - никога не остава скрито.
   Скриването - на всяка страница с nav.js (и без меню - пътечката и банерите пак се вмъкват). Разпознава се още преди парсерът да стигне до
   <script src="/nav.js"> в края на страницата: по #app-nav или <header> (файлът е само на страниците с nav.js). Мястото на лявата лента - само на
   страница с меню и <header> (body:has(#app-nav)).
   Темата (data-theme) и сгънатото меню (data-sidebar="collapsed") се слагат на <html> от вградения скрипт в началото на <head>. */
@keyframes wms-shell-reveal { to { visibility: visible; } }
html:not(.wms-shell-ready) body:is(:has(#app-nav), :has(> header), :has(script[src^="/nav.js"])) > :not(header):not(script):not(style),
html:not(.wms-shell-ready) body:is(:has(#app-nav), :has(> header), :has(script[src^="/nav.js"])) > header > * {
  visibility: hidden;
  animation: wms-shell-reveal 0s linear 4s forwards;
}
@media (min-width: 861px) {
  html:not(.wms-shell-ready):not([data-sidebar="collapsed"]) body:has(> header):has(#app-nav) {
    padding-left: 232px;
    background-image: linear-gradient(to right, #ffffff 0, #ffffff 231px, #e5e7eb 231px, #e5e7eb 232px, transparent 232px);
    background-size: 232px 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  html[data-theme="dark"]:not(.wms-shell-ready):not([data-sidebar="collapsed"]) body:has(> header):has(#app-nav) {
    background-image: linear-gradient(to right, #1e293b 0, #1e293b 231px, #334155 231px, #334155 232px, transparent 232px);
  }
  html:not(.wms-shell-ready):not([data-sidebar="collapsed"]) body:has(#app-nav) > header {
    margin-left: -232px;
    position: relative;
    z-index: 1;
  }
}

/* ---------- 2. общите променливи (UI-1: ползвани от екраните, без да са дефинирани - фонът оставаше прозрачен/по подразбиране) ---------- */
:root {
  --wms-version-ink: #5f6673;   /* O75: номерът на версията под логото - 5.8:1 върху белия фон на заглавната лента (беше #9ca3af - 2.5:1) */
  /* n4: същите променливи като в bs-theme.css (страниците без bs-theme.css - implementer-console, reset-password - ги получават оттук); предпазителят
     scripts/test-no-low-contrast-text.py изисква еднакви стойности в двата файла */
  --wms-ink-muted: #5f6673;
  --wms-ink-muted-on-dark: #94a3b8;
  --wms-ink-on-dark: #cbd5e1;
  --wms-card: var(--wms-surface, #ffffff);
  --wms-card-bg: var(--wms-surface, #ffffff);
  --wms-surface-2: #f8fafc;
  --wms-primary: var(--wms-accent, #4f46e5);
  --wms-accent-ink: #ffffff;   /* n4: текст върху --wms-primary/--wms-accent (бутон, „към съдържанието“) - същото като в bs-theme.css */
  --wms-success-ink: #166534;   /* n4: текст на състояние върху светъл фон (>= 4.5:1) - същите стойности като в bs-theme.css */
  --wms-danger-ink: #b91c1c;
  --wms-warning-ink: #92400e;
  --wms-info-ink: #1d4ed8;
  --wms-highlight: #eef2ff;
}
[data-theme="dark"] {
  --wms-version-ink: #94a3b8;   /* O75: 5.7:1 върху #1e293b (заглавната лента на страниците без bs-theme) и 6.8:1 върху #131a26 */
  --wms-ink-muted: #8b94a6;
  --wms-card: var(--wms-surface, #1e293b);
  --wms-card-bg: var(--wms-surface, #1e293b);
  --wms-surface-2: #172033;
  --wms-primary: var(--wms-accent, #818cf8);
  --wms-accent-ink: #0b0f17;
  --wms-success-ink: #4ade80;
  --wms-danger-ink: #fca5a5;
  --wms-warning-ink: #fbbf24;
  --wms-info-ink: #60a5fa;
  --wms-highlight: rgba(129, 140, 248, 0.16);
}

/* ---------- 3. тъмният слой (преместен от nav.js без промяна) ---------- */
/* §214 (потребителска заявка - "тъмен интерфейс на уеб страниците") -
   ГЛОБАЛЕН dark mode CSS слой, инжектиран от nav.js на ВСЯКА страница
   (единна точка на промяна, вместо 70+ ръчно editирани HTML файла).
   Targeting COMMON structural patterns, ползвани consistently низ
   цялото приложение тая сесия (body/header/.panel/table/input/button),
   ПЛЮС inline-style override-и за най-честите hardcoded hex стойности
   (background: white, color: #1a1a2e и т.н.) - inline styles имат
   по-висок specificity, затова тук всичко е с !important.

   ЧЕСТНА БЕЛЕЖКА: с 70+ страници, всяка с леко различен custom CSS,
   100% pixel-perfect покритие на ВСЯКА страница не е гарантирано без
   individual тест на всяка - тоя файл покрива established common
   patterns (established design system тая сесия), не guarantee за
   всеки edge case custom styling. */

[data-theme="dark"] {
  color-scheme: dark;
}

/* --- Base page structure --- */
[data-theme="dark"] body {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] header {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}
[data-theme="dark"] main { color: #e2e8f0; }

/* --- Cards / panels (most common container pattern тая сесия) ---
   §386 - established selectors по-долу explicit ИЗКЛЮЧВАТ '.wms-bs' scope
   (body:not(.wms-bs)) - страници, конвертирани към Bootstrap pilot design
   system (bs-theme.css), СЕГА ползват established СЪЩИЯ 'data-theme'
   attribute/localStorage key, но dark theming-ъt идва ИЗЦЯЛО от
   bs-theme.css-овите '--wms-*' CSS variables (по-fine-grained, без
   !important hack), не от тоя generic sweep - избягва установените 2
   системи да си oспорват СЪЩИТЕ .card/.panel класове с конфликтни
   hardcoded цветове. */
[data-theme="dark"] body:not(.wms-bs) .panel,
[data-theme="dark"] body:not(.wms-bs) .card,
[data-theme="dark"] body:not(.wms-bs) .chart-card,
[data-theme="dark"] body:not(.wms-bs) .stat-card,
[data-theme="dark"] body:not(.wms-bs) .console-panel,
[data-theme="dark"] body:not(.wms-bs) .commands-panel,
[data-theme="dark"] body:not(.wms-bs) .bindings-panel,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-box,
[data-theme="dark"] body:not(.wms-bs) .result-box,
[data-theme="dark"] body:not(.wms-bs) .toolbar,
[data-theme="dark"] body:not(.wms-bs) .saved-filters-bar,
[data-theme="dark"] body:not(.wms-bs) .sidebar,
[data-theme="dark"] .canvas-panel,
[data-theme="dark"] body:not(.wms-bs) .category-group,
[data-theme="dark"] body:not(.wms-bs) .side-panel,
[data-theme="dark"] .apikey-box,
[data-theme="dark"] .credential-box,
[data-theme="dark"] .summary-tile,
[data-theme="dark"] .summary-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] body:not(.wms-bs) .panel h2,
[data-theme="dark"] body:not(.wms-bs) .panel h3,
[data-theme="dark"] body:not(.wms-bs) .card h2,
[data-theme="dark"] body:not(.wms-bs) .card h3,
[data-theme="dark"] .console-panel h2,
[data-theme="dark"] .commands-panel h2,
[data-theme="dark"] .bindings-panel h2,
[data-theme="dark"] .modal h2,
[data-theme="dark"] .modal h3,
[data-theme="dark"] .sidebar h2,
[data-theme="dark"] .sidebar h3,
[data-theme="dark"] body:not(.wms-bs) .category-group h2,
[data-theme="dark"] body:not(.wms-bs) .category-group h3 {
  color: #f1f5f9 !important;
}

/* §CSS-dark-audit-sweep (потребителска заявка - "прегледай всички екрани с
   тъмна тема и оправи където намериш проблеми") - .modal/.result-box/
   .toolbar/.sidebar/.canvas-panel/.category-group добавени в общия panel
   selector list по-горе (established §226/§CSS-help-dark-fix паттърн:
   custom class, hardcoded бял фон, ambient forced светъл текст → невидим
   резултат). НО .result-box.error/.status-msg.err и подобни ВЕЧЕ имат
   собствена, self-contained readable комбинация (светъл pastel фон +
   съответстващ тъмен текст, напр. #fee2e2+#991b1b) -ပринудителното тъмно
   превръщане на фона БЕЗ да пипнем текста би счупило ТЯХ вместо да ги
   поправи (тъмно-червен текст върху тъмно-син фон = нечетимо). Explicit
   override ТУК, СЛЕД general rule-a (по-висока specificity, restore-ва
   правилна error комбинация за тъмна тема). */
[data-theme="dark"] .result-box.error,
[data-theme="dark"] .status-msg.err,
[data-theme="dark"] .error-box,
[data-theme="dark"] .history-error {
  background: #3f1d1d !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}
[data-theme="dark"] .modal label,
[data-theme="dark"] .props-panel label {
  color: var(--wms-ink-on-dark) !important;
}
/* §CSS-dark-audit-sweep-2 (потребителска заявка "Направи проверка на всички
   страници с тъмната тема" - продължение на established §CSS-dark-audit-sweep
   одит) - .note-link/.btn-secondary споделят established еднакъв hardcoded
   светло-сив pattern (#f3f4f6 фон + #374151 текст) - readable на светла
   тема, но остава СВЕТЛО-СИВО петно върху тъмен фон (за разлика от .modal-box/
   .order-summary, тук не е "почти невидим текст" бъг, а чисто визуален
   inconsistency - светъл chip, залепен върху тъмна страница). Fix -
   established slate dark-gray + established светъл text convention, mirror
   на established .order-card border цвета точно. */
[data-theme="dark"] .note-link,
[data-theme="dark"] .btn-secondary {
  background: #334155 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .meta-note {
  /* §CSS-dark-contrast (потребителска заявка - "текстовете в тъмната
     тема излизат много бледо") - slate-500 (#64748b) на тъмен фон
     (#1e293b/#0f172a) не дава достатъчен контраст за комфортно
     четене - вдигнато на slate-400. */
  color: var(--wms-ink-muted-on-dark) !important;
}

/* §CSS-order-card-dark-fix (потребителска заявка - screenshot: "визуализацията
   на страницата има проблем с тези бели полета... това го има и на други
   страници") - genuine gap в established §214 "common patterns" покритие:
   .order-card/.order-summary (shipments.html/orders.html - shipment/order
   списъци с "Allocate" бутон) си имат СОБСТВЕН hardcoded #fafafa фон,
   различен от общия .panel/.card selector по-горе - затова НЕ се хващаше
   от него, оставаше светъл в тъмна тема, докато .order-card контейнерът
   около него (naked border, без background) си остава прозрачен - крайният
   резултат: светла лента, "залепена" върху тъмния фон на страницата. */
[data-theme="dark"] .order-card {
  border-color: #334155 !important;
}
[data-theme="dark"] .order-card-highlighted {
  /* §Outbound-order-show-only-created followup - established highlight (light
     blue #eef2ff/#4f46e5) беше hardcoded inline style, невидим за нашия
     [data-theme="dark"] override механизъм по дефиниция (inline style бие
     всяко non-!important CSS правило) - преместено в CSS клас (виж
     orders.html), за да МОЖЕ да се override-не тук. */
  background: #1e2a4a !important;
  border-color: #818cf8 !important;
}
[data-theme="dark"] .order-summary {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .order-num {
  color: #f1f5f9 !important;
}

/* --- Tables --- */
[data-theme="dark"] table {
  color: #e2e8f0;
  --bs-table-bg: transparent;
  --bs-table-color: #e2e8f0;
  --bs-table-striped-bg: rgba(255,255,255,0.05);
  --bs-table-striped-color: #e2e8f0;
  --bs-table-hover-bg: rgba(255,255,255,0.075);
  --bs-table-hover-color: #e2e8f0;
  --bs-table-border-color: #334155;
}
/* §409 (потребителска заявка - screenshot: "това с бялото не се чете") -
   root cause: Bootstrap 5 table-ите четат background/color от --bs-table-*
   CSS variables, които се превключват от Bootstrap-овия ОТДЕЛЕН
   data-bs-theme атрибут - нашето приложение никога не сетва тоя атрибут,
   използва собствен data-theme. Established правилото по-горе оцветяваше
   САМО текста (color: #e2e8f0), но фонът оставаше на Bootstrap default
   (--bs-table-bg: var(--bs-body-bg) = бяло) - светъл текст върху бял фон,
   практически невидим. Fix - explicit override на --bs-table-* variables
   (bg: transparent, за да наследи тъмния фон на родителския .card/.panel),
   не само на color property-то directно. */
[data-theme="dark"] th {
  background: #1e293b !important;
  color: var(--wms-ink-on-dark) !important;
  border-color: #334155 !important;
}
[data-theme="dark"] td {
  border-top-color: #334155 !important;
  color: #e2e8f0 !important;
}
/* §CSS-movement-history-row-fix (потребителски bug report - screenshot на
   "Движения" листа: "Оправи цветовете на белите редове") - 18 страници
   имат hardcoded LIGHT фон directno на <tr> елемента самия (`tbody
   tr:nth-child(even) { background: #f9fafb; }` в собствения им <style>
   блок), НЕ на <td> - предишното правило тук таргетирало само td-тата
   (полу-прозрачен overlay), оставяйки светлия tr фон да прозира отдолу
   (td overlay-a с alpha 0.02 практически невидим върху него) - комбинирано
   с forced светъл text цвят (dark theme-ния td color правило) резултирало
   в нечетим "избелен" текст на всеки втори ред. Fix: explicit dark фон
   directno на <tr> елемента, override-вайки местния page-specific rule. */
[data-theme="dark"] tbody tr:nth-child(even) { background: #1a2436 !important; }
[data-theme="dark"] tr:nth-child(even) td { background: transparent !important; }
/* §CSS-order-lines-row-fix (потребителска заявка - screenshot на orders.html
   "Създаване на Outbound order" екрана: бял ред под action бутоните) -
   established по-горе двете правила таргетират САМО nth-child(even) редове.
   Тоя ред е nth-child(1) (единствен ред в реда/тестовата поръчка) - НЕЧЕТЕН,
   established even-fix-ът не важи за него. Изчерпателно претърсих ЦЯЛАТА
   established CSS база (wms-base.css/bs-theme.css/nav.js) за explicit light
   background на bare table/tr/td selector-и - НЯМА такъв никъде, tr/td би
   трябвало вече да е прозрачно по default. Root cause остава honest
   unconfirmed (вероятно browser-specific inherited default при table
   border-collapse:collapse комбинация, или established --bs-table-* variable
   inheritance по път, дет не проследих) - вместо да гадая по-нататък, explicit
   force-вам transparent на ВСЕКИ tbody ред (не само even), гарантирайки
   правилен резултат независимо от точния механизъм. */
[data-theme="dark"] tbody tr { background: transparent !important; }
[data-theme="dark"] tbody td { background: transparent !important; }

/* --- Forms --- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] label { color: var(--wms-ink-on-dark) !important; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--wms-ink-muted-on-dark) !important; }

/* --- Buttons (secondary/outline варианти, primary остава accent цвят) --- */
[data-theme="dark"] button.secondary,
[data-theme="dark"] button[class*="secondary"] {
  background: #1e293b !important;
  color: var(--wms-ink-on-dark) !important;
  border-color: #334155 !important;
}

/* --- Common inline-style overrides (background: white / hardcoded text colors) --- */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"] {
  background: #1e293b !important;
}
[data-theme="dark"] [style*="color: #1a1a2e"],
[data-theme="dark"] [style*="color:#1a1a2e"] {
  color: #e2e8f0 !important;
}
[data-theme="dark"] [style*="background: #f4f5f7"],
[data-theme="dark"] [style*="background:#f4f5f7"] {
  background: #0f172a !important;
}
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #d1d5db"],
[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"] {
  border-color: #334155 !important;
}

/* --- Nav bar (rendered от nav.js, малко различна структура) --- */
/* §CSS-nav-dark-contrast (потребителска заявка - screenshot на menu-то,
   "менюто също трябва да се оправи CSS-a") - genuinely намерен gap:
   top-level dropdown category labels (Приемане/Изпращане/... ▾) са
   рендирани като <span class="nav-top-link">, НЕ <a> - предишното
   правило тук таргетирало само ".app-nav a" - span-овете оставали със
   светло-темния цвят (#374151, тъмно сиво) върху тъмния header фон,
   почти нечетими. Разширено да покрива ЦЕЛИЯ ".nav-top-link" клас
   (общ за <a> И <span> top-level items), не само <a>. */
[data-theme="dark"] .app-nav a,
[data-theme="dark"] .app-nav .nav-top-link,
[data-theme="dark"] .app-nav button { color: var(--wms-ink-on-dark) !important; }
[data-theme="dark"] .app-nav .nav-top-link:hover,
[data-theme="dark"] .app-nav .nav-item.open .nav-top-link { background: #334155 !important; color: #a5b4fc !important; }
[data-theme="dark"] .app-nav .nav-top-link.active-page { color: #a5b4fc !important; }
[data-theme="dark"] .app-nav .nav-dropdown {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .app-nav .nav-dropdown a { color: var(--wms-ink-on-dark) !important; }
[data-theme="dark"] .app-nav .nav-dropdown a:hover { background: #334155 !important; color: #a5b4fc !important; }
[data-theme="dark"] .app-nav .nav-dropdown a.active-page { color: #a5b4fc !important; background: rgba(99,102,241,0.15) !important; }
/* §406 - dark-theme варианти за favorites row remove бутон */
[data-theme="dark"] .app-nav .nav-dropdown .fav-row:hover { background: #334155 !important; }
[data-theme="dark"] .app-nav .nav-dropdown .fav-row a:hover { background: none !important; }
[data-theme="dark"] .app-nav .nav-dropdown .fav-remove-btn { color: #fbbf24 !important; background: none !important; border: none !important; }
[data-theme="dark"] .app-nav .nav-dropdown .fav-remove-btn:hover { color: #f87171 !important; background: rgba(248,113,113,0.15) !important; }
[data-theme="dark"] .app-nav .nav-sub-link { color: var(--wms-ink-on-dark) !important; }
[data-theme="dark"] .app-nav .nav-sub-link:hover,
[data-theme="dark"] .app-nav .nav-subitem.open .nav-sub-link { background: #334155 !important; color: #a5b4fc !important; }
[data-theme="dark"] .app-nav .nav-sub-link.active-page { color: #a5b4fc !important; }

/* --- Badges/pills - запазват собствения си accent цвят, само leg по-тъмен bg вариант --- */
[data-theme="dark"] .success-msg { background: rgba(34,197,94,0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .error-msg { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; }
[data-theme="dark"] .badge-cheapest { background: rgba(34,197,94,0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .zone-chip { background: rgba(99,102,241,0.15) !important; color: #a5b4fc !important; }

/* --- Help modal (attachPanelHelp) - модалът пази собствен бял фон
   независимо от темата (не се управлява от тоя файл), но §CSS-dark-contrast
   разкри, че текстът МЪЛЧАЛИВО наследяваше dark-theme body color-a (светъл
   текст върху белия modal фон = блед/нечетим) - explicit color fix-нат
   directno в nav.js-овия .wms-help-modal inline <style> блок, не тук. --- */

/* ---------- 4. менюто и лявата лента (преместени от renderAppNav() в nav.js без промяна) ---------- */
/* wordmark badge (виж инжекцията по-горе). Фиксирани hex цветове
   нарочно, не CSS theme variables - целта е "изкуствен фон", еднакво
   четим в светла и тъмна тема, а не да следва темата. */
.wms-brand-badge {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  background: #F3F1EC; border: 1px solid rgba(0,0,0,0.08);
  padding: 5px 12px; border-radius: 6px; line-height: 1;
  font-family: Arial, Helvetica, sans-serif; font-weight: 900;
  font-size: 14px; letter-spacing: -0.02em;
}
.wms-brand-badge .wms-brand-control { color: #14161A; }
.wms-brand-badge .wms-brand-wms { color: #FF6B1A; }
/* O75: номерът на версията (под логото) - цветът от променливата на темата */
#wms-version-badge { display: block; font-size: 10px; color: var(--wms-version-ink); font-weight: 400; padding: 0 2px; line-height: 1.2; }
/* h1 в колонния brand-wrap — по-голям шрифт + видимо разстояние
   от logo+version клъстера над него (потребителска заявка). */
#wms-brand-wrap h1 {
  margin: 0; margin-top: 6px; font-size: 15px; font-weight: 600;
  color: var(--wms-ink-muted, #6b7280); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 280px;
  line-height: 1.2;
}
/* (потребителска заявка - "подравни менюто в дясно") - established
   #wms-context-chip ВЕЧЕ носи собствен margin-left:auto (виж renderAppNav по-долу,
   established pre-existing right-alignment на tenant/user chip-a) - explicit auto
   margin ТУК на #app-nav би конфликтирал с established (множество auto margins в
   един flex row си делят свободното пространство, establishedчупи established
   app-nav-овия established flexShrink:0 width computation, established observed
   side-effect: app-nav growing до ~85% от header-a, established избутващ bell/chip
   на нов ред). Fix - фиксиран (не auto) margin, established чисто разстояние от
   логото, БЕЗ да пипа established съществуващия chip-driven right-alignment паттърн.
*/
#app-nav { margin-left: 20px; }
/* (продължение) - 4 страници (dashboard.html, kpi-dashboard.html,
   movement-history.html, trailers.html) established имат #app-nav ВЛОЖЕН в helper
   "actions" div (established различна established raw HTML структура от установения
   flat pattern на established останалите 119 страници) - established flex-basis:0/
   flex-grow:1, инжектирани directno на #app-nav елемента (виж renderAppNav), важат
   САМО спрямо established НЕПОСРЕДСТВЕНИЯ му родител (established wrapping div-a),
   established не спрямо established header-a directno. :has() selector-ъt ТУК
   targeting established wrapping div-a (established header дете, established
   съдържащо #app-nav) - работи еднакво на established 4-те страници, established
   no-op на established останалите 119 (established там #app-nav Е directно header
   дете, established няма matching wrapper). */
header > div:has(#app-nav) { flex: 1 1 0; min-width: 0; }
/* n7 (O82): на телефон „☰“ в такъв обгръщащ блок (trailers: „+ Manage Carriers“ до менюто) се свиваше до 12 px от 'flex:1 1 0' и бутонът му (38 px) излизаше върху звънчето.
   Бутонът пази мястото си (не се свива); ако не се побира на реда - блокът го пренася на нов ред (flex-wrap), вместо да го наслагва. */
@media (max-width: 860px) {
  header > div:has(#app-nav) { flex-wrap: wrap; }
  header > div:has(#app-nav) > #app-nav { flex: 0 0 auto !important; margin-left: 0; }
  header > #app-nav { min-width: 38px !important; }   /* и когато #app-nav е пряко дете на лентата (tms, yms, orchestration, rules, compliance): заглавие с дълго име го свиваше до 4 px */
}

/* n7 (Б1): на телефон организацията и менюто на потребителя са ВИНАГИ на свой ред, вдясно. Иначе дали се побират до звънчето зависеше от ширината на името на организацията:
   скелетът (130 px) и истинското име (122 px) подреждаха лентата различно и при пристигането му цялата лента (и екранът под нея) се разместваше. */
@media (max-width: 600px) {
  header > #wms-context-chip { flex: 1 1 100%; justify-content: flex-end; margin-left: 0 !important; }
}
.app-nav { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.app-nav .nav-item { position: relative; }
.app-nav .nav-top-link {
  display: block; padding: 8px 12px; border-radius: 6px; color: #374151;
  text-decoration: none; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.app-nav .nav-top-link:hover, .app-nav .nav-item.open .nav-top-link { background: #f3f4f6; color: #4f46e5; }
.app-nav .nav-top-link.active-page { color: #4f46e5; }
.app-nav .nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: white; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); min-width: 190px; padding: 6px; z-index: 50;
}
.app-nav .nav-item.open .nav-dropdown { display: block; }
.app-nav .nav-dropdown a {
  display: block; padding: 7px 10px; border-radius: 6px; color: #374151;
  text-decoration: none; white-space: nowrap;
}
.app-nav .nav-dropdown a:hover { background: #f3f4f6; color: #4f46e5; }
.app-nav .nav-dropdown a.active-page { color: #4f46e5; font-weight: 600; background: #eef2ff; }
.app-nav .nav-dropdown .fav-empty { padding: 7px 10px; color: var(--wms-ink-muted); font-size: 12px; }
/* fav-row = flex контейнер (линк + inline remove бутон), replaces
   established plain <a> за favorites redовете (виж renderAppNav() по-горе). */
.app-nav .nav-dropdown .fav-row { display: flex; align-items: center; border-radius: 6px; }
.app-nav .nav-dropdown .fav-row:hover { background: #f3f4f6; }
.app-nav .nav-dropdown .fav-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-nav .nav-dropdown .fav-row a:hover { background: none; }
.app-nav .nav-dropdown .fav-remove-btn {
  flex: 0 0 auto; border: none !important; background: none !important; background-color: transparent !important;
  color: #f59e0b !important; cursor: pointer; min-height: 0 !important;
  font-size: 15px; line-height: 1; padding: 4px 8px !important; border-radius: 4px; margin-right: 2px;
}
/* (потребителска заявка - "махни синия квадрат, да остане само
   звездичката") - root cause: тоя бутон беше ПРОСТ <button> без .btn
   клас, затова bs-theme.css правилото ".wms-bs button:not(.btn):
   not(.help-btn)" (по-висока специфичност заради type селектора
   "button") го оцветяваше плътно синьо/лилаво ("--wms-accent"),
   игнорирайки нашия по-стар, по-нискоспецифичен стил. Fix - explicit
   !important override тук (не пипаме bs-theme.css generic правилото,
   за да не счупим друго) + смяна на "×" (виж renderAppNav() по-долу)
   към "★" - filled звезда, консистентна с topbar star toggle-a,
   hover-color сигнализира "клик премахва". */
.app-nav .nav-dropdown .fav-remove-btn:hover { color: #b91c1c !important; background: #fee2e2 !important; }
/* (потребителска заявка - "менюта->подменюта") - вложен
   submenu flyout - позициониран ВДЯСНО от родителя (left:100%),
   не отдолу (top:100%, established за 1-во ниво). nav-sub-link
   преизползва establishedия .nav-dropdown a padding/стил (изглежда
   като нормален dropdown ред с ▸ стрелка), не establishedия
   top-level .nav-top-link бутонен стил. */
.app-nav .nav-subitem { position: relative; }
/* fix - критичен CSS specificity бъг: ".nav-item.open
   .nav-dropdown { display: block }" е descendant selector - щом
   родителската категория (Inventory Management) е .open, ВСИЧКИ
   вложени .nav-dropdown (включ. flyout-овете на всичките 7 subitem-и)
   match-ват правилото, независимо кой конкретен subitem реално е
   .open! Fix - explicit по-специфично override, изисква ДИРЕКТНИЯ
   subitem parent да е .open (child combinator >), по-висока
   specificity коректно печели. */
.app-nav .nav-item .nav-dropdown.nav-sub-dropdown { display: none; }
.app-nav .nav-subitem.open > .nav-dropdown.nav-sub-dropdown { display: block; }
.app-nav .nav-sub-link {
  display: block; padding: 7px 10px; border-radius: 6px; color: #374151;
  font-weight: 400; white-space: nowrap; margin: 0;
}
.app-nav .nav-sub-link:hover, .app-nav .nav-subitem.open .nav-sub-link { background: #f3f4f6; color: #4f46e5; }
.app-nav .nav-sub-link.active-page { color: #4f46e5; font-weight: 600; background: #eef2ff; }
.app-nav .nav-sub-dropdown {
  top: 0; left: 100%; margin-top: 0; margin-left: 4px;
}
.nav-star-btn {
  border: none; background: none; cursor: pointer; font-size: 16px; padding: 6px;
  border-radius: 6px; line-height: 1; margin-left: 4px;
}
.nav-star-btn:hover { background: #f3f4f6; }

/* "не съм очарован на телефон" - hamburger collapse за
   целия .app-nav (менюто никога не е имало mobile responsiveness -
   единственият media query в тоя файл target-ва process stepper-a,
   не менюто). Additive fix - desktop поведението (>860px) е буквално
   непроменено (същите CSS правила по-горе), тук само добавяме
   collapse под breakpoint-a. #app-nav-inner обвива ВСИЧКО (nav items
   + star + lang + theme бутон) - целият nav content се крие/показва
   като едно цяло на mobile, вместо individual overflow. */
.nav-hamburger-btn { display: none; }
.app-nav-inner-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .nav-hamburger-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: white; cursor: pointer; font-size: 18px; line-height: 1;
  }
  #app-nav-inner {
    display: none; flex-direction: column; align-items: stretch;
    width: 100%; gap: 2px;
  }
  #app-nav-inner.nav-mobile-open {
    display: flex; position: fixed; left: 0; right: 0; top: 56px;
    background: white; border-bottom: 1px solid #e5e7eb; padding: 8px 12px 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08); z-index: 9999; max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  #app-nav-inner .app-nav { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
  #app-nav-inner .nav-top-link { width: 100%; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; }
  /* Submenus stack inline (accordion), не flyout встрани - на тесен viewport
     left:100% flyout би излязъл извън екрана. */
  #app-nav-inner .nav-dropdown {
    position: static; box-shadow: none; border: none; margin: 0 0 0 12px;
    min-width: 0; width: calc(100% - 12px); padding: 0;
  }
  #app-nav-inner .nav-sub-dropdown { margin-left: 12px; }
  #app-nav-inner .nav-star-btn, #app-nav-inner .lang-switcher, #app-nav-inner .nav-theme-toggle-btn {
    margin: 6px 0 0; align-self: flex-start;
  }
}
[data-theme="dark"] .nav-hamburger-btn { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] #app-nav-inner.nav-mobile-open { background: #1e293b !important; border-color: #334155 !important; }

/* (потребителска заявка "искам B [sidebar]. Не бързаме") -
   постоянен ляв sidebar на desktop/tablet (>860px), заместващ established
   хоризонталното top-меню. Established hasburger breakpoint (860px) остава
   ТОЧНО СЪЩИЯТ - под него established mobile overlay drawer (navInner,
   напълно непроменен по-горе) продължава да работи exactly както преди.
   Body става CSS Grid САМО над breakpoint-а - header заема целия горен ред,
   sidebar+main делят долния. Grid естествено разрешава sidebar-овата
   височина да match-не established main content-a БЕЗ да се гадае header
   height-a explicit (row 1 auto-sizes до header-a, row 2 получава
   established остатъка, преди body-grid regression fix-a по-долу). */
.nav-hamburger-btn { display: flex !important; }
#wms-sidebar { display: none; }
/* (потребителска заявка "Избирам 2" + "искам стабилен
   софтуер") - established ПЪРВИЯТ опит (body{display:grid}) sweep-ваше
   ВСИЧКИ директни деца на body (breadcrumb bar, process stepper, modal
   overlays, hidden file inputs, notif panel, <script> тагове) в grid
   клетки, за които не бяха предвидени - genuine regression, open live
   (breadcrumb/process bar "изпадаха" на established грешно място). Fix -
   established sidebar layout вече НЕ пипа established body-a изобщо.
   Established нов #wms-layout-row flex контейнер съдържа САМО
   established sidebar-a + нов #wms-content-col wrapper - established
   ВТОРИЯТ съдържа САМО established познатите "съдържателни" елементи
   (main, breadcrumb bar, process stepper), explicit преместени там
   ПОИМЕННО (не blind sweep) в render логиката по-долу. Established
   modal overlays/hidden inputs/notif panel/scripts остават ПРЯКО
   деца на body, established напълно непобутнати. */
#wms-layout-row { display: block; }
@media (min-width: 861px) {
  #wms-layout-row { display: flex; align-items: stretch; }
  #wms-sidebar {
    display: block;
    flex: 0 0 232px;
    background: #ffffff; border-right: 1px solid #e5e7eb;
    overflow-y: auto; overflow-x: hidden;
    padding: 12px 8px;
    white-space: nowrap;
    align-self: stretch;
  }
  body.wms-sidebar-collapsed #wms-sidebar { display: none; }
  #wms-content-col { flex: 1 1 0; min-width: 0; }

  /* Reuse established accordion/stacked pattern (мобилен паттърн по-горе,
     виж #app-nav-inner media query) - static dropdowns, вертикален stack,
     full-width линкове, вместо absolute-position flyout. */
  #wms-sidebar .app-nav { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
  #wms-sidebar .nav-top-link { width: 100%; padding: 9px 10px; }
  #wms-sidebar .nav-dropdown {
    position: static; box-shadow: none; border: none; margin: 0 0 0 12px;
    min-width: 0; width: calc(100% - 12px); padding: 0;
  }
  #wms-sidebar .nav-sub-dropdown { margin-left: 12px; }
  #wms-sidebar .nav-item.open > .nav-dropdown { display: block; }
  /* established старото хоризонтално .app-nav дърво
     вътре в navInner вече НЕ трябва да се показва тук (established
     съдържанието му вече живее в #wms-sidebar) - established search/
     star/lang/theme бутоните (established SIBLINGS на .app-nav вътре в
     СЪЩИЯ navInner wrapper) остават видими нормално. */
  #app-nav-inner > .app-nav { display: none !important; }
}
[data-theme="dark"] #wms-sidebar { background: #1e293b !important; border-color: #334155 !important; }
/* #wms-header-search ползва var(--wms-border/surface/
   ink,...) fallback-и, дет резолват коректно САМО на wms-bs (bs-theme.css)
   страници - на generic (non-wms-bs) страници тия променливи НЕ съществуват,
   fallback-ите (established светли стойности) остават - explicit dark
   override тук, matching established останалите header елементи (established
   чест паттърн в тая сесия - виж /v3.536.0 за established
   идентичния клас бъг другаде). */
[data-theme="dark"] #wms-header-search { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
[data-theme="dark"] #wms-header-search::placeholder { color: var(--wms-ink-muted-on-dark) !important; }

/* ---------- 5. съобщенията (toast) в тъмната тема - бяха с бял фон ---------- */
[data-theme="dark"] .wms-toast { background: #1e293b !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] .wms-toast-message { color: #e2e8f0 !important; }
[data-theme="dark"] .wms-toast-close { color: var(--wms-ink-muted-on-dark) !important; }
[data-theme="dark"] .wms-toast-close:hover { color: #e2e8f0 !important; }
[data-theme="dark"] .success-box { background: rgba(34,197,94,0.15) !important; color: #4ade80 !important; }
[data-theme="dark"] .warn-msg { background: rgba(217,119,6,0.15) !important; color: #fbbf24 !important; }

/* ---------- 6. менюто на потребителя (n3, O76) ----------
   Чипът в заглавната лента (организация + потребител) е бутон, който отваря малко меню с „Изход“ - едно място на всеки екран (преди „Изход“ имаше само
   5 екрана, всеки със свой бутон до заглавието). Селекторите са по идентификатор: общото правило за бутоните на bs-theme (.wms-bs button:not(.btn)) е
   по-силно от клас и боядисваше бутона в акцентния цвят. Светла и тъмна тема - явни цветове (променливите на bs-theme ги няма на старите страници). */
#wms-user-menu-wrap { position: relative; display: inline-flex; }
#wms-user-menu-btn {
  display: inline-flex; align-items: center; gap: 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #ffffff; color: #171923; border: 1px solid #c9ced8; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 400; line-height: 1.4; cursor: pointer;
}
#wms-user-menu-btn:hover { background: #f1f2f6; color: #171923; }
#wms-user-menu-btn:focus-visible, #wms-user-menu .wms-user-menu-item:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
#wms-user-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 9000; min-width: 200px; max-width: 280px;
  background: #ffffff; color: #171923; border: 1px solid #c9ced8; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 4px; text-align: left;
}
#wms-user-menu[hidden] { display: none; }
#wms-user-menu .wms-user-menu-who { padding: 8px 12px; font-size: 12px; color: #5f6673; border-bottom: 1px solid #e1e4ea; margin-bottom: 4px; overflow-wrap: anywhere; }
#wms-user-menu .wms-user-menu-item {
  display: block; width: 100%; text-align: left; background: transparent; color: #171923; border: none; border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 500; cursor: pointer;
}
#wms-user-menu .wms-user-menu-item:hover { background: #eef0f5; color: #171923; }
[data-theme="dark"] #wms-user-menu-btn { background: #1e293b; color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] #wms-user-menu-btn:hover { background: #334155; color: #e2e8f0; }
[data-theme="dark"] #wms-user-menu { background: #1e293b; color: #e2e8f0; border-color: #475569; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
[data-theme="dark"] #wms-user-menu .wms-user-menu-who { color: var(--wms-ink-muted-on-dark); border-bottom-color: #334155; }
[data-theme="dark"] #wms-user-menu .wms-user-menu-item { color: #e2e8f0; }
[data-theme="dark"] #wms-user-menu .wms-user-menu-item:hover { background: #334155; color: #e2e8f0; }
[data-theme="dark"] #wms-user-menu-btn:focus-visible, [data-theme="dark"] #wms-user-menu .wms-user-menu-item:focus-visible { outline-color: #a5b4fc; }

/* ---------- 7. скелет вместо скрито съдържание (Б1, n7) ----------
   Съдържанието вече не се крие до пристигането на данните (само до построяването на менюто - синхронно, от кеша). Мястото на данните държи скелет със
   същия размер като истинското съдържание, затова при пристигането им нищо не се мести. '.wms-skel' е блок-скелет за всяко място, което се пълни по-късно
   (организацията в заглавната лента, редове на таблица, плочки). Анимацията се изключва за хората, които са я изключили в системата. */
:root { --wms-skel-a: #e5e7eb; --wms-skel-b: #f3f4f6; }
[data-theme="dark"] { --wms-skel-a: #1e293b; --wms-skel-b: #2c3755; }
@keyframes wms-skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.wms-skel {
  background: linear-gradient(90deg, var(--wms-skel-a) 25%, var(--wms-skel-b) 37%, var(--wms-skel-a) 63%); background-size: 400% 100%;
  animation: wms-skel-shimmer 1.4s ease infinite; color: transparent !important; border-radius: 6px;
}
.wms-skel > * { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .wms-skel { animation: none; } }
/* организацията в заглавната лента (nav.js wmsApplyContext): мястото е запазено още преди отговора на /auth/me */
#wms-tenant-badge { display: inline-flex; align-items: center; }
.wms-tenant-badge {
  background: var(--wms-surface); border: 1px solid var(--wms-border); border-radius: 20px; padding: 3px 10px; font-size: 11px; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 4px;
}
.wms-tenant-badge.wms-skel { width: 130px; height: 24px; padding: 0; border-color: transparent; border-radius: 20px; }
/* карта-скелет на списък, който се пълни по-късно (картите на ASN и др.): височината на една сгъната карта - първият ред данни идва в запазеното място */
.wms-skel-card { height: 72px; margin-bottom: 8px; }