.dash-chart-wrap {
  --chart-top-inset: 8px;
  --chart-bottom-inset: 18px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 3px;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid rgba(143, 171, 221, 0.3);
  background: rgba(20, 40, 79, 0.36);
  overflow: visible;
  padding: 4px 6px 8px 4px;
}

.dash-y-axis-chart {
  font-size: 9px;
  font-weight: 650;
  height: 170px;
}

.dash-y-axis-chart .dash-axis-label {
  top: calc(var(--chart-top-inset) + (var(--line-index) / var(--line-count)) * (100% - var(--chart-top-inset) - var(--chart-bottom-inset)) + 1px);
}

.dash-chart-grid {
  position: absolute;
  inset: var(--chart-top-inset) 0 var(--chart-bottom-inset);
  z-index: 1;
}

.dash-chart-plot {
  position: relative;
  height: 170px;
  overflow: visible;
}

.dash-chart-h-line {
  position: absolute;
  pointer-events: none;
  display: block;
  left: 0;
  right: 0;
  top: calc((var(--line-index) / var(--line-count)) * 100%);
  height: 1px;
  background: rgba(178, 203, 239, 0.52);
}

.dash-chart-h-line.is-base {
  height: 3px;
  background: rgba(194, 219, 252, 0.92);
}

.dash-chart-bars {
  position: absolute;
  inset: var(--chart-top-inset) 0 var(--chart-bottom-inset);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
}

.dash-bar-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.dash-bar-value {
  color: #d6e9ff;
  font-size: 9px;
  min-height: 10px;
  font-weight: 700;
  line-height: 1;
}

.dash-bar-value.is-zero {
  color: #c4d7f1;
}

.dash-bar {
  width: 68%;
  border-radius: 3px 3px 0 0;
  min-height: 0;
}

.dash-bar.is-blue {
  background: linear-gradient(180deg, #3e95df, #2f6fb4);
}

.dash-bar.is-gold {
  background: linear-gradient(180deg, #e8bf5d, #c89234);
}

.dash-bar.is-zero {
  background: transparent;
}

.dash-bar-date {
  color: #b9cde9;
  font-size: 10px;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
  transform: none;
}

.dash-chart-dates {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: flex-end;
  justify-items: center;
  padding: 0 1px;
}

.dash-chart-dates .dash-bar-date:first-child {
  transform: none;
}

.dash-chart-dates .dash-bar-date:last-child {
  transform: none;
}

.dash-emp-wrap {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 6px;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(143, 171, 221, 0.3);
  border-radius: 10px;
  background: rgba(20, 40, 79, 0.28);
  overflow: hidden;
  padding: 8px 8px 6px 6px;
}

.dash-y-axis {
  --axis-label-space: 34px;
  --axis-top-space: 6px;
  position: relative;
  padding-bottom: var(--axis-label-space);
  color: #cddcf1;
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
}

.dash-axis-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: calc(var(--axis-top-space) + (var(--line-index) / var(--line-count)) * (100% - var(--axis-label-space) - var(--axis-top-space)));
  line-height: 1;
  min-width: 18px;
  text-align: center;
}

.dash-emp-plot {
  position: relative;
  min-height: 0;
}

.dash-emp-grid {
  position: absolute;
  inset: 6px 0 34px;
}

.dash-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--line-index) / var(--line-count)) * 100%);
  height: 1px;
  background: rgba(160, 187, 229, 0.28);
}

.dash-grid-line.is-base {
  height: 2px;
  background: rgba(160, 187, 229, 0.5);
}

.dash-emp-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.dash-emp-item {
  display: grid;
  grid-template-rows: 1fr 34px;
  align-items: end;
  justify-items: center;
  height: 100%;
}

.dash-emp-bar {
  grid-row: 1;
  align-self: end;
  position: relative;
  width: 42px;
  min-height: 0;
  border-radius: 8px 8px 2px 2px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 0 0;
  overflow: visible;
}

.dash-emp-bar.is-zero {
  height: 0;
  padding: 0;
  background: transparent;
}

.dash-emp-bar strong {
  font-size: 9px;
  font-weight: 780;
  color: #f0f6ff;
}

