/* Графики по месяцам (plans/dashboards разделы 3 и 12; ChartsHelper):
   колонки-ссылки, линия SVG, подсказка, bullet на <progress>. Цвет — по
   смыслу: выбранный месяц — акцент, остальные — нейтральные, идущий месяц —
   штриховка, прогноз — светлая штриховка (IBCS), минус — тёмно-красный.
   Высоты — классы шага 1 %, ноль — шага 5 %: без инлайн-стилей (CSP). */
.col-chart {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2-5);
  margin-top: var(--space-2);
}

.col-chart__axis {
  position: relative;
  min-width: 44px;
  height: 132px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Подписи оси — на своих линиях: верх, ноль (у графика с минусом — по
   классу шага 5 %), низ */
.col-chart__tick {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.col-chart__tick--top {
  top: 0;
}

.col-chart__tick--bottom {
  top: 100%;
}

.col-chart--signed .col-chart__plot {
  background: linear-gradient(var(--border-soft), var(--border-soft)) 0 0 / 100% 1px no-repeat;
}

.col-chart--signed .col-chart__plot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--text-faint);
  pointer-events: none;
}

.col-chart__plot {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-1-5);
  height: 132px;
  border-bottom: 1px solid var(--border-panel);
  background: linear-gradient(var(--border-soft), var(--border-soft)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--border-soft), var(--border-soft)) 0 50% / 100% 1px no-repeat;
}

.col-chart__col {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  outline-offset: 2px;
}

.col-chart__col:hover,
.col-chart__col:focus-visible {
  background: var(--surface-subtle);
}

.col-chart__col--selected {
  background: var(--accent-bg);
}

.col-chart__pos,
.col-chart__neg {
  position: relative;
  display: block;
}

.col-chart__bar {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--text-faint);
}

.col-chart__bar--base {
  background: var(--neutral-border);
}

.col-chart__col--selected .col-chart__bar:not(.col-chart__bar--base) {
  background: var(--accent);
}

.col-chart__bar--neg {
  top: 0;
  bottom: auto;
  border-radius: 0 0 4px 4px;
  background: var(--danger);
  opacity: 0.75;
}

.col-chart__col--current .col-chart__bar:not(.col-chart__bar--base) {
  background: repeating-linear-gradient(135deg, var(--accent) 0 3px, var(--accent-border) 3px 6px);
}

.col-chart__col--forecast .col-chart__bar:not(.col-chart__bar--base) {
  background: repeating-linear-gradient(135deg, var(--text-faint) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--text-faint);
}

/* Минус остаётся красным и у выбранного, и у идущего месяца */
.col-chart__col--selected .col-chart__bar.col-chart__bar--neg {
  background: var(--danger);
  opacity: 1;
}

.col-chart__col--current .col-chart__bar.col-chart__bar--neg {
  background: repeating-linear-gradient(135deg, var(--danger) 0 3px, var(--danger-border) 3px 6px);
}

.col-chart__months {
  grid-column: 2;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-1-5);
  margin-top: var(--space-1-5);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.col-chart__month--selected {
  color: var(--text);
  font-weight: 600;
}

/* Линия: SVG растянут на всю область, колонки-ссылки — прозрачным слоем;
   подписи оси — верх, середина, низ */
.col-chart--line .col-chart__axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.col-chart--line .col-chart__axis span:nth-child(1) {
  top: 0;
}

.col-chart--line .col-chart__axis span:nth-child(2) {
  top: 50%;
}

.col-chart--line .col-chart__axis span:nth-child(3) {
  top: 100%;
}
.col-chart__plot--line {
  border-bottom: none;
  background: none;
}

.col-chart__svg {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

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

.col-chart__line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.col-chart__col--overlay {
  z-index: 1;
}

.col-chart__col--overlay.col-chart__col--selected {
  background: var(--accent-bg);
}

/* Подсказка */
.chart-tip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius);
  background: var(--brand-dark);
  color: #fff;
  font-size: var(--font-size-hint);
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
}

/* Bullet: факт против начисленного на <progress>, подпись рядом */
.bullet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.bullet__bar {
  flex: 1 1 120px;
  min-width: 120px;
  height: 8px;
  appearance: none;
  border: none;
  border-radius: 4px;
  background: var(--neutral-bg);
  overflow: hidden;
}

.bullet__bar::-webkit-progress-bar {
  background: var(--neutral-bg);
}

.bullet__bar::-webkit-progress-value {
  background: var(--text);
  border-radius: 4px;
}

.bullet__bar::-moz-progress-bar {
  background: var(--text);
  border-radius: 4px;
}

