/* Center the table on the page */
.table-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* Make the table-select (dropdown) sit on its own centered row */
#table-select {
  display: block;
  margin: 0.5rem auto;    /* vertical gap + center horizontally */
}

/* Force the DataTables search into its own row and right-align it */
.dataTables_filter {
  display: block;
  width: 100%;
  text-align: right;
  margin: 0 0 0.75rem;    /* bottom gap to banner */
}

/* Tweak the filter label/input spacing if you like */
.dataTables_filter label {
  display: inline-block;
  margin: 0;
}
.dataTables_filter input {
  margin-left: 0.5rem;
}

/* Table name base styling */
.table-banner {
  color: #fff;
  /*display: inline-block;		/* shrink-wrap width to its contents */
  font-style: italic;
  font-weight: bold;
  font-size: 1.75rem;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  max-width: 1000px;	    /* never wider than the text + padding */
  margin: 1rem auto 0.1rem;       	/* center it under the dropdown */
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Players Championship: dark navy → dodger blue */
.banner-championship {
  background: linear-gradient(135deg, #E6F5FF 0%, #0096C7 50%, #002855 100%);
  color: white;
}

/* Teams Championship: deep purple → hot pink */
.banner-teamchamp {
  background: linear-gradient(135deg, #FFCCCC 0%, #DC143C 50%, #800000 100%);
  color: white;
}

/* Players North Conf.: emerald → limegreen */
.banner-northplayers {
  background: linear-gradient(135deg, #B2EBF2 0%, #00BCD4 50%, #006064 100%);
  color: white;
}

/* Players South Conf.: teal → aqua */
.banner-southplayers {
  background: linear-gradient(135deg, #BBFFFF 0%, #40E0D0 50%, #00695C 100%);
  color: white;
}

/* Teams North Conf.: maroon → orange */
.banner-northteams {
  background: linear-gradient(135deg, #FF0000 0%, #FF007F 50%, #FFB6C1 100%);
  color: white;
}

/* Teams South Conf.: darkslateblue → mediumorchid */
.banner-southteams {
  background: linear-gradient(135deg, #DC143C 0%, #9400D3 50%, #191970 100%);
  color: white;
}

/* header styling (example for a green gradient) */
.league-table thead th {
  background: linear-gradient(to bottom, #a1d99b, #31a354);
  color: #f9f9f9;
  font-weight: bold;
}

#league-table th,
#league-table td {
    border: 0.8px solid black !important;
    padding: 6px 8px;          /* your existing padding */
    text-align: center;         /* horizontally center */
    vertical-align: middle;     /* vertically center */
    font-size: 1rem;            /* bump text up */
}

/* highlight the first row in every table */
.league-table tbody tr:first-child td {
  background-color: gold;
}

/* Force black text in 'Last Week's Score' cells, regardless of row class */
#league-table td:last-child {
    color: black !important;
    font-weight: bold;
}

/* all badge icons in your league table should max out at 24px tall */
#league-table td img {
  max-height: 48px;
  width: auto;
  display: block;
  margin: 0 auto; /* if you want them centered in the cell */
}


/* Make the table look tight and modern */
.excel-table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 13px;
  background-color: #f9f9f9;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Padding and borders */
.excel-table th, .excel-table td {
  padding: 8px 12px;
  border: 1px solid #aaa;
}

/* Make headers bolder and cleaner */
.excel-table thead th {
  background: linear-gradient(to bottom, #0a5d00, #004400); /* deep green gradient */
  color: white;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #222;
  padding: 10px;
  font-size: 14px;
  text-transform: uppercase;
}

/* Align numeric columns right */
.excel-table td:nth-child(3) {
  font-weight: bold;
  color: white;
},
.excel-table td:nth-child(5),
.excel-table td:nth-child(6),
.excel-table td:nth-child(7) {
  text-align: right;
}

/* Rank-based background colors */
.rank-gold {
    background-color: gold;
    color: black;
    font-weight: bold;
}

.rank-silver {
  background-color: #c0c0c0;
  font-weight: bold;
}

.rank-bronze {
  background-color: #cd7f32;
  font-weight: bold;
}

.rank-turquoise {
    background-color: turquoise;
    color: black;
    font-weight: bold;
}

.rank-lightblue {
    background-color: #add8e6;
    color: black;
    font-weight: bold;
}

.rank-white {
    background-color: white;
    color: black;
    font-weight: bold;
}

.rank-red {
    background-color: #e06666;
    color: black;
    font-weight: bold;
}

.rank-top10 {
  background-color: #e0f7fa;
}

.rank-bottom6 {
  background-color: #ffebee;
}

table.dataTable thead th {
  position: relative;
  background-color: #004d00; /* dark green header */
  color: white;
  font-weight: bold;
  text-align: center;
}

/* Dark “card” behind the table so banner aligns exactly,
   and adds depth to make the table pop */
.table-card {
  background-color: rgba(0, 0, 0, 0.75); /* translucent black */
  padding: 0;                         /* space around your table */
  border-radius: 0.5rem;                 /* gently rounded corners */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); /* soft but deep shadow */
  margin: 1rem auto;                        /* center it if you like */
  width: 90%;							 /* fill 90% of the viewport or parent */
  max-width: 1200px;					/* Don't exceed 1200px
}

.table-card table {
  width: 100%;              /* make the actual HTML table fill the card */
  table-layout: fixed;      /* optional: evenly distribute columns */
}