:root{
  --bg:#F3F4F1; --panel:#FFFFFF; --ink:#1B2421; --muted:#55605A;
  --line:#DADFD8; --dark:#1B2421; --dark2:#2A3631; --onDark:#D5DDD8;
  --accent:#0F6B5C; --accentInk:#FFFFFF;
  --okBg:#DCEFE6; --okInk:#0B4F3F;
  --lowBg:#FBE9CF; --lowInk:#7A3E00;
  --outBg:#F6DAD7; --outInk:#8C1F17;
  --warnBg:#FDF0DC; --warnLine:#E6B877; --warnInk:#6B3500;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-size:16px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
  display:flex;flex-direction:column;overflow:hidden;
}
button,input{font:inherit;color:inherit}

/* ---------- верхняя полоса ---------- */
.bar{
  flex:none;min-height:64px;background:var(--dark);color:#fff;
  display:flex;align-items:center;gap:16px;padding:8px 16px;flex-wrap:wrap;
}
.logo{font-weight:600;letter-spacing:.14em;font-size:18px}
.client{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  min-height:46px;padding:4px 14px;border:1px solid #55645E;border-radius:8px;
  background:var(--dark2);color:#fff;text-align:left;cursor:pointer;
}
.client .sub{font-size:12px;color:#B8C4BE}
.spacer{flex:1 1 0}
.status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--onDark)}
.dot{width:10px;height:10px;border-radius:50%;background:#4CC38A;flex:none}
.status.off .dot{background:#E0A33B}
.status.err .dot{background:#E0654B}
.order{
  min-height:46px;padding:0 18px;border:0;border-radius:8px;
  background:#fff;color:var(--ink);font-weight:600;cursor:pointer;
}

/* ---------- каркас экранов ---------- */
main{flex:1 1 0;min-height:0;display:flex}
.view{flex:1 1 0;min-height:0;display:flex;gap:16px;padding:16px;overflow:hidden}
.view.hidden{display:none}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0}
.content{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0}
.row-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{margin:0;font-size:24px;font-weight:600}
.grow{flex:1 1 0}
.muted{color:var(--muted);font-size:14px}
.small{font-size:13px;line-height:1.45}

input[type=search],input[type=text]{
  min-height:52px;border:1px solid #BFC6BE;border-radius:10px;background:#fff;
  padding:0 14px;width:100%;
}
.check{display:flex;align-items:center;gap:12px;min-height:48px;font-size:15px;cursor:pointer}
.check input{width:24px;height:24px;margin:0;accent-color:var(--accent)}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}

button.primary{
  min-height:56px;border:0;border-radius:10px;background:var(--accent);
  color:var(--accentInk);font-size:17px;font-weight:600;cursor:pointer;
}
button.primary:disabled{background:#B6C2BD;cursor:default}
button.ghost{
  min-height:48px;border:1px solid #BFC6BE;border-radius:10px;background:#fff;
  font-size:15px;font-weight:500;cursor:pointer;padding:0 14px;
}
button.back{align-self:flex-start}
button.ghost.dark{background:var(--dark2);border-color:#55645E;color:#fff}

/* ---------- боковая панель ---------- */
.side{
  width:340px;flex:none;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:12px;
  overflow:auto;
}
.side.left{width:300px}
.label{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.big{font-size:24px;font-weight:600;word-break:break-word}
.price{font-size:26px;font-weight:600}
.total{font-size:18px;font-weight:600}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-weight:500}
.photo{
  height:200px;border-radius:10px;background:#FFFFFF;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  color:#8A948E;flex:none;overflow:hidden;
}
.photo img{width:100%;height:100%;object-fit:contain}

/* ---------- списки ---------- */
.list{flex:1 1 0;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
.item{
  display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 16px;
  background:#fff;border:2px solid var(--line);border-radius:10px;cursor:pointer;
  text-align:left;width:100%;
}
.item.on{border-color:var(--accent);background:#E4F1EC}
.item .main{flex:1 1 0;min-width:0}
.item .t{font-size:18px;font-weight:600}
.item .s{font-size:14px;color:var(--muted)}
.item .n{font-size:18px;font-weight:600;white-space:nowrap}

/* ---------- каталог ---------- */
.filters{
  width:232px;flex:none;background:#E8EBE6;border:1px solid var(--line);
  border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;
  overflow:auto;
}
.cats{display:flex;flex-direction:column;gap:4px}
.cats button{
  min-height:44px;text-align:left;padding:0 12px;border:0;border-radius:8px;
  background:transparent;color:var(--ink);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.cats button.on{background:var(--dark);color:#fff}
/* крупные кнопки выбора сезона внутри категории */
.tile{
  min-height:150px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;gap:6px;padding:20px;background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;text-align:left;
}
.tile .tt{font-size:22px;font-weight:600}
.tile .tn{font-size:14px;color:var(--muted)}
.tile.back-tile{
  min-height:150px;justify-content:center;align-items:center;font-size:17px;
  font-weight:500;background:#E8EBE6;color:var(--ink);
}
.cats .n{font-size:13px;opacity:.7}
.cards{
  flex:1 1 0;min-height:0;overflow:auto;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  /* align-items:start обязателен: карточка — <button>, и при растягивании
     Chrome считает её собственную высоту нулевой, строки схлопываются в 2px */
  align-content:start;align-items:start;grid-auto-rows:min-content;
}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;padding:0;
}
.card .ph{height:120px;flex:none;background:#FFFFFF;display:flex;align-items:center;
  justify-content:center;font-size:12px;color:#8A948E;overflow:hidden;
  border-bottom:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:contain}
.card .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1 1 0}
.card .art{font-size:18px;font-weight:600}
.card .nm{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .pr{font-size:20px;font-weight:600}
.chip{
  align-self:flex-start;padding:6px 12px;border-radius:999px;font-size:14px;
  font-weight:500;background:var(--okBg);color:var(--okInk);
}
.chip.low{background:var(--lowBg);color:var(--lowInk)}
.chip.out{background:var(--outBg);color:var(--outInk)}

/* ---------- размерная сетка ---------- */
.grid-wrap{flex:1 1 0;min-height:0;overflow:auto}
table.grid{border-collapse:separate;border-spacing:6px 6px}
table.grid th{font-size:17px;font-weight:600;padding:0 2px;text-align:center}
table.grid th.c{text-align:left;min-width:96px}
table.grid td{text-align:center;vertical-align:bottom}
table.grid td.c{text-align:left;font-size:16px;font-weight:500;white-space:nowrap}
.st{font-size:13px;color:var(--muted);margin-bottom:4px}
.cell{
  width:64px;height:52px;text-align:center;font-size:20px;font-weight:600;
  border:2px solid #CBD1C9;border-radius:8px;background:#fff;color:var(--ink);
  padding:0;min-height:0;appearance:textfield;-moz-appearance:textfield;
}
/* стрелки у поля числа мешают: на планшете их всё равно не нажать точно */
.cell::-webkit-outer-spin-button,.cell::-webkit-inner-spin-button{
  appearance:none;-webkit-appearance:none;margin:0;
}
.cell:disabled{background:#ECEEEA;border-color:#D9DDD6;color:#8A948E}
.cell.has{border-color:var(--accent);background:#E4F1EC;color:var(--okInk)}
.cell.over{border-color:#B4540A;background:var(--warnBg);color:var(--warnInk)}
.warn{
  flex:none;border-radius:10px;background:var(--warnBg);border:1px solid var(--warnLine);
  padding:12px 16px;font-size:15px;color:var(--warnInk);line-height:1.45;
}
.warn.hidden{display:none}

/* ---------- узкий экран ---------- */
@media (max-width:900px){
  .view{flex-direction:column;overflow:auto}
  .side,.side.left,.filters{width:auto}
  .list,.cards,.grid-wrap{overflow:visible}
  main{overflow:auto}
  body{overflow:auto}
}

/* ---------- вход по коду ---------- */
.lock{
  position:fixed;inset:0;z-index:50;background:var(--dark);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.lock.hidden{display:none}
.lockbox{
  width:min(380px,100%);background:var(--panel);border-radius:14px;padding:28px;
  display:flex;flex-direction:column;gap:16px;
}
.lockbox .dark-logo{color:var(--ink);font-size:20px;text-align:center}
.lockbox input{font-size:24px;text-align:center;letter-spacing:.3em;min-height:60px}
.pinmsg{min-height:20px;font-size:14px;color:var(--outInk)}

/* ---------- подсказка по следующей ступени скидки ---------- */
.next{
  border-radius:10px;background:#E8F1EC;border:1px solid #BFD9CC;
  padding:12px 14px;font-size:15px;line-height:1.45;color:#0B4F3F;
}
.next b{font-weight:600}
.next[hidden]{display:none}

/* кратность упаковки на экране модели */
.packnote{font-size:14px;font-weight:600;color:var(--warnInk);background:var(--warnBg);
  border:1px solid var(--warnLine);border-radius:8px;padding:8px 10px}
.packnote:empty{display:none}

/* переход в каталог прямо под выбранным клиентом */
.gonow{align-self:stretch;min-height:52px;margin:2px 0 10px}

/* ---------- долг клиента ---------- */
/* Кнопка в шапке: сумма обычным цветом, просрочка — красным.
   Если просрочки нет, вторая строка пустая и красного на экране нет. */
.debtbtn{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:transparent;border:1px solid rgba(255,255,255,.25);
  border-radius:10px;padding:6px 12px;min-height:44px;
  /* шапка тёмная, а --ink тоже тёмный: строка общего долга сливалась с фоном */
  color:#fff;font-size:14px;line-height:1.25;text-align:left;cursor:pointer;
}
.debtbtn #debtSum{color:#fff;font-weight:600;font-size:15px}
.debtbtn[hidden]{display:none}
.debtbtn .late{color:#FF8A80;font-size:13px}
.debtbtn .late:empty{display:none}

/* итоги на экране «Rozrachunki» */
.totals{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.tot{display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 12px;border-radius:10px;background:#F2F5F3}
.tot .l{color:var(--muted);font-size:14px}
.tot b{font-size:18px;font-weight:600}
.tot.late{background:#FDECEA}
.tot.late b{color:#B3261E}

/* строка документа */
.item.doc{cursor:default}
.item.doc .num{text-align:right}
.item.doc .num .v{font-size:17px;font-weight:600}
.item.doc.late{border-color:#F3B9B3;background:#FDF5F4}
.item.doc.late .num .v{color:#B3261E}
.item.doc.late .num .s{color:#B3261E}