/*
 * Диаграммы и виджеты данных (классы ui-ch-*, ui-spark-*, ui-pie-*, ui-ring-*, ui-legend-*, ui-tl-*, ui-heat-*, ui-cal-*).
 * Цвет ряда передаётся переменной --ser (задаётся из скрипта на группе/элементе: значения — токены темы), поэтому диаграммы одинаково работают в светлой и тёмной теме.
 * Внимание: если у элемента заливка задана атрибутом fill="url(#…)" (градиент, штриховка), в CSS для него fill не задаём — стиль перебил бы атрибут.
 */

.ui-chart { margin: 0; min-width: 0; }
.ui-chart-title { margin: 0 0 var(--space-2); font-size: var(--fs-md); font-weight: 600; }
.ui-chart-plot { position: relative; min-width: 0; }
.ui-ch-svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.ui-ch-svg:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.ui-chart--empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* Оси и сетка */
.ui-ch-gridline { stroke: var(--line); stroke-width: 1; }
.ui-ch-zero { stroke: var(--line-strong); stroke-width: 1.2; }
.ui-ch-axis { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.ui-ch-value { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font); }
.ui-ch-xaxis .ui-ch-axis, .ui-ch-yaxis .ui-ch-axis { font-weight: 500; }

/* Линии, маркеры, столбцы */
.ui-ch-line { fill: none; stroke: var(--ser); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-ch-marker { fill: var(--ser); stroke: var(--surface); stroke-width: 1.5; }
.ui-ch-marker--hover { stroke-width: 2.2; }
.ui-ch-cross { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.ui-ch-hit { fill: transparent; cursor: crosshair; }
.ui-ch-band { fill: var(--surface-2); pointer-events: none; }
.ui-ch-bar:not(.is-hatched) { fill: var(--ser); }
.ui-ch-bar.is-hatched, .ui-ch-swatch { stroke: var(--ser); stroke-width: 1.5; }
.ui-hatch-base { fill: var(--ser); opacity: 0.22; }
.ui-hatch-line { stroke: var(--ser); stroke-width: 2; fill: none; }

/* Спарклайн: линия + градиент без осей; ширина растягивается, толщина линии остаётся постоянной */
.ui-spark { width: 100%; }
.ui-spark-svg { display: block; width: 100%; overflow: visible; }
.ui-spark-line { fill: none; stroke: var(--ser); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ui-spark-stop-a { stop-color: var(--ser); stop-opacity: 0.34; }
.ui-spark-stop-b { stop-color: var(--ser); stop-opacity: 0; }
.ui-spark--empty { min-height: 56px; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-sm); border-radius: 12px; background: var(--surface-2); }

/* Легенда */
.ui-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: var(--space-3) 0 0; padding: 0; font-size: var(--fs-sm); }
.ui-legend-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ui-legend-glyph { flex: none; }
.ui-legend-glyph .ui-ch-line { stroke-width: 2.2; }
.ui-legend-text { overflow-wrap: anywhere; }
.ui-legend--values { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; flex: 1 1 220px; min-width: 200px; }
.ui-legend--values .ui-legend-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ui-legend--values .ui-legend-item:last-child { border-bottom: 0; }
.ui-legend-num { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ui-legend-share { min-width: 56px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

/* Подсказка при наведении и фокусе */
.ui-ch-tip {
  position: absolute; z-index: 6; left: var(--tx, 0); top: var(--ty, 0); transform: translate(14px, -50%); min-width: 130px; max-width: min(300px, 80vw);
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs); pointer-events: none;
}
.ui-ch-tip.is-flip { transform: translate(calc(-100% - 14px), -50%); }
.ui-ch-tip-head { margin-bottom: 4px; font-weight: 700; overflow-wrap: anywhere; }
.ui-ch-tip-row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.ui-ch-tip-name { flex: 1; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.ui-ch-tip-val { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Круговая и кольцевая диаграмма */
.ui-chart--pie .ui-chart-plot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.ui-pie-box { flex: none; width: min(100%, var(--pie-size, 220px)); }
.ui-pie-svg { overflow: visible; }
.ui-pie-slice { stroke: var(--surface); stroke-width: 2; transition: opacity var(--transition); }
.ui-pie-slice:not(.is-hatched) { fill: var(--ser); }
.ui-pie-slice.is-dim { opacity: 0.45; }
.ui-pie-label { fill: var(--on-primary); font-size: 10.5px; font-weight: 700; font-family: var(--font); pointer-events: none; }
.ui-pie-center { fill: var(--text); font-weight: 700; font-family: var(--font); }
.ui-pie-center-label { fill: var(--muted); font-size: 10px; font-family: var(--font); }

/* Индикатор-кольцо */
.ui-ring { display: inline-grid; justify-items: center; align-content: start; gap: 6px; width: var(--ring-size, 132px); }
.ui-ring-svg { display: block; width: 100%; height: auto; }
.ui-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 11; }
.ui-ring-arc { fill: none; stroke: var(--ser); stroke-width: 11; stroke-linecap: round; }
.ui-ring-value { fill: var(--text); font-size: 22px; font-weight: 700; font-family: var(--font); }
.ui-ring-title { max-width: 100%; text-align: center; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.ui-ring-caption { color: var(--muted); font-size: var(--fs-sm); text-align: center; }

/* ---------- Шкала времени и дорожки загрузки ---------- */
.ui-tl { --lane-h: 44px; --head-w: 200px; --hour-h: 56px; min-width: 0; }
.ui-tl-corner { display: block; }
.ui-tl-axis, .ui-tl-lane { display: grid; grid-template-columns: var(--head-w) minmax(0, 1fr); align-items: center; }
.ui-tl-hours { position: relative; height: 22px; margin: 0 20px; }
.ui-tl-hour { position: absolute; left: calc(var(--at) * 1%); top: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ui-tl-lane { gap: 0 var(--space-3); padding: 8px 0; border-top: 1px solid var(--line); }
.ui-tl-rowhead, .ui-tl-colhead { display: grid; gap: 3px; min-width: 0; align-content: center; }
.ui-tl-rowname { font-weight: 600; overflow-wrap: break-word; line-height: 1.3; }
.ui-tl-rowsub { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: break-word; }
.ui-tl-load { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.ui-tl-load .icon { width: 13px; height: 13px; }
/* дорожка: серый фон — время вне рабочего окна, светлая полоса .ui-tl-work — рабочее окно */
.ui-tl-track { position: relative; margin: 0 20px; height: calc(var(--levels, 1) * var(--lane-h)); border-radius: 10px; background: var(--surface-3); }
.ui-tl-work { position: absolute; top: 0; bottom: 0; left: calc(var(--from) * 1%); width: calc(var(--span) * 1%); background: var(--surface-2); border-radius: 6px; }
.ui-tl-lines { position: absolute; inset: 0; pointer-events: none; }
.ui-tl-line { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 1px; background: var(--line); }
.ui-tl-now { position: absolute; z-index: 3; top: -3px; bottom: -3px; left: calc(var(--at) * 1%); width: 2px; margin-left: -1px; background: var(--red); border-radius: 2px; pointer-events: none; }
.ui-tl-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.ui-tl-seg {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 8px; overflow: hidden; box-sizing: border-box; padding: 2px 8px; border: 0; border-radius: 8px;
  top: calc(var(--lvl, 0) * var(--lane-h) + 3px); height: calc(var(--lane-h) - 6px);
  left: calc(var(--from) * 1%); width: calc(var(--span) * 1%); min-width: 6px;
  background: var(--tone); color: var(--on-primary); font: inherit; font-size: 12px; line-height: 1.25; text-align: left; text-decoration: none; white-space: nowrap;
}
a.ui-tl-seg:hover, button.ui-tl-seg:hover { filter: brightness(0.92); color: var(--on-primary); }
.ui-tl-seg-title { font-weight: 700; }
.ui-tl-seg-time { font-weight: 500; font-variant-numeric: tabular-nums; }
.ui-tl-seg--break, .ui-tl-seg--off {
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.ui-tl-seg--off { background: repeating-linear-gradient(45deg, var(--gray-soft) 0 5px, var(--surface-2) 5px 10px); }
/* Горизонтальные дорожки: название отрезка видно, пока он не уже 9 % шкалы; пояснение и время — от 14 %; остальное остаётся в подсказке и для скринридера */
.ui-tl--h .ui-tl-seg .ui-tl-seg-text, .ui-tl--h .ui-tl-seg .ui-tl-seg-time { display: none; }
.ui-tl--h .ui-tl-seg.is-wide .ui-tl-seg-text, .ui-tl--h .ui-tl-seg.is-wide .ui-tl-seg-time { display: inline; }
.ui-tl--h .ui-tl-seg.is-compact { padding: 0; }
.ui-tl--h .ui-tl-seg.is-compact .ui-tl-seg-title, .ui-tl--h .ui-tl-seg.is-compact .ui-tl-seg-text, .ui-tl--h .ui-tl-seg.is-compact .ui-tl-seg-time {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Вертикальный вид (основа календаря): одна сетка, колонка кресла не уже 200 px, шапки одной высоты, ось часов закреплена слева */
.ui-tl-vscroll { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--surface); scrollbar-width: thin; }
.ui-tl-vgrid { display: grid; grid-template-columns: 56px repeat(var(--cols, 1), minmax(200px, 1fr)); min-width: min-content; }
.ui-tl-colhead { padding: 10px; justify-items: center; text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface-2); }
.ui-tl-colhead--ghost { position: sticky; left: 0; z-index: 5; border-left: 0; background: var(--surface-2); }
.ui-tl-colbody { position: relative; height: calc(var(--hours, 12) * var(--hour-h)); border-left: 1px solid var(--line); background: var(--surface-3); }
.ui-tl-colbody--axis { position: sticky; left: 0; z-index: 4; border-left: 0; background: var(--surface); }
.ui-tl--v .ui-tl-hours { position: absolute; inset: 0; height: auto; margin: 0; }
.ui-tl--v .ui-tl-hour { left: auto; right: 8px; top: calc(var(--at) * 1%); transform: translateY(-50%); }
.ui-tl--v .ui-tl-hour:first-child { transform: none; top: 4px; }
.ui-tl--v .ui-tl-hour:last-child { transform: translateY(-100%); top: calc(100% - 4px); }
.ui-tl--v .ui-tl-line { left: 0; right: 0; width: auto; top: calc(var(--at) * 1%); bottom: auto; height: 1px; }
.ui-tl--v .ui-tl-work { top: calc(var(--from) * 1%); height: calc(var(--span) * 1%); left: 0; right: 0; bottom: auto; width: auto; border-radius: 0; }
.ui-tl--v .ui-tl-now { top: calc(var(--at) * 1%); bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
.ui-tl--v .ui-tl-now::before { top: -3px; left: -3px; }
.ui-tl--v .ui-tl-seg {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; white-space: normal; padding: 5px 7px;
  top: calc(var(--from) * 1%); height: calc(var(--span) * 1%); left: calc(var(--lvl, 0) / var(--levels, 1) * 100% + 2px); width: calc(100% / var(--levels, 1) - 4px);
  min-height: 18px; overflow-wrap: break-word; hyphens: auto; font-size: 11.5px;
}
.ui-tl--v .ui-tl-seg.is-compact { flex-direction: row; align-items: center; padding: 0 7px; white-space: nowrap; }
.ui-tl--v .ui-tl-seg.is-compact .ui-tl-seg-text, .ui-tl--v .ui-tl-seg.is-compact .ui-tl-seg-time { display: none; }
.ui-tl-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--fs-xs); }
.ui-tl-swatch { display: inline-block; width: 22px; height: 12px; border-radius: 4px; margin-left: var(--space-2); }
.ui-tl-swatch--busy { background: var(--green); }
.ui-tl-swatch--break { background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, var(--surface-2) 4px 8px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ui-tl-swatch--off { background: repeating-linear-gradient(45deg, var(--gray-soft) 0 4px, var(--surface-2) 4px 8px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ui-tl-swatch--now { width: 3px; background: var(--red); }

/* узкий экран: подпись кресла над дорожкой (дорожке достаётся вся ширина), подписи часов — через один */
@media (max-width: 720px) {
  .ui-tl--h .ui-tl-axis, .ui-tl--h .ui-tl-lane { grid-template-columns: minmax(0, 1fr); }
  .ui-tl--h .ui-tl-corner { display: none; }
  .ui-tl--h .ui-tl-lane { gap: var(--space-2); }
  .ui-tl--h .ui-tl-hour:nth-child(even) { display: none; }
  .ui-tl--h .ui-tl-rowhead { grid-template-columns: minmax(0, 1fr); }
  .ui-tl-hours, .ui-tl-track { margin: 0 16px; }
}

/* ---------- Тепловая матрица ---------- */
.ui-heatwrap { display: grid; gap: var(--space-3); min-width: 0; }
.ui-heat-scroll { overflow-x: auto; scrollbar-width: thin; }
.ui-heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 0; }
.ui-heat th { padding: 4px 6px; border: 0; background: none; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; text-align: center; white-space: normal; vertical-align: middle; }
.ui-heat th.ui-heat-row { text-align: right; padding-right: 10px; }
.ui-heat td { position: relative; height: 38px; min-width: 38px; padding: 0; border: 0; border-radius: 8px; background: var(--surface-2); text-align: center; vertical-align: middle; overflow: hidden; }
.ui-heat tr:last-child td { border: 0; }
.ui-heat-cell { --a: 0; color: var(--text); }
.ui-heat-cell::before { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: var(--a); }
.ui-heat-cell.l1 { --a: 0.12; }
.ui-heat-cell.l2 { --a: 0.26; }
.ui-heat-cell.l3 { --a: 0.42; }
.ui-heat-cell.l4 { --a: 0.72; }
.ui-heat-cell.l5 { --a: 1; color: var(--on-primary); }
.ui-heat-cell.is-empty { background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--surface-3) 5px 10px); color: var(--muted); }
.ui-heat-val { position: relative; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-heat-scale { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.ui-heat-step { position: relative; display: inline-block; width: 28px; height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ui-heat-scale .ui-heat-cell { color: inherit; }
.ui-heat-scale span:first-child { margin-right: 4px; }
.ui-heat-scale span:last-child { margin-left: 4px; }

/* ---------- Мини-календарь с плотностью дня ---------- */
.ui-cal { width: 100%; max-width: 340px; padding: 10px 12px 12px; border-radius: var(--radius); background: var(--primary-soft); }
.ui-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.ui-cal-title { font-weight: 700; color: var(--primary); text-align: center; flex: 1; }
.ui-cal-nav { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--primary); cursor: pointer; }
.ui-cal-nav:hover { background: var(--surface); }
.ui-cal-grid { display: grid; gap: 3px; }
.ui-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ui-cal-dow { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.ui-cal-cell { min-width: 0; }
.ui-cal-day {
  --a: 0; position: relative; display: grid; place-items: center; align-content: center; width: 100%; min-height: 42px; padding: 2px 0; border: 0; border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; overflow: hidden;
}
.ui-cal-day::before { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: var(--a); }
.ui-cal-day:hover { box-shadow: inset 0 0 0 2px var(--primary); }
.ui-cal-day.l1 { --a: 0.12; }
.ui-cal-day.l2 { --a: 0.26; }
.ui-cal-day.l3 { --a: 0.42; }
.ui-cal-day.l4 { --a: 0.72; }
.ui-cal-day.l5 { --a: 1; color: var(--on-primary); }
.ui-cal-day.is-out { color: var(--muted); }
.ui-cal-day.l5.is-out { color: var(--on-primary); }
.ui-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--primary); }
.ui-cal-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--text); }
.ui-cal-num, .ui-cal-count { position: relative; line-height: 1.15; }
.ui-cal-count { font-size: 10px; font-weight: 600; color: inherit; }
.ui-cal-day:focus-visible { outline-offset: 1px; }

/* Тёмная тема: на уровне 4 (плотный зелёный) тёмный текст контрастнее светлого — переключаем так же, как токены (системная и явная тёмная) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ui-heat-cell.l4,
  :root:not([data-theme="light"]) .ui-cal-day.l4 { color: var(--on-primary); }
}
:root[data-theme="dark"] .ui-heat-cell.l4,
:root[data-theme="dark"] .ui-cal-day.l4 { color: var(--on-primary); }

/* ---------- Опорные классы разметки диаграмм ---------- */
.ui-spark-empty { font-weight: 500; }
.ui-spark-area { stroke: none; }
.ui-ch-area, .ui-ch-hover, .ui-ch-values { pointer-events: none; }
.ui-heat-corner { text-align: right; }
.ui-heat-col { min-width: 44px; }