/* kitchen.css — стили фазы F4 «Меню и склад».
   Только токены из tokens.css (никаких хардкод-цветов) — тёмная тема наследуется сама.
   Моторика — motion.css/CSMotion (reveal, скелетоны, модалы); здесь статичный визуал
   и микро-переходы состояний.
   Разделы: общее экрана → склад → оценка стоимости → сканер → чек → рецепты →
            меню-сетка → требования → покупки → адаптив. */

/* ── Общее ────────────────────────────────────────────────────────── */
.hc-kitchen__content { min-height: 40vh; }

.hc-pantry__toolbar,
.hc-recipes__toolbar,
.hc-shop__toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* ── Склад: фильтр и список ───────────────────────────────────────── */
.hc-pantry__filter {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  margin: var(--sp-4) 0 var(--sp-3);
}

.hc-pantry__grid { display: flex; flex-direction: column; gap: var(--sp-2); }

.hc-pit {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-left: 3px solid transparent;
  border-radius: var(--r); background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.hc-pit:hover { box-shadow: var(--shadow-sm); border-color: var(--line-mid); }
/* Срок годности читается ещё до текста — цветной корешок слева. */
.hc-pit.is-soon    { border-left-color: var(--warn); background: color-mix(in oklab, var(--warn-soft) 34%, var(--surface)); }
.hc-pit.is-expired { border-left-color: var(--danger); background: color-mix(in oklab, var(--danger-soft) 34%, var(--surface)); }

.hc-pit__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.hc-pit__top { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.hc-pit__name {
  font-family: var(--disp); font-size: var(--fs-body); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-pit__qty {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-dim);
  white-space: nowrap; margin-left: auto;
}
.hc-pit__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hc-pit__metatext { font-size: var(--fs-xs); color: var(--ink-dim); }
.hc-pit__badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.hc-pit__actions { display: flex; gap: var(--sp-1); }
.hc-pit__act {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink-dim); cursor: pointer; font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.hc-pit__act:hover { background: var(--brand-soft); color: var(--brand-strong); }
.hc-pit__act:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.hc-pit__act--del:hover { background: var(--danger-soft); color: var(--danger-strong); }

/* ── Оценка стоимости склада ──────────────────────────────────────── */
.hc-value { margin-bottom: var(--sp-4); }
.hc-value__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.hc-value__label { font-size: var(--fs-sm); color: var(--ink-dim); }
.hc-value__amount { font-family: var(--disp); font-size: var(--fs-h2); color: var(--ink); }
/* Полоса = доля позиций с известной ценой. Оценка честная: видно, насколько она полная. */
.hc-value__bar {
  height: 6px; margin: var(--sp-3) 0 var(--sp-2);
  border-radius: var(--r-pill); background: var(--bg-sunk); overflow: hidden;
}
.hc-value__fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-mid), var(--brand));
  transition: width var(--dur-slow) var(--ease-out);
}
.hc-value__sub { margin: 0; font-size: var(--fs-xs); color: var(--ink-dim); }

/* ── Сканер штрихкода (собственный оверлей) ───────────────────────── */
.hc-scan, .hc-receipt {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: oklch(0.16 0.02 340 / 0.62); backdrop-filter: blur(3px);
}
.hc-scan__card, .hc-receipt__card {
  width: min(560px, 100%); max-height: 90vh; overflow: auto;
  padding: var(--sp-5); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.hc-scan__title { margin: 0; font-family: var(--disp); font-size: var(--fs-h3); color: var(--ink); }
.hc-scan__view {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r);
  overflow: hidden; background: var(--surface-inv);
}
.hc-scan__video, .hc-receipt__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Рамка прицела: подсказывает, куда навести, не перекрывая кадр. */
.hc-scan__reticle {
  position: absolute; inset: 18% 12%;
  border: 2px solid var(--ink-on-brand); border-radius: var(--r);
  box-shadow: 0 0 0 100vmax oklch(0.16 0.02 340 / 0.28);
  pointer-events: none;
}
.hc-scan__status, .hc-receipt__status {
  margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); text-align: center;
}
.hc-scan__actions, .hc-receipt__actions {
  display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
}

/* ── Скан чека ────────────────────────────────────────────────────── */
.hc-receipt__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.hc-receipt__title { margin: 0; font-family: var(--disp); font-size: var(--fs-h3); color: var(--ink); }
.hc-receipt__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.hc-receipt__lead { margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); max-width: var(--measure); }
.hc-receipt__choices { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hc-receipt__view { aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--surface-inv); }
.hc-receipt__empty { margin: 0; color: var(--ink-dim); }

.hc-receipt__lines { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 46vh; overflow: auto; padding-right: var(--sp-1); }
.hc-receipt__line {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-sunk);
  transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