.dash-emp-bar.is-green {
  background: linear-gradient(180deg, #86c67a, #4a8055);
}

.dash-emp-bar.is-gold {
  background: linear-gradient(180deg, #e7cc74, #a58d41);
}

.dash-emp-bar.is-pink {
  background: linear-gradient(180deg, #d58c9e, #915a69);
}

.dash-emp-bar.is-zero,
.dash-emp-bar.is-green.is-zero,
.dash-emp-bar.is-gold.is-zero,
.dash-emp-bar.is-pink.is-zero {
  background: transparent;
}

.dash-emp-bar.is-zero strong {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translate(-50%, -100%);
}

.dash-emp-bar.is-gold.is-zero strong {
  color: #e7cc74;
}

.dash-emp-item span {
  grid-row: 2;
  align-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 34px;
  padding-top: 2px;
  color: #dfecff;
  font-size: 9px;
  line-height: 1.15;
  text-align: center;
}

.dash-task-wrap {
  overflow: hidden;
  max-height: 100%;
  flex: 1 1 auto;
}

.dash-task-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  color: #e2edff;
  font-size: 10px;
  font-weight: 520;
  table-layout: fixed;
}

.dash-task-table th,
.dash-task-table td {
  border: 1px solid rgba(151, 178, 221, 0.36);
  padding: 5px 3px;
}

.dash-task-table th {
  text-align: center;
  color: #f1f7ff;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(61, 111, 180, 0.6);
  padding: 7px 4px;
  line-height: 1.15;
}

.dash-task-table td {
  background: rgba(24, 46, 86, 0.34);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-c-order,
.dash-c-op,
.dash-c-plan,
.dash-c-unit,
.dash-c-status,
.dash-c-fact,
.dash-c-loss {
  text-align: center;
}

.dash-c-name {
  text-align: left;
}

.dash-c-date {
  font-size: 9.5px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
  line-height: 1.1;
  white-space: normal;
}

.dash-c-perf {
  text-align: left;
  white-space: normal;
  line-height: 1.1;
}

.dash-c-status,
.dash-c-loss {
  overflow: visible;
  text-overflow: clip;
}

.dash-task-table .status-pill {
  min-height: 18px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  letter-spacing: -0.15px;
}

.dash-loss-tag {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 3px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.dash-loss-tag.is-clear {
  color: #d9ffe6;
  background: rgba(57, 152, 98, 0.34);
}

.dash-loss-tag.is-loss {
  color: #ffdce5;
  background: rgba(197, 73, 117, 0.42);
}

/* «простой» — чистый жёлтый, чтобы чётко отличался от «брак» (розовый)
   и от «простой, брак» (оранжевый is-both). */
.dash-loss-tag.is-downtime {
  color: #fff4c5;
  background: rgba(224, 185, 54, 0.48);
}

.dash-loss-tag.is-both {
  color: #ffd7a8;
  background: rgba(217, 120, 59, 0.45);
}

.dash-reason-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 4px 0 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 171, 221, 0.45) transparent;
}

.dash-reason-list::-webkit-scrollbar {
  width: 5px;
}

.dash-reason-list::-webkit-scrollbar-track {
  background: transparent;
}

.dash-reason-list::-webkit-scrollbar-thumb {
  background: rgba(143, 171, 221, 0.45);
  border-radius: 3px;
}

.dash-reason-list::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 171, 221, 0.7);
}

.dash-reason-card-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26, 48, 87, 0.78), rgba(18, 34, 65, 0.78));
  border: 1px solid rgba(114, 145, 202, 0.3);
  flex: 0 0 calc((100% - 16px) / 3);
  min-height: 0;
}

.dash-reason-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dash-reason-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.dash-reason-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-reason-card-row.is-loss .dash-reason-icon {
  background: linear-gradient(180deg, #d8638a, #b24a72);
}

.dash-reason-card-row.is-downtime .dash-reason-icon {
  background: linear-gradient(180deg, #4e8ed4, #2f6bb0);
}

.dash-reason-card-row.is-defect .dash-reason-icon {
  background: linear-gradient(180deg, #d8a14a, #a87527);
}

.dash-reason-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.dash-reason-title {
  color: #edf4ff;
  font-size: 11.5px;
  font-weight: 620;
  white-space: normal;
}

.dash-reason-sub {
  color: #8ea6c9;
  font-size: 9.5px;
  font-weight: 500;
}

.dash-reason-value {
  color: #f2f7ff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: -0.01em;
  white-space: normal;
  text-align: left;
  line-height: 1.2;
}

.dash-reason-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 170, 210, 0.18);
  overflow: hidden;
}

.dash-reason-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.dash-reason-card-row.is-loss .dash-reason-progress > span {
  background: linear-gradient(90deg, #d8638a, #b24a72);
}

.dash-reason-card-row.is-downtime .dash-reason-progress > span {
  background: linear-gradient(90deg, #4e8ed4, #2f6bb0);
}

.dash-reason-card-row.is-defect .dash-reason-progress > span {
  background: linear-gradient(90deg, #d8a14a, #a87527);
}

.dash-reason-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  color: #8ea6c9;
  font-size: 12px;
  font-weight: 540;
  padding: 16px;
  text-align: center;
}