/* ════════════════════════════════════════════════════════════════
   Application styles — KM Inventory components & screens
   ════════════════════════════════════════════════════════════════ */

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; background: var(--canvas); }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ink);
  background: var(--canvas);
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
}

:focus-visible { outline: none; }
button:focus-visible, a:focus-visible, .input:focus-visible, [role="button"]:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-md); }

::selection { background: rgba(15,15,16,.12); }
button, a, .btn, .icon-btn, .tab, .filter-chip, .product-row, .event-card, .log-item {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: currentColor; }
.hidden { display: none !important; }

/* ─── Auth Screen ────────────────────────────────────────── */
.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  padding: var(--s-xl) var(--s-lg);
  z-index: 1000;
}
.auth-content {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.auth-logo {
  height: 38px;
  margin: 0 auto 56px;
  color: var(--brand);
}
.auth-logo svg { height: 100%; width: auto; fill: currentColor; }
.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.auth-submit {
  margin-top: var(--s-xs);
}
.email-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.email-login-input {
  padding-right: 156px;
}
.email-domain-suffix {
  position: absolute;
  right: 14px;
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.auth-error {
  color: var(--error);
  font-size: 12px;
  text-align: center;
  padding: var(--s-xs);
  margin-top: var(--s-xs);
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  height: 44px;
  padding: 0 var(--s-lg);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.05px;
  transition: background-color .15s var(--ease-out), transform .1s var(--ease-out), box-shadow .15s, opacity .15s, border-color .15s;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn-full { width: 100%; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 1px 2px rgba(0,0,0,.12); }
.btn-primary:hover:not(:disabled) { background: var(--primary-active); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); }
.btn-primary:disabled { background: var(--surface-strong); color: var(--muted); box-shadow: none; }
.btn-secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); }
.btn-secondary:hover { background: var(--surface-soft); border-color: var(--surface-strong); }
.btn-secondary:active { background: var(--surface-card); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-danger { background: var(--error); color: var(--on-primary); }
.btn-danger:active { background: #dc2626; }
.btn-brand { background: var(--brand); color: var(--on-primary); }
.btn-brand:active { background: var(--brand-active); }
.btn svg { fill: currentColor; flex-shrink: 0; }
.btn .btn-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.btn .btn-icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-card); }
.icon-btn:active { background: var(--surface-strong); }
.icon-btn:focus-visible { border-radius: var(--r-pill); }

/* ─── Inputs ─────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
}
.field-optional {
  color: var(--muted-soft);
  font-weight: 400;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-sm);
}
.field-row--single { grid-template-columns: 1fr; }
.field-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}
.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--s-md);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  appearance: none;
  -webkit-appearance: none;
}
.input:hover:not(:focus) { border-color: var(--surface-strong); }
.input:focus { border-color: var(--primary-base); box-shadow: var(--focus-ring); }
.input::placeholder { color: var(--muted-soft); }
.textarea {
  height: auto;
  min-height: 88px;
  padding: 12px var(--s-md);
  resize: none;
  line-height: 1.5;
}
.select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

/* ─── Toggle ─────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-md);
  background: var(--surface-card);
  border-radius: var(--r-lg);
}
.toggle-label { font-size: 14px; font-weight: 500; color: var(--ink); }
.toggle {
  position: relative;
  width: 44px;
  height: 26px;
  display: inline-block;
  cursor: pointer;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface-strong);
  border-radius: var(--r-pill);
  transition: background .2s var(--ease-out);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--canvas);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out);
}
.toggle input:checked ~ .toggle-track { background: var(--primary); }
.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }

/* ─── App Shell ──────────────────────────────────────────── */
.app-shell {
  display: none;
  flex-direction: column;
  height: 100dvh;
  background: var(--canvas);
}
.app-shell.on { display: flex; }
.main-area { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.sidebar-header { display: none; }
.sidebar-footer { display: none; }

.topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--s-md) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--canvas);
  flex-shrink: 0;
}
.topbar-title { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  flex-shrink: 0;
}
.role-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  background: var(--surface-card);
  color: var(--muted);
}
.role-badge[data-role="admin"] { background: var(--bg-danger-soft); color: var(--red-70); }
.role-badge[data-role="km"]    { background: var(--bg-info-soft); color: var(--text-info-strong); }
.role-badge[data-role="guest"] { background: var(--bg-success-soft); color: var(--text-success-strong); }

.content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ─── Tabbar ─────────────────────────────────────────────── */
.tabbar {
  height: var(--tabbar-h);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline-soft);
  background: var(--canvas);
  padding-bottom: env(safe-area-inset-bottom);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  transition: color .18s var(--ease-out);
  position: relative;
  padding: 6px 4px;
}
.tab.on { color: var(--primary-base); }
.tab:hover:not(.on) { color: var(--body); }
.tab-icon { display: flex; width: 26px; height: 26px; }
.tab-icon svg { width: 100%; height: 100%; fill: currentColor; }
.tab-label { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 2px;
  background: var(--primary-base);
  border-radius: 0 0 2px 2px;
  transition: transform .25s var(--ease-out);
}
.tab.on::before { transform: translateX(-50%) scaleX(1); }
.tab:active { background: var(--surface-card); }

