:root {
  --bg: #f5f6f4;
  --surface: #ffffff;
  --border: #e1e4e0;
  --text: #1b2420;
  --text-muted: #667169;
  --accent: #1f7a4d;
  --accent-dark: #175c3a;
  --highlight-bg: #fff3d6;
  --highlight-border: #e8a33d;
  --unlocked: #F0F0F0;
  --highlight-unlocked-bg: #7A98F1;
  --highlight-unlocked-border: #613AE9;
  --star: #e8a33d;
  --radius: 8px;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  line-height: 1.4;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.page-header {
  background: var(--accent);
  color: #fff;
  padding: 28px 20px 22px;
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 0;
  color: #d8ecdf;
  font-size: 0.9rem;
}

/* Tabs */

.tabs-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

/* Compact icon-only quick filters, mobile only — desktop already has
   the equivalent full pills in the filter header (see .status-pills
   / .watchlist-pill-group). Sits next to the result count (see
   .result-count-row below). Hidden by default; shown in the mobile
   media query below. */
.quick-filter-bar {
  display: none;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.quick-filter-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 1px;
}

/* Double-class selectors here (not just .status-pill--compact) are
   deliberate: .status-pill/.watchlist-pill set padding: 6px 12px
   later in this file, and with equal single-class specificity that
   later rule would win regardless of order here, leaving almost no
   room inside the fixed 28px box for the icon. */
.status-pill.status-pill--compact,
.watchlist-pill.watchlist-pill--compact {
  display: inline-flex;
  align-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}

.status-pill--compact .status-icon {
  width: 13px;
  height: 13px;
}

.watchlist-pill--compact .star-icon {
  width: 16px;
  height: 16px;
}

.tabs-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0.5rem 4px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent);
}

.tabs-pills[hidden] {
  display: none;
}

.tabs-pills::-webkit-scrollbar {
  display: none;
}

.tab-pill {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab-pill:hover {
  color: var(--text);
  border-color: var(--accent);
}

.tab-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tabs-pills--sub {
  padding-left: 0.5rem;
  padding-top: 0.25rem;
}

.tabs-pills--sub .tab-pill {
  padding: 6px 14px;
  font-size: 0.78rem;
  background: #eef1ee;
  border-color: transparent;
  color: var(--text-muted);
}

.tabs-pills--sub .tab-pill:hover {
  color: var(--text);
  border-color: var(--border);
}

.tabs-pills--sub .tab-pill.active {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

@media (max-width: 680px) {
  .tabs-bar {
    margin-bottom: 4px;
  }

  .tabs-pills {
    padding: 2px 0.325rem 2px;
  } 

  .tab-pill {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .tabs-pills--sub .tab-pill {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}

/* Controls */

.controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 80px;
  min-width: 140px;
}

.control--narrow {
  flex: 0 1 150px;
  min-width: 120px;
}

.control--checkbox {
  flex: 1 1 220px;
  align-self: center;
}

.control--checkbox label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

input[type="search"],
input[type="date"],
input[type="number"] {
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  width: 100%;
}

#unlockDays {
  background: #9da39f;
}

input:focus,
th:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent-dark);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0;
  align-self: flex-end;
}

.result-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 2px 10px;
}

.result-count {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Full sentence by default; the compact "(x | X)" form only shows up
   on mobile, next to the quick-filter icons, where space is tight. */
.result-count-compact {
  display: none;
}

/* Table */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: #f0f2ef;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}

thead th:hover {
  color: var(--text);
}

/* Star column isn't sortable, so it shouldn't look or act like the
   other (clickable) headers. */
.star-col {
  width: 36px;
  cursor: default;
}

.star-col:hover {
  color: var(--text-muted);
}

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

.star-cell {
  width: 36px;
  padding-left: 12px;
  padding-right: 0;
}

.star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--border);
  border-radius: 6px;
  line-height: 0;
}

