/* ─────────────────────────────────────────────────────────
   Infomaximum overrides — точечные правки тех мест, где
   язык IM (тон, фокус, эмфаза) расходится с исходником.
   Раздел добавлен в конец, чтобы каскадно перебить базовые
   правила без риска для остальной разметки.
   ────────────────────────────────────────────────────────── */

/* Кнопки — IM: medium weight 500, без letter-spacing,
   без inset-highlight, контрол-радиус 4px. */
.btn {
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--r-md);
}
.btn:active { transform: none; }                 /* IM: без scale на press */

/* Primary — thrush-60 → hover thrush-40 (светлее) → active thrush-70 */
.btn-primary {
  background: var(--primary-base);
  color: var(--text-contrast);
  box-shadow: none;
}
.btn-primary:hover:not(:disabled)  { background: var(--primary-hover); }   /* thrush-40 */
.btn-primary:active:not(:disabled) { background: var(--primary-active); } /* thrush-70 */
.btn-primary:disabled {
  background: var(--bg-container-disabled);
  color: var(--text-disabled);
  box-shadow: none;
}

/* Secondary — outlined, neutral-50 рамка, hover = 8% black overlay */
.btn-secondary {
  background: var(--bg-container);
  color: var(--text-primary);
  border: 1px solid var(--line-border);
}
.btn-secondary:hover  { background: var(--bg-container-hover); border-color: var(--line-border); }
.btn-secondary:active { background: var(--bg-container-active); }

/* Danger — red-50 base */
.btn-danger        { background: var(--danger-base); color: var(--text-contrast); }
.btn-danger:hover  { background: var(--danger-hover); }
.btn-danger:active { background: var(--danger-active); }

/* Brand — алиас на primary, но оставляем явное правило */
.btn-brand        { background: var(--primary-base); color: var(--text-contrast); }
.btn-brand:hover  { background: var(--primary-hover); }
.btn-brand:active { background: var(--primary-active); }

/* Icon-button — hover/active в IM-овом 8/12% black */
.icon-btn:hover  { background: var(--bg-container-hover); }
.icon-btn:active { background: var(--bg-container-active); }

/* Фокус-кольцо — IM: 4px blur, 50% opacity primary, без жёсткой рамки */
button:focus-visible,
a:focus-visible,
.input:focus-visible,
[role="button"]:focus-visible {
  box-shadow: var(--shadow-focus-primary);
}
.btn-danger:focus-visible        { box-shadow: var(--shadow-focus-danger); }
.input:focus,
.search-input:focus,
.qty-input:focus {
  border-color: var(--primary-base);
  box-shadow: var(--shadow-focus-primary);
}
.input:hover:not(:focus),
.qty-input:hover:not(:focus)     { border-color: var(--neutral-65); }
.search-input:focus              { background: var(--bg-container); }

/* Search-bar — фоновая «тихая» подложка через 8%-black overlay */
.search-input { background: var(--neutral-30); }
.search-input:hover { background: var(--neutral-40); }

/* Toggle — primary on (thrush) уже наследуется через --primary */

/* Tabbar — активный таб: primary-base (DS sItem selected) */
.tab.on { color: var(--primary-base); }
.tab.on::before { background: var(--primary-base); }

/* Filter-chip on — теплый брендовый тон */
.filter-chip.on        { background: var(--primary-base); color: var(--text-contrast); border-color: var(--primary-base); }
.filter-chip.on:hover  { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Event primary action — IM neutral-emphasis: dark neutral-100 */
.event-action-btn.primary {
  background: var(--neutral-100);
  color: var(--text-contrast);
}
.event-action-btn.primary:hover  { background: var(--neutral-90); }
.event-action-btn.primary:active { background: var(--neutral-110); }
.event-action-btn.danger {
  background: var(--danger-bg);
  color: var(--danger-base);
}

/* Tooltip — IM: dark neutral-100, стрелка, тень */
#tooltip {
  background: var(--neutral-100);
  color: var(--text-contrast);
  font-size: 12px;
  line-height: 18px;
  padding: 6px 10px;
  max-width: 200px;
  border-radius: var(--r-sm);
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.4);
}

