/*────────────────────────────────────────────────────────
  Global Container
────────────────────────────────────────────────────────*/
.club-page-background {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  background-color: #95be54;
  margin: 0;
  padding: 0;
}

/*────────────────────────────────────────────────────────
  Root Variables
────────────────────────────────────────────────────────*/
:root {
  --font:        'Inter', sans-serif;
  --bg-page:     #f4f6f8;
  --bg-card:     #ffffff;
  --header-bg:   #434546;     /* Name header */
  --header-text: #f1f5f9;
  --accent:      #3c88c5;     /* left stripe */
  --border:      rgba(203, 213, 225, 0.7);
  --row-hover:   #eef2f6;
  --shadow:      rgba(0, 0, 0, 0.06);
  --delta-pos:   #16a34a;
  --delta-neg:   #dc2626;
  --delta-zero:  #6b7280;
}

/*────────────────────────────────────────────────────────
  Base & Leaderboard Wrapper
────────────────────────────────────────────────────────*/
body {
  background-color: var(--bg-page);
  font-family: var(--font);
  color: #334155;
  margin: 0;
  padding: 0;
}

.modern-leaderboard {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

/*────────────────────────────────────────────────────────
  Horizontal Scroll Container
────────────────────────────────────────────────────────*/
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  border: none;
  box-shadow: none;
}

/*────────────────────────────────────────────────────────
  Card‐Style Rows (all viewports)
────────────────────────────────────────────────────────*/
/* hide the native header */
.modern-table thead { display: none; }

/* allow rows to become grid cards */
.modern-table,
.modern-table tbody {
  display: block;
  margin: 0;
  padding: 0;
}

/* 4‐row, 2‐col card layout */
.modern-table tbody tr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:
    auto    /* Name */
    auto    /* Rank & Current */
    auto    /* Prev DR & Prev Rank */
    auto;   /* Delta & POS */
  grid-template-areas:
    "name     name"
    "rank     current"
    "prevDR   prevRank"
    "delta    pos";
  margin: 1rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px var(--shadow);
  box-sizing: border-box;
}

/* Name header */
.modern-table td[data-label="Name"] {
  grid-area: name;
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0.75rem 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.modern-table td[data-label="Name"]::before {
  content: '';
}

/* Rank & Current 4DR */
.modern-table td[data-label="Rank"],
.modern-table td[data-label="Current 4DR"] {
  grid-area: rank; /* overridden below per cell */
  padding: 0.3rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.modern-table td[data-label="Rank"]        { grid-area: rank; }
.modern-table td[data-label="Current 4DR"] { grid-area: current; }

/* Prev 4DR & Prev Rank */
.modern-table td[data-label="Prev 4DR"],
.modern-table td[data-label="Prev Rank"] {
  padding: 0.3rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.modern-table td[data-label="Prev 4DR"]  { grid-area: prevDR;   }
.modern-table td[data-label="Prev Rank"] { grid-area: prevRank; }

/* Delta & POS Change */
.modern-table td[data-label="4DR +/-"],
.modern-table td[data-label="POS Change"] {
  padding: 0.3rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 700;
}
.modern-table td[data-label="4DR +/-"]    { grid-area: delta; }
.modern-table td[data-label="POS Change"] { grid-area: pos;   }

/* vertical separator on col-1 of rows 2-4 */
.modern-table td[data-label="Rank"],
.modern-table td[data-label="Prev 4DR"],
.modern-table td[data-label="4DR +/-"] {
  border-right: 1px solid var(--border);
}

/* inject labels on all but Name */
.modern-table td:not([data-label="Name"])::before {
  content: attr(data-label) ": ";
  font-weight: 400;
  margin-right: 0.75rem;
  white-space: nowrap;
  color: #000;
}

/* color‐code delta */
.modern-table td.delta.positive { color: var(--delta-pos); }
.modern-table td.delta.negative { color: var(--delta-neg); }
.modern-table td.delta.zero     { color: var(--delta-zero); }

/* hover “lift” */
.modern-table tbody tr:hover {
  background: var(--row-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow);
}





/* 1) Enlarge all cell content (includes values + labels + Name) */
.modern-table td {
  font-size: 1.275rem;  /* adjust as you like */
}

/* 2) Reset the injected labels (::before) back down */
.modern-table td::before {
  font-size: 1rem;
}

/* 3) Reset the Name header to its original size */
.modern-table td[data-label="Name"] {
  font-size: 1rem;
}

/* grey‐out the Prev 4DR value */
.modern-table td[data-label="Prev 4DR"], .modern-table td[data-label="Prev Rank"] {
  color: #6b7280;      /* neutral gray */
  opacity: 0.80;       /* make it a bit translucent */
}

@media only screen and (max-width: 600px) {	
	
	.modern-leaderboard {
	padding: 0;
    margin: 0; 	
	}

  .table-wrapper {
  width:100%;
    padding: 0;
    margin: 0;
  }
  /* 1) Tighter card spacing */
  .modern-table tbody tr {
    margin: 1rem 0;   
    gap: 0.25rem;
    border-radius: 0.375rem;
  }

  /* 2) Slim down the name header */
  .modern-table td[data-label="Name"] {
    font-size: 1.25rem;           /* smaller title */
    padding: 0.5rem 0.75rem;
    border-bottom-width: 1px;
  }

  /* 3) Shrink all other cells (values + injected labels) */
  .modern-table td:not([data-label="Name"]) {
    font-size: 1.4rem;
    padding: 0.375rem 0.75rem;
  }
  
  .modern-table td[data-label="Current 4DR"]::before {
    content: "4DR: ";
  }

  /* 4) Tighter label/value gap */
  .modern-table td::before {
    margin-right: 0.2rem;
  }

  /* 5) Thinner accent stripe & borders */
  .modern-table tbody tr {
    border-left-width: 3px;
    border-width: 1px;
  }
}