/* Рабочий инструмент, в который смотрят по 50 раз в день во время разговора
   с клиентом. Поэтому таблица, а не карточки: взгляд должен бежать по
   колонкам. Приоритеты — плотность, выравнивание цифр, читаемость.

   Три темы. Выбранная запоминается в браузере и действует и на витрине,
   и в панели управления. Все цвета — только через переменные: если где-то
   зашить цвет числом, он не переключится вместе с темой. */

/* --- светлая, как в Excel (по умолчанию) ----------------------------------- */
:root,
:root[data-тема="светлая"] {
  --фон: #ffffff;
  --текст: #1f2328;
  --приглушённый: #656d76;
  --рамка: #e4e7eb;
  --рамка-сильная: #c9d1d9;
  --полоса: #edf0f4;
  --шапка: #eef1f4;
  --наведение: #e8f0fe;
  --есть: #1a7f37;
  --нет: #9aa1a9;
  --мало: #9a6700;
  --тревога: #b42318;
  --акцент: #217346;          /* зелёный, как в Excel */
  --на-акценте: #ffffff;
}

/* Ширины колонок — ОТДЕЛЬНЫМ правилом, а не внутри темы.
   ⚠️ Если объявить их в селекторе `:root[data-тема="светлая"]`, они окажутся
   специфичнее, чем `:root` в медиазапросе для телефона, и узкий экран получит
   пять колонок вместо двух. Специфичность бьёт порядок следования. */
:root {
  --сетка: minmax(0, 1fr) 74px 92px 92px 92px;
}

/* --- тёмная ---------------------------------------------------------------- */
:root[data-тема="тёмная"] {
  --фон: #14171a;
  --текст: #e6e8eb;
  --приглушённый: #9aa1a9;
  --рамка: #262b31;
  --рамка-сильная: #333a42;
  --полоса: #1e242a;
  --шапка: #1c2126;
  --наведение: #232a31;
  --есть: #4ade80;
  --нет: #6b7280;
  --мало: #fbbf24;
  --тревога: #f87171;
  --акцент: #7aa2ff;
  --на-акценте: #10141a;
}

/* --- бело-розовая ---------------------------------------------------------- */
:root[data-тема="розовая"] {
  --фон: #ffffff;
  --текст: #33202b;
  --приглушённый: #8b6b7a;
  --рамка: #f5dde7;
  --рамка-сильная: #eab8cd;
  --полоса: #f9e4ee;
  --шапка: #fceaf1;
  --наведение: #fde4ef;
  --есть: #1a7f37;
  --нет: #b99aa8;
  --мало: #9a6700;
  --тревога: #b42318;
  --акцент: #d6336c;
  --на-акценте: #ffffff;
}

/* Атрибут hidden обязан побеждать любой display из классов. Без этого
   правила форма входа с display:flex остаётся на экране после входа. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--фон);
  color: var(--текст);
  font: 13px/1.25 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* --- шапка ---------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--фон);
  border-bottom: 1px solid var(--рамка-сильная);
  padding: 6px 8px;
  padding-top: max(6px, env(safe-area-inset-top));
}

.шапка {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

h1 { font-size: 14px; margin: 0; font-weight: 700; }

.справа-в-шапке { display: flex; align-items: center; gap: 8px; }

.свежесть { font-size: 11px; color: var(--приглушённый); white-space: nowrap; }

/* --- переключатель темы ---------------------------------------------------- */

.темы { display: flex; gap: 3px; }

