/* Оформление: тёмный сайдбар, светлая рабочая область, белые карточки. */

:root {
  --sidebar-bg: #151c2c;
  --sidebar-bg-hover: #1e2740;
  --sidebar-active: #2f6bff;
  --sidebar-text: #aab4c8;
  --sidebar-text-active: #ffffff;

  --page-bg: #f4f6fa;
  --card-bg: #ffffff;
  --border: #e4e8f0;
  --text: #1a2233;
  --text-muted: #7a8699;

  --accent: #2f6bff;
  --accent-soft: #eaf0ff;
  --good: #11a36b;
  --bad: #e0414a;
  --warn: #c98a00;
  --warn-soft: #fff6e0;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(23, 33, 54, 0.05), 0 6px 18px rgba(23, 33, 54, 0.05);
  --sidebar-width: 248px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- Каркас --- */

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.sidebar__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #2f6bff, #6f4bff);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

.sidebar__hint {
  padding: 0 20px 14px;
  font-size: 11.5px;
  color: #6f7c93;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 13.5px;
}

.nav__item:hover {
  background: var(--sidebar-bg-hover);
  color: #fff;
  text-decoration: none;
}

.nav__item--active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: 600;
}

.nav__icon {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}

.nav__item--active .nav__icon {
  opacity: 1;
}

.sidebar__footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
}

.sidebar__user {
  color: #fff;
  font-weight: 600;
  margin-bottom: 8px;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 26px 40px;
}

/* --- Шапка --- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.topbar__spacer {
  flex: 1 1 auto;
}

.periods {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.periods__item {
  padding: 6px 11px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: default;
}

.periods__item--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.page-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 2px;
  font-size: 23px;
  font-weight: 650;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 18px;
}

/* --- Элементы управления --- */

.btn,
.select,
.input {
  font: inherit;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 12px;
}

.btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn:hover {
  border-color: #c9d2e3;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn--primary:hover {
  background: #255ae0;
  border-color: #255ae0;
}

.btn--danger {
  color: var(--bad);
  border-color: #f3c7ca;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.input--sm {
  padding: 6px 9px;
}

label {
  display: block;
}

.field {
  margin-bottom: 14px;
}

.field__label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.field__help {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

.field__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field__unit {
  color: var(--text-muted);
  font-size: 13px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}

/* --- Карточки --- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.card__title {
  font-size: 15px;
  font-weight: 650;
  margin: 0 0 4px;
}

.card__hint {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 14px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.kpi__title {
  color: var(--text-muted);
  font-size: 12.5px;
  margin-bottom: 6px;
}

.kpi__value {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

.kpi__prev {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.delta--good {
  color: var(--good);
}

.delta--bad {
  color: var(--bad);
}

.delta--flat {
  color: var(--text-muted);
}

/* --- Таблицы --- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th,
.table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: none;
}

.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table tr.total td {
  font-weight: 700;
  border-top: 2px solid var(--border);
}

/* --- Служебное --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
}

.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.badge--good {
  background: #e6f7ef;
  color: var(--good);
}

.badge--muted {
  background: #eef1f6;
  color: var(--text-muted);
}

.badge--bad {
  background: #fdeaec;
  color: var(--bad);
}

.notice {
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

.notice--ok {
  background: #e9f8f0;
  border-color: #b9e7ce;
  color: #0c7a4f;
}

.notice--err {
  background: #fdecee;
  border-color: #f4c3c8;
  color: #a51f29;
}

.notice--warn {
  background: var(--warn-soft);
  border-color: #f2dca8;
  color: #8a6100;
}

.muted {
  color: var(--text-muted);
}

.stub-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-muted);
}

.stub-list li {
  margin-bottom: 6px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.inline-form {
  display: inline;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* --- Вход --- */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #151c2c, #243154);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(10, 16, 30, 0.35);
}

.login-card h1 {
  font-size: 19px;
  margin: 0 0 4px;
}

.login-card .input {
  width: 100%;
}

/* Планшет: сайдбар сжимается, но вёрстка не ломается. */
@media (max-width: 1100px) {
  :root {
    --sidebar-width: 72px;
  }

  .sidebar__logo span,
  .sidebar__hint,
  .nav__item span,
  .sidebar__footer .sidebar__user,
  .sidebar__footer .muted {
    display: none;
  }

  .nav__item {
    justify-content: center;
  }

  .content {
    padding: 18px 16px 32px;
  }
}

/* --- Фильтры в шапке --- */

.filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn--sm {
  padding: 6px 10px;
  font-size: 13px;
}

.periods__item {
  display: inline-block;
}

a.periods__item {
  cursor: pointer;
}

a.periods__item:hover {
  background: #f1f4fa;
  color: var(--text);
  text-decoration: none;
}

a.periods__item--active:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- Выпадающий список показателей --- */

.dropdown {
  position: relative;
}

.dropdown > summary {
  list-style: none;
  cursor: pointer;
}

.dropdown > summary::-webkit-details-marker {
  display: none;
}

.dropdown__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 320px;
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(23, 33, 54, 0.14);
  padding: 14px 16px;
}

.dropdown__title {
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 8px;
}

.dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

/* --- График --- */

.chart__svg {
  width: 100%;
  height: auto;
  min-height: 190px;
  display: block;
}

.chart__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 10px;
  font-size: 13px;
}

.chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart__legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Толщина линии не зависит от того, как сильно сжат график */
  vector-effect: non-scaling-stroke;
}

.chart__grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart__zero {
  stroke: #c9d2e3;
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.chart__label {
  font-size: 11px;
  fill: var(--text-muted);
}

/* --- Раскрывающиеся подробности --- */

.details {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.details > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
}

.details > summary::marker {
  color: var(--text-muted);
}

/* --- Служебные классы вместо inline-стилей ---
   Политика безопасности (CSP) запрещает атрибут style, поэтому всё оформление
   живёт здесь. Заодно легче держать вид единым. */

.mt-0 { margin-top: 0; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mb-0 { margin-bottom: 0; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }

.text-xs {
  font-size: 12px;
}

.cell-note {
  font-size: 12.5px;
  padding-top: 0;
}

.table--narrow { max-width: 420px; }
.table--medium { max-width: 720px; }
.table__col-name { width: 25%; }
.table__col-formula { width: 40%; }

.input--num { width: 110px; }
.input--offer { width: 150px; }

.btn--block {
  width: 100%;
  justify-content: center;
}

/* Цвета линий графика: задаются классом, а не атрибутом style */
.chart__line--revenue,
.chart__legend-item--revenue i {
  stroke: var(--accent);
  background: var(--accent);
}

.chart__line--profit,
.chart__legend-item--profit i {
  stroke: var(--good);
  background: var(--good);
}

/* --- Тепловая таблица --- */

.heat-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.heat-scroll {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.heat {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  min-width: 100%;
}

.heat th,
.heat td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  white-space: nowrap;
}

/* Закрепляем шапку и колонку артикула */
.heat thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--border);
}

.heat__offer,
.heat__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  text-align: left;
  font-weight: 600;
  box-shadow: inset -1px 0 0 var(--border);
  min-width: 190px;
}

.heat__corner {
  z-index: 4;
}

.heat__day {
  min-width: 62px;
}

.heat__total-col {
  background: #f7f9fd;
  font-variant-numeric: tabular-nums;
}

.heat tfoot td,
.heat tfoot th {
  position: sticky;
  bottom: 0;
  background: #f7f9fd;
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--border);
}

.heat__cell {
  font-variant-numeric: tabular-nums;
}

/* Цветовая шкала: от худшего к лучшему. Для ДРР ступени переворачиваются в коде. */
.heat--0 { background: #f8d2d4; }
.heat--1 { background: #fbdfd9; }
.heat--2 { background: #fdecdd; }
.heat--3 { background: #fef6e2; }
.heat--4 { background: #fbfbe8; }
.heat--5 { background: #f1f8e4; }
.heat--6 { background: #e4f4df; }
.heat--7 { background: #d5efd8; }
.heat--8 { background: #c3e9d0; }

/* --- Рука на пульсе --- */

.pulse th,
.pulse td {
  font-size: 12.5px;
}

.pulse thead th {
  vertical-align: bottom;
  min-width: 96px;
}

.pulse__date {
  min-width: 108px;
  font-variant-numeric: tabular-nums;
}

.pulse--up {
  background: #e4f4df;
  font-weight: 600;
}

.pulse--down {
  background: #fbdfd9;
  font-weight: 600;
}

.pulse-legend {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 12px;
}

.pulse__offer {
  min-width: 200px;
}

.pulse__offer a {
  font-weight: 600;
}

/* --- План-факт --- */

.equalizer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.eq {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.eq--current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.eq__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.eq__month {
  font-weight: 650;
}

.eq__slider {
  width: 100%;
  margin: 0 0 8px;
}

.eq__input {
  width: 100%;
  margin-bottom: 10px;
}

.eq__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.eq__bar {
  height: 8px;
  background: #eef1f6;
  border-radius: 4px;
  overflow: hidden;
}

.eq__bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.eq__bar--plan i {
  background: #c9d2e3;
}

.eq__bar--fact i {
  background: var(--accent);
}

.eq__bar--forecast i {
  background: repeating-linear-gradient(90deg, #a9b6cd 0 6px, transparent 6px 10px);
}

.eq__bar--done i { background: var(--good); }
.eq__bar--close i { background: #7cc47f; }
.eq__bar--behind i { background: var(--warn); }
.eq__bar--far i { background: var(--bad); }

.eq__facts {
  font-size: 12.5px;
}

.eq__warning {
  color: var(--warn);
  margin-top: 4px;
}

.eq__badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.eq__badge--done { background: #e6f7ef; color: var(--good); }
.eq__badge--close { background: #f1f8e4; color: #4e8c3f; }
.eq__badge--behind { background: var(--warn-soft); color: var(--warn); }
.eq__badge--far { background: #fdeaec; color: var(--bad); }
.eq__badge--none { background: #eef1f6; color: var(--text-muted); }

.bulk-input {
  width: 100%;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}

/* Ширины полосок план-факта: от 0 до 100 % */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* Широкие таблицы прокручиваются внутри карточки, а не тянут всю страницу вбок */
.table-scroll {
  overflow-x: auto;
}

/* --- Юнит-экономика --- */

.unit--loss th,
.unit--loss td {
  background: #fdf1f2;
}

.whatif .table {
  max-width: 460px;
}

/* Заголовок строки (артикул, кампания, дата) читается как обычный текст,
   бледно-серым остаётся только шапка таблицы. */
.heat tbody th,
.heat tfoot th {
  color: var(--text);
}