/* Berth Board panel — an existing panel on the Port Operations Console. Built on the
   design system: color, type, spacing, and radius resolve through design/tokens.css,
   so it re-themes when brand.yaml changes. */

.berth-board {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
}

.berth-board__header {
  align-items: baseline;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.berth-board__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading);
  margin: 0;
}

.berth-board__count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.berth-board__list {
  display: grid;
  gap: var(--space-4);
}

.berth-board__row {
  display: grid;
  gap: var(--space-2);
}

.berth-board__label {
  align-items: baseline;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.berth-board__name {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: 650;
  margin: 0;
}

.berth-board__value {
  color: var(--color-text);
  font-family: var(--mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.berth-board__meter {
  background: var(--color-track);
  border-radius: var(--radius-sm);
  height: var(--space-3);
  overflow: hidden;
}

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

.berth-board__fill--low { background: var(--cap-low); }
.berth-board__fill--med { background: var(--cap-med); }
.berth-board__fill--high { background: var(--cap-high); }
.berth-board__fill--full { background: var(--cap-full); }