/* ══════════════════════════════════════════════════════════
   Сайт ERP поверх «Графита»: меню слева, таблицы, окна вместо шторок.
   Всё остальное (карточки, кнопки, поля, цвета, темы) — из ui.css.
   Порог 900px тот же, что E.WIDE в erp.js: шире — меню на месте и списки таблицами,
   уже — меню выезжает по кнопке, списки строками, как в приложении.
   ══════════════════════════════════════════════════════════ */
html.site { --side: 15.5rem; scrollbar-width: auto; }
html.site::-webkit-scrollbar { width: 10px; height: 10px; }
@supports (-moz-appearance: none) { html.site { scrollbar-width: thin; } }

a.btn { text-decoration: none; }
.dim { color: var(--text-3); }

/* ══════════ меню ══════════ */
#side {
  position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--side);
  display: flex; flex-direction: column; gap: .75rem; padding: 1rem .75rem;
  background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto;
}
.sd-brand { display: flex; align-items: baseline; gap: .5rem; padding: .125rem .625rem 0; }
.sd-brand b { font-size: 1.45rem; font-weight: 800; letter-spacing: -.04em; }
.sd-brand span { font-size: .9rem; color: var(--text-3); }
.sd-wh {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: var(--h-sm); padding: .438rem .625rem;
  border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
  font-weight: 600; text-align: left; color: var(--text);
}
.sd-wh > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-wh .i { color: var(--text-2); }
.sd-wh[disabled] { cursor: default; }
.sd-wh:not([disabled]):hover { border-color: var(--line-2); }
.sd-nav { flex: 1; display: flex; flex-direction: column; gap: .125rem; }
.sd-i {
  display: flex; align-items: center; gap: .625rem; padding: .562rem .625rem; border-radius: var(--r-sm);
  font-weight: 550; color: var(--text-2); text-decoration: none; transition: background var(--t), color var(--t);
}
.sd-i .i { color: inherit; }
.sd-i:hover { background: var(--surface-2); color: var(--text); }
.sd-i.sub { margin-left: 1rem; padding: .375rem .625rem; font-size: .975rem; font-weight: 500; }
.sd-i.on { background: var(--acc); color: var(--on-acc); font-weight: 600; }
.sd-foot { display: flex; flex-direction: column; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.sd-user { display: flex; align-items: center; gap: .625rem; padding: 0 .625rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sd-user .i { color: var(--text-2); }
.sd-btns { display: flex; gap: .5rem; }
.sd-b {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: var(--h-sm);
  padding: 0 .5rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line);
  font-size: .956rem; font-weight: 600; color: var(--text-2);
}
.sd-b:hover { color: var(--text); border-color: var(--line-2); }

/* ══════════ содержимое ══════════ */
#main { margin-left: var(--side); min-height: 100vh; }
#bar {
  display: flex; align-items: center; gap: .625rem; min-height: var(--h-sm);
  padding: .75rem clamp(.75rem, 2.4vw, 2.5rem) 0;
}
.bar-b {
  flex: none; display: inline-flex; align-items: center; gap: .375rem; height: var(--h-sm); padding: 0 .75rem;
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-weight: 600; color: var(--text);
}
.bar-b:hover { border-color: var(--line-2); }
.bar-where { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .938rem; color: var(--text-3); }
#bar-menu { display: none; padding: 0; width: var(--h-sm); justify-content: center; }
#shade { position: fixed; inset: 0; z-index: 39; background: rgba(8, 10, 18, .42); }
#page .erp-find { padding: .5rem; margin-bottom: 0; }
#page .erp-find .search { margin: 0; }

/* Документ на широком окне: карточки парами. Лишняя в серии занимает всю ширину (erp-site.js, balance),
   поэтому справа не остаётся пустого места */
@media (min-width: 900px) {
  #page.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page.two > * { grid-column: 1 / -1; }
  #page.two > .card:not(.full) { grid-column: auto; }
}

/* ══════════ таблицы ══════════ */
html.site .tbl-wrap { max-height: none; }
.erp-grid { font-size: 1rem; }
.erp-grid th.r, .erp-grid td.r { text-align: right; }
.erp-grid td.b { font-weight: 650; }
.erp-grid td.wrap { white-space: normal; min-width: 14rem; overflow-wrap: anywhere; }
.erp-grid td.act, .erp-grid td.pick { width: 1%; }
.erp-grid td.act { text-align: right; }
.erp-grid td.act .chip { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.erp-grid em.sub { margin-left: .5rem; font-style: normal; font-weight: 500; color: var(--text-2); }
.erp-grid .badge + .badge { margin-left: .25rem; }

/* ══════════ окна ══════════ */
@media (min-width: 900px) {
  html.site .sheet-bg { align-items: center; }
  html.site .sheet { max-height: 86vh; border-radius: var(--r-xl); padding-bottom: 1.25rem; animation: modal-in .2s var(--ease); }
  html.site .sheet::before { display: none; }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(.75rem) scale(.985); } }

/* ══════════ узкое окно ══════════ */
@media (max-width: 899.98px) {
  #main { margin-left: 0; }
  #bar-menu { display: inline-flex; }
  #side { width: min(19rem, 84vw); transform: translateX(-102%); transition: transform .22s var(--ease); box-shadow: var(--sh-3); }
  #side.open { transform: none; }
  .sd-i { padding-top: .75rem; padding-bottom: .75rem; }
  .sd-i.sub { padding-top: .562rem; padding-bottom: .562rem; }
}

/* ══════════ вход ══════════ */
#login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.lg { width: 100%; max-width: 27rem; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 1.5rem; text-align: center; }
.lg h1 { font-size: 1.629rem; line-height: 1.12; font-weight: 700; letter-spacing: -.035em; }
.lg-sub { margin-top: .375rem; color: var(--text-2); font-size: .975rem; }
.lg .btn { margin: 0; }
.lg-or { font-size: .938rem; color: var(--text-3); }
.lg-qr { align-self: center; width: 12rem; height: 12rem; padding: .75rem; border-radius: var(--r); background: #fff; border: 1px solid var(--line-2); }
.lg-qr svg { display: block; width: 100%; height: 100%; }
.lg-qr path { fill: #111; }
.lg-state { font-size: .975rem; color: var(--text-2); }
.lg-state.bad { color: var(--bad-ink); }
.lg-alt { font-size: .938rem; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .188rem; }
.lg-note { padding: .625rem .75rem; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-ink); font-size: .956rem; }
/* С телефона QR не наведёшь сам на себя: Telegram открывается кнопкой */
@media (pointer: coarse) { .lg-qr, .lg-or { display: none; } }