/* Rostermania — Transfermarkt-inspired table layout
   FECOD brand tokens: bg #010729, surface #001E46, accent #AFDFF9 */

:root {
  --rm-bg:          #010729;
  --rm-surface:     #001E46;
  --rm-surface-2:   rgba(0, 30, 70, 0.6);
  --rm-border:      rgba(175, 223, 249, 0.12);
  --rm-border-s:    rgba(175, 223, 249, 0.24);
  --rm-text:        #ffffff;
  --rm-text-soft:   rgba(175, 223, 249, 0.82);
  --rm-text-muted:  rgba(175, 223, 249, 0.55);
  --rm-accent:      #AFDFF9;
  --rm-green:       #00C853;
  --rm-red:         #D30535;
  --rm-primary:     #004B9C;
  --rm-font-body:   "Space Mono", monospace;
  --rm-font-display:"Bakbak One", sans-serif;
}

/* ─── PAGE BODY ──────────────────────────────────────────────────── */
.rm-body {
  background-color: var(--rm-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(175,223,249,0.03) 18px,
    rgba(175,223,249,0.03) 19px
  );
  color: var(--rm-text);
  font-family: var(--rm-font-body);
  min-height: 100vh;
}

/* ─── HERO HEADER ─────────────────────────────────────────────────── */
.rm-header {
  background: var(--rm-surface);
  border-bottom: 2px solid rgba(175,223,249,0.18);
  position: relative;
  overflow: hidden;
}

.rm-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 22px,
    rgba(175,223,249,0.03) 22px,
    rgba(175,223,249,0.03) 23px
  );
  pointer-events: none;
}

.rm-header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2rem;
  position: relative;
  z-index: 1;
}

.rm-kicker {
  font-family: var(--rm-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  margin-bottom: 0.5rem;
}

.rm-title {
  font-family: var(--rm-font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rm-text);
  margin: 0 0 0.5rem;
  text-shadow: 0 0 60px rgba(175,223,249,0.15);
}

.rm-subtitle {
  font-size: 0.78rem;
  color: var(--rm-text-muted);
  margin: 0 0 1.25rem;
  animation: subtitle-pulse 3s ease-in-out infinite;
}

@keyframes subtitle-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.rm-subtitle strong {
  color: var(--rm-accent);
}

/* ─── COMPARE FORM ────────────────────────────────────────────────── */
.rm-compare {
  margin-bottom: 1rem;
}

.rm-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: end;
}

.rm-compare-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rm-compare-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
}

.rm-select {
  width: 100%;
  background: var(--rm-bg);
  color: var(--rm-text);
  border: 1px solid var(--rm-border-s);
  padding: 0.5rem 0.75rem;
  font-family: var(--rm-font-body);
  font-size: 0.75rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.rm-select:focus {
  border-color: var(--rm-accent);
  outline: none;
}

.rm-compare-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  white-space: nowrap;
}

.rm-btn {
  background: var(--rm-primary);
  color: #fff;
  border: 1px solid rgba(175, 223, 249, 0.2);
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  font-family: var(--rm-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 140ms ease;
}

.rm-btn:hover { background: #0059b8; }

.rm-btn-secondary {
  background: transparent;
  border-color: var(--rm-border-s);
  color: var(--rm-text-soft);
}

.rm-btn-secondary:hover {
  background: rgba(255,255,255,0.05);
}

.rm-link {
  color: var(--rm-text-muted);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 140ms ease;
}

.rm-link:hover { color: var(--rm-text); }

/* ─── META PILLS ──────────────────────────────────────────────────── */
.rm-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.rm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rm-border);
  background: transparent;
  color: var(--rm-text-muted);
  text-decoration: none;
  font-family: var(--rm-font-body);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 140ms ease, border-color 140ms ease;
}

.rm-pill:hover {
  color: var(--rm-text);
  border-color: var(--rm-border-s);
}

/* ─── MAIN LAYOUT ─────────────────────────────────────────────────── */
.rm-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ─── ERROR CARD ──────────────────────────────────────────────────── */
.rm-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  padding: 1.25rem;
}

