.movement-analysis-panel {
  /* Inherits panel styles if we use the class "panel" on the container, 
     but if we generate the section inside, we might need to apply styles or assume global styles.
     For now, we assume the container in index.html will handle the layout positioning,
     and this component will fill it. */
}

.band-year-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.band-year-selector label {
  font-size: 13px;
  color: var(--muted);
}

.band-year-selector select {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

.band-change-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.band-change-col {
  min-height: 100px;
}

.band-change-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  border-radius: 8px;
}

.band-change-title.up {
  background: rgba(22, 163, 74, 0.1);
  color: var(--good);
}

.band-change-title.down {
  background: rgba(220, 38, 38, 0.1);
  color: var(--bad);
}

.band-movers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.band-mover-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.band-mover-item .uni-name {
  font-size: 13px;
  font-weight: 500;
}

.band-mover-item .band-change {
  font-size: 12px;
  font-weight: 600;
}

.band-mover-item .band-change.up { color: var(--good); }
.band-mover-item .band-change.down { color: var(--bad); }

.no-movers {
  color: var(--muted);
  font-size: 13px;
  padding: 12px;
  text-align: center;
}

@media (max-width: 600px) {
  .band-change-grid {
    grid-template-columns: 1fr;
  }
}