.тема-кнопка {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--рамка-сильная);
  border-radius: 3px;
  cursor: pointer;
  line-height: 0;
}
.тема-кнопка[aria-pressed="true"] {
  outline: 2px solid var(--акцент);
  outline-offset: 1px;
}
.тема-кнопка.светлая { background: #ffffff; }
.тема-кнопка.тёмная  { background: #14171a; }
.тема-кнопка.розовая { background: linear-gradient(135deg, #ffffff 45%, #f3a8c4 55%); }

.тревога {
  background: var(--тревога);
  color: #fff;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 3px;
  margin-bottom: 6px;
}

#поиск {
  width: 100%;
  font-size: 16px;               /* меньше 16px — iOS зумит страницу при фокусе */
  padding: 7px 10px;
  border: 1px solid var(--рамка-сильная);
  border-radius: 4px;
  outline: none;
  background: var(--фон);
  color: var(--текст);
}
#поиск:focus { border-color: var(--акцент); }

/* --- заголовок колонок ----------------------------------------------------- */

.колонки {
  display: grid;
  grid-template-columns: var(--сетка);
  gap: 0 8px;
  align-items: center;
  padding: 4px 8px;
  background: var(--шапка);
  border-bottom: 1px solid var(--рамка-сильная);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--приглушённый);
}

/* --- строки таблицы -------------------------------------------------------- */

.товар {
  display: grid;
  grid-template-columns: var(--сетка);
  gap: 0 8px;
  align-items: baseline;
  padding: 4px 8px;
  border-bottom: 1px solid var(--рамка);
  cursor: pointer;
}
.товар:nth-child(even) { background: var(--полоса); }
.товар:hover { background: var(--наведение); }

.название {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.цифра {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.остаток { font-weight: 700; }
.остаток.есть { color: var(--есть); }
.остаток.нет  { color: var(--нет); font-weight: 400; }

.цена.рынок { font-weight: 600; }
.цена.нет-цены { color: var(--нет); }

.заголовок-группы {
  background: var(--шапка);
  border-top: 1px solid var(--рамка-сильная);
  border-bottom: 1px solid var(--рамка);
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--приглушённый);
}
/* Путь к папке — мелко и бледно, само имя папки — заметно. Вложенность
   дополнительно показана отступом слева (его ставит JS по глубине). */
.заголовок-группы .путь-группы { opacity: .55; font-weight: 400; }
.заголовок-группы .имя-группы { color: var(--текст); }

/* --- раскрытая строка ------------------------------------------------------ */

/* Боковых отступов и рамок тут быть не должно: они сдвигали бы внутренние
   колонки относительно колонок таблицы на 9 px, и «Москва» не вставала бы
   ровно под «Нал». Поэтому только линии сверху и снизу. */
.подробности {
  grid-column: 1 / -1;
  margin: 5px 0 3px;
  padding: 6px 0;
  background: var(--фон);
  border-top: 1px solid var(--рамка-сильная);
  border-bottom: 1px solid var(--рамка-сильная);
  cursor: default;
  font-size: 12px;
}

.подробности .пара {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.подробности .пара + .пара { border-top: 1px dotted var(--рамка); }
.подробности .имя { color: var(--приглушённый); }
.подробности .знач { font-variant-numeric: tabular-nums; font-weight: 600; }
.подробности .знач.минус { color: var(--тревога); }
.подробности .для-клиентов { margin-top: 6px; font-size: 11px; color: var(--приглушённый); opacity: .8; }

/* Сравнение обычных и московских цен — строками, чтобы разница читалась
   по вертикали: под «нал» стоит «нал», под «рынком» — «рынок». */
.сравнение {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr 1fr 1fr;
  gap: 2px 10px;
  margin: 2px 0 4px;
  font-variant-numeric: tabular-nums;
}
.сравнение .ячейка { text-align: right; }
.сравнение .подпись { text-align: left; color: var(--приглушённый); }
.сравнение .шапка-сравнения {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--приглушённый);
  letter-spacing: .3px;
}
.сравнение .москва { color: var(--акцент); font-weight: 600; }

.подзаголовок {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--приглушённый);
  margin: 7px 0 2px;
}
.подзаголовок:first-child { margin-top: 0; }

.запас { font-size: 11px; }
.запас.мало   { color: var(--мало); }
.запас.срочно { color: var(--тревога); font-weight: 700; }

.подсказка {
  color: var(--приглушённый);
  font-size: 13px;
  padding: 14px 10px;
}

/* --- вход (нужен только для правки веса и габаритов) ------------------------ */

.ссылка-кнопка {
  border: 1px solid var(--рамка-сильная);
  background: transparent;
  color: var(--приглушённый);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
}
.кто-я { font-size: 11px; color: var(--приглушённый); white-space: nowrap; }

.вход {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--фон);
}
.карточка-входа {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.карточка-входа h1 { font-size: 16px; margin: 0; }
.пояснение-входа { font-size: 12px; color: var(--приглушённый); }
.карточка-входа label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.карточка-входа input {
  font-size: 16px;             /* меньше 16px — iOS зумит страницу */
  padding: 8px 10px;
  border: 1px solid var(--рамка-сильная);
  border-radius: 4px;
  background: var(--фон);
  color: var(--текст);
}
.карточка-входа button[type="submit"] {
  font-size: 14px;
  padding: 9px;
  border: 0;
  border-radius: 4px;
  background: var(--акцент);
  color: var(--на-акценте);
  cursor: pointer;
}
.ошибка { color: var(--тревога); font-size: 12px; }

/* --- правка веса и габаритов прямо в раскрытой строке ----------------------- */

.правка-поле {
  width: 90px;
  font: inherit;
  text-align: right;
  padding: 1px 4px;
  border: 1px solid var(--рамка-сильная);
  border-radius: 3px;
  background: var(--фон);
  color: var(--текст);
  font-variant-numeric: tabular-nums;
}
.правка-поле:focus { border-color: var(--акцент); outline: none; }
.правка-поле.сохранено { border-color: var(--есть); }
.правка-поле.сбой { border-color: var(--тревога); }

.уведомление {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 70;
  max-width: 92vw;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--текст);
  color: var(--фон);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.уведомление.плохо { background: var(--тревога); color: #fff; }

/* --- узкий экран: цены переносим на вторую строку --------------------------- */

@media (max-width: 620px) {
  :root { --сетка: minmax(0, 1fr) 66px; }

  /* Прячем и заголовки колонок цен, и сами ячейки. Если спрятать только
     заголовки, ячейки останутся в сетке и завернутся на лишние строки —
     строка товара раздувается втрое. */
  .колонки .колонка-цена,
  .товар > .цена { display: none; }

  .товар { padding: 4px 8px 5px; }

  .цены-строка {
    grid-column: 1 / -1;
    display: flex;
    gap: 14px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .цены-строка .ярлык {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--приглушённый);
    margin-right: 3px;
  }
}

@media (min-width: 621px) {
  .цены-строка { display: none; }

  /* Блок сравнения живёт в ТОЙ ЖЕ сетке, что и таблица, поэтому московская
     сумма встаёт ровно под обычной, а обе — под своим заголовком колонки.
     Подпись слева занимает «Наименование» + «Остаток» (две первые колонки),
     тогда три суммы попадают в колонки НАЛ / СКИДКА / РЫНОК. */
  .сравнение {
    grid-template-columns: var(--сетка);
    gap: 2px 8px;
  }
  .сравнение > .подпись { grid-column: 1 / 3; }
}