/* Макет ПРИЛОЖЕНИЯ, а не таблица.
 *
 * ⚠️ ГЛАВНЫЙ УРОК ПРОШЛОЙ ВЕРСИИ. Там макеты были расписаны как таблицы — и
 * таблицами выглядели: ни бокового меню, ни шапки, ни вкладок, ни бейджей.
 * Читалось как распечатка из кассы. Поэтому здесь сначала заводится ШАССИ
 * (меню + шапка + карточки), и только потом в него кладутся данные.
 *
 * ⚠️ ЦВЕТА СНЯТЫ С ЖИВОЙ АДМИНКИ (стенд, 31.08.2026), а не подобраны на глаз:
 * меню белое 239px, активный пункт #F1F5F9, кнопка действия #059669 h40 r6,
 * счётчик в меню #0F172A на белом тексте, плашка «бюджет набран»
 * #ECFDF5 / #6EE7B7 / #064E3B. Придуманные цвета сделали бы макет похожим на
 * чужую программу — а весь смысл в том, что это НАША.
 *
 * ⚠️ ОКНО СВЕТЛОЕ НА ТЁМНОЙ СТРАНИЦЕ: настоящая админка светлая, а белый
 * объект на почти чёрном читается как отдельная вещь, а не как кусок страницы.
 */

.app {
  background: #F8FAFC;
  color: #0F172A;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-app);
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  position: relative;
  isolation: isolate;
}
.app--nochrome { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .app { grid-template-columns: minmax(0, 1fr); } .app-side { display: none; } }