/* ─── Screens ────────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0,0,0);
}
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .14s var(--ease-out);
}

/* ─── Scanner ────────────────────────────────────────────── */
.screen-scan { background: #000; }
.scanner-reader {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: #000 !important;
}
.scanner-reader video { object-fit: cover !important; width: 100% !important; height: 100% !important; }
.scanner-reader img { display: none !important; }
.scanner-reader > * { border: none !important; }
.screen-scan:not(.active) .scanner-reader { display: none !important; }
.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.scanner-frame {
  position: relative;
  width: 240px;
  height: 240px;
}
.scanner-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
}
.scanner-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: var(--r-xs) 0 0 0; }
.scanner-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 var(--r-xs) 0 0; }
.scanner-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 var(--r-xs); }
.scanner-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 var(--r-xs) 0; }
.scanner-line {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  top: 50%;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255,255,255,.5);
  animation: scanLine 2.4s ease-in-out infinite;
}
@keyframes scanLine {
  0%, 100% { transform: translateY(-95px); opacity: 0; }
  10%, 90% { opacity: 1; }
  50% { transform: translateY(95px); opacity: 1; }
}
.scanner-hint {
  position: absolute;
  bottom: max(40px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85);
  font-size: 14px;
  font-weight: 500;
  background: rgba(0,0,0,.4);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.torch-btn {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  transition: background .18s, color .18s;
}
.torch-btn:active { background: rgba(255,255,255,.2); }
.torch-btn.on { background: rgba(255,220,0,.25); color: #ffd700; }
.torch-btn span { display: flex; width: 22px; height: 22px; }
.torch-btn svg { width: 100%; height: 100%; fill: currentColor; }

/* ─── Products Toolbar ───────────────────────────────────── */
/* ─── Toolbar group (search + filters) — фиксирован при скролле ─ */
.toolbar-group {
  flex-shrink: 0;
  background: var(--canvas);
  padding-bottom: var(--s-xs);
}

.products-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-md) var(--s-md) var(--s-xs);
}
.products-toolbar .search-bar {
  flex: 1;
  margin: 0;
}
.export-wrap {
  position: relative;
  flex-shrink: 0;
}
.export-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--neutral-10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  z-index: 100;
  min-width: 160px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.export-menu.hidden { display: none; }
.export-menu-item {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--neutral-100);
  text-align: left;
  border-radius: var(--r-md);
  transition: background-color .12s;
}
.export-menu-item:hover { background: var(--neutral-30); }
.export-menu-item:active { background: var(--neutral-40); }

/* ─── Toolbar icon button (tb-btn) ──────────────────────── */
.tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--neutral-30);
  color: var(--neutral-70);
  flex-shrink: 0;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.tb-btn:hover  { background: var(--neutral-40); color: var(--neutral-100); }
.tb-btn:active { background: var(--neutral-45); }
.tb-btn.on     { color: var(--primary-base); }
.tb-btn svg    { width: 18px; height: 18px; }

/* legacy view-toggle — оставлен для совместимости, больше не используется в тулбаре */
.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface-card);
  border-radius: var(--r-md);
  padding: 3px;
  flex-shrink: 0;
}
.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background-color .15s, color .15s;
}
.view-toggle-btn.on { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ─── Table Filters ──────────────────────────────────────── */
.table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  padding: var(--s-xxs) var(--s-md) 0;
  flex-shrink: 0;
}
.table-filters.hidden { display: none; }
.table-filters.mobile-hidden { display: none; }
/* .mobile-filter-btn — заменён на .tb-btn#filter-toggle-btn */
.tfilter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tfilter-label {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Products Table ─────────────────────────────────────── */
.products-table-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  margin: var(--s-sm) var(--s-md) var(--s-md);
}
.products-table-wrap.hidden { display: none; }

.table-col-settings {
  position: relative;
  display: flex;
  justify-content: flex-start;
  padding: var(--s-sm) var(--s-md) var(--s-xs);
  border-bottom: 1px solid var(--hairline-soft);
  flex-shrink: 0;
}
.col-settings-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: var(--s-md);
  right: auto;
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--s-sm);
  z-index: 100;
  min-width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.col-settings-panel.hidden { display: none; }
.col-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
  user-select: none;
}
.col-toggle-item:hover { background: var(--surface-card); }
.col-toggle-item input { cursor: pointer; }

.table-scroll-wrap {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 0 calc(80px + env(safe-area-inset-bottom));
}
.products-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.products-table th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color .15s, background-color .15s;
}
.products-table th:hover { color: var(--ink); background: var(--surface-card); }
.products-table th.sort-asc::after { content: ' ↑'; }
.products-table th.sort-desc::after { content: ' ↓'; }
.products-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  color: var(--body);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.products-table tr:last-child td { border-bottom: none; }
.products-table tr { cursor: pointer; transition: background-color .12s; }
.products-table tr:hover td { background: var(--surface-card); }
.products-table tr:active td { background: var(--surface-strong); }
.products-table tr.archived td { opacity: .55; }
.products-table tr.shortage td { background: rgba(239, 68, 68, 0.06); }
.products-table tr.shortage:hover td { background: rgba(239, 68, 68, 0.11); }
.tbl-stock-num { font-weight: 700; }
.tbl-stock-num.danger { color: var(--error); }
.tbl-stock-num.warn { color: var(--warning); }
.tbl-stock-num.ok { color: var(--success); }
.products-table td:first-child { color: var(--muted); font-size: 12px; }

/* ─── Search Bar ─────────────────────────────────────────── */
.search-bar {
  position: relative;
  margin: var(--s-sm) var(--s-md) 0;
  flex-shrink: 0;
}
.search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  display: flex;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.search-icon svg { width: 100%; height: 100%; }
.search-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--s-md) 0 42px;
  background: var(--surface-card);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 16px;
  outline: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.search-input:hover { background: var(--surface-strong); }