.rm-card-error {
  border-color: rgba(211, 5, 53, 0.4);
}

.rm-muted { color: var(--rm-text-muted); }

/* ─── FREE AGENT SECTION ──────────────────────────────────────────── */
.rm-fa-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
}

.rm-fa-panel {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  padding: 1.25rem;
}

.rm-fa-panel-head,
.rm-fa-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rm-section-title-large {
  font-family: var(--rm-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--rm-text);
}

.rm-fa-count {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rm-border);
  background: transparent;
  color: var(--rm-text-muted);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.rm-fa-intro {
  margin: 0 0 1rem;
  color: var(--rm-text-muted);
  font-size: 0.75rem;
  line-height: 1.7;
}

.rm-fa-state {
  padding: 0.75rem 1rem;
  border: 1px solid var(--rm-border);
  background: rgba(255,255,255,0.02);
  color: var(--rm-text-soft);
  font-size: 0.75rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.rm-fa-state a { color: var(--rm-accent); }

.rm-fa-state-blocked {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.04);
}

.rm-fa-form,
.rm-fa-inline-form {
  display: grid;
  gap: 0.9rem;
}

.rm-fa-form-grid {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  gap: 0.9rem;
}

.rm-fa-field {
  display: grid;
  gap: 0.4rem;
}

.rm-fa-field-wide { min-width: 0; }

.rm-input,
.rm-textarea,
.rm-fa-form select {
  width: 100%;
  background: var(--rm-bg);
  color: var(--rm-text);
  border: 1px solid var(--rm-border-s);
  padding: 0.5rem 0.75rem;
  outline: none;
  font-family: var(--rm-font-body);
  font-size: 0.75rem;
  transition: border-color 140ms ease;
}

.rm-textarea {
  min-height: 100px;
  resize: vertical;
}

.rm-input:focus,
.rm-textarea:focus,
.rm-fa-form select:focus {
  border-color: var(--rm-accent);
}

.rm-field-error { color: #ff5050; font-size: 0.7rem; }

.rm-field-error-block {
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(211, 5, 53, 0.35);
  background: rgba(211, 5, 53, 0.08);
  font-size: 0.7rem;
}

.rm-fa-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Free agent list */
.rm-fa-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rm-fa-card {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rm-border);
  display: grid;
  gap: 0.6rem;
}

.rm-fa-card:first-child { border-top: 1px solid var(--rm-border); }

.rm-fa-card-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rm-fa-avatar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rm-fa-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--rm-border);
  background: var(--rm-surface);
}

.rm-fa-head {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 0.4rem;
}

.rm-fa-name-row,
.rm-fa-meta,
.rm-fa-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.rm-fa-name {
  color: var(--rm-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--rm-font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rm-fa-name:hover { color: var(--rm-accent); }

.rm-fa-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rm-border);
  background: transparent;
  color: var(--rm-text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-fa-badge-member {
  border-color: rgba(0, 200, 83, 0.3);
  color: #00C853;
}

.rm-fa-badge-muted {
  border-color: var(--rm-border);
  color: var(--rm-text-muted);
}

.rm-fa-headline {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rm-text-soft);
}

.rm-fa-bio {
  margin: 0;
  color: var(--rm-text-muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.rm-fa-bio-empty { color: rgba(175,223,249,0.3); }

.rm-fa-updated {
  color: var(--rm-text-muted);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rm-fa-profile-link {
  margin-left: auto;
  color: var(--rm-accent);
  text-decoration: none;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 140ms ease;
}

.rm-fa-profile-link:hover { color: #fff; }

/* ─── TRANSFER TABLES (Transfermarkt style) ──────────────────────── */
.rm-transfers-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rm-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--rm-border-s);
}

.rm-section-heading {
  font-family: var(--rm-font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--rm-text);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rm-section-heading .rm-count {
  font-family: var(--rm-font-body);
  font-size: 0.63rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rm-border);
  color: var(--rm-text-muted);
  letter-spacing: 0.1em;
}

.rm-section-kind-transfer .rm-section-header { border-bottom-color: rgba(175, 223, 249, 0.4); }
.rm-section-kind-arrival  .rm-section-header { border-bottom-color: rgba(0, 200, 83, 0.5); }
.rm-section-kind-departure .rm-section-header { border-bottom-color: rgba(211, 5, 53, 0.5); }

/* Table */
.rm-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rm-font-body);
  font-size: 0.75rem;
}

.rm-table thead th {
  padding: 0.45rem 0.75rem;
  background: var(--rm-surface);
  color: var(--rm-text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rm-border-s);
  white-space: nowrap;
}

.rm-table thead th:first-child { padding-left: 1rem; }
.rm-table thead th:last-child { padding-right: 1rem; text-align: right; }

.rm-tr {
  border-bottom: 1px solid var(--rm-border);
  transition: background 100ms ease;
  border-left: 3px solid transparent;
}

.rm-tr:hover { background: rgba(175, 223, 249, 0.04); }

/* Accent left border per transfer kind */
.rm-kind-arrival  .rm-tr { border-left-color: rgba(0, 200, 83, 0.5); }
.rm-kind-departure .rm-tr { border-left-color: rgba(211, 5, 53, 0.5); }
.rm-kind-transfer .rm-tr { border-left-color: rgba(175, 223, 249, 0.3); }

.rm-tr td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
}