.star-btn:hover {
  color: var(--star, #e8a33d);
  background: rgba(232, 163, 61, 0.12);
}

.star-btn .star-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
  transition: fill 0.15s, stroke 0.15s;
}

.star-btn.active {
  color: var(--star, #e8a33d);
}

.star-btn.active .star-icon {
  fill: currentColor;
  stroke: currentColor;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: #fafbf9;
}

/* Main data rows are clickable (reveals the detail row on desktop,
   the inline fields on mobile) and act as the positioning context for
   the expand arrow below. */
.table-wrap tbody tr:not(.detail-row) {
  position: relative;
  cursor: pointer;
}

/* --- Desktop hidden transfer-detail row --- */
.detail-row {
  display: none;
}

.detail-row td {
  background: #fafbf9;
  padding: 16px 20px;
}

.transfer-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
}

.detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
}

.detail-value {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.detail-value.lite {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 300;
  font-style: italic;
}

/* Centered arrow sitting on the row's bottom border, desktop only */
.row-expand-arrow {
  display: none;
}

@media (min-width: 681px) {
  tr.expanded + .detail-row {
    display: table-row;
  }

  .row-expand-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    width: 20px;
    height: 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.6rem;
    line-height: 1;
    transition: transform 0.25s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    z-index: 2;
  }

  tr.expanded .row-expand-arrow {
    transform: translateX(-50%) rotate(180deg);
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
}

tbody tr.highlight {
  background: var(--highlight-bg);
  box-shadow: inset 3px 0 0 var(--highlight-border);
}

tbody tr.highlight:hover {
  background: #ffedc2;
}

tbody tr.unlocked {
  background: var(--highlight-unlocked-bg);
  box-shadow: inset 3px 0 0 var(--highlight-unlocked-border);
}

tbody tr.unlocked:hover {
  background: #7ad3f1;
}

/* Extra transfer-detail cells (from/to/amount/datetime/type) exist only
   to be revealed inline on mobile — desktop already shows this info in
   the .transfer-detail-grid below, so keep these out of the desktop
   table entirely. */
.detail-mobile-only {
  display: none;
}

.player-name {
  font-weight: 600;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.status-icon {
  flex: none;
  display: block;
}

/* Available — green */
.status.unlocked {
  color: #1a7f4e;
  background: #e3f6ec;
  border-color: #b7e6cd;
}

.status.unlocked .status-icon--check {
  color: #1a7f4e;
}

/* Embargo ending soon — amber */
.status.soon {
  color: #a3670f;
  background: #fdf0d9;
  border-color: #f3d59e;
}

/* Embargoed — red */
.status.locked {
  color: #b3261e;
  background: #fbe4e2;
  border-color: #f3c2be;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 30px 10px;
}

.page-footer {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 30px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Styling for new Select fields */
select {
  font-size: 0.95rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  width: 100%;
}

/* Accordion Specific Overrides */
.filter-accordion {
  padding: 0; /* Remove base padding from the container */
  background: var(--surface);
}

.filter-accordion summary {
  padding: 16px;
  font-weight: 600;
  cursor: pointer;
  background: #f0f2ef;
  color: var(--text);
  list-style: none; /* Hide default browser arrow */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius);
}

/* Custom Accordion Chevron */
.filter-accordion summary::-webkit-details-marker {
  display: none;
}
.filter-accordion summary::after {
  content: '▼';
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.filter-accordion[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--border);
}
.filter-accordion[open] summary::after {
  transform: rotate(180deg);
}

.controls-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Desktop default: Show full name, hide short name */
.short-name { display: none; }
.full-name { display: inline; }

/* --- Desktop Title Modifications --- */
.filter-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.summary-title {
  flex: 1;
}

.unlock-desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.unlock-desktop label {
  margin: 0;
  font-size: 0.8rem;
}

.control--narrow.unlock-desktop {
  flex: 0 1 215px;
  min-width: 120px;
}

.unlock-desktop input {
  width: 70px;
  padding: 4px 8px;
}

/* --- Status filter pills (multi-select) ---
   Two DOM copies share the same data-status values and are kept in
   sync by JS: .status-pills--header lives in the summary (desktop
   only, to the left of the embargo period control) and the compact
   icon-only copies in #quickFilterBar live next to the result count
   (mobile only). */
.status-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.status-pill {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.status-pill:hover {
  border-color: #b9b9b9;
}

.status-pill[data-status="locked"].active {
  background: #fbe4e2;
  color: #b3261e;
  border-color: #f3c2be;
}

.status-pill[data-status="soon"].active {
  background: #fdf0d9;
  color: #a3670f;
  border-color: #f3d59e;
}

.status-pill[data-status="unlocked"].active {
  background: #e3f6ec;
  color: #1a7f4e;
  border-color: #b7e6cd;
}

/* --- Watchlist filter pill ---
   Deliberately separate from the status-pills group above (it's a
   different kind of filter — identity-based, ANDed in rather than
   part of the OR-multi-select status set) so it gets a visual divider
   rather than blending into that group. */
.watchlist-pill-group {
  display: flex;
}

#watchlistPillGroupHeader {
  align-items: center;
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
}

.watchlist-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.watchlist-pill:hover {
  border-color: #b9b9b9;
}

.watchlist-pill .star-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linejoin: round;
}

.watchlist-pill.active {
  background: #fdf0d9;
  color: var(--star);
  border-color: #f3d59e;
}

.watchlist-pill.active .star-icon {
  fill: currentColor;
}

/* Row wrapper for the mobile panel copy so the pill and the sync
   trigger sit side by side (the header copy just uses flex directly
   on #watchlistPillGroupHeader since it has no <label>). */
.watchlist-pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Small icon-only button that opens the sync modal. Sits right next
   to the watchlist pill in both the desktop header and mobile panel. */
.sync-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
}

