/* Berth Board panel — an existing panel on the Port Operations Console. */

.berth-board {
  background: #171b1c;
  border: 1px solid #383f43;
  border-radius: 14px;
  padding: 20px;
}

.berth-board__header {
  align-items: baseline;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.berth-board__title {
  font-size: 1.562rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.berth-board__count {
  color: #a0acb1;
  font-size: 0.875rem;
  margin: 0;
}

.berth-board__list {
  display: grid;
  gap: 16px;
}

.berth-board__row {
  display: grid;
  gap: 8px;
}

.berth-board__label {
  align-items: baseline;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.berth-board__name {
  color: #a0acb1;
  font-size: 1rem;
  font-weight: 650;
  margin: 0;
}

.berth-board__value {
  color: #eef1f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.berth-board__meter {
  background: #2c3235;
  border-radius: 8px;
  height: 12px;
  overflow: hidden;
}

.berth-board__fill {
  border-radius: inherit;
  height: 100%;
}

.berth-board__fill--low { background: #45c485; }
.berth-board__fill--med { background: #dfbc49; }
.berth-board__fill--high { background: #ed9345; }
.berth-board__fill--full { background: #ea6753; }