/* ==========================================================================
   Раздел «План продаж»: план на месяц по филиалам и факт по дням.
   Основа — /style.css портала. Здесь своё: карточки филиалов с полосой
   выполнения и таблица «день × филиал». Раздел плотный (.content.dense).
   Раскладка по ширине раздела (@container), как в «Ежедневных продажах».
   ========================================================================== */

.sp-page { container-type: inline-size; }

.sp-bar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-bar-row .spacer { flex: 1; }
.sp-month { display: inline-flex; align-items: center; gap: 8px; }
.sp-month b { min-width: 130px; text-align: center; font-size: 16px; font-weight: 800; }
.sp-month .btn { min-height: 44px; min-width: 44px; padding: 0; justify-content: center; }
.sp-month [data-sp-month="-1"] .icon { transform: rotate(180deg); }
#sp-pull { min-height: 44px; }

.sp-note {
  padding: 12px 16px; margin-bottom: 12px; border-radius: var(--r-md);
  background: var(--amber-soft); color: var(--amber); font-size: 14px;
}

.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sp-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--separator); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.sp-company { background: var(--accent-soft); border-color: var(--accent-soft-2); box-shadow: none; }
.sp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sp-card-head b { font-size: 16px; }
.sp-fact { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-fact > b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-company .sp-fact > b { color: var(--accent-ink); }
.sp-fact > span, .sp-plan { font-size: 14px; color: var(--text-3); }
.sp-plan { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* input с классом-хозяином: общее правило input[type="text"] шире одного класса */
.sp-plan input[type="text"] {
  flex: 1; min-width: 0; max-width: 180px; min-height: 44px; padding: 0 10px; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
select.sp-link { min-height: 44px; font: inherit; font-size: 14px; }

.sp-bar { height: 8px; border-radius: var(--pill); background: var(--surface-inset); overflow: hidden; }
.sp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.sp-bar.done i { background: var(--green); }
.sp-company .sp-bar { background: #fff; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
.sp-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.sp-stats .warn, .sp-stats .warn b { color: var(--orange); }
.sp-miss { font-size: 12.5px; color: var(--amber); }
.sp-who { font-size: 12px; color: var(--text-3); }

.sp-sub { margin: 22px 0 10px; font-size: 17px; font-weight: 800; }
table.sp-days { min-width: 0; }
.sp-days th, .sp-days td { padding: 8px 14px; white-space: nowrap; }
.sp-days td.num, .sp-days th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Столбец дня липкий: при прокрутке вбок иначе не понять, какое это число */
.sp-days th:first-child, .sp-days td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.sp-days thead th:first-child { background: var(--surface-2); }
.sp-days tr.future td { color: var(--text-3); }
.sp-days tr.today td { background: var(--accent-soft); }
.sp-days tfoot td { font-weight: 800; background: var(--surface-2); border-top: 1px solid var(--separator); }
.sp-days tfoot td:first-child { background: var(--surface-2); }

@container (max-width: 640px) {
  .sp-bar-row .spacer { display: none; }
  .sp-month { width: 100%; justify-content: space-between; }
  #sp-pull { width: 100%; justify-content: center; }
  .sp-cards { grid-template-columns: minmax(0, 1fr); }
  .sp-fact > b { font-size: 22px; }
  .sp-days th, .sp-days td { padding: 8px 10px; }
}