/* Message — DS shadow */
.msg-item { 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); }

/* Auth logo — brand teal */
.auth-logo { color: var(--primary-base); }

/* Brand-chip — унифицирован с .badge: та же высота, паддинг, бордер */
.brand-chip {
  height: 22px;
  padding: 0 8px;
  background: var(--neutral-30);
  color: var(--text-primary);
  border-radius: var(--r-sm);
  border: 1px solid var(--neutral-50);
  font-size: 12px;
  font-weight: 400;
  gap: 4px;
}
.brand-chip-logo { height: 12px; }
.brand-chip-logo svg { height: 12px; }

/* Badges — DS Tag outlined: 4px radius, 1px border, height 22px */
.badge {
  border-radius: var(--r-sm);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  padding: 0 8px;
  height: 22px;
  border: 1px solid transparent;
}
.badge-red    { background: var(--red-10);     color: var(--red-70);              border-color: var(--red-30); }
.badge-orange { background: var(--orange-10);  color: var(--orange-70);           border-color: var(--orange-30); }
.badge-yellow { background: var(--gold-10);    color: var(--gold-70);             border-color: var(--gold-30); }
.badge-green  { background: var(--green-10);   color: var(--green-70);            border-color: var(--green-30); }
.badge-gray   { background: var(--neutral-30); color: var(--text-complimentary);  border-color: var(--neutral-50); }
.badge-soft   { background: var(--neutral-30); color: var(--text-secondary);      border-color: var(--neutral-45); }

/* Role-badge — admin/km/guest как IM-теги (base уже исправлен, здесь только цвета) */
.role-badge[data-role="km"]    { background: var(--blue-10);  color: var(--blue-70); }
.role-badge[data-role="guest"] { background: var(--green-10); color: var(--green-70); }

/* Таблица — IM table: neutral-20 хедер, neutral-80 текст, без uppercase */
.products-table th {
  background: var(--neutral-20);
  color: var(--text-complimentary);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--neutral-50);
}
.products-table th:hover { color: var(--text-primary); background: var(--neutral-30); }
.products-table td       { color: var(--text-primary); font-size: 13px; border-bottom: 1px solid var(--neutral-30); }
.products-table tr:hover td  { background: var(--neutral-20); }
.products-table tr:active td { background: var(--bg-container-active); }
.products-table tr.shortage td        { background: var(--red-10); }
.products-table tr.shortage:hover td  { background: var(--red-20); }

/* Карточки — IM: 1px neutral-50 border, 8px radius, без тени по умолчанию */
.product-row,
.event-card,
.incoming-row,
.log-item {
  border-radius: var(--r-lg);
  border-color: var(--line-divider);
}
.product-row:hover,
.event-card:hover,
.incoming-row:hover,
.log-item:hover {
  border-color: var(--line-border);
  box-shadow: none;
}

