/* Диаграммы и чипы: общие для диспетчерской и кабинета заказчика. */

.chip {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.chip.sm { padding: 4px 10px; font-size: 12px; min-height: 28px; flex: none; }
.chip.ghost { border-style: dashed; }


.chart { position: relative; }
.chart-plot { display: flex; align-items: flex-end; gap: 3px; padding-top: 14px; }
.bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 1px;
  cursor: default;
}
.bar-track { width: 100%; height: var(--bar-height, 104px); display: flex; align-items: flex-end; justify-content: center; }
.bar-stack { width: 100%; max-width: 64px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 2px; }
.bar-seg {
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: filter var(--fast);
}
.bar-seg.sent { background: var(--series-1); }
.bar-seg.forecast { background: var(--series-2); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .bar:hover .bar-seg { filter: brightness(1.08); } }
.bar-label { font-size: 10.5px; height: 14px; line-height: 14px; color: var(--ink-3); white-space: nowrap; }
.bar-value { font-size: 11px; height: 14px; line-height: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar.dim .bar-value { color: var(--ink-3); font-weight: 500; }
.chart-baseline { height: 1px; background: var(--axis); margin-top: -1px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.bar-seg.estimate { background: var(--series-2); border-radius: 4px 4px 0 0; }
.bar-seg.bar-empty { height: 2px; min-height: 2px; padding: 0; background: var(--grid); }
.bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* ——— диаграммы: цвета рядов и штриховка оценки ——— */
.bar-stack .bar-seg { background: var(--seg, var(--series-1)); border-radius: 0; }
.bar-stack .bar-seg:first-child { border-radius: 4px 4px 0 0; }
.bar-stack { gap: 1px; }
.bar-seg.est {
  background: repeating-linear-gradient(135deg, var(--seg) 0 3px, color-mix(in srgb, var(--seg) 28%, transparent) 3px 6px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seg) 70%, transparent);
}
.bar-stack .bar-seg.bar-empty { background: var(--grid); }
.chart-plot.dense { gap: 1px; }
.chart-plot.dense .bar-label { font-size: 9.5px; }
.chart-plot.small { padding-top: 10px; }
.chart-plot.loading { opacity: .45; transition: opacity var(--fast); }
.legend { gap: 6px 12px; }
.legend-item { display: inline-flex; align-items: center; padding: 3px 6px; margin: -3px -6px; border: 0; background: none; color: inherit; font: inherit; border-radius: 6px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .legend-item:hover { background: var(--surface-3); } }
.legend-item.muted { cursor: default; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .legend-item.muted:hover { background: none; } }
.legend-item i { background: var(--seg); }
.legend-item i.est { background: repeating-linear-gradient(135deg, var(--seg) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--seg); }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--seg); margin-right: 7px; vertical-align: -1px; flex: none; }

.company-chart .cc-ranges { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 2px; }
.company-chart .cc-ranges::-webkit-scrollbar { display: none; }
.cc-summary { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.cc-summary b { color: var(--ink); font-weight: 620; }

.month-nav { display: inline-flex; align-items: center; gap: 4px; flex: none; margin-right: 4px; }
.month-nav b { font-size: 13px; font-weight: 620; min-width: 104px; text-align: center; }
.month-nav .chip.sm { padding: 4px 9px; }

/* Вид «табличка»: прямоугольные чипы, выбранное графитом. */
:where(:root[data-look="plate"]) .chip { border-radius: 6px; }
:where(:root[data-look="plate"]) .chip[aria-pressed="true"] { background: var(--action); color: var(--on-action); }

/* ——— выдача по QR: заявка контуром, факт заливкой ———
 * Столбец с полем fact: сегменты заявки — цветная рамка и еле заметная заливка,
 * выданное по QR — сплошная колонка внутри, тех же цветов рационов. */
.bar-track { position: relative; }
.bar-stack .bar-seg.plan {
  background: color-mix(in srgb, var(--seg) 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--seg) 85%, transparent);
}
.bar-fact {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  max-width: 32px;
  min-height: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  pointer-events: none;
}
.bar-fact-seg { width: 100%; min-height: 1px; background: var(--seg); }
.bar-value .bar-of { font-weight: 500; color: var(--ink-3); }
.chart-plot.dense .bar-fact { width: 60%; }
.legend-item i.contour {
  position: relative;
  width: 12px; height: 12px;
  background: color-mix(in srgb, var(--seg) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--seg);
}
.legend-item i.contour::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; bottom: 0;
  height: 7px;
  border-radius: 1px 1px 0 0;
  background: var(--ink-2);
}
/* «факт/заявка» у крайнего столбца прижимаем к краю, чтобы подпись не обрезалась. */
.bar.has-fact:last-child .bar-value { align-self: flex-end; text-align: right; }
.bar.has-fact:first-child .bar-value { align-self: flex-start; text-align: left; }
.chart-plot.wide .bar.has-fact .bar-value { align-self: center; text-align: center; }

/* ——— граница «сегодня» ———
 * Пунктир внутри столбца, где начинается сегодня: слева — прошедшие дни (факт), справа —
 * сегодня и дальше (заявки и оценка). У столбца-дня черта стоит по его левому краю. */
.bar-now {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Доля считается от ширины самого столбца (не шире 64px), а не от всей дорожки. */
  left: calc(50% - min(100%, 64px) / 2 + var(--now, 0) * min(100%, 64px) - 1px);
  width: 0;
  border-left: 1.5px dashed var(--ink-2);
  z-index: 2;
  pointer-events: none;
}
.bar.is-today .bar-label { color: var(--ink); font-weight: 650; }
.legend-item i.now { width: 0; height: 12px; border-radius: 0; background: none; border-left: 1.5px dashed var(--seg); margin-right: 8px; margin-left: 3px; }