
/* v0.71 FIX2 — dashboard chart + 5-person alert pager */

.erp071-dashboard-chart-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:14px;
  margin:2px 0 18px;
}

.erp071-chart-card {
  min-width:0;
  padding:16px 17px 14px;
  border:1px solid #e5eaf2;
  border-radius:13px;
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
  box-shadow:0 2px 8px rgba(17,39,73,.035);
}

.erp071-chart-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.erp071-chart-head > div {
  display:grid;
  gap:3px;
}
.erp071-chart-head b {
  color:#1b3150;
  font-size:12px;
  font-weight:800;
}
.erp071-chart-head span {
  color:#8a98aa;
  font-size:10px;
}
.erp071-chart-head strong {
  color:#173a6c;
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.erp071-bar-chart {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  height:150px;
  padding:5px 2px 0;
}
.erp071-bar-item {
  display:grid;
  grid-template-rows:24px 1fr 22px;
  gap:4px;
  min-width:0;
}
.erp071-bar-value {
  align-self:end;
  overflow:hidden;
  color:#8090a3;
  font-size:9px;
  font-weight:700;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.erp071-bar-track {
  position:relative;
  overflow:hidden;
  min-height:72px;
  border-radius:7px 7px 4px 4px;
  background:
    repeating-linear-gradient(
      to top,
      #f7f9fc 0,
      #f7f9fc calc(25% - 1px),
      #eef2f7 calc(25% - 1px),
      #eef2f7 25%
    );
}
.erp071-bar-track span {
  position:absolute;
  right:18%;
  bottom:0;
  left:18%;
  min-height:3px;
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,#5a8ff3 0%,#2f6fed 100%);
  box-shadow:0 3px 8px rgba(47,111,237,.18);
}
.erp071-bar-label {
  color:#718198;
  font-size:10px;
  font-weight:750;
  text-align:center;
}

.erp071-donut-wrap {
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:center;
  gap:15px;
  min-height:150px;
}
.erp071-donut {
  position:relative;
  width:116px;
  height:116px;
  margin:auto;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(17,39,73,.035);
}
.erp071-donut::after {
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(17,39,73,.05);
}
.erp071-donut-center {
  position:absolute;
  z-index:2;
  inset:27px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
}
.erp071-donut-center small {
  color:#8a98aa;
  font-size:8px;
}
.erp071-donut-center b {
  color:#173a6c;
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}

.erp071-cost-legend {
  display:grid;
  gap:8px;
  min-width:0;
}
.erp071-legend-row {
  display:grid;
  grid-template-columns:9px 32px minmax(0,1fr) 38px;
  align-items:center;
  gap:6px;
  min-width:0;
  color:#65768d;
  font-size:10px;
}
.erp071-legend-dot {
  width:8px;
  height:8px;
  border-radius:50%;
}
.erp071-legend-row b {
  overflow:hidden;
  color:#263e5d;
  font-size:10px;
  font-weight:800;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.erp071-legend-row em {
  color:#94a1b1;
  font-size:9px;
  font-style:normal;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Keep site cost summary compact below the charts. */
.erp071-dashboard-chart-grid + .site-cost-list {
  border-top:1px solid #edf1f6;
  padding-top:13px;
}
.erp071-dashboard-chart-grid + .site-cost-list .cost-row {
  min-height:58px;
}

/* 5-person pagination inside "확인이 필요한 인력". */
.erp071-alert-hidden {
  display:none!important;
}
.erp071-alert-pager {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  margin-top:4px;
  padding:8px 2px 0;
  border-top:1px solid #edf1f5;
}
.erp071-alert-summary {
  color:#8a98aa;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.erp071-alert-page-buttons {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}
.erp071-alert-page-buttons button {
  min-width:28px;
  height:28px;
  padding:0 7px;
  border:1px solid #dce4ef;
  border-radius:8px;
  background:#fff;
  color:#58708f;
  font-size:10px;
  font-weight:800;
  line-height:1;
  box-shadow:none;
}
.erp071-alert-page-buttons button:hover:not(:disabled) {
  border-color:#b8ccef;
  color:#245fc8;
  background:#f6f9ff;
}
.erp071-alert-page-buttons button.active {
  color:#fff;
  border-color:#2f6fed;
  background:#2f6fed;
}
.erp071-alert-page-buttons button:disabled {
  opacity:.35;
}
.erp071-alert-page-buttons i {
  min-width:18px;
  color:#9ba8b7;
  font-size:10px;
  font-style:normal;
  text-align:center;
}

/* Prevent the old giant same-row stretch feeling. */
.erp071-ui .dashboard-grid {
  align-items:start;
}
.erp071-ui .dashboard-grid > .panel {
  align-self:stretch;
}
.erp071-ui .dashboard-grid .alert-list {
  min-height:0;
}

@media (max-width:1100px) {
  .erp071-dashboard-chart-grid {
    grid-template-columns:1fr;
  }
  .erp071-donut-wrap {
    grid-template-columns:135px minmax(0,1fr);
  }
}

@media (max-width:760px) {
  .erp071-dashboard-chart-grid {
    gap:10px;
    margin-bottom:14px;
  }
  .erp071-chart-card {
    padding:13px 12px 12px;
  }
  .erp071-bar-chart {
    gap:4px;
    height:138px;
  }
  .erp071-bar-track span {
    right:14%;
    left:14%;
  }
  .erp071-donut-wrap {
    grid-template-columns:105px minmax(0,1fr);
    gap:10px;
  }
  .erp071-donut {
    width:100px;
    height:100px;
  }
  .erp071-donut::after {
    inset:16px;
  }
  .erp071-donut-center {
    inset:24px;
  }
  .erp071-alert-pager {
    align-items:flex-start;
    flex-direction:column;
  }
}