/* Sheet / Modal — мобиле без нижних радиусов; десктоп DS: 8px */
.sheet, .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-3); }
@media (min-width: 768px) {
  .sheet, .modal { border-radius: var(--r-lg); }
}
.sheet-backdrop, .modal-backdrop {
  background: var(--bg-mask);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Stock progress bar — переиспользуем семантические цвета */
.stock-bar-seg.seg-reserved { background: var(--primary-base); }
.stock-bar-seg.seg-warn     { background: var(--warning-base); }
.stock-bar-seg.seg-free     { background: var(--positive-base); }

/* Stock summary card — IM card: белый фон + серая рамка вместо плотной заливки */
.stock-summary-card {
  background: var(--bg-primary);
  border: 1px solid var(--line-border);
  border-radius: var(--r-lg);
}

/* Empty state — IM: нейтральная подложка вместо тёплой бежевой */
.empty-icon { background: var(--neutral-30); }
.empty-icon svg { fill: var(--text-secondary); }

/* Колоночные настройки / dropdown / export-menu — IM popover: 8px радиус, shadow-2 */
.export-menu, .col-settings-panel {
  border: 1px solid var(--line-divider);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* Group / sheet section — IM «overline»: 12px Roboto Medium, без uppercase */
.product-group-header,
.sheet-section-title,
.variant-breakdown-title {
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-complimentary);
}

/* Stock stat values — крупные цифры как IM «statistic»: tnum, neutral-100 */
.stock-stat-value { font-feature-settings: "tnum"; letter-spacing: 0; }
.product-stock-num,
.tbl-stock-num,
.comp-free-num { font-feature-settings: "tnum"; letter-spacing: 0; }

/* Card на мобильных — clean white вместо тёплой подложки */
.incoming-form { background: var(--bg-complimentary); border: 1px solid var(--line-divider); }

/* Selection — нейтральный 8% black */
::selection { background: var(--bg-container-active); }

/* Switch (toggle-track) — disabled / off неактивный фон IM-овый neutral-50 */
.toggle-track { background: var(--neutral-50); }
.toggle input:checked ~ .toggle-track { background: var(--primary-base); }

/* Select arrow — поправляем цвет под IM neutral-70 */
.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='%238C8C8C' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
}

/* Sidebar (десктоп) — белый фон, IM-овая рамка */
@media (min-width: 768px) {
  .sidebar          { background: var(--bg-primary); border-right: 1px solid var(--line-divider); }
  .topbar           { background: var(--bg-primary); border-bottom: 1px solid var(--line-divider); }
  .tabbar           { background: var(--bg-primary); border-top: none; border-right: 1px solid var(--line-divider); }
  .plans-tabs       { display: none; }
  .detail-panel.on  { border-left: 1px solid var(--line-divider); }
}

/* ═══════════════════════════════════════════════════════════════
   IM AUDIT — финальный полировальный слой
   Убирает: transform:scale на press · uppercase/letter-spacing ·
   хардкод-красные · разнобой font-weight · нерегулярные высоты
   контролов. Каскадно поверх всего предыдущего.
   ═══════════════════════════════════════════════════════════════ */

/* IM: «no spring» — никаких scale на press */
.fab:active,
.filter-chip:active,
.product-row:active,
.btn:active,
.btn:active:not(:disabled) { transform: none; }

/* IM-typography polish — везде weight 500, без letter-spacing */
.btn,
.modal-title,
.product-name,
.product-detail-title,
.event-action-btn,
.event-title,
.incoming-title,
.product-stock-num,
.tbl-stock-num,
.stock-stat-value,
.comp-free-num,
.topbar-title,
.scan-overlay-title { font-weight: 500; letter-spacing: 0; }

/* Modal title — IM h2: 16/24 medium */
.modal-title { font-size: 16px; line-height: 24px; }

/* Sheet / detail title — IM h1: 24/32 medium */
.product-detail-title { font-size: 24px; line-height: 32px; }

/* Topbar title — IM h2 */
.topbar-title { font-size: 16px; line-height: 24px; }

/* Product card name — body emphasis: 14/20 medium (не 15/600) */
.product-name { font-size: 14px; line-height: 20px; }
.event-title  { font-size: 14px; line-height: 20px; }
.incoming-title { font-size: 14px; line-height: 20px; }

/* Statistics — крупные цифры остаются жирными (700) для контраста,
   но без отрицательного letter-spacing */
.product-stock-num { font-size: 20px; line-height: 24px; font-weight: 700; }
.stock-stat-value  { font-size: 22px; line-height: 28px; font-weight: 700; }
.comp-free-num     { font-size: 18px; line-height: 24px; font-weight: 600; }

/* Высоты контролов — единая шкала IM:
   large = 40px (primary touch), medium = 32px, small = 24px */