.rm-tr td:first-child { padding-left: 1rem; }
.rm-tr td:last-child { padding-right: 1rem; }

/* ─── PLAYER CELL ─────────────────────────────────────────────────── */
.rm-td-player { white-space: nowrap; }

.rm-player-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rm-player-avatar {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid var(--rm-border);
  background: var(--rm-surface);
  flex-shrink: 0;
}

.rm-player-name {
  font-family: var(--rm-font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--rm-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── CLUB CELL ───────────────────────────────────────────────────── */
.rm-td-club { min-width: 140px; }

.rm-club-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--rm-text-soft);
  transition: color 120ms ease;
}

.rm-club-cell:hover { color: var(--rm-text); }

.rm-club-logo-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  padding: 3px;
}

.rm-club-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rm-club-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.rm-club-free {
  color: var(--rm-text-muted);
}

.rm-club-free .rm-club-name {
  font-style: italic;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  text-transform: uppercase;
}

/* ─── ARROW CELL ──────────────────────────────────────────────────── */
.rm-td-arrow {
  width: 36px;
  text-align: center;
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.rm-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
}

.rm-kind-transfer .rm-arrow { color: var(--rm-accent); }
.rm-kind-arrival  .rm-arrow { color: var(--rm-green); }
.rm-kind-departure .rm-arrow { color: var(--rm-red); }

/* ─── TYPE BADGE CELL ─────────────────────────────────────────────── */
.rm-td-type { text-align: right; white-space: nowrap; }

.rm-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid;
}

.rm-kind-transfer .rm-type-badge {
  color: var(--rm-accent);
  border-color: rgba(175, 223, 249, 0.3);
  background: rgba(175, 223, 249, 0.06);
}

.rm-kind-arrival .rm-type-badge {
  color: var(--rm-green);
  border-color: rgba(0, 200, 83, 0.3);
  background: rgba(0, 200, 83, 0.06);
}

.rm-kind-departure .rm-type-badge {
  color: var(--rm-red);
  border-color: rgba(211, 5, 53, 0.3);
  background: rgba(211, 5, 53, 0.06);
}

/* Empty state */
.rm-empty {
  padding: 1rem 1rem;
  border: 1px dashed var(--rm-border);
  color: var(--rm-text-muted);
  font-size: 0.72rem;
  text-align: center;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rm-compare-grid {
    grid-template-columns: 1fr;
  }
  .rm-compare-actions {
    justify-content: flex-start;
  }
  .rm-fa-shell {
    grid-template-columns: 1fr;
  }
  .rm-fa-form-grid {
    grid-template-columns: 1fr;
  }
  .rm-club-name { max-width: 80px; }
}

@media (max-width: 600px) {
  .rm-td-type { display: none; }
  .rm-club-name { max-width: 68px; }
  .rm-player-name { font-size: 0.72rem; }
}