.dashboard-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(102, 133, 189, 0.36);
  border-radius: 16px;
  padding: 4px;
  background:
    radial-gradient(840px 360px at 16% -26%, rgba(255, 165, 65, 0.08), transparent 60%),
    radial-gradient(760px 320px at 98% -16%, rgba(90, 153, 255, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(10, 24, 49, 0.95), rgba(8, 18, 36, 0.97));
  box-shadow: inset 0 1px 0 rgba(221, 234, 255, 0.05);
  overflow: hidden;
}

.dashboard-head {
  border: 1px solid rgba(104, 138, 197, 0.34);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(10, 24, 49, 0.92), rgba(20, 38, 72, 0.78));
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dash-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

.dash-dt-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dash-dt-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(148, 170, 210, 0.12);
  border: 1px solid rgba(148, 170, 210, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-dt-ico svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #c6d5ee;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-dt {
  color: #ecf3ff;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dash-company {
  color: #c6d5ee;
  font-size: 15px;
  font-weight: 500;
  margin-left: 6px;
}

.dash-kpi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.dash-kpi {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px 7px 7px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28, 48, 87, 0.85), rgba(18, 34, 65, 0.85));
  border: 1px solid rgba(114, 145, 202, 0.32);
  min-width: 152px;
}

.dash-kpi-ico {
  width: 36px;
  height: 36px;
  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-kpi-ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-kpi.is-loss .dash-kpi-ico {
  background: linear-gradient(180deg, #d8638a, #b24a72);
}

.dash-kpi.is-downtime .dash-kpi-ico {
  background: linear-gradient(180deg, #4e8ed4, #2f6bb0);
}

.dash-kpi.is-defect .dash-kpi-ico {
  background: linear-gradient(180deg, #d8a14a, #a87527);
}

.dash-kpi.is-nosum .dash-kpi-ico {
  background: linear-gradient(180deg, #9c6fd6, #6e45a8);
}

.dash-kpi-text {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
  min-width: 0;
}

.dash-kpi-label {
  color: #b9cbeb;
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.dash-kpi-value {
  color: #f2f7ff;
  font-size: 15.5px;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.dashboard-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  flex: 1 1 auto;
  min-height: 0;
}

.dash-card {
  border: 1px solid rgba(106, 141, 204, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, #233f78, #203763);
  padding: 7px;
  box-shadow: inset 0 1px 0 rgba(204, 223, 255, 0.08);
  min-height: 0;
}

.dash-card h3 {
  margin: 0 0 10px;
  color: #e7f1ff;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}

.dash-card h3 .dash-h3-ico {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #a9c1e6;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.dash-card-sub {
  margin-left: 6px;
  color: #8fa5c9;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.dash-card h3.dash-card-h3-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.dash-card h3.dash-card-h3-stacked .dash-h3-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dash-card h3.dash-card-h3-stacked .dash-card-sub {
  margin-left: 0;
}

.dash-shift-card {
  grid-column: span 4;
  min-height: 246px;
}

.dash-chart-card {
  grid-column: span 4;
  min-height: 246px;
  display: flex;
  flex-direction: column;
}

.dash-chart-card h3 {
  margin-bottom: 4px;
}

.dash-people-card {
  grid-column: span 2;
  min-height: 270px;
  display: flex;
  flex-direction: column;
}

.dash-task-card {
  grid-column: span 8;
  min-height: 270px;
  display: flex;
  flex-direction: column;
}

.dash-reason-card {
  grid-column: span 2;
  min-height: 270px;
  display: flex;
  flex-direction: column;
}

.dash-shift-row {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(100px, 2fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dash-shift-row:last-child {
  margin-bottom: 0;
}

.dash-shift-label {
  color: #d7e4f9;
  font-size: 11px;
  font-weight: 620;
  line-height: 1.12;
}

.dash-shift-wrap {
  display: grid;
  grid-template-columns: minmax(102px, 108px) minmax(100px, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.dash-shift-labels {
  display: grid;
  grid-template-rows: repeat(6, 24px);
  gap: 9px;
}

.dash-shift-label-item {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  padding-right: 6px;
  color: #d7e4f9;
  font-size: 10px;
  font-weight: 620;
  line-height: 1.06;
}

.dash-shift-plot {
  position: relative;
  overflow: visible;
}

.dash-shift-grid {
  position: absolute;
  inset: -3px 0 -3px;
  background:
    linear-gradient(to right, rgba(164, 191, 233, 0.58) 0, rgba(164, 191, 233, 0.58) 0.35%, transparent 0.35%),
    linear-gradient(to right, transparent 24.88%, rgba(157, 183, 224, 0.46) 24.88%, rgba(157, 183, 224, 0.46) 25.12%, transparent 25.12%),
    linear-gradient(to right, transparent 49.88%, rgba(157, 183, 224, 0.46) 49.88%, rgba(157, 183, 224, 0.46) 50.12%, transparent 50.12%),
    linear-gradient(to right, transparent 74.88%, rgba(157, 183, 224, 0.46) 74.88%, rgba(157, 183, 224, 0.46) 75.12%, transparent 75.12%),
    linear-gradient(to right, transparent 99.65%, rgba(164, 191, 233, 0.56) 99.65%, rgba(164, 191, 233, 0.56) 100%);
}

.dash-shift-bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(6, 24px);
  gap: 9px;
}

.dash-shift-bar-row {
  position: relative;
  min-height: 24px;
  display: flex;
  align-items: center;
}

.dash-shift-bar-fill {
  height: 14px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7px;
  min-width: 0;
}

.dash-shift-bar-fill b {
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.dash-shift-bar-zero {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
}

.dash-shift-bar-row.is-gold .dash-shift-bar-fill {
  background: linear-gradient(90deg, #e7bf58, #efd976);
}

.dash-shift-bar-row.is-amber .dash-shift-bar-fill {
  background: linear-gradient(90deg, #d8a64a, #e1ba62);
}

.dash-shift-bar-row.is-green .dash-shift-bar-fill {
  background: linear-gradient(90deg, #6eb688, #5ea57a);
}

.dash-shift-bar-row.is-pink .dash-shift-bar-fill {
  background: linear-gradient(90deg, #cd8499, #b87389);
}

.dash-shift-bar-row.is-gold .dash-shift-bar-fill b {
  color: #503b15;
}

.dash-shift-bar-row.is-amber .dash-shift-bar-fill b {
  color: #47360e;
}

.dash-shift-bar-row.is-green .dash-shift-bar-fill b {
  color: #edfff4;
}

.dash-shift-bar-row.is-pink .dash-shift-bar-fill b {
  color: #fff0f5;
}

.dash-shift-bar-row.is-zero .dash-shift-bar-fill {
  width: 0 !important;
  padding-right: 0;
}

.dash-shift-bar-row.is-zero .dash-shift-bar-fill b {
  display: none;
}

.dash-shift-bar-row.is-zero .dash-shift-bar-zero {
  display: block;
}

.dash-shift-bar-row.is-zero.is-gold .dash-shift-bar-zero {
  color: #e1bf63;
}

.dash-shift-bar-row.is-zero.is-amber .dash-shift-bar-zero {
  color: #d3ad53;
}

.dash-shift-bar-row.is-zero.is-green .dash-shift-bar-zero {
  color: #94d6a5;
}

.dash-shift-bar-row.is-zero.is-pink .dash-shift-bar-zero {
  color: #eaa7b8;
}

.dash-shift-track {
  position: relative;
  height: 18px;
  border-left: 2px solid rgba(167, 191, 231, 0.6);
  padding-left: 8px;
  overflow: hidden;
}

.dash-shift-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 24.8%, rgba(157, 183, 224, 0.3) 24.8%, rgba(157, 183, 224, 0.3) 25.2%, transparent 25.2%),
    linear-gradient(to right, transparent 49.8%, rgba(157, 183, 224, 0.3) 49.8%, rgba(157, 183, 224, 0.3) 50.2%, transparent 50.2%),
    linear-gradient(to right, transparent 74.8%, rgba(157, 183, 224, 0.3) 74.8%, rgba(157, 183, 224, 0.3) 75.2%, transparent 75.2%),
    linear-gradient(to right, transparent 99.2%, rgba(157, 183, 224, 0.3) 99.2%, rgba(157, 183, 224, 0.3) 99.8%, transparent 99.8%);
}

.dash-shift-track span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  border-radius: 2px;
  min-width: 0;
  padding-right: 8px;
}

.dash-shift-track span b {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.dash-shift-track i {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  font-size: 12px;
  font-weight: 700;
}

.dash-shift-track.is-gold span {
  background: linear-gradient(90deg, #efb34b, #edd26e);
}

.dash-shift-track.is-green span {
  background: linear-gradient(90deg, #7dc28b, #5da06c);
}

.dash-shift-track.is-pink span {
  background: linear-gradient(90deg, #d995a7, #b97587);
}

.dash-shift-track.is-gold span b {
  color: #503b15;
}

.dash-shift-track.is-green span b {
  color: #edfff4;
}

.dash-shift-track.is-pink span b {
  color: #fff0f5;
}

.dash-shift-track.is-zero span {
  width: 0 !important;
  padding-right: 0;
}

.dash-shift-track.is-zero span b {
  display: none;
}

.dash-shift-track.is-zero i {
  display: block;
}

.dash-shift-track.is-zero.is-gold i {
  color: #f0d676;
}

.dash-shift-track.is-zero.is-green i {
  color: #94d6a5;
}

.dash-shift-track.is-zero.is-pink i {
  color: #eaa7b8;
}

.dash-shift-value {
  text-align: right;
  color: #ffe39f;
  font-size: 11px;
  font-weight: 700;
}