/*
 * 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); }
@media (min-width: 1280px) { .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: 1100px) 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; }
/* Flags exactly like on the player database: 24×18, never cropped or stretched. */
.career-directory-page .nation-flag, .career-directory-page .cc-club-nation .nation-flag, .career-directory-page .cc-team-row .cc-club-nation .nation-flag { width: 24px !important; height: 18px !important; object-fit: contain !important; 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; }
}
/* Managers on phones: one compact row (photo, name, flags, club · age, formation when known). */
@media (max-width: 1023px) {
  .career-directory-page .manager-mobile-row { grid-template-columns: 48px minmax(0, 1fr) auto 12px; min-height: 76px; padding: 10px 12px; gap: 12px; }
  .career-directory-page .manager-mobile-row .cc-face { width: 48px; height: 56px; border-radius: 10px; object-fit: cover; background: #1b2633; }
  .career-directory-page .manager-mobile-row .cc-mobile-identity > small { display: flex; flex-wrap: wrap; gap: 0 8px; }
  .career-directory-page .manager-mobile-row .cc-mobile-identity > small > span + span::before { content: "·"; margin-right: 8px; color: #6f8197; }
  .career-directory-page .manager-mobile-club { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  .career-directory-page .manager-mobile-formation { padding: 6px 8px; border-radius: 8px; background: #ffffff08; }
  .career-directory-page .manager-mobile-formation > small { margin-bottom: 2px; }
  .career-directory-page .manager-mobile-go { color: #6f8197; font-size: 1.3rem; line-height: 1; }
  .career-directory-page .manager-mobile-row:not(:has(.manager-mobile-formation)) { grid-template-columns: 48px minmax(0, 1fr) 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-directory-page .cc-table tbody tr { transition: none; }
}


/* ===== Phones: players, clubs and managers look the same (player database is the model) ===== */
@media (max-width: 767px) {
  /* Breathing room left and right. */
  .career-database, .catalog-list.career-directory-page { padding-left: 18px !important; padding-right: 18px !important; }

  /* Toolbar: search with a small Filters button next to it; sort on its own row underneath. */
  .career-database .career-results-toolbar,
  .catalog-list.career-directory-page .directory-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px; align-items: stretch; margin: 0 0 10px; }
  .career-database .career-results-toolbar > .career-results-search,
  .catalog-list.career-directory-page .directory-toolbar > .cc-toolbar.career-results-search { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; min-height: 48px; margin: 0; }
  .career-directory-page .directory-toolbar > .db-tools { display: contents; }
  .career-database .career-results-toolbar > .career-filter-trigger,
  .catalog-list.career-directory-page .directory-toolbar .db-filter-open { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto !important; min-width: 0; min-height: 48px; margin: 0; padding: 0 16px !important; border-radius: 14px; font-size: .86rem; }
  .career-database .career-results-toolbar > .career-columns,
  .career-directory-page .directory-toolbar .db-columns { display: none !important; }
  .career-database .career-results-toolbar > .db-mobile-sort,
  .career-directory-page .directory-toolbar .db-sort { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; }
  .career-directory-page .cc-results > .db-mobile-sort { display: flex; width: 100%; margin: 0 0 10px; }
  .career-directory-page .directory-toolbar .db-sort { display: flex !important; }
  .career-directory-page .directory-toolbar .db-sort > .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: nowrap; color: #9fb0c4; font-size: .8rem; font-weight: 650; }
  .career-database .db-mobile-sort, .career-directory-page .db-mobile-sort, .career-directory-page .db-sort { align-items: center; gap: 10px; }
  .career-database .db-mobile-sort > span, .career-directory-page .db-mobile-sort > span { position: static; width: auto; height: auto; clip: auto; overflow: visible; flex: 0 0 auto; color: #9fb0c4; font-size: .8rem; font-weight: 650; }
  .career-database .db-mobile-sort select, .career-directory-page .db-mobile-sort select, .career-directory-page .db-sort select {
    flex: 1; width: 100%; min-width: 0; max-width: none; min-height: 44px; padding: 0 38px 0 14px; border: 1px solid #ffffff1a; border-radius: 12px;
    color: #eef4fb; font: inherit; font-size: .88rem; font-weight: 600; text-overflow: ellipsis;
    appearance: none; -webkit-appearance: none;
    background: #151e29 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239fb0c4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  }

  /* Player rows: no (i) button, bigger portraits, OVR/POT labels centred under their boxes. */
  .career-database .career-mobile-preview { display: none !important; }
  .career-database .career-mobile-list { display: grid; gap: 8px; }
  .career-database .career-mobile-row { grid-template-columns: 58px minmax(0, 1fr) auto !important; gap: 6px 12px !important; padding: 12px 14px !important; align-items: center; }
  .career-database .career-mobile-row__portrait { width: 58px; height: 66px; }
  .career-database .career-mobile-row__portrait img { width: 58px; height: 66px; object-fit: cover; object-position: center top; }
  .career-database .career-mobile-row__metrics--ratings { display: grid !important; grid-template-columns: repeat(2, 44px); column-gap: 6px; row-gap: 3px; justify-items: center; align-items: center; }
  .career-database .career-mobile-row__metrics--ratings > small { width: 100%; text-align: center; font-size: .62rem; font-weight: 750; letter-spacing: .04em; color: #9fb0c4; }
  .career-database .career-mobile-row__metrics--ratings .career-rating-with-delta { position: relative; display: grid; place-items: center; }
  .career-database .career-mobile-row__metrics--ratings .career-rating-badge { width: 44px; min-width: 44px; height: 40px; display: grid; place-items: center; }

  /* Club rows as cards like the players: logo, name, flag + league, OVR and POT on the right. */
  .career-directory-page .cc-team-list { display: grid; gap: 8px; border: 0 !important; background: none !important; }
  .career-directory-page .cc-team-labels { display: none !important; }
  .career-directory-page .cc-team-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 48px 48px !important; align-items: center; gap: 6px !important; min-height: 0 !important; padding: 12px 14px !important; border: 1px solid #ffffff0d !important; border-radius: 14px; background: #141920 !important; }
  .career-directory-page .cc-team-row .cc-identity--club { grid-column: 1 !important; display: flex !important; align-items: center; min-width: 0; gap: 12px; }
  .career-directory-page .cc-team-row .cc-identity--club > div { min-width: 0; flex: 1; }
  .career-directory-page .cc-team-row .cc-identity--club a { display: block; font-size: .95rem; font-weight: 650; line-height: 1.3; }
  .career-directory-page .cc-team-row .cc-club-nation { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
  .career-directory-page .cc-team-row .cc-club-nation small { display: none; }
  .career-directory-page .cc-team-row .cc-identity--club > img { width: 52px; height: 52px; flex: 0 0 52px; }
  .career-directory-page .cc-team-row .cc-team-stat { display: none !important; }
  .career-directory-page .cc-team-row .cc-team-stat:is([data-club-stat="overall"], [data-club-stat="potential"]) { display: flex !important; flex-direction: column-reverse; align-items: center; gap: 3px; }
  .career-directory-page .cc-team-row .cc-team-stat > small { font-size: 0 !important; line-height: 1; }
  .career-directory-page .cc-team-row [data-club-stat="overall"] > small::after { content: "OVR"; font-size: .62rem; font-weight: 750; letter-spacing: .04em; color: #9fb0c4; }
  .career-directory-page .cc-team-row [data-club-stat="potential"] > small::after { content: "POT"; font-size: .62rem; font-weight: 750; letter-spacing: .04em; color: #9fb0c4; }
  .career-directory-page .cc-team-row .cc-score { min-width: 48px; width: 48px; height: 40px; padding: 0 !important; font-size: .86rem; white-space: nowrap; letter-spacing: -.02em; }

  /* Manager rows as cards too. */
  .career-directory-page .manager-mobile-list { display: grid; gap: 8px; border: 0 !important; background: none !important; }
  .career-directory-page .manager-mobile-row { padding: 12px 14px !important; border: 1px solid #ffffff0d !important; border-radius: 14px; background: #141920; }
  .career-directory-page .manager-mobile-row .cc-face { width: 58px !important; height: 66px !important; }
  .career-directory-page .manager-mobile-row { grid-template-columns: 58px minmax(0, 1fr) auto 12px !important; }
  .career-directory-page .manager-mobile-row:not(:has(.manager-mobile-formation)) { grid-template-columns: 58px minmax(0, 1fr) 12px !important; }
}

/* Tablets: filters open in a sheet (like phones) instead of a big open panel above the results. */
@media (min-width: 768px) and (max-width: 1099px) {
  .career-directory-page .db-tools { display: flex; align-items: center; gap: 10px; }
  .career-directory-page .db-tools .db-filter-open { display: inline-flex; min-height: 46px; }
  .career-directory-page .directory-toolbar { display: flex; gap: 10px; align-items: center; }
  .career-directory-page .directory-toolbar > .cc-toolbar.career-results-search { flex: 1; }
  .career-directory-page .db-mobile-sort { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 12px; }
  .career-directory-page .db-mobile-sort select { min-height: 44px; padding: 0 12px; border: 1px solid #ffffff1f; border-radius: 12px; background: #182431; color: #eef4fb; font: inherit; font-size: .9rem; }
}

/* ===== Filter sheet (players, clubs, managers) ===== */
/* Squad version: a single row at the bottom; the version picker only opens when you tap it. */
.career-squad-files { display: block !important; padding: 0 !important; }
.career-squad-files > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; cursor: pointer; list-style: none; }
.career-squad-files > summary::-webkit-details-marker { display: none; }
.career-squad-files > summary > span:first-child { color: #8fa3ba; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.career-squad-files > summary > strong { flex: 1; min-width: 0; overflow: hidden; color: #dbe8f6; font-size: .84rem; font-weight: 650; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.career-squad-files__chevron { color: #8fa3ba; transition: transform .2s ease; }
.career-squad-files[open] .career-squad-files__chevron { transform: rotate(180deg); }
.career-squad-files[open] { padding-bottom: 16px !important; }
.career-squad-files[open] > :not(summary) { margin: 0 20px 10px; }
.career-squad-files__header .eyebrow { display: none !important; }

/* Same room left and right in the sheet; no half-empty scrollbar gutter on touch screens. */
@media (max-width: 1023px) {
  .career-filter-panel__fields { padding: 18px 20px !important; }
  body[data-active-world="career"] [data-career-filter-scroll] { scrollbar-gutter: auto; padding-inline-end: 0; }
  .career-filter-panel__header { padding: 18px 20px !important; }
  .career-filter-panel__footer { padding: 12px 20px !important; }
  .db-filter-sheet { padding: 18px 20px !important; }
}

/* Nicer dropdowns in the filters: same height, rounded, custom arrow. */
:is(.career-filter-panel, .cc-filters, .db-filter-sheet) .career-field select:not([multiple]),
:is(.career-filter-panel, .cc-filters, .db-filter-sheet) select.career-select:not([multiple]) {
  width: 100%; min-height: 46px; padding: 0 40px 0 14px; border: 1px solid #ffffff1a; border-radius: 12px;
  color: #eef4fb; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: #151e29 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239fb0c4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center;
  transition: border-color .15s ease, background-color .15s ease;
}
:is(.career-filter-panel, .cc-filters, .db-filter-sheet) .career-field select:not([multiple]):is(:hover, :focus-visible) { border-color: #3d8ff0; background-color: #182433; outline: none; }


/* ===== Round 2 ===== */
/* Rating changes (+2 / −1): a small readable pill at the top right of the OVR/POT box. */
[data-career-database] .career-rating-with-delta { display: inline-block !important; position: relative; width: auto; }
[data-career-database] .career-rating-with-delta .career-rating-delta-slot { position: absolute; top: -8px; right: -9px; z-index: 2; min-width: 0; padding: 0; text-align: center; }
[data-career-database] .career-rating-delta-slot:empty, [data-career-database] .career-rating-delta-slot[data-delta-sign="none"] { display: none; }
[data-career-database] .career-rating-with-delta .career-rating-delta-slot.career-rating-delta-slot > :not(.sr-only):not(.visually-hidden):not([hidden]) {
  display: inline-block !important; min-width: 22px; padding: 2px 5px !important; border-radius: 999px !important;
  font-size: 10.5px !important; font-weight: 800 !important; line-height: 13px !important; letter-spacing: 0;
  border: 1.5px solid #0b1118 !important; box-shadow: 0 2px 6px #0007 !important;
}
[data-career-database] .career-rating-with-delta .career-rating-delta-slot.career-rating-delta-slot[data-delta-sign="up"] > :not(.sr-only):not(.visually-hidden):not([hidden]) { color: #062b14 !important; background: #5fe08d !important; }
[data-career-database] .career-rating-with-delta .career-rating-delta-slot.career-rating-delta-slot[data-delta-sign="down"] > :not(.sr-only):not(.visually-hidden):not([hidden]) { color: #fff !important; background: #ef4f63 !important; }

/* Pressing a row: no light-blue outline, just a soft darker card. Keyboard focus keeps a clear ring. */
.career-database .career-mobile-row, .career-directory-page .cc-team-row, .career-directory-page .manager-mobile-row,
.career-database .career-mobile-list > article, .career-mobile-bottom-nav a { -webkit-tap-highlight-color: transparent; }
.career-database .career-mobile-row:focus:not(:focus-visible), .career-directory-page .cc-team-row a:focus:not(:focus-visible),
.career-directory-page .manager-mobile-row:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.career-database .career-mobile-row:active, .career-directory-page .cc-team-row:active, .career-directory-page .manager-mobile-row:active { background: #0f141b !important; transform: scale(.99); transition: transform .08s ease; }
.career-database .career-mobile-row:focus-visible, .career-directory-page .manager-mobile-row:focus-visible { outline: 2px solid #3d8ff0; outline-offset: 2px; }

@media (max-width: 767px) {
  /* Never taller because of many positions: one line, extra positions are cut off. */
  .career-database .career-mobile-row__position { flex-wrap: nowrap !important; min-width: 0; overflow: hidden; white-space: nowrap; }
  .career-database .career-mobile-row__position .secondary-positions { display: inline-flex; flex-wrap: nowrap; gap: 3px; min-width: 0; overflow: hidden; }
  .career-database .career-mobile-row__position .secondary-positions > span:nth-child(n+3) { display: none; }
  .career-database .career-mobile-row__position small { flex: 0 0 auto; }

  /* Toolbar: search, Filters and Sort in one row. Sort is a compact button that opens the normal picker. */
  .career-database .career-results-toolbar,
  .catalog-list.career-directory-page .directory-toolbar { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  .career-database .career-results-toolbar > .db-mobile-sort,
  .career-directory-page .directory-toolbar .db-sort { grid-column: 3 !important; grid-row: 1 !important; }
  .career-database .db-mobile-sort, .career-directory-page .directory-toolbar .db-sort, .career-directory-page .cc-results > .db-mobile-sort {
    position: relative; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    width: auto !important; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #ffffff1a; border-radius: 14px;
    background: #151e29; color: #eef4fb; font-size: .86rem; font-weight: 700; cursor: pointer;
  }
  .career-database .db-mobile-sort > span, .career-directory-page .db-mobile-sort > span, .career-directory-page .directory-toolbar .db-sort > .sr-only {
    position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; margin: 0 !important;
    color: #eef4fb !important; font-size: .86rem !important; font-weight: 700 !important; white-space: nowrap;
  }
  .career-database .db-mobile-sort > span::before, .career-directory-page .db-mobile-sort > span::before, .career-directory-page .directory-toolbar .db-sort > .sr-only::before { content: "⇅ "; color: #8fb8e8; }
  .career-database .db-mobile-sort select, .career-directory-page .db-mobile-sort select, .career-directory-page .directory-toolbar .db-sort select {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; opacity: 0; cursor: pointer;
  }
  /* Clubs: the sort control lives in the results (it is refreshed with them); lift it into the toolbar row. */
  .career-directory-page:not(.managers-page) .directory-toolbar { margin-right: 92px !important; }
  .career-directory-page:not(.managers-page) .cc-results { position: relative; }
  .career-directory-page:not(.managers-page) .cc-results > .db-mobile-sort { position: absolute !important; top: -58px; right: 0; margin: 0 !important; width: 84px !important; }
}

/* ===== Phones: Filters and Sort as square icon buttons (text stays for screen readers) ===== */
@media (max-width: 767px) {
  .career-database .career-results-toolbar > .career-filter-trigger,
  .catalog-list.career-directory-page .directory-toolbar .db-filter-open,
  .career-database .career-results-toolbar > .db-mobile-sort,
  .career-directory-page .directory-toolbar .db-sort,
  .career-directory-page .cc-results > .db-mobile-sort {
    position: relative; width: 48px !important; min-width: 48px; height: 48px; padding: 0 !important; justify-content: center;
    font-size: 0 !important; color: #eef4fb;
  }
  .career-database .career-results-toolbar > .career-filter-trigger::before,
  .catalog-list.career-directory-page .directory-toolbar .db-filter-open::before,
  .career-database .db-mobile-sort::after,
  .career-directory-page .directory-toolbar .db-sort::after,
  .career-directory-page .cc-results > .db-mobile-sort::after {
    content: ""; width: 22px; height: 22px; background: currentColor; pointer-events: none;
    -webkit-mask: var(--tool-icon) center / contain no-repeat; mask: var(--tool-icon) center / contain no-repeat;
  }
  .career-database .career-results-toolbar > .career-filter-trigger,
  .catalog-list.career-directory-page .directory-toolbar .db-filter-open {
    --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E");
  }
  .career-database .db-mobile-sort, .career-directory-page .directory-toolbar .db-sort, .career-directory-page .cc-results > .db-mobile-sort {
    --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/%3E%3C/svg%3E");
  }
  .career-database .db-mobile-sort > span, .career-directory-page .db-mobile-sort > span, .career-directory-page .directory-toolbar .db-sort > .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
  }
  .career-database .db-mobile-sort > span::before, .career-directory-page .db-mobile-sort > span::before, .career-directory-page .directory-toolbar .db-sort > .sr-only::before { content: none !important; }
  .career-database .career-filter-trigger .career-filter-count {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #2f8cff; color: #fff; font-size: 11px !important; font-weight: 800; line-height: 18px; text-align: center;
  }
  .career-directory-page:not(.managers-page) .directory-toolbar { margin-right: 56px !important; }
  .career-directory-page:not(.managers-page) .cc-results > .db-mobile-sort { width: 48px !important; }
}
/* Phones: the sort icon sits exactly in the middle of its button on every database page. */
@media (max-width: 767px) {
  .career-database .db-mobile-sort::after, .career-directory-page .directory-toolbar .db-sort::after, .career-directory-page .cc-results > .db-mobile-sort::after {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .career-database .db-mobile-sort select, .career-directory-page .db-mobile-sort select, .career-directory-page .directory-toolbar .db-sort select { min-width: 0 !important; max-width: 100% !important; }
}
/* Phones, clubs page: the sort button sits next to Filters as one toolbar (same gap, height and colour). */
@media (max-width: 767px) {
  .career-directory-page:not(.managers-page) .directory-toolbar { margin-right: 48px !important; }
  .career-directory-page:not(.managers-page) .cc-results > .db-mobile-sort { top: -60px !important; width: 48px !important; height: 48px; border: 1px solid #ffffff14 !important; border-radius: 14px !important; background: #20262f !important; }
  .career-directory-page:not(.managers-page) .cc-results > .db-mobile-sort select { border: 0 !important; background: transparent !important; }
}