.search-input:focus { background: var(--canvas); border-color: var(--ink); box-shadow: var(--focus-ring); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.filter-row {
  display: flex;
  gap: var(--s-xs);
  padding: 0 var(--s-md);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  padding: 7px 14px;
  background: var(--surface-card);
  color: var(--body);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background-color .15s, color .15s, transform .1s;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}
.filter-chip:hover { background: var(--surface-strong); }
.filter-chip.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.filter-chip.on:hover { background: var(--primary-active); }
.filter-chip:active { transform: scale(.96); }
.filter-chip:focus-visible { border-radius: var(--r-pill); }

/* ─── Products List ──────────────────────────────────────── */
.products-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-xxs) var(--s-md) calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}
.product-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-md);
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  transition: background-color .15s, border-color .15s, transform .1s var(--ease-out), box-shadow .15s;
}
.product-row:hover { border-color: var(--hairline); box-shadow: var(--shadow-xs); }
.product-row:active { background: var(--surface-card); transform: scale(.99); }
.product-row.archived { opacity: .55; }
.product-row.shortage {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.28);
}
.product-truck-icon {
  display: inline-flex;
  align-items: center;
  color: var(--info-base);
  flex-shrink: 0;
}
.product-truck-icon svg { width: 13px; height: 13px; }
.product-perishable-icon {
  display: inline-flex;
  align-items: center;
  color: var(--warning-base);
  flex-shrink: 0;
}
.product-perishable-icon svg { width: 13px; height: 13px; }
.topbar-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.desktop-refresh {
  display: none;
  color: var(--muted);
  transition: color .15s;
}
.desktop-refresh:hover { color: var(--ink); }
.desktop-refresh svg { width: 16px; height: 16px; }
.desktop-refresh.spinning svg { animation: spin-once .5s linear; }
@keyframes spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.product-info { flex: 1; min-width: 0; }
.product-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.product-meta-dot { color: var(--muted-soft); }
.product-stock {
  text-align: right;
  flex-shrink: 0;
  min-width: 64px;
}
.product-stock-num { font-size: 22px; font-weight: 700; line-height: 1; }
.product-stock-num.danger { color: var(--error); }
.product-stock-num.warn { color: var(--warning); }
.product-stock-num.ok { color: var(--success); }
.product-stock-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.badge-red { background: var(--bg-danger-soft); color: var(--text-danger-strong); }
.badge-orange { background: var(--bg-warn-soft); color: var(--warning); }
.badge-yellow { background: var(--bg-attention-soft); color: var(--text-attention-strong); }
.badge-green { background: var(--bg-success-soft); color: var(--text-success-strong); }
.badge-gray { background: var(--surface-card); color: var(--body); }
.badge-soft { background: var(--surface-card); color: var(--muted); }

.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: var(--surface-card);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.brand-chip-logo { display: flex; height: 14px; color: currentColor; }
.brand-chip-logo svg { height: 100%; width: auto; fill: currentColor; }

/* ─── Sheet (Product Card) ───────────────────────────────── */
.sheet-backdrop, .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,15,16,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease-out);
  z-index: 200;
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
}
.sheet-backdrop.on, .modal-backdrop.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85dvh;
  background: var(--canvas);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: translateY(110%);
  transition: transform .32s var(--ease);
  z-index: 210;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-xl);
  padding-bottom: max(var(--s-lg), env(safe-area-inset-bottom));
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.sheet.on { transform: translateY(0); visibility: visible; pointer-events: auto; }
.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--hairline);
  border-radius: var(--r-pill);
  margin: 12px auto 8px;
}
.sheet-body { padding: var(--s-md) var(--s-md) var(--s-lg); }

.product-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-md);
  margin-bottom: var(--s-sm);
}
.product-detail-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.3px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}
.product-detail-sub {
  font-size: 12px;
  color: var(--muted);
}
.product-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-sm);
  margin-bottom: var(--s-md);
}

.detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-top: 1px solid var(--hairline-soft);
  font-size: 14px;
}
.detail-row:first-of-type { border-top: none; }
.detail-row-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 3px;
}
.detail-row-icon svg { width: 100%; height: 100%; }
.detail-row-content { flex: 1; min-width: 0; }
.detail-row-label { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.detail-row-value { color: var(--ink); font-size: 14px; }

.kb-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-md);
  padding: 14px var(--s-md);
  background: var(--surface-card);
  border-radius: var(--r-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .15s;
}
.kb-link:hover { background: var(--surface-strong); }
.kb-link:active { background: var(--surface-strong); }
.kb-link-left { display: flex; align-items: center; gap: 10px; }
.kb-link-icon { width: 18px; height: 18px; flex-shrink: 0; }
.kb-link-arrow { width: 18px; height: 18px; color: var(--muted); }
.kb-link-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xs);
  margin-top: var(--s-md);
}
.action-row .btn { width: 100%; }

.action-secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xs);
  margin-top: var(--s-xs);
}

/* ─── Lightbox ───────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  cursor: zoom-out;
}
.lightbox.on { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: min(92vw, 900px);
  max-height: 90dvh;
  object-fit: contain;
  border-radius: var(--r-lg);
  pointer-events: none;
  display: block;
}

/* ─── Product thumbnails ─────────────────────────────────── */
.product-thumb-list {
  width: 60px;
  height: 60px;
  border-radius: var(--r-lg);
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
}
.product-thumb-empty {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--surface-card);
  flex-shrink: 0;
  display: inline-block;
}
.product-detail-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
}
.product-thumb-table {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
  vertical-align: middle;
}
.tbl-image-cell {
  width: 52px;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
}
.res-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
}
.res-thumb.product-thumb-empty { cursor: default; }
/* ─── Form image section ─────────────────────────────────── */
.np-image-section { margin-bottom: var(--s-md); }
.np-img-wrap { display: flex; gap: var(--s-sm); align-items: flex-start; }
.np-img-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--r-lg);
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
}
.np-img-actions { display: flex; flex-direction: column; gap: var(--s-xs); }
.np-img-upload-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--s-md);
  background: var(--surface-card);
  border-radius: var(--r-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s;
  border: 1.5px dashed var(--hairline);
}
.np-img-upload-empty:active { background: var(--surface-strong); }
.np-img-upload-icon { display: inline-flex; flex-shrink: 0; }
.np-img-upload-icon svg { width: 18px; height: 18px; }

