/* ============================================================================
   fridge-theme.css — освежение таблицы холодильника.
   • светлый фон страницы + белая таблица + мягко-зелёный топбар
   • цветные категории (полоса + ярлык в тон --cat-color из рендера)
   • шрифтовая иерархия: категория > подкатегория > продукт
   • центрирование узких заголовков столбцов
   Подключать ПОСЛЕ fridge-table/layout/components — перебивает их точечно.
   ========================================================================== */

/* ── Фон страницы — светлый холодный, не серо-бежевый ───────────────────── */
.fridge-page {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(5,150,105,.05), transparent 60%),
    #fcfdfe;
}

/* ── Топбар — мягко-зелёный, отделён от белой таблицы ────────────────────── */
.fridge-toprow {
  background: #eef6f3;
  border-bottom: 1px solid rgba(5,150,105,.16);
}
.fridge-title {
  font-family: 'Outfit', 'Unbounded', sans-serif;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -.2px;
}
.fridge-count-row { background: transparent; }

/* ── Обёртка таблицы — чисто-белая, мягкая тень ─────────────────────────── */
.fr-table-wrap {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 4px 24px -10px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.05);
}

/* ── Шрифт Outfit на всю таблицу (перекрывает Onest из fridge-table.css) ── */
.fr-table-wrap .fr-table,
.fr-table-wrap .fr-table td,
.fr-table-wrap .fr-table th,
.fr-table-wrap .fr-table .fi-qty-btn,
.fr-table-wrap .fr-table .fi-qty-val,
.fr-table-wrap .fr-table button {
  font-family: 'Outfit', 'Onest', sans-serif;
}