.btn      { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-sm   { height: 32px; padding: 0 12px; font-size: 13px; }
.input,
.search-input { height: 40px; }
.input        { font-size: 14px; }               /* IM body-2 */
.search-input { font-size: 14px; }
.input-scan-btn { height: 40px; width: 40px; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--r-md); }

/* Хардкод-красные → токены IM */
.btn-danger:active                { background: var(--danger-active); }
.event-action-btn.danger          { background: var(--red-10); color: var(--red-70); }
.event-action-btn.danger:hover    { background: var(--red-20); }
.event-action-btn.danger:active   { background: var(--red-30); }
.product-row.shortage             { background: var(--red-10); border-color: var(--red-30); }
.products-table tr.shortage td    { background: var(--red-10); }
.products-table tr.shortage:hover td { background: var(--red-20); }

/* .tb-btn уже определён выше с height: 40px; width: 40px */

/* Лог-фильтры приведены к 32px высоте (medium IM control) */
.log-filter-select,
.log-filter-input,
.log-filter-date,
.plans-tab,
.event-action-btn { height: 32px; }

/* Tab-label: мобиле — IM caption-2: 12/16; десктоп — 14/20 Medium */
.tab-label { font-size: 12px; line-height: 16px; }
@media (min-width: 768px) { .tab-label { font-size: 14px; line-height: 20px; } }

/* Иконкам в заголовках/тулбаре — IM 16px inline */
.product-truck-icon svg { width: 14px; height: 14px; }
.stock-warn-icon svg    { width: 14px; height: 14px; }

/* Копируемый артикул */
.article-copy { cursor: copy; transition: color .12s; }
.article-copy:hover { color: var(--primary-base); }

/* DS radioGroupButton — button-style radio */
.rb-group { display: flex; gap: 2px; flex-wrap: wrap; }
.rb-btn {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--neutral-50);
  background: var(--neutral-10);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
  border-radius: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.rb-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.rb-btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rb-btn:only-child  { border-radius: var(--r-sm); }
.rb-btn.on { background: var(--primary-base); border-color: var(--primary-base); color: #fff; z-index: 1; }
.rb-btn:not(.on):hover  { background: var(--neutral-30); border-color: var(--neutral-65); }
.rb-btn:not(.on):active { background: var(--neutral-40); }

/* Group / day / section overlines — IM 12 medium (без uppercase) */
.log-day-header,
.product-group-header,
.sheet-section-title,
.variant-breakdown-title { font-size: 12px; line-height: 16px; padding-bottom: 4px; }

/* Modal / sheet padding — единый 16px (var(--s-md)) */
.modal-header { padding: 16px; }
.modal-footer { padding: 16px; gap: var(--s-xs); }
.sheet-body   { padding: 16px 16px 24px; }

/* Action grid — единый 8px gap между кнопками */
.action-row,
.action-secondary-row { gap: var(--s-xs); }

/* Modal backdrop / sheet backdrop — IM bg-mask, без блюра */
.sheet-backdrop, .modal-backdrop { background: var(--bg-mask); }

/* Tooltip — IM dark capsule, не brand */
#tooltip { background: var(--neutral-100); color: var(--text-contrast); }

/* Toast — IM neutral, без подсветки */

/* ═══════════════════════════════════════════════════════════
   DS Components — Modal / Form / Button / Switch / Upload
   ═══════════════════════════════════════════════════════════ */

/* ── Modal shadow — DS 3-layer (comp-modal.html) ─────────── */
.modal {
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.08),
              0 9px 28px 0   rgba(0,0,0,.05),
              0 12px 48px 16px rgba(0,0,0,.03);
}