/* Исключённая строка гаснет, но остаётся читаемой — её можно вернуть одним кликом. */
.hc-receipt__line.is-off { opacity: 0.5; }
.hc-receipt__fields { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.hc-receipt__nums { display: grid; grid-template-columns: 5rem 7rem 6rem; gap: var(--sp-2); }
.hc-receipt__matchrow { display: flex; }
.hc-receipt__cat { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.hc-receipt__summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.hc-receipt__summlabel { font-size: var(--fs-sm); color: var(--ink-dim); }
.hc-receipt__total { font-family: var(--disp); font-size: var(--fs-h3); color: var(--ink); }

/* ── Автокомплит продукта ─────────────────────────────────────────── */
.hc-ac__box { position: relative; }
.hc-ac__menu {
  position: absolute; z-index: var(--z-dropdown); inset-inline: 0; top: calc(100% + 4px);
  margin: 0; padding: var(--sp-1); list-style: none; max-height: 15rem; overflow: auto;
  border: 1px solid var(--line-mid); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow);
}
.hc-ac__menu[hidden] { display: none; }
.hc-ac__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer;
}
.hc-ac__opt:hover { background: var(--brand-soft); }
.hc-ac__name { color: var(--ink); font-size: var(--fs-sm); }
.hc-ac__meta { color: var(--ink-dim); font-size: var(--fs-xs); white-space: nowrap; }

/* ── Формы модалов склада/рецепта ─────────────────────────────────── */
.hc-item__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.hc-item__barcodeRow { display: flex; gap: var(--sp-2); align-items: center; }
.hc-item__barcodeRow .hc-input { flex: 1 1 auto; min-width: 0; }
.hc-textarea { width: 100%; resize: vertical; font: inherit; }

.hc-recipe__ings { display: flex; flex-direction: column; gap: var(--sp-2); }
.hc-ing-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.hc-ing {
  display: grid; grid-template-columns: 1fr 5rem 7rem auto; gap: var(--sp-2); align-items: end;
}
.hc-ing__prod { margin: 0; }
.hc-ing__del {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-dim); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hc-ing__del:hover { background: var(--danger-soft); color: var(--danger-strong); }

/* ── Рецепты ──────────────────────────────────────────────────────── */
.hc-recipes__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.hc-rc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.hc-rc__title { font-family: var(--disp); font-size: var(--fs-h3); color: var(--ink); }
.hc-rc__actions { display: flex; gap: var(--sp-1); flex: 0 0 auto; }
.hc-rc__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.hc-rc__ings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.hc-rc__ing {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm); color: var(--ink);
}
.hc-rc__ing:last-child { border-bottom: none; }
/* Ингредиент без product_id сопоставляется по названию — помечаем, что связь слабая. */
.hc-rc__ing.is-unlinked .hc-rc__ingname { color: var(--ink-dim); font-style: italic; }
.hc-rc__ingqty { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); white-space: nowrap; }
.hc-rc__noings, .hc-rc__instr { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink-dim); }
.hc-rc__instr { white-space: pre-wrap; max-width: var(--measure); }

/* ── Меню: панель недели ──────────────────────────────────────────── */
.hc-menu__bar { margin-bottom: var(--sp-4); }
.hc-menu__nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hc-menu__range { font-family: var(--disp); font-size: var(--fs-h3); color: var(--ink); }
.hc-menu__navbtn {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); cursor: pointer; font-size: var(--fs-body);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hc-menu__navbtn:hover { background: var(--brand-soft); border-color: var(--brand-mid); }
.hc-menu__navbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }

