/*
 * One look for the three Career Mode directories (players, clubs, managers).
 * The player database is the reference; clubs and managers (.career-directory-page) follow it.
 * Loaded last on those pages, so these rules win over the older per-page styles.
 */

/* Shared top bar: back to Discover, the three tabs, the active squad file. */
.career-directory-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 6px;
  border: 1px solid var(--panel-border, #ffffff14);
  border-radius: 14px;
  background: #101b29;
  min-width: 0;
}
.career-directory-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 9px;
  color: #b8c6d8;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.career-directory-nav__back:hover { color: #fff; background: #ffffff0a; }
.career-directory-nav__tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid #ffffff12;
  overflow-x: auto;
  scrollbar-width: none;
}
.career-directory-nav__tabs::-webkit-scrollbar { display: none; }
.career-directory-nav__tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #9fb0c4;
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.career-directory-nav__tabs a:hover { color: #fff; background: #ffffff0a; }
.career-directory-nav__tabs a.is-active { color: #fff; border-color: #3497ff; background: #12345a; box-shadow: inset 0 1px #ffffff14; }
.career-directory-nav a:focus-visible { outline: 2px solid #78bbff; outline-offset: 2px; }
.career-directory-nav__squad {
  margin-left: auto;
  padding: 0 12px;
  color: #6fb3ff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.career-database > .career-directory-nav + .career-change-tabs { margin-top: -8px; }

/* Same page width and grid as the player database. */
.career-directory-page.cc-page { padding-top: clamp(20px, 3vw, 32px); }
.career-directory-page .cc-layout { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 2vw, 40px); }
@media (min-width: 1600px) { .career-directory-page .cc-layout { grid-template-columns: 300px minmax(0, 1fr); } }
@media (min-width: 1024px) and (max-width: 1279px) { .career-directory-page .cc-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 20px; } }

/* Filter panel: same card, header, fields and sticky footer as .career-filter-panel. */
.career-directory-page .cc-filters {
  display: flex;
  flex-direction: column;
  border: 1px solid #ffffff0e;
  border-radius: 18px;
  background: linear-gradient(155deg, #18212d, #141920 180px);
  box-shadow: none;
  overflow: hidden;
}
.career-directory-page .cc-filters > summary {
  min-height: 0;
  padding: 20px;
  border-bottom: 1px solid #ffffff0a;
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -.025em;
}
.career-directory-page .cc-filter-body { display: grid; align-content: start; gap: 25px; padding: 20px; }
.career-directory-page .cc-filter-body .career-field { margin: 0; }
.career-directory-page .cc-filter-body fieldset { margin: 0; }
.career-directory-page .cc-filter-body .career-field > label,
.career-directory-page .cc-filter-body legend { margin-bottom: 10px; color: #dfe6ef; font-size: .9rem; font-weight: 650; }
.career-directory-page .cc-filters :is(.career-field select, .career-field input, .career-range input) {
  min-height: 44px;
  font-size: .9rem;
  background: #20262f;
  border-color: #ffffff12;
  border-radius: 9px;
  color: #e5e8ed;
}
.career-directory-page .cc-filters .cc-note { margin: 0; color: #8d9db2; font-size: .78rem; }
.cc-filter-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #ffffff0a;
  background: #141920;
}
.cc-filter-footer .button { min-height: 44px; padding-inline: 12px; font-size: .8rem; }
.cc-filter-footer .button--accent { flex: 1; justify-content: center; background: #1266d1; color: #fff; border-color: #408bdd; }
@media (min-width: 1100px) {
  .career-directory-page .cc-filters { position: sticky; top: 92px; max-height: calc(100vh - 112px); }
  .career-directory-page .cc-filter-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* Search bar and tools in one row, same height as on the player database. */
.career-directory-page .directory-toolbar { margin-bottom: 18px; }
.career-directory-page .career-results-search { min-height: 58px; border-radius: 14px; }

/* Result tables: same header, row height, portrait size and hover as the player table. */
.career-directory-page :is(.cc-table-wrap, .cc-team-list) {
  border: 1px solid #ffffff0e;
  border-radius: 18px;
  background: var(--panel-fill, #111a26);
  overflow: hidden;
}
.career-directory-page .cc-table th { height: 70px; padding: 17px 8px; font-size: .86rem; font-weight: 600; color: #c3cfde; }
.career-directory-page .cc-table td { height: 88px; padding: 14px 8px; font-size: .95rem; }
.career-directory-page .cc-table :is(td, th):first-child { padding-left: 18px; }
.career-directory-page .cc-table tbody tr { transition: background-color 160ms; }
.career-directory-page .cc-table tbody tr:is(:hover, :focus-within) { background: #1b2633; }
.career-directory-page .cc-table tbody tr:is(:hover, :focus-within) td:first-child { box-shadow: inset 3px 0 #58a7ff; }
.career-directory-page .cc-identity { grid-template-columns: 54px minmax(0, 1fr); }
.career-directory-page .cc-identity > img { width: 54px; height: 60px; border-radius: 12px; background: linear-gradient(150deg, #2b313c, #1d232d); object-fit: cover; }
.career-directory-page .cc-identity a { font-size: 1rem; font-weight: 650; letter-spacing: -.02em; }
.career-directory-page .cc-league { text-decoration: none; }
.career-directory-page .cc-league span { text-decoration: none; }
.career-directory-page a.cc-league:hover span { color: #a0d3ff; }

.career-directory-page .cc-team-labels { min-height: 70px; padding: 0 18px; font-size: .86rem; font-weight: 600; color: #c3cfde; }
.career-directory-page .cc-team-row { min-height: 88px; padding: 14px 18px; }
.career-directory-page .cc-team-row:hover { background: #1b2633; box-shadow: inset 3px 0 #58a7ff; }
.career-directory-page .cc-identity--club > img { padding: 6px; background: linear-gradient(150deg, #2b313c, #1d232d); object-fit: contain; }
.career-directory-page .cc-team-row .cc-club-nation { gap: 6px; margin-top: 4px; }
.career-directory-page .cc-team-row .cc-club-nation .nation-flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; }
.career-directory-page .cc-team-row .cc-club-nation .catalog-logo { width: 22px; height: 22px; object-fit: contain; }
.career-directory-page .cc-team-row .cc-club-nation small { font-size: .78rem; }
.career-directory-page .cc-score { min-width: 52px; height: 42px; border-radius: 7px; font-size: 1.02rem; font-weight: 750; }
.career-directory-page .cc-filters > summary { min-height: 68px; }

@media (max-width: 1023px) {
  .career-directory-nav { flex-wrap: wrap; }
  .career-directory-nav__squad { order: 3; width: 100%; margin: 0; padding: 4px 8px 6px; }
}
@media (max-width: 767px) {
  .career-directory-nav { gap: 6px; margin-bottom: 16px; }
  .career-directory-nav__back span:last-child { display: none; }
  .career-directory-nav__tabs { flex: 1; padding-left: 6px; }
  .career-directory-nav__tabs a { flex: 1; justify-content: center; padding: 0 6px; min-height: 44px; font-size: .8rem; }
  .career-directory-nav__back { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-directory-page .cc-table tbody tr { transition: none; }
}