/* ── Заголовки столбцов ─────────────────────────────────────────────────── */
.fr-table .ft-th {
  background: #f6faf9;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #5b7c74;
  letter-spacing: .8px;
  border-bottom: 1px solid rgba(5,150,105,.14);
}
.fr-table .ft-th:hover { background: #eaf5f1; color: #0f766e; }
.fr-table .ft-th.active { color: #059669; }

/* Центрируем узкие колонки-заголовки; Название/Бренд тоже по центру */
.fr-table th.ft-unit,
.fr-table th.ft-qty,
.fr-table th.ft-pkg-size,
.fr-table th.ft-days,
.fr-table th.ft-exp,
.fr-table th.ft-kbju,
.fr-table th.ft-name,
.fr-table th.ft-brand { text-align: center; }

/* Ширина: Название шире, Бренд уже (логотипы убраны) */
.fr-table .ft-name  { width: 320px; }
.fr-table .ft-brand { width: 120px; }
/* Бренд — контент по центру */
.fr-table td.ft-brand { text-align: center; }
.fr-table td.ft-brand .brand-cell { justify-content: center; }

/* ── Строки продуктов ───────────────────────────────────────────────────── */
.fr-row td { background: #ffffff; }
.fr-row:hover td { background: rgba(5,150,105,.04); }
.fr-table .ft-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: #0f172a;
}

/* ══ Заголовок КАТЕГОРИИ — цвет по --cat-color (прокинут из рендера) ══════ */
.fr-cat-row td {
  background: color-mix(in srgb, var(--cat-color, #94a3b8) 7%, #ffffff) !important;
  border-bottom: 1px solid rgba(15,23,42,.06);
  border-top: 1px solid rgba(15,23,42,.05);
}
.fr-cat-row:hover td {
  background: color-mix(in srgb, var(--cat-color, #94a3b8) 12%, #ffffff) !important;
}
/* Цветная полоса слева во всю высоту строки категории */
.fr-cat-inner {
  position: relative;
  padding-left: 16px;
}
.fr-cat-inner::before {
  content: '';
  position: absolute;
  left: 0; top: -8px; bottom: -8px;
  width: 4px;
  background: var(--cat-color, #94a3b8);
  border-radius: 0 3px 3px 0;
}
/* Ярлык категории — залит её цветом, текст — насыщенный тёмный вариант */
.fr-cat-label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  color: color-mix(in srgb, var(--cat-color, #475569) 60%, #0f172a) !important;
  background: color-mix(in srgb, var(--cat-color, #94a3b8) 18%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--cat-color, #94a3b8) 35%, transparent) !important;
}
.fr-cat-emoji { font-size: 15px; }
.fr-cat-count {
  font-family: 'Outfit', sans-serif;
  background: rgba(15,23,42,.05);
  border: none;
  color: #64748b;
}

/* ══ Подкатегория — тоньше, серее, явно вложена ══════════════════════════ */
.fr-subcat-row td {
  background: #fafbfc !important;
  border-bottom: 1px solid rgba(15,23,42,.04);
}
.fr-subcat-clickable:hover td { background: rgba(5,150,105,.045) !important; }
.fr-subcat-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #94a3b8;
  letter-spacing: .07em;
}
.fr-subcat-inner { padding-left: 34px; }

/* ── КБЖУ-пилюля — мягкая зелёная вместо серой ──────────────────────────── */
.kbju-pill {
  background: rgba(5,150,105,.08) !important;
  border: 1px solid rgba(5,150,105,.18) !important;
}
.kbju-pill .kp-cal { color: #047857 !important; font-weight: 700; }
.kbju-pill .kp-label { color: #0f766e !important; }
.fr-row:hover .kbju-pill { background: rgba(5,150,105,.14) !important; }

/* ── Бренд — чуть контрастнее ────────────────────────────────────────────── */
.brand-name {
  font-family: 'Outfit', sans-serif;
  color: #475569;
}

/* ── Кол-во: значение пожирнее ──────────────────────────────────────────── */
.fi-qty-val { font-family: 'Outfit', sans-serif; font-weight: 700; color: #0f172a; }

/* ── Фоллбэк для старых браузеров без color-mix ─────────────────────────── */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .fr-cat-row td       { background: #f4f7fb !important; }
  .fr-cat-label        { color: #0f766e !important; background: rgba(5,150,105,.1) !important; border-color: rgba(5,150,105,.25) !important; }
}

/* ============================================================================
   СПИСОК ПОКУПОК (drawer) — расцветка
   ========================================================================== */
.sl-panel-drawer { background: #fcfdfe; }
.sl-panel-header {
  background: linear-gradient(135deg, rgba(5,150,105,.06) 0%, rgba(255,255,255,0) 70%);
  border-bottom: 1px solid rgba(5,150,105,.14);
}
.sl-panel-title { font-family: 'Outfit', sans-serif; font-weight: 700; color: #0f172a; }
.sl-cat-label {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  color: #0f766e; text-transform: uppercase; letter-spacing: .06em;
}
.sl-item {
  font-family: 'Outfit', sans-serif;
  background: #fff;
  border: 1px solid rgba(15,23,42,.07) !important;
  border-radius: 10px;
  margin-bottom: 6px;
  padding: 9px 11px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: border-color .12s, box-shadow .12s;
}
.sl-item:last-child { border-bottom: 1px solid rgba(15,23,42,.07) !important; }
.sl-item:hover { border-color: rgba(5,150,105,.3) !important; box-shadow: 0 2px 10px -4px rgba(5,150,105,.2); background: #fff; }
.sl-name { font-family: 'Outfit', sans-serif; font-weight: 500; color: #0f172a; }
.sl-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sl-brand { font-family: 'Outfit','Onest',sans-serif; font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.sl-check { border: 1.5px solid rgba(5,150,105,.4); border-radius: 6px; transition: all .12s; }
.sl-check:hover { border-color: #059669; background: rgba(5,150,105,.08); }
.sl-qty-val { font-family: 'Outfit', sans-serif; font-weight: 700; color: #0f172a; }
.sl-qty-btn { border-radius: 6px; }
.sl-add-btn { background: linear-gradient(135deg,#059669 0%,#047857 100%) !important; border: none !important; }
.sl-total { font-family: 'Outfit', sans-serif; }
.sl-total strong { color: #047857 !important; }
/* спрятать старую заглушку-логотип, если осталась */
.sl-item .item-logo-ph { display: none !important; }

/* ============================================================================
   ПАНЕЛЬ «СРОКИ» — цветные полосы по статусу + белые карточки
   ========================================================================== */
.exp-panel-drawer { background: #fcfdfe; }
.exp-panel-header {
  background: linear-gradient(135deg, rgba(5,150,105,.06) 0%, rgba(255,255,255,0) 70%);
  border-bottom: 1px solid rgba(5,150,105,.14);
}
.exp-panel-title { font-family: 'Outfit', sans-serif; font-weight: 700; color: #0f172a; }
.exp-tab-btn { font-family: 'Outfit', sans-serif; font-weight: 600; }
.exp-section-title { font-family: 'Outfit', sans-serif; font-weight: 700; }

.exp-item {
  font-family: 'Outfit', sans-serif;
  position: relative;
  background: #fff;
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 12px;
  padding-left: 16px;
  box-shadow: 0 2px 10px -6px rgba(15,23,42,.12);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.exp-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 12px 0 0 12px;
  background: var(--exp-bar, #94a3b8);
}
.exp-item:hover {
  transform: translateY(-1px);
  border-color: rgba(5,150,105,.25);
  box-shadow: 0 6px 18px -8px rgba(5,150,105,.25);
}
.exp-item-name { font-family: 'Outfit', sans-serif; font-weight: 600; color: #0f172a; }
.ef-brand { font-family: 'Outfit', sans-serif; font-weight: 600; color: #94a3b8; font-size: 11px; }
/* кнопка «Съел» в панели — зелёная */
.ef-done-btn {
  background: rgba(5,150,105,.1); border: 1px solid rgba(5,150,105,.25);
  color: #059669; border-radius: 50%;
  width: 26px; height: 26px; cursor: pointer; font-weight: 700;
  transition: all .12s;
}
.ef-done-btn:hover { background: #059669; color: #fff; border-color: #059669; }

/* ============================================================================
   ФОРМА ТОВАРА (drawer add/edit) — оживить серый вид
   ========================================================================== */
.drawer-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 18px;
  color: #0f172a; letter-spacing: -.3px;
}
.df-label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  text-transform: uppercase; letter-spacing: .7px;
  color: #5b7c74 !important;
}
.df-input, .df-select, .df-textarea {
  font-family: 'Outfit', sans-serif !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 10px !important;
  transition: border-color .18s, box-shadow .18s;
}
.df-input:focus, .df-select:focus, .df-textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important;
  outline: none;
}
/* Заголовок секции КБЖУ — с зелёной чертой */
.drawer-section-title {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  color: #0f766e; text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.drawer-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(5,150,105,.25), transparent);
}
/* Кнопки формы */
.btn-save {
  background: linear-gradient(135deg,#059669 0%,#047857 100%) !important;
  border: none !important; color: #fff !important;
  font-family: 'Outfit', sans-serif !important; font-weight: 600;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(5,150,105,.25);
  transition: transform .16s, box-shadow .16s;
}
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(5,150,105,.32); }
.btn-cancel {
  font-family: 'Outfit', sans-serif !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
}
.btn-cancel:hover { border-color: rgba(5,150,105,.3) !important; background: #f0fdf9 !important; }
.btn-delete { font-family: 'Outfit', sans-serif !important; border-radius: 10px !important; }
/* Оценка — активные звёзды зелёные */
.df-rating-btn.active { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.df-rating-btn { font-family: 'Outfit', sans-serif; border-radius: 7px; transition: all .1s; }

/* ============================================================================
   ФИКС: шрифт Outfit во всей панели «Сроки» (перекрывает Onest из layout)
   ========================================================================== */
.exp-panel-drawer,
.exp-panel-drawer .exp-item,
.exp-panel-drawer .exp-item-name,
.exp-panel-drawer .exp-item-meta,
.exp-panel-drawer .ef-brand,
.exp-panel-drawer .exp-section-title,
.exp-panel-drawer .exp-tab-btn,
.exp-panel-drawer .exp-panel-title,
.exp-panel-drawer .ef-days,
.exp-panel-drawer button,
.exp-panel-drawer span,
.exp-panel-drawer div {
  font-family: 'Outfit', 'Onest', sans-serif !important;
}

/* ============================================================================
   Крупные эмодзи в заголовках категорий таблицы
   ========================================================================== */
.fr-cat-emoji {
  font-size: 22px !important;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(15,23,42,.12));
}
/* эмодзи в подкатегориях списка покупок/сроков чуть крупнее тоже */
.exp-panel-drawer .fr-cat-emoji { font-size: 20px !important; }

/* ============================================================================
   РЯД ЧИПОВ-КАТЕГОРИЙ над таблицей
   ========================================================================== */
.fr-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 2px 14px;
  align-items: center;
}
.fr-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: #334155;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--chip-color, #cbd5e1) 45%, #ffffff);
  border-radius: 10px;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s, box-shadow .14s, background .14s, border-color .14s;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.fr-cat-chip:hover {
  transform: translateY(-1px);
  border-color: var(--chip-color, #94a3b8);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--chip-color, #94a3b8) 50%, transparent);
}
.fr-cat-chip.active {
  background: color-mix(in srgb, var(--chip-color, #94a3b8) 22%, #ffffff);
  border-color: var(--chip-color, #94a3b8);
  color: color-mix(in srgb, var(--chip-color, #475569) 65%, #0f172a);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--chip-color, #94a3b8) 55%, transparent);
}
.fr-chip-emoji { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(15,23,42,.1)); }
.fr-chip-name  { font-family: 'Outfit', sans-serif; font-weight: 600; }
.fr-chip-count {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: #64748b;
  background: rgba(15,23,42,.06);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 14px;
  text-align: center;
}
.fr-cat-chip.active .fr-chip-count {
  background: color-mix(in srgb, var(--chip-color, #94a3b8) 35%, #ffffff);
  color: color-mix(in srgb, var(--chip-color, #334155) 70%, #0f172a);
}
/* Чип «Все» — нейтральный зелёный акцент */
.fr-cat-chip.fr-chip-all {
  --chip-color: #059669;
  font-weight: 700;
}
/* Фоллбэк без color-mix */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .fr-cat-chip { border-color: #d1d5db; }
  .fr-cat-chip.active { background: #f0fdf9; border-color: #059669; color: #047857; }
}