/* Экраны версии 5: форма заказа, заказы, клиенты, склад, персонал.
 *
 * ⚠️ ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ХВОСТ `app-mock.css`. Там лежит ШАССИ —
 * меню, шапка, карточки, кнопки, — то есть общее для всех макетов. Здесь
 * лежит частное: таблицы списков, полоса фильтров, поля публичной формы,
 * карточки сотрудников. Свалив их в один файл, мы получили бы 600 строк, в
 * которых непонятно, что можно править без оглядки на остальные экраны.
 *
 * ⚠️ ЦВЕТА ТЕ ЖЕ, ЧТО В `app-mock.css`, и списаны с живой админки: рамка
 * #E7E9EC, приглушённый текст #94A3B8, действие #059669, шапка таблицы
 * #F8FAFC. Своей палитры здесь не заводить — два макета на одной странице с
 * разными оттенками серого читаются как две разные программы.
 *
 * Окно макета всегда СВЕТЛОЕ, в том числе на тёмной теме страницы: настоящая
 * админка светлая (см. шапку `app-mock.css`).
 */

/* ── Таблица списка ────────────────────────────────────────────────────
 * Общая для «Заказов», «Клиентов» и «Остатков»: у всех трёх в живой
 * программе одна и та же плотная сетка с группирующими строками. */
.tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tbl th, .tbl td { padding: 6px 8px; text-align: left; white-space: nowrap; }
.tbl th {
  background: #F8FAFC; color: #64748B; font-weight: 500; font-size: 10.5px;
  border-bottom: 1px solid #E7E9EC;
}
.tbl td { border-top: 1px solid #F1F5F9; }
.tbl .n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl .r { text-align: right; }
.tbl .dimx { color: #94A3B8; }
.tbl tbody tr { transition: background .18s; }
.tbl tbody tr:hover { background: #F8FAFC; }
.tbl tr.is-on { background: #F0FDF4; }
.tbl tr.is-in { animation: rowIn .4s cubic-bezier(.2,.7,.3,1) both; }

/* Группирующая строка: дата у заказов, категория у остатков.
 * ⚠️ Это часть УСТРОЙСТВА, а не украшение: заказы в программе сгруппированы
 * по дате доставки, и без заголовка список читается как каша. */
.tbl .grp td {
  background: #F8FAFC; color: #334155; font-weight: 600; font-size: 11px;
  border-top: 1px solid #E7E9EC;
}
.tbl .grp .cnt { color: #94A3B8; font-weight: 400; margin-left: 6px; }

/* Обёртка со скроллом: у таблицы заказов колонок больше, чем влезает в
 * узкое окно макета, и обрезать их молча нельзя — обрезанная таблица
 * выглядит бедной программой. */
.tbl-wrap { overflow-x: auto; }

/* ── Полоса фильтров ───────────────────────────────────────────────── */
.fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbar .ui-input, .fbar .ui-select { height: 26px; }
.fbar .grow { flex: 1 1 120px; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border: 1px solid #E7E9EC; border-radius: 6px; background: #fff;
  font-size: 11.5px; color: #475569; white-space: nowrap; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.chip:hover { background: #F8FAFC; }
.chip.is-on { background: #ECFDF5; border-color: #6EE7B7; color: #065F46; font-weight: 500; }
.chip.is-pressed { transform: scale(.96); }

/* ── Плитки чисел (склад) ──────────────────────────────────────────── */
.nums { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nums div {
  border: 1px solid #E7E9EC; border-radius: 8px; background: #fff; padding: 7px 10px;
}
.nums span { display: block; color: #94A3B8; font-size: 10.5px; }
.nums b {
  display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1px;
}
@media (max-width: 640px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Публичная форма заказа ────────────────────────────────────────────
 * ⚠️ ФОН ТЁМНЫЙ, И ЭТО ЧАСТЬ ДОВОДА. У живого магазина за формой стоит
 * фотография его стены; белый лист читался бы как НАШ шаблон, а весь смысл
 * раздела в том, что страница принадлежит магазину. */
.of {
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(52, 211, 153, .10), transparent 60%),
    linear-gradient(160deg, #1B2420, #0E1512 60%, #131A17);
  padding: 16px 14px 18px;
  min-height: 100%;
  position: relative;
}
.of::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 16px 16px;
}
.of-head { text-align: center; margin-bottom: 12px; position: relative; }
.of-head b { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.of-head p { color: rgba(255,255,255,.62); font-size: 11.5px; margin: 4px auto 0; max-width: 40ch; }
.of-form { display: grid; gap: 8px; position: relative; max-width: 420px; margin: 0 auto; }
.of-f {
  background: #fff; border-radius: 10px; padding: 8px 10px 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.of-f > label { display: block; font-size: 11.5px; font-weight: 500; color: #0F172A; margin-bottom: 5px; }
.of-f > label .req { color: #DC2626; margin-left: 2px; }
.of-f .ui-input, .of-f .ui-select { width: 100%; height: 30px; }
.of-f .area {
  border: 1px solid #E2E8F0; border-radius: 6px; padding: 6px 8px;
  font-size: 12px; color: #94A3B8; min-height: 40px;
}
.of-btn {
  height: 36px; border-radius: 8px; background: #111827; color: #fff;
  font-size: 12.5px; font-weight: 500; display: grid; place-items: center;
  margin-top: 2px; transition: transform .12s, background .18s;
}
.of-btn.is-pressed { transform: scale(.985); }
/* Календарь всплывает НАД полем даты — как в живой форме. */
.of-cal {
  position: absolute; z-index: 3; background: #fff; border: 1px solid #E2E8F0;
  border-radius: 10px; padding: 8px; box-shadow: 0 12px 28px rgba(0,0,0,.22);
  width: 176px;
}
.of-cal-h { font-size: 11px; font-weight: 600; text-align: center; margin-bottom: 6px; }
.of-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.of-cal-g i {
  font-style: normal; font-family: var(--mono); font-size: 10px; height: 19px;
  display: grid; place-items: center; border-radius: 4px; color: #334155;
}
.of-cal-g i.off { color: #CBD5E1; }
.of-cal-g i.is-on { background: #059669; color: #fff; font-weight: 600; }

/* ── Карточка заказа (раздел 2) ────────────────────────────────────────
 * Порядок ответов настоящий (`OrderViewReadLayout.tsx`): шапка-факты одной
 * полосой → состав слева → денежный рельс справа. */
.oc { display: grid; gap: 8px; }
.oc-facts {
  display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 11px;
  border: 1px solid #E7E9EC; border-radius: 8px; background: #fff;
}
.oc-facts div { min-width: 0; }
.oc-facts span { display: block; color: #94A3B8; font-size: 10.5px; }
.oc-facts b { font-size: 12px; font-weight: 500; }
.oc-cols { display: grid; gap: 8px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 640px) { .oc-cols { grid-template-columns: minmax(0, 1fr); } }
/* Правка ПО МЕСТУ значения: карандаш всплывает рядом, рамки вокруг карточки
 * и кнопок «Сохранить/Отмена» нет — их из программы убрали (ELE-267). */
.oc-edit { display: inline-flex; align-items: center; gap: 6px; }
.oc-pen {
  width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center;
  font-size: 10px; color: #64748B; background: #F1F5F9;
  opacity: 0; transform: translateX(-3px); transition: opacity .2s, transform .2s;
}
.oc-edit.is-hover .oc-pen { opacity: 1; transform: none; }

/* ── Персонал ─────────────────────────────────────────────────────────
 * Не таблица, а карточки-строки — как в живом `/admin/users`. */
.person {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid #E7E9EC; border-radius: 8px; background: #fff;
  transition: border-color .18s, background .18s;
}
.person.is-hi { border-color: #C7D2FE; background: #FAFAFF; }
.person-i {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid;
  place-items: center; font-size: 11px; font-weight: 600; color: #475569;
  background: #F1F5F9;
}
.person-n { min-width: 0; }
.person-n b { font-size: 12.5px; font-weight: 500; }
.person-n .at { color: #94A3B8; font-size: 11.5px; margin-left: 5px; }
.person-n .last { display: block; color: #94A3B8; font-size: 10.5px; margin-top: 1px; }
.person-a { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.badge--role-manager { background: #ECFDF5; color: #065F46; }
.badge--role-florist { background: #F5F3FF; color: #5B21B6; }
.badge--role-helper  { background: #FEF3C7; color: #78350F; }
.badge--role-super   { background: #FEF2F2; color: #7F1D1D; }
.ui-btn--danger { color: #B91C1C; border-color: #FECACA; }
.ui-btn--danger:hover { background: #FEF2F2; }

/* ⚠️ ТАБЛИЦА НЕ ИМЕЕТ ПРАВА РАСТЯГИВАТЬ ОКНО МАКЕТА. У элемента грида
 * `min-width` по умолчанию `auto`, то есть колонка раздувается до ширины
 * самого широкого содержимого: список клиентов на восемь колонок, поставленный
 * в узкую двухколоночную секцию, растягивал `.app` с 661 до 980 px и уносил
 * правый край макета за пределы карточки. Прокрутка `.tbl-wrap` при этом не
 * включалась вовсе — ей нечего было прокручивать.
 * Замер 02.09.2026: до правки один `.app` из девяти был шире своего места. */
.app-body { grid-template-columns: minmax(0, 1fr); }
.app-body > * { min-width: 0; }
.tbl-wrap { max-width: 100%; }