.transfers-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

.tr-header {
  padding: 12px 14px;
  border-bottom: 1px solid #e4e8ee;
  background: white;
  flex-shrink: 0;
}
.tr-ship { font-size: 16px; font-weight: 700; color: var(--theme-primary, #0d2840); }
.tr-meta { font-size: 11px; color: #6b7785; margin-top: 3px; }

.tr-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.tr-loading, .tr-error {
  padding: 20px;
  font-size: 13px;
  color: #6b7785;
}
.tr-error { color: #c92a2a; }

.tr-cat {
  background: white;
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.tr-cat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  border-bottom: 1px solid #e4e8ee;
}
.tr-cat-icon { font-size: 16px; }
.tr-cat-label { flex: 1; }
.tr-cat-count {
  padding: 1px 8px; border-radius: 9px; font-size: 10px;
}
.tr-cat-direct .tr-cat-head { background: #e8f5ea; color: #155724; }
.tr-cat-direct .tr-cat-count { background: #d4edda; color: #155724; }
.tr-cat-window .tr-cat-head { background: #fff8e1; color: #7d3c00; }
.tr-cat-window .tr-cat-count { background: #fce5cd; color: #7d3c00; }
.tr-cat-courier .tr-cat-head { background: #e1f0f5; color: #0c5460; }
.tr-cat-courier .tr-cat-count { background: #d1ecf1; color: #0c5460; }

.tr-cat-list { padding: 4px 8px 8px; }

.tr-empty-cat {
  padding: 12px 10px;
  font-size: 11px;
  font-style: italic;
  color: #8a93a0;
  text-align: center;
}

.tr-match {
  padding: 8px 10px;
  margin-top: 4px;
  background: #fafbfc;
  border: 1px solid #eef0f3;
  border-radius: 5px;
}
.tr-match-port {
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-primary, #0d2840);
  margin-bottom: 5px;
}
.tr-match-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 12px;
}
.tr-match-ship { font-weight: 600; color: #1a2332; }
.tr-match-ship-name { font-weight: 400; color: #4a5664; margin-left: 4px; }
.tr-match-date {
  font-size: 11px;
  color: #6b7785;
  font-variant-numeric: tabular-nums;
}
.tr-match-delta {
  display: inline-block;
  padding: 0 5px;
  background: #e4e8ee;
  border-radius: 8px;
  font-size: 10px;
  color: #4a5664;
  margin-left: 4px;
}
.tr-match-port-from, .tr-match-port-to {
  font-size: 11px;
  color: #6b7785;
  padding: 2px 0 2px 8px;
}
.tr-match-arrow {
  text-align: center;
  color: #b8bcc4;
  font-size: 14px;
  margin: 2px 0;
}

/* Einklappbar */
.tr-cat .tr-cat-head { cursor: pointer; user-select: none; }
.tr-cat .tr-cat-head::after {
  content: '›';
  margin-left: 4px;
  transform: rotate(0deg);
  transition: transform 0.15s;
  font-size: 14px;
  opacity: 0.6;
}
.tr-cat.open .tr-cat-head::after { transform: rotate(90deg); }
.tr-cat .tr-cat-list { display: none; }
.tr-cat.open .tr-cat-list { display: block; }

/* Clear-Button im Header (nur Encounters-Modus) */
.tr-header { position: relative; }
.tr-clear {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid #d8dee5;
  background: white;
  color: #6b7785;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.tr-clear:hover { background: #f4f6f8; color: #1a2332; }

/* Match-Items in Encounters klickbar machen */
.tr-match[data-shipid] { cursor: pointer; transition: background 0.12s; }
.tr-match[data-shipid]:hover { background: #f0f7ff; border-color: var(--theme-primary, #0d2840); }

.tr-empty { text-align: center; padding: 40px 20px; color: #6b7785; }
.tr-empty-icon { font-size: 32px; opacity: 0.5; margin-bottom: 8px; }
.tr-empty p { margin: 0; font-size: 13px; }

/* Transfer-Hinweis-Zeile */
.tr-match-hint {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed #eef0f3;
  font-size: 11px;
  font-style: italic;
  color: #4a5664;
}