.bullet__label {
  min-width: 0;
  font-size: var(--font-size-hint);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.bullet--danger .bullet__bar::-webkit-progress-value {
  background: var(--danger);
}

.bullet--danger .bullet__bar::-moz-progress-bar {
  background: var(--danger);
}

@media (max-width: 767px) {
  .col-chart__month:nth-child(even):not(.col-chart__month--selected) {
    visibility: hidden;
  }
}

@media print {
  .col-chart__bar {
    background: none;
    border: 1px solid var(--text);
  }
}

.col-chart--z0 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 0fr 100fr; }
.col-chart--z5 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 5fr 95fr; }
.col-chart--z10 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 10fr 90fr; }
.col-chart--z15 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 15fr 85fr; }
.col-chart--z20 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 20fr 80fr; }
.col-chart--z25 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 25fr 75fr; }
.col-chart--z30 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 30fr 70fr; }
.col-chart--z35 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 35fr 65fr; }
.col-chart--z40 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 40fr 60fr; }
.col-chart--z45 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 45fr 55fr; }
.col-chart--z50 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 50fr 50fr; }
.col-chart--z55 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 55fr 45fr; }
.col-chart--z60 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 60fr 40fr; }
.col-chart--z65 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 65fr 35fr; }
.col-chart--z70 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 70fr 30fr; }
.col-chart--z75 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 75fr 25fr; }
.col-chart--z80 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 80fr 20fr; }
.col-chart--z85 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 85fr 15fr; }
.col-chart--z90 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 90fr 10fr; }
.col-chart--z95 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 95fr 5fr; }
.col-chart--z100 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 100fr 0fr; }

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

.col-chart--z0 .col-chart__tick--zero, .col-chart--z0.col-chart--signed .col-chart__plot::after { top: 0%; }
.col-chart--z5 .col-chart__tick--zero, .col-chart--z5.col-chart--signed .col-chart__plot::after { top: 5%; }
.col-chart--z10 .col-chart__tick--zero, .col-chart--z10.col-chart--signed .col-chart__plot::after { top: 10%; }
.col-chart--z15 .col-chart__tick--zero, .col-chart--z15.col-chart--signed .col-chart__plot::after { top: 15%; }
.col-chart--z20 .col-chart__tick--zero, .col-chart--z20.col-chart--signed .col-chart__plot::after { top: 20%; }
.col-chart--z25 .col-chart__tick--zero, .col-chart--z25.col-chart--signed .col-chart__plot::after { top: 25%; }
.col-chart--z30 .col-chart__tick--zero, .col-chart--z30.col-chart--signed .col-chart__plot::after { top: 30%; }
.col-chart--z35 .col-chart__tick--zero, .col-chart--z35.col-chart--signed .col-chart__plot::after { top: 35%; }
.col-chart--z40 .col-chart__tick--zero, .col-chart--z40.col-chart--signed .col-chart__plot::after { top: 40%; }
.col-chart--z45 .col-chart__tick--zero, .col-chart--z45.col-chart--signed .col-chart__plot::after { top: 45%; }
.col-chart--z50 .col-chart__tick--zero, .col-chart--z50.col-chart--signed .col-chart__plot::after { top: 50%; }
.col-chart--z55 .col-chart__tick--zero, .col-chart--z55.col-chart--signed .col-chart__plot::after { top: 55%; }
.col-chart--z60 .col-chart__tick--zero, .col-chart--z60.col-chart--signed .col-chart__plot::after { top: 60%; }
.col-chart--z65 .col-chart__tick--zero, .col-chart--z65.col-chart--signed .col-chart__plot::after { top: 65%; }
.col-chart--z70 .col-chart__tick--zero, .col-chart--z70.col-chart--signed .col-chart__plot::after { top: 70%; }
.col-chart--z75 .col-chart__tick--zero, .col-chart--z75.col-chart--signed .col-chart__plot::after { top: 75%; }
.col-chart--z80 .col-chart__tick--zero, .col-chart--z80.col-chart--signed .col-chart__plot::after { top: 80%; }
.col-chart--z85 .col-chart__tick--zero, .col-chart--z85.col-chart--signed .col-chart__plot::after { top: 85%; }
.col-chart--z90 .col-chart__tick--zero, .col-chart--z90.col-chart--signed .col-chart__plot::after { top: 90%; }
.col-chart--z95 .col-chart__tick--zero, .col-chart--z95.col-chart--signed .col-chart__plot::after { top: 95%; }
.col-chart--z100 .col-chart__tick--zero, .col-chart--z100.col-chart--signed .col-chart__plot::after { top: 100%; }