.sync-trigger:hover {
  color: var(--text);
  border-color: #b9b9b9;
}

/* --- Watchlist sync modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.modal-close {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 20px;
}

.modal-text {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.modal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.sync-code-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
}

.sync-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  flex: 1;
}

.sync-code-display .btn-text {
  padding: 4px 0;
  align-self: auto;
}

.sync-status {
  min-height: 1.2em;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.sync-status.success {
  color: var(--accent);
}

.sync-status.error {
  color: #b3261e;
}

.sync-stop {
  padding: 4px 0;
  align-self: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sync-load-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sync-load-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  text-transform: uppercase;
}

.sync-load-row .btn-text {
  padding: 8px 0;
  align-self: auto;
  white-space: nowrap;
}

/* Mobile defaults */
.mobile-filter-btn { display: none; }
.mobile-only { display: none; }
.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

/* Mobile: Collapse table into accordion rows and show mobile filters */
@media (max-width: 680px) {
  .page-header {
    padding: 22px 16px 18px;
    margin-bottom: 12px;
  }
  
  main {
    padding: 0 12px 50px;
  }
  
  .control-group {
    gap: 10px;
  }
  
  .control,
  .control--narrow {
    flex: 1 1 100%;
  }

  /* --- Mobile Filter Button & Dialog --- */
  .mobile-filter-btn {
    display: flex;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
  
  .filter-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: #ff4757;
    border-radius: 50%;
    border: 2px solid var(--accent);
  }

  .mobile-only { display: block; }

  .quick-filter-bar { display: flex; }

  .result-count-full { display: none; }
  .result-count-compact { display: inline; }

  /* Hide desktop input on mobile to save space */
  .unlock-desktop { display: none; }

  /* The header status/watchlist pills live inside <summary>, which is
     already hidden on mobile below — nothing to swap them for anymore,
     since the quick-filter bar next to the result count covers mobile
     now (see .quick-filter-bar). */
  .status-pills--header { display: none; }
  #watchlistPillGroupHeader { display: none; }

  /* Transform details into a fullscreen modal layout */
  .filter-accordion {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999;
    pointer-events: none; /* Let clicks pass through when hidden */
    background: transparent;
    transition: background 0.3s ease;
  }

  .filter-accordion[open] {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.6); /* Dimmed backdrop */
  }

  .filter-accordion summary {
    display: none; /* Hide default accordion header on mobile */
  }
  .controls{
    margin-bottom: 0px;
  }

  .controls-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    padding: 24px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Applied via JS to trigger smooth slide-up */
  .filter-accordion.mobile-open .controls-content {
    transform: translateY(0);
  }

  /* --- Table Modifications --- */
  
  /* Name abbreviation toggle */
  .full-name { display: none; }
  .short-name { display: inline; }

  /* Break table structure */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  /* Accordion Row Container */
  tbody tr {
    border-bottom: 4px solid var(--bg);
    padding: 2px 6px; 
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
  }

  tbody tr.highlight {
    box-shadow: inset 3px 0 0 var(--highlight-border);
  }

  /* Accordion Chevron */
  tbody tr::after {
    content: '▼';
    display: flex;
    justify-content: center;
    width: 100%;
    order: 2; /* Positioned between summary (1) and expanded details (3) */
    padding-top: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
  }
  
  tbody tr.expanded::after {
    transform: rotateX(180deg);
  }

  /* Cells: Hide all by default, format as key-value pairs */
  tbody td {
    display: none; 
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    justify-content: space-between;
  }
  
  tbody td:last-child {
    border-bottom: none;
  }
  
  tbody td::before {
    content: attr(data-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* -------------------------------------------
     Summary Row: Watchlist star, Player, Unlock Date, Status
     Order 1 (order 0 for the star, so it sits leftmost): always
     visible, positioned inline
  ------------------------------------------- */
  tbody td.star-cell,
  tbody td[data-label="Player"],
  tbody td[data-label="Unlock date"],
  tbody td[data-label="Status"] {
    display: flex;
    border-bottom: none;
    padding: 6px 0 0 0;
    order: 1; 
  }

  tbody td.star-cell {
    order: 0;
    flex: 0 0 auto;
    align-items: center;
    padding-right: 6px;
  }

  tbody td.star-cell .star-btn {
    padding: 8px;
    margin: -8px;
  }

  tbody td[data-label="Player"] {
    flex: 0 0 27%;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.5rem;
  }
  
  tbody td[data-label="Unlock date"] {
    flex: 0 0 19%;
    margin-left: 6px;
    font-size: 0.85rem;
  }

  tbody td[data-label="Status"] {
    flex: 0 0;
    margin-left: auto; /* Push status to the far right */
  }

  /* Hide the field labels for the primary summary row */
  tbody td.star-cell::before,
  tbody td[data-label="Player"]::before,
  tbody td[data-label="Unlock date"]::before,
  tbody td[data-label="Status"]::before {
    display: none;
  }

  /* -------------------------------------------
     Expanded State: Show remaining fields 
     Order 3: Appears below the chevron
  ------------------------------------------- */
  tbody tr.expanded td[data-label="Team"],
  tbody tr.expanded td[data-label="Pos"],
  tbody tr.expanded td[data-label="Transfer date"],
  tbody tr.expanded td[data-label="Transfer from"],
  tbody tr.expanded td[data-label="Transfer to"],
  tbody tr.expanded td[data-label="Amount"],
  tbody tr.expanded td[data-label="Date & time"],
  tbody tr.expanded td[data-label="Type"] {
    display: flex;
    order: 3; 
  }

  /* Add separation between the chevron and expanded details */
  tbody tr.expanded td[data-label="Team"] {
    margin-top: 2px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
  }

  .player-name {
    font-size: 0.95rem;
  }
}