/* ─── Modal ──────────────────────────────────────────────── */
.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 92dvh;
  background: var(--canvas);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: translateY(110%);
  transition: transform .32s var(--ease);
  z-index: 220;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.modal.on { transform: translateY(0); visibility: visible; pointer-events: auto; }
.modal-tall { height: 92dvh; }
.modal-compact { padding-top: 8px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-md);
  flex-shrink: 0;
}
.modal-title { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.modal-body {
  padding: 0 var(--s-md) var(--s-md);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.modal-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xs);
  padding: var(--s-md);
  padding-bottom: max(var(--s-md), env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-soft);
  flex-shrink: 0;
}
.confirm-text { color: var(--body); font-size: 14px; line-height: 1.5; }

/* ─── Reservations ───────────────────────────────────────── */
.modal-list-search { padding: 0 0 var(--s-sm); }
.modal-list-search .input { width: 100%; }
/* DS AutoComplete — поиск внутри модалок */
.ac-wrap {
  position: relative;
  width: 100%;
}
.ac-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--neutral-65);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.ac-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ac-input { width: 100%; padding-left: 36px; }
.ac-dropdown {
  position: fixed;
  z-index: 9200;
  background: var(--neutral-10);
  border: 1px solid var(--neutral-50);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  max-height: 240px;
  overflow-y: auto;
  min-width: 200px;
}
.ac-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 150ms var(--ease);
}
.ac-option:hover, .ac-option.active { background: var(--neutral-30); }
.ac-opt-article { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-70); }
.ac-opt-title { font-size: 13px; color: var(--neutral-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Панель поиска + фильтров (прилипает над списком) */
.modal-controls {
  padding: 0 var(--s-md) var(--s-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  border-bottom: 1px solid var(--hairline-soft);
  flex-shrink: 0;
}
.modal-controls .input { width: 100%; }
.modal-controls-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
.modal-controls-row .input.select {
  flex: 1;
  height: 32px;
  font-size: 13px;
}
.res-only-added {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}
.res-only-added-label {
  font-size: 13px;
  color: var(--ink);
  user-select: none;
}

.res-list { display: flex; flex-direction: column; }
.res-row {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.res-row:last-child { border-bottom: none; }
.res-info { flex: 1; min-width: 0; }
.res-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-meta { font-size: 12px; color: var(--muted); }
.qty-input {
  width: 72px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 14px;
  text-align: center;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: var(--canvas);
  font-feature-settings: "tnum";
  font-weight: 500;
}
.qty-input:hover:not(:focus) { border-color: var(--surface-strong); }
.qty-input:focus { border-color: var(--ink); box-shadow: var(--focus-ring); }

/* ─── Log ────────────────────────────────────────────────── */
.log-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-sm) var(--s-md) calc(96px + env(safe-area-inset-bottom));
}
.log-day-header {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-complimentary);
  margin: var(--s-md) 0 var(--s-xs);
}
.log-day-header:first-child { margin-top: 0; }
.log-item {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: var(--s-sm) var(--s-md);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  transition: border-color .15s, box-shadow .15s;
}
.log-item:hover { border-color: var(--hairline); box-shadow: var(--shadow-xs); }
.log-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.log-icon svg { width: 16px; height: 16px; fill: currentColor; }
.log-icon.out { background: var(--bg-danger-soft); color: var(--text-danger-strong); }
.log-icon.in { background: var(--bg-success-soft); color: var(--text-success-strong); }
.log-content { flex: 1; min-width: 0; }
.log-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.log-meta { font-size: 12px; color: var(--muted); }
.log-comment {
  font-size: 12px;
  color: var(--body);
  margin-top: 4px;
  background: var(--surface-card);
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.log-qty {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
.log-qty.out { color: var(--text-danger-strong); }
.log-qty.in { color: var(--text-success-strong); }

/* ─── Events ─────────────────────────────────────────────── */
.events-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-sm) var(--s-md) calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}
.event-card {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-sm);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.event-card:hover { border-color: var(--hairline); box-shadow: var(--shadow-xs); }
.event-card:active { background: var(--surface-card); }
.event-card.inactive { opacity: .65; }
.event-info { flex: 1 0 100%; min-width: 0; }
.event-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.event-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.event-dot.active { background: var(--success); }
.event-dot.inactive { background: var(--surface-strong); }
.event-date { font-size: 12px; color: var(--muted); }
.event-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
.event-action-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-card);
  color: var(--ink);
  transition: background-color .15s;
}
.event-action-btn:hover { background: var(--surface-strong); }
.event-action-btn:active { background: var(--surface-strong); }
.event-action-btn.primary { background: var(--ink); color: var(--on-primary); }
.event-action-btn.danger { background: var(--error-soft); color: var(--error); }
.event-action-btn.danger:hover { background: #ffe0de; }
.event-action-btn.danger:active { background: #ffe0de; }
.event-action-btn[href] { text-decoration: none; display: inline-flex; align-items: center; }

/* ─── FAB ────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: var(--s-md);
  bottom: calc(var(--tabbar-h) + var(--s-md) + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transform: scale(.7) translate3d(0,0,0);
  pointer-events: none;
  transition: transform .22s var(--ease-out), opacity .18s, background-color .15s, visibility 0s .18s;
}
.fab.on {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translate3d(0,0,0);
  pointer-events: auto;
  transition: transform .25s var(--ease-out), opacity .18s, background-color .15s;
}
.fab:active { transform: scale(.92); background: var(--primary-active); }
.fab-icon { display: flex; width: 22px; height: 22px; }
.fab-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* ─── Empty States ───────────────────────────────────────── */
.empty {
  text-align: center;
  padding: var(--s-xxl) var(--s-lg);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-sm);
}
.empty-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-xs);
}
.empty-icon svg { width: 24px; height: 24px; fill: var(--muted); }
.empty-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.empty-text { font-size: 12px; color: var(--muted); }