/* ── Modal desktop layout — DS padding 20/24 ─────────────── */
@media (min-width: 768px) {
  .modal-header { padding: 20px 24px 12px; }
  .modal-body   { padding: 0 24px 16px; }
  .modal-footer {
    display: flex;
    gap: var(--s-xs);
    justify-content: flex-end;
    padding: 12px 24px 20px;
  }
  /* Кнопки в модалке — DS medium 32px */
  .modal-footer .btn { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; }
  /* Футер резервов — CSV слева, Сохранить справа */
  .res-modal-footer { justify-content: space-between; }
  .res-modal-footer .btn { flex-shrink: 0; }

  /* Панель фильтров резервов — desktop padding */
  .modal-controls { padding: 0 24px var(--s-sm); }

  /* Confirm modal — DS small (360px, padding 12/16) */
  #conf-modal { width: 360px; max-width: 360px; }
  #conf-modal .modal-header { padding: 12px 16px; }
  #conf-modal .modal-body   { padding: 0 16px 16px; }
  #conf-modal .modal-footer { padding: 12px 16px; }

  /* Заголовок модалки — DS 16/500, кнопка закрытия — выровнена */
  .modal-header .icon-btn { margin: -4px -8px -4px 0; flex-shrink: 0; }
}

/* ── Form — DS field spec (comp-form.html) ───────────────── */
.field       { gap: 4px; }
.field-label { font-size: 14px; font-weight: 400; color: var(--ink); letter-spacing: 0; }
/* Обязательное поле — звёздочка красным (добавляется в HTML через .field-required) */
.field-required { color: var(--danger-base); margin-left: 2px; }
/* Подсказка под полем */
.field-hint { font-size: 12px; color: var(--muted); line-height: 16px; }
/* Сообщение об ошибке */
.field-error-msg { font-size: 12px; color: var(--danger-base); line-height: 16px; }

/* ── Input — DS disabled state ───────────────────────────── */
.input:disabled,
.input[disabled] {
  background: var(--neutral-40);
  color: var(--text-secondary);
  border-color: var(--neutral-50);
  cursor: not-allowed;
}

/* ── Button — DS secondary hover: primary border + color ─── */
.btn-secondary:hover:not(:disabled) {
  border-color: var(--primary-base);
  color: var(--primary-base);
  background: var(--bg-container);
}

/* ── Switch (Toggle) — DS 44×22, thumb 16×16 ─────────────── */
.toggle { width: 44px; height: 22px; }
.toggle-track { background: var(--neutral-65); }
.toggle-thumb { width: 16px; height: 16px; top: 3px; left: 3px; }
.toggle input:checked ~ .toggle-thumb { transform: translateX(22px); }

/* ── Upload area — DS compact dashed button (comp-upload.html) */
.np-img-upload-empty {
  border: 1px dashed var(--neutral-50);
  border-radius: var(--r-sm);
  background: var(--neutral-20);
  height: 40px;
  padding: 0 var(--s-sm);
  font-size: 14px;
  font-weight: 400;
  color: var(--body);
  gap: 8px;
}
.np-img-upload-empty:hover { border-color: var(--primary-base); color: var(--primary-base); }
.np-img-upload-empty:active { background: var(--primary-bg); }

/* Select states handled by .im-sel-box (custom dropdown) */


/* ── Checkbox — DS 16×16 с брендовой галочкой (comp-checkbox.html) */
.im-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--neutral-50);
  border-radius: 2px;
  background: var(--canvas);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.im-checkbox:hover { border-color: var(--primary-hover); }
.im-checkbox:checked {
  background-color: var(--primary-base);
  border-color: var(--primary-base);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polyline points='3,8.5 6.5,12 13,4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.im-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-primary);
}

/* ═══════════════════════════════════════════════════════════
   Custom Select — DS comp-select.html
   ═══════════════════════════════════════════════════════════ */
