/* โมดูลรายงาน - ทุก selector ขึ้นต้นด้วย .rep-
   กราฟทุกตัวเป็น CSS ล้วน ไม่พึ่งไลบรารีภายนอก */

/* ---------- แท่งแนวนอน (Pareto) ---------- */
.rep-bars { display: flex; flex-direction: column; gap: 7px; }
.rep-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 260px) 1fr auto;
  gap: 10px;
  align-items: center;
}
.rep-bar-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-bar-track { background: var(--oee-bg); border-radius: 4px; height: 20px; overflow: hidden; }
.rep-bar-fill { height: 100%; background: var(--oee-accent); border-radius: 4px; min-width: 2px; }
.rep-bar-unplanned { background: #d2453f; }
.rep-bar-planned { background: #4a6fa8; }
.rep-bar-value { font-size: 13px; font-family: var(--oee-font-num); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.rep-bar-sub { display: block; font-size: 11px; color: var(--oee-muted); }

.rep-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--oee-muted); flex-wrap: wrap; }
.rep-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rep-sw-unplanned { background: #d2453f; }
.rep-sw-planned { background: #4a6fa8; }
.rep-sw-pend { background: var(--oee-warn); }

.rep-split { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.rep-split-item {
  border: 1px solid var(--oee-line);
  border-radius: var(--oee-radius);
  padding: 8px 12px;
  font-size: 13px;
  background: var(--oee-bg);
}

/* ---------- แท่งตั้ง (รายวัน) ---------- */
.rep-cols {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  overflow-x: auto;
  padding-top: 6px;
}
.rep-col { flex: 1 0 22px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.rep-col-bar { background: #d2453f; border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
/* จุดเตือนบนยอดแท่ง = วันนั้นยังมีรายการที่ไม่รู้สาเหตุ ตัวเลขจึงยังไม่ครบ */
.rep-col-pend {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oee-warn);
}
.rep-col-x { font-size: 10px; color: var(--oee-muted); text-align: center; margin-top: 3px; font-family: var(--oee-font-num); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .rep-bar-row { grid-template-columns: 1fr auto; }
  .rep-bar-track { grid-column: 1 / -1; }
}