/* ── Боковое меню ──────────────────────────────────────────────────── */
.app-side {
  background: #fff; border-right: 1px solid #E7E9EC;
  padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 1px;
}
.app-brand { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; margin-bottom: 6px; }
.app-brand b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-brand i { width: 16px; height: 16px; border-radius: 5px; flex: none; background: linear-gradient(140deg, #34D399, #065F46); }
.app-nav {
  display: flex; align-items: center; gap: 8px;
  height: 27px; padding: 0 8px; border-radius: 6px;
  color: #475569; font-size: 12px; white-space: nowrap;
}
.app-nav svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.app-nav.is-active { background: #F1F5F9; color: #0F172A; font-weight: 500; }
.app-nav.is-active svg { opacity: 1; }
.app-nav--sub { padding-left: 30px; font-size: 11.5px; height: 25px; }
.app-nav-badge {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  background: #0F172A; color: #F8FAFC; border-radius: 20px; padding: 1px 6px; line-height: 1.6;
}
.app-side-gap { flex: 1 1 auto; min-height: 8px; }

/* ── Шапка страницы ────────────────────────────────────────────────── */
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top {
  height: 40px; flex: none; border-bottom: 1px solid #E7E9EC;
  display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #fff;
}
.app-top b { font-size: 12.5px; font-weight: 600; }
.app-crumb { color: #94A3B8; font-size: 11.5px; font-family: var(--mono); }
.app-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #64748B; }

.app-tabs { display: flex; gap: 14px; padding: 0 12px; border-bottom: 1px solid #E7E9EC; flex: none; }
.app-tab {
  padding: 7px 0; font-size: 12px; color: #64748B; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.app-tab .cnt { color: #94A3B8; }
.app-tab.is-active { color: #0F172A; border-bottom-color: #059669; font-weight: 500; }

.app-body { padding: 12px; display: grid; gap: 10px; align-content: start; min-height: 0; }
.app-h1 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin: 2px 0 0; }
.app-h1 + .app-sub { color: #64748B; font-size: 12px; margin: 1px 0 6px; }

/* ── Карточки и строки ─────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid #E7E9EC; border-radius: 8px; }
.card-h { padding: 9px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.card-h .dimx { font-weight: 400; color: #94A3B8; font-size: 11.5px; }
.card-h .card-total { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.card-b { padding: 10px 12px; }
.card-b--flush { padding: 0; }

.row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #F1F5F9; transition: background .2s; }
.row:first-child { border-top: 0; }
.row.is-active { background: #F0FDF4; box-shadow: inset 2px 0 0 #059669; }
.row.is-new { animation: rowIn .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-6px); } }
.row-name { min-width: 0; font-size: 12.5px; }
.row-sub { color: #94A3B8; font-size: 11px; margin-top: 1px; }
.row-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.dimx { color: #94A3B8; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }

.badge { font-size: 10px; padding: 1px 7px; border-radius: 20px; background: #F1F5F9; color: #475569; white-space: nowrap; line-height: 1.7; }
.badge--ok   { background: #ECFDF5; color: #065F46; }
.badge--work { background: #FEF3C7; color: #78350F; }
.badge--wait { background: #F1F5F9; color: #64748B; }
.badge--warn { background: #FEF2F2; color: #7F1D1D; }
.badge--info { background: #EFF6FF; color: #1E40AF; }

/* ── Плашка контроля себестоимости (ELE-258, тона из assemblyBudgetPlan.ts) ── */
.planbar { border: 1px solid; border-radius: 8px; padding: 8px 11px; transition: background .35s, border-color .35s, color .35s; }
.planbar-head { font-size: 13.5px; font-weight: 600; display: flex; align-items: baseline; }
.planbar-head .i { margin-left: auto; opacity: .5; font-size: 11px; }
.planbar-sub { font-size: 11.5px; margin-top: 2px; opacity: .92; }
.planbar--add  { border-color: #FCD34D; background: #FFFBEB; color: #78350F; }
.planbar--ok   { border-color: #6EE7B7; background: #ECFDF5; color: #064E3B; }
.planbar--over { border-color: #FCA5A5; background: #FEF2F2; color: #7F1D1D; }

.progress { height: 4px; border-radius: 20px; background: rgba(15,23,42,.09); overflow: hidden; margin-top: 7px; }
.progress i { display: block; height: 100%; border-radius: 20px; background: currentColor; opacity: .75; transition: width .6s cubic-bezier(.2,.7,.3,1); }

.money-neg { color: #B91C1C; }
.money-pos { color: #047857; }

/* ── Управляющие элементы ──────────────────────────────────────────── */
.ui-btn {
  height: 28px; padding: 0 10px; border-radius: 6px;
  border: 1px solid #E2E8F0; background: #fff; color: #334155;
  font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: background .18s, border-color .18s, transform .12s;
}
.ui-btn:hover { background: #F8FAFC; }
.ui-btn--primary { background: #059669; border-color: #059669; color: #fff; font-weight: 500; }
.ui-btn--primary:hover { background: #047857; }
.ui-btn--wide { width: 100%; height: 34px; font-size: 13px; }
.ui-btn--icon { width: 24px; height: 24px; padding: 0; border-radius: 6px; font-size: 14px; line-height: 1; }
.ui-btn.is-pressed { transform: scale(.94); }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .val { font-family: var(--mono); font-size: 12.5px; min-width: 18px; text-align: center; }
.stepper .unit { color: #94A3B8; font-size: 11px; }

.ui-input {
  height: 30px; border: 1px solid #E2E8F0; border-radius: 6px; background: #fff;
  padding: 0 10px; font-size: 12px; color: #0F172A; display: flex; align-items: center; gap: 7px; width: 100%;
}
.ui-input .ph { color: #94A3B8; }
.ui-input.is-focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.12); }

/* Плитки доступных составляющих — два столбца, как в живом экране. */
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.tile { border: 1px solid #E7E9EC; border-radius: 8px; background: #fff; padding: 7px 9px; display: flex; align-items: center; gap: 8px; transition: opacity .3s, border-color .18s; }
.tile:hover { border-color: #CBD5E1; }
.tile b { font-size: 12.5px; font-weight: 500; display: block; }
.tile .row-sub .zero { color: #DC2626; }
.tile .ui-btn--icon { margin-left: auto; flex: none; }
.tile.is-used { opacity: .4; }

.chk { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #CBD5E1; flex: none; display: grid; place-items: center; background: #fff; transition: background .18s, border-color .18s; }
.chk.is-on { background: #059669; border-color: #059669; }
.chk.is-on::after { content: ''; width: 7px; height: 4px; border: 1.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(.5px, -1px); }

.link-act { color: #059669; font-size: 12px; cursor: pointer; }
.link-act--danger { color: #DC2626; }

/* ── Выпадающий выбор (экран разнесения) ───────────────────────────── */
.ui-select {
  position: relative; height: 28px; min-width: 176px;
  border: 1px solid #E2E8F0; border-radius: 6px; background: #fff;
  padding: 0 26px 0 9px; font-size: 12px; display: flex; align-items: center;
  cursor: pointer; user-select: none;
}
.ui-select .ph { color: #94A3B8; }
.ui-select .caret { position: absolute; right: 8px; color: #94A3B8; font-size: 10px; }
.ui-select.is-open { border-color: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.12); }
.ui-opts {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 7px; padding: 3px;
  box-shadow: 0 12px 28px -8px rgba(15,23,42,.22);
}
.ui-opt { padding: 5px 8px; border-radius: 5px; font-size: 12px; }
.ui-opt:hover { background: #F1F5F9; }

/* ── Снимок накладной ──────────────────────────────────────────────── */
.app-body--invoice { grid-template-columns: 1fr; }
@media (min-width: 860px) { .app-body--invoice { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } }
.shot {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 7px; border: 1px solid #E7E9EC;
  background: linear-gradient(160deg, #F8FAFC, #EDF0F3);
  display: grid; place-items: center;
}
.shot-paper {
  width: 74%; background: #fff; border: 1px solid #E7E9EC; border-radius: 3px;
  padding: 10px 9px; display: grid; gap: 5px; transform: rotate(-1.4deg);
  box-shadow: 0 6px 18px -6px rgba(15,23,42,.18);
}
.shot-paper i { display: block; height: 3px; border-radius: 2px; background: #DEE3E8; }
.shot-paper i:first-child { height: 5px; background: #C3CBD3; }
.shot-beam {
  position: absolute; left: 0; right: 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(5,150,105,.22), transparent);
  border-top: 1px solid rgba(5,150,105,.55); border-bottom: 1px solid rgba(5,150,105,.55);
  animation: beam 1.1s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes beam { 0% { top: -32%; } 100% { top: 100%; } }

/* ── Зоны доставки ─────────────────────────────────────────────────── */
.zones { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .zones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zone {
  border: 1px solid #E7E9EC; border-radius: 8px; background: #fff; padding: 7px 10px;
  display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: #64748B;
}
.zone b { font-size: 13.5px; color: #0F172A; }
.zone--muted { background: #F8FAFC; }

/* ── Финансовая таблица ────────────────────────────────────────────── */
.fin-tbl { border: 1px solid #E7E9EC; border-radius: 8px; overflow: hidden; background: #fff; }
.fin-tbl table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fin-tbl th, .fin-tbl td { padding: 5px 8px; text-align: right; white-space: nowrap; }
.fin-tbl th { background: #F8FAFC; font-weight: 500; color: #64748B; font-size: 10.5px; }
.fin-tbl th:first-child, .fin-tbl td:first-child { text-align: left; }
.fin-tbl td:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fin-tbl tbody tr { border-top: 1px solid #F1F5F9; }
.fin-tbl .fin-g td { background: #F8FAFC; font-weight: 600; color: #334155; text-align: left; font-size: 11px; }
.fin-tbl .fin-s { font-weight: 600; background: #F0FDF4; }
.fin-tbl .neg { color: #B91C1C; }
.fin-tbl .yr { border-left: 1px solid #E7E9EC; font-weight: 600; }
.fin-tbl .nm { color: #334155; }
/* Подсветка спорной ячейки — она и есть смысл экрана. */
.fin-tbl .hi {
  background: #FEF3C7; box-shadow: inset 0 0 0 1px #FCD34D;
  border-radius: 4px; font-weight: 600; color: #78350F;
  animation: hiPulse .7s ease-out;
}
@keyframes hiPulse { from { background: #FDE68A; transform: scale(1.06); } }

/* ── Путь заказа (липкая прокрутка) ────────────────────────────────── */
.jr .app-body { gap: 14px; }
.jr-rail { display: flex; align-items: flex-start; gap: 4px; }
.jr-dot { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 10.5px; color: #94A3B8; }
.jr-dot i {
  display: block; height: 3px; border-radius: 20px; background: #E7E9EC;
  transition: background .45s cubic-bezier(.2,.7,.3,1);
}
.jr-dot.is-on i { background: #059669; }
.jr-dot.is-on span { color: #334155; }
.jr-dot.is-now span { color: #0F172A; font-weight: 600; }
.jr .row { animation: rowIn .5s cubic-bezier(.2,.7,.3,1) both; }