.im-sel-wrap { position: relative; display: block; }
.im-sel-box {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--neutral-50);
  border-radius: var(--r-md);
  background: var(--canvas);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  user-select: none;
  transition: border-color .15s, box-shadow .15s;
}
.im-sel-box:hover { border-color: var(--primary-hover); }
.im-sel-box:focus { outline: none; border-color: var(--primary-base); box-shadow: var(--shadow-focus-primary); }
.im-sel-box.open { border-color: var(--primary-base); box-shadow: var(--shadow-focus-primary); }
.im-sel-sm .im-sel-box { height: 32px; font-size: 13px; }
.im-sel-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.im-sel-value.im-sel-placeholder { color: var(--muted-soft); }
.im-sel-arrow {
  color: var(--neutral-50);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 4px;
  transition: transform .15s;
}
.im-sel-box.open .im-sel-arrow { transform: rotate(180deg); }
.im-sel-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--canvas);
  border-radius: var(--r-md);
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  z-index: 400;
  overflow: hidden;
  max-height: 256px;
  overflow-y: auto;
  display: none;
}
.im-sel-dropdown.open { display: block; }
.im-sel-opt {
  padding: 6px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  line-height: 20px;
}
.im-sel-sm .im-sel-opt { font-size: 13px; }
.im-sel-opt:hover,
.im-sel-opt.on { background: var(--primary-bg); color: var(--primary-base); }
.im-sel-opt.im-sel-ph-opt { color: var(--muted-soft); }
.im-sel-opt.im-sel-ph-opt:hover { color: var(--primary-base); }

/* ═══════════════════════════════════════════════════════════
   Custom DatePicker — DS comp-datepicker.html
   ═══════════════════════════════════════════════════════════ */
.dp-wrap { position: relative; display: block; }
.dp-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--neutral-50);
  border-radius: var(--r-md);
  background: var(--canvas);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  user-select: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  box-sizing: border-box;
}
.dp-trigger:hover { border-color: var(--primary-hover); }
.dp-trigger:focus { outline: none; border-color: var(--primary-base); box-shadow: var(--shadow-focus-primary); }
.dp-trigger.open { border-color: var(--primary-base); box-shadow: var(--shadow-focus-primary); }
.dp-sm .dp-trigger { height: 32px; font-size: 13px; padding: 0 8px 0 10px; gap: 4px; }
.dp-val { flex: 1; }
.dp-val.dp-ph { color: var(--muted-soft); }
.dp-icon { color: var(--neutral-70); flex-shrink: 0; display: flex; align-items: center; }
.dp-popup {
  position: fixed;
  width: 240px;
  background: var(--canvas);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
  z-index: 9100;
}
.dp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dp-month-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.dp-nav {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  cursor: pointer; border-radius: var(--r-sm);
  color: var(--muted);
  padding: 0;
}
.dp-nav:hover { background: var(--neutral-30); color: var(--ink); }
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.dp-dow { padding: 2px 0; font-size: 11px; font-weight: 500; color: var(--neutral-70); }
.dp-day {
  padding: 4px 2px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  line-height: 16px;
  border: 1px solid transparent;
}
.dp-day.dp-other { color: transparent; cursor: default; pointer-events: none; }
.dp-day:not(.dp-other):hover { background: var(--primary-bg); color: var(--primary-base); }
.dp-day.dp-today { border-color: var(--primary-base); color: var(--primary-base); }
.dp-day.dp-today:hover { background: var(--primary-bg); }
.dp-day.dp-sel { background: var(--primary-base) !important; color: #fff !important; border-color: var(--primary-base); }

/* ─── Context menu ───────────────────────────────────────── */
.ctx-menu {
  position: fixed;
  z-index: 5000;
  min-width: 180px;
  background: var(--neutral-10);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 4px 0;
  outline: none;
}
.ctx-menu.hidden { display: none; }
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s;
}
.ctx-menu-item:hover { background: var(--bg-container-hover); }
.ctx-menu-item.danger { color: var(--text-danger-strong); }
.ctx-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--neutral-70); }
.ctx-menu-item.danger svg { color: var(--text-danger-strong); }
.ctx-menu-divider { height: 1px; background: var(--line-divider); margin: 4px 0; }

/* Иконка портящегося товара — десктоп-размер */
@media (min-width: 768px) {
  .product-perishable-icon svg { width: 14px; height: 14px; }
}