/* ResultsBox common module (GT-ST Manual 6.5.5 and 6.5.9).
   Fixed-size panel on the right side of the screen, next to the
   InformationBox: the bottom is kept for ButtonsBox and NotificationBar.
   The size is fixed so that the module can measure it and split the table
   into pages. Values follow the shared tester UI style
   (.claude/rules/tester-ui-style.md). */

.results-box {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 43%;
  height: 64%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background-color: rgba(14, 21, 32, 0.92);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: #eef2f6;
  /* Tiresias and Verdana are the fonts Ginga-NCL receivers must provide
     (ITU-T H.761, canvas:attrFont); Arial is the fallback elsewhere. */
  font-family: Tiresias, Verdana, Arial, Helvetica, sans-serif;
  /* A case ID longer than its column breaks instead of running past the
     chip or the right edge. */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.results-box-hidden {
  display: none;
}

.results-box-header {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 28px 10px;
}

.results-box-title {
  min-width: 0;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.results-box-page-label {
  flex-shrink: 0;
  margin-left: 16px;
  white-space: nowrap;
  color: #8cc8ff;
  font-size: 18px;
  font-weight: bold;
}

.results-box-body {
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  padding: 10px 28px;
  font-size: 22px;
  line-height: 1.45;
}

/* One executed case: the ID on the left, the result chip on the right. */
.results-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.results-box-row + .results-box-row {
  border-top: 2px solid rgba(255, 255, 255, 0.08);
}

/* min-width: 0 lets a long ID shrink and break inside its column. */
.results-box-case-id {
  flex-grow: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* The result word on its color, so the result is never told by color alone. */
.results-box-chip {
  flex-shrink: 0;
  box-sizing: border-box;
  min-width: 112px;
  margin-left: 16px;
  padding: 2px 12px;
  border-radius: 6px;
  color: #0e1520;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}

.results-box-chip-pass {
  background-color: #6fd39b;
}

.results-box-chip-fail {
  background-color: #f08a8a;
}

.results-box-chip-skipped {
  background-color: #a9b8c8;
}

.results-box-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 12px 28px 22px;
}

.results-box-footer-hidden {
  display: none;
}

.results-box-progress {
  flex-grow: 1;
  height: 6px;
  margin-right: 16px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
}

.results-box-progress-fill {
  width: 0;
  height: 100%;
  background-color: #8cc8ff;
}

.results-box-page-counter {
  color: #a9b8c8;
  font-size: 18px;
  font-weight: bold;
}