/* ─── DS Message (bottomLeft, стек до 5) ─────────────────── */
.msg-container {
  position: fixed;
  left: var(--s-lg);
  bottom: calc(var(--tabbar-h) + var(--s-md) + env(safe-area-inset-bottom));
  z-index: 2010;
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  align-items: flex-start;
  pointer-events: none;
}
@media (min-width: 768px) {
  .msg-container { bottom: var(--s-lg); }
}
.msg-item {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: 8px 12px;
  background: var(--neutral-10);
  border-radius: var(--r-lg);
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  max-width: 448px;
  min-height: 36px;
  pointer-events: all;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.msg-item.on { opacity: 1; transform: translateY(0); }
.msg-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; }
.msg-icon svg { width: 16px; height: 16px; }
.msg-success { color: var(--green-60); }
.msg-error   { color: var(--red-50); }
.msg-info    { color: var(--blue-60); }
.msg-warning { color: var(--orange-60); }
.msg-text { font-size: 14px; line-height: 20px; color: var(--neutral-100); flex: 1; white-space: pre-wrap; }
.msg-cancel {
  font-size: 12px;
  color: var(--neutral-65);
  padding: 2px 4px;
  opacity: 0;
  transition: opacity .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: var(--r-sm);
}
.msg-item:hover .msg-cancel { opacity: 1; }
.msg-cancel:hover { color: var(--neutral-100); background: var(--black-8); }

/* ─── Sheet Reservations ─────────────────────────────────── */
.sheet-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin: var(--s-lg) 0 var(--s-xs);
}
.res-sheet-list {
  display: flex;
  flex-direction: column;
}
.res-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.res-sheet-row:last-child { border-bottom: none; }
.res-sheet-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-sheet-empty {
  font-size: 14px;
  color: var(--muted);
  padding: var(--s-md) 0;
  text-align: center;
}
.res-sheet-save {
  margin-top: var(--s-md);
}

/* ─── Components (состав набора) ────────────────────────── */
.comp-list {
  display: flex;
  flex-direction: column;
}
.comp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
  cursor: pointer;
  transition: opacity .15s;
}
.comp-row:last-child { border-bottom: none; }
.comp-row:active { opacity: .6; }
.comp-info { flex: 1; min-width: 0; }
.comp-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.comp-free {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}
.comp-free-num {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1;
  color: var(--success);
}
.comp-free-num--zero { color: var(--error); }
.comp-free-label {
  font-size: 12px;
  color: var(--muted);
}
.comp-assembly-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-md);
  padding: 12px var(--s-md);
  background: var(--positive-bg);
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--positive-base);
}
.comp-assembly-hint--zero {
  background: var(--danger-bg);
  color: var(--danger-base);
}
.comp-assembly-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.comp-parents {
  display: flex;
  align-items: flex-start;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-top: 1px solid var(--hairline-soft);
}
.comp-parents-icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.comp-parents-icon svg { width: 16px; height: 16px; }
.comp-parents-content { flex: 1; min-width: 0; }
.comp-parents-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 3px;
}
.comp-parent-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
  margin-right: var(--s-sm);
}
.comp-parent-link:active { opacity: .7; }

/* ─── Components editor (форма редактирования) ───────────── */
.comp-edit-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  padding: var(--s-md) var(--s-md) var(--s-xs);
  border-top: 1px solid var(--hairline-soft);
  margin-top: var(--s-md);
}
.comp-edit-empty {
  font-size: 13px;
  color: var(--muted);
  padding: var(--s-xs) var(--s-md);
}
.comp-edit-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 8px var(--s-md);
  border-bottom: 1px solid var(--hairline-soft);
}
.comp-edit-info { flex: 1; min-width: 0; }
.comp-edit-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-edit-meta { font-size: 12px; color: var(--muted); }
.comp-edit-qty {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.comp-qty-input {
  width: 56px !important;
  text-align: center;
  padding: 4px 6px !important;
  height: 32px !important;
}
.comp-edit-unit { font-size: 12px; color: var(--muted); }
.comp-edit-del { color: var(--muted); flex-shrink: 0; }
.comp-edit-del:hover { color: var(--error); }
.comp-add-row {
  padding: var(--s-sm) var(--s-md);
  border-bottom: 1px solid var(--hairline-soft);
}
.comp-add-fields {
  display: flex;
  gap: var(--s-sm);
  margin-bottom: var(--s-sm);
}
.comp-add-actions {
  display: flex;
  gap: var(--s-sm);
}
.comp-add-btn {
  margin: var(--s-sm) var(--s-md);
}

/* ─── Event close: variant picker ────────────────────────── */
.ev-vars-section { margin-bottom: var(--s-md); }
.ev-vars-section:last-child { margin-bottom: 0; }
.ev-vars-section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.ev-vars-section-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: var(--s-xs);
}

