/* Доработки вида поверх app.css: здесь то, что меняется при полировке экранов.
   Отдельный файл — чтобы правки вида не тянули за собой весь большой стиль. */

/* ── Обзор ─────────────────────────────────────────────────────────────────── */
.hello { margin: 4px 0 18px; }
.hello h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.hello p { color: var(--muted); margin-top: 2px; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile {
  display: grid; gap: 6px; align-content: start; padding: 18px 18px 16px; min-height: 132px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tile-title { color: var(--muted); font-size: 13px; font-weight: 600; }
.tile-value { font-size: 28px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile-sub { color: var(--muted); font-size: 13px; line-height: 1.35; }
.tile-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.tile-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.tile.ok .tile-bar span { background: var(--ok); }
.tile.warn { box-shadow: inset 3px 0 0 var(--warn), var(--shadow); }
.tile.warn .tile-bar span { background: var(--warn); }
.tile.bad { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
.tile.bad .tile-value { color: var(--danger); }
svg.i.warn { color: var(--warn); }
svg.i.bad { color: var(--danger); }

/* ── Шапка страницы: «Настройки › Магазины» ───────────────────────────────── */
.bar-title .crumb { color: var(--muted); font-weight: 500; }
.bar-title .crumb::after { content: "›"; margin: 0 8px; color: var(--faint); }

/* ── План закупа: заголовок товара читается как строка, а не как капс ─────── */
#purchase tr.band td { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding-top: 12px; }
#purchase tr.band td b { color: var(--ink); }
#purchase td.bad { color: var(--danger); font-weight: 600; }
#purchase td.ok { color: var(--ok); font-weight: 600; }
table.sheet td.cell select { min-width: 96px; }

/* ── Статусы ──────────────────────────────────────────────────────────────── */
.pill.muted { background: var(--surface-2); color: var(--muted); border-color: var(--line); }

/* Кнопка в работе и пояснение к долгому запросу */
.btn.is-busy { opacity: 1; cursor: progress; pointer-events: none; gap: 8px; }
.btn.is-busy .spin { display: inline-block; width: 14px; height: 14px; flex: none; }
.btn.primary.is-busy { background: var(--accent-hover); }
.busy-note { grid-column: 1 / -1; flex-basis: 100%; display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft);
  color: var(--ink-2); font-size: 13px; animation: busy-in .25s ease; }
.busy-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  flex: none; animation: busy-pulse 1.2s ease-in-out infinite; }
@keyframes busy-in { from { opacity: 0; transform: translateY(-3px); } }
@keyframes busy-pulse { 50% { opacity: .3; transform: scale(.7); } }

.pill.google { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
textarea.input.code-area { min-height: 160px; padding: 10px 12px; font-size: 12px; line-height: 1.45; resize: vertical; }

/* Сверка накладных */
.pill.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.oh-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.oh-bar .s, .oh-foot .s { color: var(--muted); font-size: 13px; }
.oh-verdict { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius);
  margin-bottom: 14px; border: 1px solid transparent; }
.oh-verdict .i { width: 28px; height: 28px; flex: none; }
.oh-verdict .t { font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.oh-verdict .s { font-size: 13px; opacity: .85; margin-top: 2px; }
.oh-verdict.ok { background: var(--ok-soft); color: var(--ok); }
.oh-verdict.bad { background: var(--danger-soft); color: var(--danger); }
.oh-verdict.warn { background: var(--warn-soft); color: var(--warn); }
.oh-list { display: grid; gap: 12px; }
.oh-item { padding: 16px 18px; border-left: 3px solid var(--ok); }
.oh-item.bad { border-left-color: var(--danger); }
.oh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.oh-title { font-weight: 650; font-size: 15px; }
.oh-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.oh-nums .k { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.oh-nums .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-nums .delta .v { color: var(--danger); }
.oh-nums .s { font-size: 12px; color: var(--danger); }
.oh-unacc { margin-top: 14px; border-radius: var(--radius-sm); background: var(--warn-soft); }
.oh-unacc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  color: var(--warn); font-size: 14px; }
.oh-unacc summary::-webkit-details-marker { display: none; }
.oh-unacc summary .s { margin-left: auto; font-size: 12.5px; }
.oh-unacc summary .chev { transition: transform .15s; }
.oh-unacc[open] summary .chev { transform: rotate(90deg); }
.oh-unacc .table-wrap { background: var(--surface); border-radius: 0 0 var(--radius-sm) var(--radius-sm); max-height: 360px; overflow: auto; }
.oh-unacc table { font-size: 13px; }
.oh-unacc-ok { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.oh-unacc-ok .i { color: var(--ok); }
.oh-foot { display: grid; gap: 12px; margin-top: 16px; }
.oh-foot .t, .oh-setup .t { font-weight: 600; margin-bottom: 4px; }
.oh-history .row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.oh-history .row:first-child { border-top: 0; }
.oh-history .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.oh-history .dot.ok { background: var(--ok); }
.oh-history .dot.bad { background: var(--danger); }
.oh-history .dot.warn { background: var(--warn); }
.oh-history .dot.err { background: var(--warn); }
.oh-history .grow { flex: 1; }
.oh-setup { margin-bottom: 14px; }
.oh-setup .steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.oh-setup .steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.oh-setup .steps .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.oh-setup .steps li.done .dot { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
@media (min-width: 960px) { .oh-foot { grid-template-columns: 1.3fr 1fr; align-items: start; } }
@media (max-width: 560px) {
  .oh-nums { grid-template-columns: 1fr 1fr; }
  .oh-nums > :last-child { grid-column: 1 / -1; }
  .oh-bar { flex-direction: column; align-items: stretch; }
  .oh-book { flex-direction: column; }
}

/* План продаж: панель фильтров с выбором галочками */
.ps-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ps-toolbar .search { flex: 1 1 220px; max-width: 320px; }
.ps-toolbar .search .input { min-height: 34px; font-size: 14px; }
.ps-pick { position: relative; }
.ps-pick .btn { gap: 6px; }
.ps-pick .chev { transform: rotate(90deg); opacity: .6; }
.ps-pick.narrowed .btn { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ps-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; max-height: 360px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; }
.ps-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ps-menu label:hover { background: var(--surface-2); }
.ps-menu .ps-all { font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.ps-menu input, .ps-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.ps-sort, .ps-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.select.sm { min-height: 34px; font-size: 13.5px; width: auto; padding-left: 10px; }
.ps-approve { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-top: 14px; font-size: 14px; }

/* Сводная: артикул × показатели × месяцы */
.ps-wrap { max-height: calc(100vh - 250px); overflow: auto; }
.ps-table { font-size: 13.5px; }
.ps-table th, .ps-table td { padding: 7px 10px; }
.ps-table thead th { z-index: 3; }
.ps-table th.sortable, .pe-table th.sortable { cursor: pointer; user-select: none; }
.ps-table th.sortable:hover, .pe-table th.sortable:hover { color: var(--ink); }
.ps-table th.sorted, .pe-table th.sorted { color: var(--accent); }
.ps-table td.ps-art, .ps-table th.ps-art { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 150px; max-width: 220px;
  white-space: normal; vertical-align: top; box-shadow: 1px 0 0 var(--line); }
.ps-table thead th.ps-art { z-index: 4; background: var(--surface-2); }
.ps-table td.ps-metric, .ps-table th.ps-metric { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ps-table tr.ps-first > td, .ps-table tr.ps-first > th { border-top: 1px solid var(--line-strong); }
.ps-table tbody tr:not(.ps-first) td { border-top: 0; }
.ps-table tbody td { border-bottom-color: transparent; }
.ps-table tbody tr.ps-odd td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.ps-table tbody tr:hover td { background: var(--accent-soft); }
.ps-table td.dash, .pe-table td.dash { color: var(--faint); }
.ps-table .ps-total { background: var(--surface-2); }
.ps-table tbody tr.ps-sum td { position: sticky; z-index: 2; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); font-weight: 600; }
.ps-table tbody tr.ps-sum td.ps-art { z-index: 3; }
.ps-table tbody tr.ps-sum td.ps-metric { color: var(--ink-2); }
.ps-table tbody tr.ps-sum-last td { box-shadow: inset 0 -2px 0 var(--line-strong); }

/* Ред. план */
.pe-wrap { max-height: calc(100vh - 230px); overflow: auto; }
.pe-table { font-size: 13px; }
.pe-table th, .pe-table td { padding: 6px 9px; }
.pe-table thead th { z-index: 3; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 12px; }
.pe-table thead th.sticky { z-index: 4; background: var(--surface-2); }
.pe-table th.edit-col, .pe-table td.edit-col { background: var(--warn-soft); }
.pe-table td.cell.edit-col input { min-width: 74px; text-align: right; }
@media (max-width: 720px) {
  .ps-toolbar .search { max-width: none; flex-basis: 100%; }
  .ps-wrap, .pe-wrap { max-height: none; }
}

/* Товарные остатки: лист как в книге */
.mn-table { font-size: 13px; }
.mn-table th, .mn-table td { padding: 6px 9px; }
.mn-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; white-space: nowrap; }
.mn-table thead th.grp { text-align: center; border-left: 1px solid var(--line); }
.mn-table thead th.mn-stage { font-size: 12.5px; color: var(--ink); }
.mn-table td.sticky, .mn-table th.sticky { position: sticky; left: 0; z-index: 3; background: var(--surface); box-shadow: 1px 0 0 var(--line); min-width: 170px; }
.mn-table thead th.sticky { z-index: 5; background: var(--surface-2); }
.mn-table td.mn-total { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); font-weight: 600; }
.mn-table td.dash { color: var(--faint); }
.mn-table tbody tr.mn-sum td { position: sticky; z-index: 2; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight: 700; box-shadow: inset 0 -2px 0 var(--line-strong); }
.mn-table tbody tr.mn-sum td.sticky { z-index: 4; }

/* По складам: переключатель листов, как вкладки книги */
.wh-tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; max-width: 100%; }
.wh-tabs a { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; text-decoration: none; }
.wh-tabs a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.wh-tabs a.active { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--line); }
/* minmax(0, …): без него колонка растягивается по ширине таблицы и страница едет вбок. */
.wh-svod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) { .wh-svod { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.wh-svod .section-head { margin: 0 0 8px; }
.wh-table { font-size: 13px; }
.wh-table th, .wh-table td { padding: 6px 10px; }
.wh-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; white-space: nowrap; }
.wh-table thead th.grp { text-align: center; border-left: 1px solid var(--line); }
.wh-table tr.wh-sum td { font-weight: 700; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wh-sheet td.sticky, .wh-sheet th.sticky { position: sticky; left: 0; z-index: 3; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.wh-sheet thead th.sticky { z-index: 5; background: var(--surface-2); }
.wh-sheet tr.wh-sum td.sticky { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }

/* Себестоимость: одна цифра, расшифровка раскрывается */
.cs-table td { vertical-align: middle; }
.cs-table .cs-more-col { width: 1%; text-align: right; }
.cs-toggle { gap: 4px; }
.cs-toggle .i { transition: transform .15s; }
.cs-toggle[aria-expanded="true"] .i { transform: rotate(90deg); }
.cs-detail td { background: var(--surface-2); }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; margin-bottom: 6px; }
.cs-grid .k { font-size: 12px; color: var(--muted); }
.cs-grid .v { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
tr.cs-detail[hidden] { display: none; }

/* База товаров */
.cb-table { font-size: 13px; }
.cb-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; }
.cb-table thead th.grp { text-align: center; border-left: 1px solid var(--line); color: var(--ink-2); }
.cb-table thead th.grp.cb-store { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.cb-table th.sortable { cursor: pointer; user-select: none; }
.cb-table th.sorted { color: var(--accent); }
.cb-table .cb-pick { width: 34px; min-width: 34px; text-align: center; padding: 0 6px; }
.cb-table .cb-pick input { width: 16px; height: 16px; accent-color: var(--accent); }
.cb-table .sticky-0 { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.cb-table thead .sticky-0 { z-index: 5; background: var(--surface-2); }
.cb-table td.sticky, .cb-table th.sticky { left: 34px; min-width: 190px; }
.cb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 6px; vertical-align: middle; }
.linklike { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; font-weight: 600; }
.cb-required-form { display: grid; gap: 8px; }
.cb-required-form .check-line { display: flex; gap: 10px; align-items: center; font-size: 14px; }

/* Новые товары */
.nt-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.nt-card { padding: 16px; display: grid; gap: 10px; }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nt-title { font-weight: 650; font-size: 15px; line-height: 1.3; }
.nt-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.nt-meta .k { font-size: 12px; color: var(--muted); }
.nt-meta .v { font-size: 13.5px; }
.nt-meta .nt-wide { grid-column: 1 / -1; }
.nt-actions { display: flex; gap: 8px; justify-content: flex-end; }
.nt-actions form { margin: 0; }

/* План закупа — главная */
.pp-table { font-size: 13px; }
.pp-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.25; vertical-align: bottom; }
.pp-table th.sortable { cursor: pointer; user-select: none; }
.pp-table th.sorted { color: var(--accent); }
.pp-table td { vertical-align: top; }
.pp-table td.sticky, .pp-table th.sticky { position: sticky; left: 0; z-index: 3; background: var(--surface); box-shadow: 1px 0 0 var(--line); min-width: 210px; }
.pp-table thead th.sticky { z-index: 5; background: var(--surface-2); }
.pp-table tr.pp-row { cursor: pointer; }
.pp-table tr.pp-row:hover td { background: var(--surface-2); }
.pp-table .pp-month { min-width: 104px; border-left: 1px solid var(--line); }
.pp-table td.pp-late { background: var(--danger-soft); }
.pp-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.pp-muted { color: var(--faint); }
.pp-ok { color: var(--ok); font-weight: 600; }
.pp-bad { color: var(--danger); font-weight: 600; }
.pp-arrive { min-width: 160px; white-space: nowrap; }
.pp-arrive div { font-size: 12px; }
.pp-dot { float: left; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; }
.pp-dot.ok { background: var(--ok); }
.pp-dot.bad { background: var(--danger); }
.pp-expand { background: none; border: 0; padding: 2px; margin: 0 4px 0 -4px; color: var(--muted); cursor: pointer; vertical-align: middle; }
.pp-expand .i { transition: transform .15s; }
tr.open .pp-expand .i { transform: rotate(90deg); }
.pp-weeks > td { background: var(--surface-2); padding: 8px 12px 12px 40px; }
.pp-week-table { width: auto; font-size: 12.5px; background: var(--surface); border-radius: 8px; }
.pp-week-table th { position: static; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.pp-week-table th, .pp-week-table td { padding: 5px 10px; }
.pp-wrap { max-height: calc(100dvh - 230px); }
.su-table { font-size: 13px; }
.su-table thead th { text-transform: none; letter-spacing: 0; font-size: 12px; line-height: 1.25; }
.su-table td.sticky, .su-table th.sticky { position: sticky; left: 0; z-index: 3; background: var(--surface); box-shadow: 1px 0 0 var(--line); min-width: 190px; }
.su-table thead th.sticky { z-index: 5; background: var(--surface-2); }
.su-table tr.su-sum td { font-weight: 700; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.wh-toggle { display: inline; margin-left: 6px; }
.wh-toggle .btn { min-height: 22px; padding: 0 6px; font-size: 11.5px; font-weight: 500; color: var(--faint); opacity: 0; transition: opacity .12s; }
.wh-table tr:hover .wh-toggle .btn, .wh-excluded .wh-toggle .btn { opacity: 1; }
.wh-excluded { grid-column: 1 / -1; }
.cs-table th.sortable { cursor: pointer; user-select: none; }
.cs-table th.sorted { color: var(--accent); }

/* База товаров на телефоне: колонка артикула уже, данным остаётся место */
@media (max-width: 719px) {
  .cb-table td.sticky, .cb-table th.sticky { min-width: 96px; max-width: 110px; font-size: 12px; overflow-wrap: anywhere; }
  .ps-table td.ps-art, .ps-table th.ps-art { min-width: 110px; max-width: 130px; }
}