/* ── Меню: недельная сетка 7 × 4 ──────────────────────────────────── */
.hc-mgrid {
  display: grid; grid-template-columns: 7.5rem repeat(7, minmax(9rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: auto hidden;
  margin-bottom: var(--sp-5);
}
.hc-mgrid > * { background: var(--surface); }
.hc-mgrid__corner { position: sticky; left: 0; z-index: 1; }
.hc-mgrid__day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-3) var(--sp-2);
}
.hc-mgrid__day.is-today { background: var(--brand-soft); }
.hc-mgrid__dow { font-size: var(--fs-xs); color: var(--ink-dim); text-transform: lowercase; }
.hc-mgrid__date { font-family: var(--disp); font-size: var(--fs-sm); color: var(--ink); }
.hc-mgrid__meal {
  position: sticky; left: 0; z-index: 1;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border-right: 1px solid var(--line);
}
.hc-mgrid__mealic { color: var(--brand-mid); }
.hc-mgrid__meallabel { font-size: var(--fs-sm); color: var(--ink-dim); }
.hc-mgrid__cell {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2); min-height: 4.5rem;
}
.hc-mgrid__add {
  align-self: stretch; min-height: 1.9rem;
  border: 1px dashed var(--line-mid); border-radius: var(--r-sm);
  background: none; color: var(--ink-ghost); cursor: pointer; font-size: var(--fs-sm);
  opacity: 0; transition: opacity var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
/* Кнопка «＋» проявляется по наведению/фокусу, чтобы сетка не рябила плюсами.
   На тач-устройствах наведения нет — там она видима всегда (media ниже). */
.hc-mgrid__cell:hover .hc-mgrid__add,
.hc-mgrid__add:focus-visible { opacity: 1; }
.hc-mgrid__add:hover { border-color: var(--brand-mid); color: var(--brand-strong); }
.hc-mgrid__cell:not(.has-plans) .hc-mgrid__add { opacity: 0.55; }

.hc-mplan {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2); border-radius: var(--r-sm);
  background: var(--brand-soft); border: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.hc-mplan.is-cooked { background: var(--ok-soft); opacity: 0.85; }
.hc-mplan__title {
  grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-mplan__serv { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); }
.hc-mplan__cook, .hc-mplan__del {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: none; border-radius: var(--r-sm); background: none;
  color: var(--ink-dim); cursor: pointer; font-size: var(--fs-xs);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hc-mplan__cook:hover { background: var(--ok-soft); color: var(--ok-strong); }
.hc-mplan__cook.is-done { color: var(--ok-strong); cursor: default; }
.hc-mplan__del:hover { background: var(--danger-soft); color: var(--danger-strong); }

/* ── Меню: «нужно / есть / не хватает» ────────────────────────────── */
.hc-req__head, .hc-req__row {
  display: grid; grid-template-columns: 1fr 5.5rem 5.5rem 8rem; gap: var(--sp-2); align-items: center;
}
.hc-req__head {
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-dim);
}
.hc-req__hcol { text-align: right; }
.hc-req__rows { display: flex; flex-direction: column; }
.hc-req__row { padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.hc-req__row:last-child { border-bottom: none; }
.hc-req__name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-req__need, .hc-req__have {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-dim); text-align: right;
}
.hc-req__row.is-short .hc-req__name { font-weight: 600; }
.hc-req__gap { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
/* Построчное «в покупки» (6.7): 44px по обеим сторонам — палец, а не только курсор. */
.hc-req__add {
  flex: none; min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink-dim); cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hc-req__add:hover { color: var(--brand); border-color: var(--brand); }
.hc-req__add:disabled { opacity: 0.45; cursor: default; }
.hc-req__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.hc-req__summary { font-size: var(--fs-sm); color: var(--ink-dim); }

/* ── Покупки ──────────────────────────────────────────────────────── */
.hc-shop__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.hc-shop__grouphead {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); color: var(--ink-dim);
}
.hc-shop__grouphead:first-child { margin-top: 0; }
.hc-shop__allDone { margin: 0; font-size: var(--fs-sm); color: var(--ink-dim); }

.hc-sit {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.hc-sit:hover { border-color: var(--line-mid); }
.hc-sit.is-done { background: var(--bg-sunk); opacity: 0.72; }
/* Вычёркивание — единственный визуальный маркер «куплено», который читается мгновенно. */
.hc-sit.is-done .hc-sit__name { text-decoration: line-through; color: var(--ink-dim); }
.hc-sit__check { margin: 0; }
.hc-sit__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.hc-sit__top { display: flex; align-items: baseline; gap: var(--sp-3); }
.hc-sit__name {
  font-family: var(--disp); font-size: var(--fs-body); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-sit__qty { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-dim); margin-left: auto; white-space: nowrap; }
.hc-sit__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hc-sit__metatext { font-size: var(--fs-xs); color: var(--ink-dim); }
.hc-sit__actions { display: flex; align-items: center; gap: var(--sp-1); }
/* «Куплено ≠ на складе» (6.7): оговорка стоит НАД группой купленного, чтобы её читали
   до того, как решат, что дело сделано. */
.hc-shop__stockhint {
  margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--ink-dim); line-height: 1.5;
}
.hc-sit__act--stock:hover { color: var(--brand); }

/* ── Адаптив ──────────────────────────────────────────────────────── */
@media (hover: none) {
  /* Без наведения кнопка добавления в ячейку должна быть видна всегда. */
  .hc-mgrid__add { opacity: 0.7; }
}

@media (max-width: 720px) {
  .hc-item__row2 { grid-template-columns: 1fr; }
  .hc-ing { grid-template-columns: 1fr auto; grid-template-areas: "prod prod" "qty unit" "del del"; }
  .hc-ing__prod { grid-area: prod; }
  .hc-ing__qty { grid-area: qty; }
  .hc-ing__unit { grid-area: unit; }
  .hc-ing__del { grid-area: del; width: 100%; }
  .hc-receipt__nums { grid-template-columns: 1fr 1fr 1fr; }
  .hc-mgrid { grid-template-columns: 5.5rem repeat(7, minmax(7.5rem, 1fr)); }
  .hc-req__head, .hc-req__row { grid-template-columns: 1fr 4.5rem 6.5rem; }
  /* На узком экране «есть» уходит: важны «нужно» и «не хватает». */
  .hc-req__have, .hc-req__hcol--have { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-value__fill, .hc-mgrid__add, .hc-mplan, .hc-sit, .hc-pit { transition: none; }
}