/* ─── Component deduct modal ─────────────────────────────── */
.comp-deduct-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 var(--s-md);
}
.comp-deduct-row {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.comp-deduct-row:last-child { border-bottom: none; }
.comp-deduct-info { flex: 1; min-width: 0; }
.comp-deduct-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-deduct-meta { font-size: 12px; color: var(--muted); margin-top: 1px; }
.comp-deduct-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── Misc ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 0; height: 0; }

/* Desktop refined scrollbars */
@media (min-width: 768px) and (hover: hover) {
  .modal-body::-webkit-scrollbar,
  .sheet-body::-webkit-scrollbar,
  .products-table-wrap::-webkit-scrollbar,
  .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
  .modal-body::-webkit-scrollbar-thumb,
  .sheet-body::-webkit-scrollbar-thumb,
  .products-table-wrap::-webkit-scrollbar-thumb,
  .scroll::-webkit-scrollbar-thumb {
    background: rgba(15,15,16,.14);
    border-radius: var(--r-sm);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .modal-body::-webkit-scrollbar-thumb:hover,
  .sheet-body::-webkit-scrollbar-thumb:hover,
  .products-table-wrap::-webkit-scrollbar-thumb:hover,
  .scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(15,15,16,.28);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
}

/* ─── Scanner Overlay ────────────────────────────────────── */
.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #000;
  display: flex;
  flex-direction: column;
}
.scan-overlay.hidden { display: none; }
.scan-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--s-md) + env(safe-area-inset-top)) var(--s-md) var(--s-sm);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
}
.scan-overlay-title { color: #fff; font-size: 16px; font-weight: 600; }
.scan-overlay-close { color: #fff; }
.scan-overlay .scanner-reader { flex: 1; }
.scan-overlay .torch-btn { top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); }

/* кнопка сканера рядом с поиском */
.scan-trigger-btn {
  background: var(--surface-card);
  border-radius: var(--r-md);
  width: 44px;
  height: 44px;
  margin-top: var(--s-sm);
  flex-shrink: 0;
}

/* артикул + кнопка сканера */
.input-with-btn {
  display: flex;
  gap: var(--s-xs);
  align-items: center;
}
.input-with-btn .input { flex: 1; }
.input-scan-btn {
  width: 40px;
  height: 44px;
  flex-shrink: 0;
  background: var(--surface-card);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background-color .15s, color .15s;
}
.input-scan-btn:active { background: var(--surface-strong); color: var(--ink); }

/* ─── Log Filters ────────────────────────────────────────── */
.log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  padding: var(--s-md) var(--s-md) var(--s-sm);
  border-bottom: 1px solid var(--hairline-soft);
  flex-shrink: 0;
}
.log-filter-select {
  height: 34px;
  padding: 0 var(--s-sm);
  background: var(--surface-card);
  border-radius: var(--r-md);
  border: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.log-filter-input {
  height: 34px;
  padding: 0 var(--s-sm);
  font-size: 13px;
  width: 110px;
  flex-shrink: 0;
}
.log-filter-dates {
  display: flex;
  align-items: center;
  gap: 6px;
}
.log-filter-date {
  height: 34px;
  padding: 0 var(--s-sm);
  font-size: 12px;
  width: 130px;
  flex-shrink: 0;
}

/* ─── Pull-to-refresh ────────────────────────────────────── */
.ptr-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height .2s var(--ease);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
.ptr-indicator.visible { height: 44px; }
/* ─── DS Spin ─────────────────────────────────────────────── */
@keyframes im-spin-rotate { to { transform: rotate(360deg); } }

.im-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: im-spin-rotate .7s linear infinite;
}
.im-spin-sm { width: 16px; height: 16px; }
.im-spin-md { width: 24px; height: 24px; }
.im-spin-lg { width: 32px; height: 32px; }

/* ─── App loader (mobile only) ────────────────────────────── */
#app-loader {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s var(--ease), visibility .15s var(--ease);
  pointer-events: none;
}
#app-loader.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (min-width: 768px) { #app-loader { display: none !important; } }

/* ─── Product list grouping ──────────────────────────────── */
.product-group-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  padding: var(--s-sm) 0 4px;
}

/* CSV import button */
.res-modal-footer { display: flex; justify-content: space-between; gap: var(--s-xs); }
.csv-import-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ─── Desktop (sidebar) ──────────────────────────────────── */
@media (min-width: 768px) {
  :root { --sidebar-w: 216px; }

  .app-shell.on { flex-direction: row; }

  /* main-area занимает оставшееся место справа */
  .main-area { flex: 1; min-width: 0; }

  /* topbar на десктопе — без safe-area, без кнопки выйти */
  .topbar {
    padding-top: 0;
    height: var(--topbar-h);
  }
  .topbar-right { display: none; }
  .desktop-refresh { display: inline-flex; }

  /* контент — убираем нижний отступ под таббар */
  .products-list,
  .log-list,
  .events-list {
    padding-bottom: var(--s-lg);
  }

  /* сайдбар */
  .tabbar {
    order: -1;
    width: var(--sidebar-w);
    flex-shrink: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    border-top: none;
    border-right: 1px solid var(--hairline-soft);
    padding-bottom: 0;
    z-index: 10;
    gap: 0;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    padding: 0 var(--s-md);
    border-bottom: 1px solid var(--hairline-soft);
    flex-shrink: 0;
    height: var(--topbar-h);
  }
  .sidebar-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* вкладка-сайдбар — DS Menu nav-item */
  .tab {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    border-radius: 0;
    margin: 0;
    width: 100%;
    color: var(--ink);
    font-weight: 400;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
  }
  .tab-icon { width: 16px; height: 16px; flex-shrink: 0; }
  .tab-label { font-size: 14px; font-weight: 400; letter-spacing: 0; }
  .tab:hover:not(.on) { background: var(--neutral-30); color: var(--ink); }
  .tab.on { background: var(--primary-bg); color: var(--primary-base); }
  .tab.on .tab-label { font-weight: 500; }
  .tab::before { display: none; }
  .tab.on::before { display: none; }
  .tab:active { background: var(--neutral-40); }

  /* DS Menu — group label */
  .sidebar-menu-group {
    padding: 12px 16px 4px;
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
  }

  /* DS Menu — submenu: скрыт по умолчанию, открывается классом .open */
  .sidebar-submenu {
    display: none;
    background: var(--neutral-20);
    padding: 4px 0;
    flex-shrink: 0;
  }
  .sidebar-submenu.open { display: block; }

  .tab-sub {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 16px 8px 42px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
  }
  .tab-sub:hover { background: var(--neutral-30); }
  .tab-sub.on { background: var(--primary-bg); color: var(--primary-base); font-weight: 500; }
  .tab-sub:active { background: var(--neutral-40); }

  /* сканер скрыт на десктопе */
  .scan-trigger-btn { display: none; }
  .tab[data-screen="scan"] { display: none; }

  .sidebar-footer {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    border-top: 1px solid var(--hairline-soft);
    margin-top: auto;
    flex-shrink: 0;
  }
  .sidebar-add {
    display: none;
    padding: var(--s-xs) var(--s-xs) 0;
  }
  .sidebar-add.on { display: block; }
  .btn-sidebar-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px var(--s-sm);
    border-radius: var(--r-md);
    background: var(--primary);
    border: none;
    color: var(--on-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s;
  }
  .btn-sidebar-add:hover { background: var(--primary-hover); }
  .btn-sidebar-add:active { background: var(--primary-active); }
  .btn-sidebar-add span { width: 16px; height: 16px; display: flex; flex-shrink: 0; }
  .sidebar-footer-bottom {
    display: flex;
    align-items: center;
    gap: var(--s-xs);
    padding: var(--s-xs);
  }
  .sidebar-footer-bottom .role-badge {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 var(--s-sm);
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  .sidebar-footer-bottom .icon-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--muted);
    border-radius: var(--r-md);
  }

  /* FAB скрыт на десктопе */
  .fab { display: none; }

  /* контент — ширина зависит от активного экрана (управляется data-screen в JS) */
  .content { margin: 0; width: 100%; }
  .content[data-screen="log"]    { max-width: 65%; }
  .content[data-screen="events"] { max-width: 65%; }

  .log-item     { cursor: pointer; }
  .incoming-row { cursor: pointer; }

  /* sheet — карточка позиции — снизу, скруглённая со всех сторон */
  .sheet {
    max-width: 560px;
    left: calc(50vw + var(--sidebar-w) / 2);
    right: auto;
    bottom: 40px;
    border-radius: var(--r-xl);
    max-height: calc(100dvh - 80px);
    padding-bottom: var(--s-lg);
    transform: translateX(-50%) translateY(110%);
  }
  .sheet.on { transform: translateX(-50%) translateY(0); }
  .sheet-handle { display: none; }

  /* модалки на десктопе — центрированный диалог относительно всего экрана */
  .modal {
    bottom: auto;
    top: 50%;
    left: 50vw;
    right: auto;
    width: 520px;
    max-width: 520px;
    max-height: 85dvh;
    border-radius: var(--r-xl);
    transform: translateX(-50%) translateY(calc(-50% + 20px));
    opacity: 0;
    transition: transform .24s var(--ease-out), opacity .2s, visibility 0s .24s;
    padding-bottom: 0;
  }
  .modal.on {
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
    transition: transform .24s var(--ease-out), opacity .18s, visibility 0s;
  }
  .modal-compact { width: 400px; max-width: 400px; }
  .modal-tall { height: 85dvh; max-height: 85dvh; }
  .modal-footer {
    padding-bottom: var(--s-md);
  }

  .sheet-backdrop, .modal-backdrop { left: 0; }

  /* в Движениях и Планах панель фиксированная — не сдвигает контент */
  #app[data-screen="log"] .detail-panel,
  #app[data-screen="events"] .detail-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100dvh;
    z-index: 50;
  }

  /* desktop detail panel — часть flex-потока, раздвигает контент */
  .detail-panel {
    display: flex;
    flex-direction: column;
    position: static;
    height: 100dvh;
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--canvas);
    transition: width 280ms var(--ease);
  }
  .detail-panel.on {
    width: 30%;
    border-left: 1px solid var(--hairline);
  }
  .detail-panel-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-md);
  }
  /* кнопки действий — всегда внизу панели, вне scroll */
  .detail-panel-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--hairline);
    padding: var(--s-sm) var(--s-md) var(--s-md);
    background: var(--canvas);
  }
  .detail-panel-footer:empty { display: none; }

  /* таблица — sticky header fix */
  .table-scroll-wrap {
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
  }
  .products-table th {
    z-index: 2;
    top: 0;
  }
  /* поиск — отступ как у таблицы */
  .products-toolbar {
    padding-left: var(--s-md);
  }

  /* ─── Toolbar десктоп ───────────────────────────────────── */
  /* Порядок элементов toolbar */
  .products-toolbar .search-bar { order: 0; }
  #filter-toggle-btn             { order: 1; }
  #export-wrap                   { order: 2; }
  #btn-view-toggle               { order: 3; }
  #toolbar-add-btn               { order: 4; }

  /* Фильтр-кнопка — показываем на десктопе */
  .tb-btn { display: inline-flex; }

  /* Кнопка добавления в toolbar */
  .toolbar-add-btn { display: none; }
  .toolbar-add-btn.on { display: inline-flex; }

  /* #sidebar-add скрыт — кнопка перенесена в toolbar; incoming остаётся */
  #sidebar-add { display: none !important; }
}

/* элементы только для десктопа — скрыты на мобильном */
@media (max-width: 767px) {
  .detail-panel        { display: none; }
  .sidebar-add         { display: none; }
  .sidebar-menu-group  { display: none; }
  .sidebar-submenu     { display: none; }
  .toolbar-add-btn     { display: none !important; }
}

/* ─── Stock summary card (карточка товара) ───────────────── */
.stock-summary-card {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  margin-bottom: var(--s-md);
}
.stock-stats-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 4px;
}
.stock-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0 8px;
}
.stock-stat-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1.1;
}
.stock-stat-value.danger { color: var(--error); }
.stock-stat-value.warn   { color: var(--warning); }
.stock-stat-value.ok     { color: var(--success); }
.stock-stat-label {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.stock-warn-icon {
  display: inline-flex;
  align-items: center;
  color: var(--error);
  position: relative;
  cursor: default;
  flex-shrink: 0;
}
.stock-warn-icon svg {
  width: 13px;
  height: 13px;
  animation: warn-pulse 2s ease-in-out infinite;
}
@keyframes warn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.stock-stat-divider {
  width: 1px;
  background: var(--hairline);
  margin: 4px 0 12px;
  align-self: stretch;
}
.stock-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
}
.stock-summary-label { color: var(--muted); }
.stock-summary-value { font-weight: 500; color: var(--ink); }
.stock-summary-value.danger { color: var(--error); }
.stock-summary-value.warn   { color: var(--warning); }
.stock-summary-value.ok     { color: var(--success); }
.stock-progress-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  display: flex;
  position: relative;
  margin-top: var(--s-sm);
}
.stock-bar-seg {
  height: 100%;
  position: relative;
  cursor: default;
  transition: filter .15s;
  flex-shrink: 0;
}
.stock-bar-seg:hover { filter: brightness(0.82); }
.stock-bar-seg.seg-reserved { background: var(--brand); }
.stock-bar-seg.seg-warn     { background: var(--warning); }
.stock-bar-seg.seg-free     { background: var(--success); }
.stock-bar-seg:first-child  { border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); }
.stock-bar-seg:last-child   { border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); }

/* ─── Confirm dialog — DS Modal поверх других модалок ───── */
#conf-backdrop { z-index: 280; }
#conf-modal    { z-index: 290; }

/* ─── Global tooltip ────────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, visibility 0s .15s;
  max-width: 200px;
  white-space: normal;
}
#tooltip.on {
  opacity: 1;
  visibility: visible;
  transition: opacity .15s;
}
#tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: var(--neutral-100) transparent transparent;
  pointer-events: none;
}
#tooltip.below::after {
  bottom: auto;
  top: -5px;
  border-width: 0 5px 5px;
  border-color: transparent transparent var(--neutral-100);
}

/* ─── Incoming sheet badge ───────────────────────────────── */
.incoming-sheet-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--bg-info-soft);
  color: var(--text-info-strong);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--s-sm);
  margin-right: var(--s-xs);
}
.incoming-sheet-badge svg { width: 12px; height: 12px; }

/* ─── Plans tabs ─────────────────────────────────────────── */
.plans-tabs {
  display: flex;
  gap: var(--s-xs);
  padding: var(--s-md) var(--s-md) var(--s-sm);
  border-bottom: 1px solid var(--hairline-soft);
  flex-shrink: 0;
}
.plans-tab {
  height: 34px;
  padding: 0 var(--s-md);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: background-color .15s, color .15s;
}
.plans-tab:hover:not(.on) { color: var(--ink); background: var(--surface-card); }
.plans-tab.on { background: var(--primary-base); color: var(--text-contrast); }
.plans-tab:active { opacity: .8; }
.plans-pane { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.plans-pane.hidden { display: none; }

/* ─── Incoming list ──────────────────────────────────────── */
.incoming-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-sm) var(--s-md) calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
}
.incoming-form {
  background: var(--surface-card);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin-bottom: var(--s-sm);
}
.incoming-row {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg);
  padding: var(--s-md);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-sm);
  transition: border-color .15s, box-shadow .15s;
}
.incoming-row:hover { border-color: var(--hairline); box-shadow: var(--shadow-xs); }
.incoming-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start; width: 100%; margin-top: 2px; }
.incoming-info { flex: 1; min-width: 0; }
.incoming-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.incoming-meta { font-size: 12px; color: var(--muted); }

/* ─── Plans grid: 2 columns on desktop ───────────────────────
   Placed AFTER base .events-list/.incoming-list styles so the
   cascade order guarantees the override on ≥768px.          */
@media (min-width: 768px) {
  .events-list,
  .incoming-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    align-content: start;
    flex: 1;
    overflow-y: auto;
  }
  .events-list .empty,
  .incoming-list .empty {
    grid-column: 1 / -1;
  }
}

/* ─── Variant breakdown (карточка товара) ────────────────── */
.variant-breakdown {
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-sm) var(--s-md);
  margin-top: var(--s-sm);
}
.variant-breakdown-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: var(--s-xs);
}
.variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.variant-row:last-child { border-bottom: none; }
.variant-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.variant-qty {
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
}