:root {
	/* Global design tokens / variables */
	--bg: transparent;              /* Page background */
	--panel-bg: #222;               /* Dark panel background */
	--panel-bg-2: #2a2a2a;          /* Alternate row background */
	--muted: #888;                  /* Muted text color */
	--text: #eee;                   /* Default text color */
	--accent: #439C07;              /* Accent green */
	--win: #144d14;                 /* Win cell background */
	--loss: #4d1414;                /* Loss cell background */
	--draw: #808000;                /* Draw cell background */
	--header-bg: #333;              /* Table header background */
	--border: #555;                 /* Border color */
	--shadow: rgba(0,0,0,0.2);      /* Shadow color */
	--radius: 5px;                  /* Border radius */
	--gap: 10px;                    /* Flexbox gap */
	--pad: 0.5em;                   /* Default padding */
	--font: Arial, sans-serif;      /* Default font */
	--max-table: 1280px;            /* Max table width */
}

/* ------------------ BASE STYLING ------------------ */
html, body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 100%;
	padding: 10px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings hierarchy */
h1, h2, h3 {
	color: var(--accent);
	margin: 0 0 1em 0;
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
}
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.0em; }

/* ------------------ FORM CONTROLS ------------------ */
select, button, input {
	padding: 0.5em;
	margin: 0.5em 0;
	background: var(--panel-bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 1em;
	outline: none;
}
select:focus, button:focus, input:focus {
	box-shadow: 0 0 0 3px rgba(114,171,52,0.12); /* Green glow on focus */
}

/* ------------------ LAYOUT CONTAINERS ------------------ */
.table-wrapper, .table-scroll {
	background: transparent;
}
.table-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 0 10px;
	overflow-x: auto; /* Horizontal scroll if needed */
}
.table-scroll {
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
}

/* ------------------ TABLE BASE ------------------ */
table {
	width: 100%;
	max-width: var(--max-table);
	border-collapse: separate; /* Separate borders for boxed look */
	border-spacing: 4px;        /* Space between cells */
	margin-top: 1em;
	background: transparent;
	color: var(--text);
	font-size: 1em;
	opacity: 0;                 /* Hidden until .visible applied */
	transition: opacity .5s ease-in-out;
	border: 1px solid rgba(255,255,255,0.05);
	box-shadow: 0 0 8px var(--shadow);
}
table.visible { 
	opacity: 1; 
	animation: fadeIn .4s ease-in-out; /* Fade-in animation */
}

/* Table cells */
th, td:not(.score-cell) {
	padding: .3em .5em;
	border: 1px solid var(--border);
	text-align: center;
	background-color: var(--panel-bg);
	white-space: nowrap;
	box-shadow: 0 0 2px #000; /* Subtle inner shadow */
}

/* Sticky header row */
thead th {
	position: sticky;
	top: 0;
	background-color: var(--header-bg);
	z-index: 5;
}

/* ------------------ ROW STYLING ------------------ */
.player-row:nth-child(odd) td:not(.score-cell) { background-color: var(--panel-bg); }
.player-row:nth-child(even) td:not(.score-cell) { background-color: var(--panel-bg-2); }

/* Player table variant (compact spacing) */
.player-table { margin: 0 auto; width: auto; table-layout: auto; }
.player-table th, .player-table td { white-space: nowrap; padding: .3em .6em; }

/* ------------------ RESULT COLORING ------------------ */
.win-cell   { background-color: var(--win) !important;  color: #cfc; }
.loss-cell  { background-color: var(--loss) !important; color: #fcc; }
.empty-cell { background-color: var(--panel-bg) !important; color: var(--muted); }

.score-cell {
  font-size: 1em;
  font-weight: bold;
  padding: 0.4em;
  text-align: center;   /* centre the number */
  border-radius: 0;     /* match rest of table */
  border: 1px solid var(--border); /* restore border */
}

/* Neutral (both zero) → same as rest of table */
.score-cell.neutral {
  background-color: var(--panel-bg);   /* dark background */
  color: var(--text);                  /* default light text */
}

/* Winner (dark green background, light text) */
.score-cell.winner {
  background-color: #144d14;   /* dark green */
  color: #cfc;                 /* light greenish text */
}

/* Loser (dark red background, light text) */
.score-cell.loser {
  background-color: #4d1414;   /* dark red */
  color: #fcc;                 /* light red/pink text */
}

/* Draw (dark gold background, light text) */
.score-cell.draw {
  background-color: #808000;   /* dark olive/gold */
  color: #fff9c4;              /* pale yellow text */
}

/* ------------------ ANIMATIONS ------------------ */
@keyframes fadeIn {
    from { opacity:0; }
    to   { opacity:1; }
}
@keyframes pulse {
    0%   { background-color:#555; }
    50%  { background-color:var(--accent); }
    100% { background-color:inherit; }
}
.player-row {
    animation: fadeIn .4s ease forwards; /* no translateY bounce */
}
td.updated { animation: pulse .8s ease-out; }
.player-row:hover { background-color:#444; transition: background-color .3s ease; }

/* ------------------ ROW HIGHLIGHT ------------------ */
.row-highlight { animation: rowGlow .8s ease-in-out; }
@keyframes rowGlow {
    0%   { background-color:#444444; box-shadow:0 0 10px var(--accent); }
    50%  { background-color:#555555; box-shadow:0 0 5px var(--accent); }
    100% { background-color:inherit; box-shadow:none; }
}

/* ------------------ UTILITY CLASSES ------------------ */
.nowrap-label { white-space: nowrap; display: inline-block; }
.highlight    { color:#fff; background-color: var(--accent); padding:1px 2px; border-radius:3px; }
.team-link    { color: var(--accent); cursor: pointer; text-decoration: underline; }
.team-link:hover { color: #fff; }

/* Drilldown rows */
.drilldown-row td { background-color:#111; font-size:.95em; color:#ccc; padding:20px; }

/* ------------------ ADMIN DASHBOARD ------------------ */
.filter-bar {
	padding:.5em; margin:.5em 0; background: var(--panel-bg);
	color: var(--text); border:1px solid var(--border); border-radius: var(--radius); font-size:1em;
}
.filter-bar select { background:#444; color:#fff; border:1px solid #666; padding:5px 10px; border-radius:4px; }

.last-updated { font-weight: normal; text-align:right; font-size:.9em; color:#ccc; margin-bottom:10px; font-style:italic; }

/* ------------------ STATUS CELLS ------------------ */
.status-cell { font-size:1em; font-weight:bold; text-align:center; cursor:default; }
.status-cell[data-status="ok"]      { color:#32cd32; }
.status-cell[data-status="pending"] { color: var(--accent); }
.status-cell[data-status="missing"] { color:#ff4500; }

/* ------------------ ROW HIGHLIGHT ------------------ */
.row-highlight { animation: rowGlow .8s ease-in-out; }
@keyframes rowGlow {
	0%   { background-color:#444444; box-shadow:0 0 10px var(--accent); }
	50%  { background-color:#555555; box-shadow:0 0 5px var(--accent); }
	100% { background-color:inherit; box-shadow:none; }
}

/* ------------------ ACCESSIBILITY ------------------ */
@media (prefers-reduced-motion: reduce) {
	.player-row, table.visible, .admin-fixtures { animation:none; transition:none; }
	td.updated { animation:none; }
}

/* Focus outlines for keyboard users */
a:focus, button:focus, input:focus, select:focus, .team-link:focus {
	outline:2px solid rgba(114,171,52,0.18);
	outline-offset:2px;
}

/* ------------------ MOBILE OVERRIDES ------------------ */
@media (max-width: 600px) {
	table.player-table th,
	table.player-table td {
		font-size: 0.75em;
		padding: 0.4em;
		white-space: normal;
	}
	.score-cell,
	.win-cell,
	.loss-cell,
	.empty-cell {
		font-size: 0.75em;
		font-weight: normal;
		padding: 0.4em;
		border-radius: 0;
	}
	.table-wrapper {
		overflow-x: auto;
		overflow-y: visible;
		max-height: none;
	}
}

@media (max-width: 400px) {
	table.player-table th,
	table.player-table td {
		font-size: 0.7em;
		padding: 0.25em;
	}
	.score-cell,
	.win-cell,
	.loss-cell,
	.empty-cell {
		font-size: 0.7em;
		font-weight: normal;
		padding: 0.25em;
		border-radius: 0;
	}
}	

.division-header {
    background-color: var(--accent); /* use the accent green */
    color: #fff;                     /* keep text white for contrast */
    text-align: left;
}
.division-header th,
.division-header td {
    background-color: var(--accent);   /* green background */
    color: #fff;                       /* white text for contrast */
    font-weight: bold;
    font-size: 1.1em;
    padding: 6px;

    /* subtle visual separation */
    border: 2px solid #4a7a2a;         /* darker green border */
    box-shadow: 0 2px 6px rgba(0,0,0,0.25); /* soft shadow below */
    text-transform: uppercase;         /* optional: make it feel like a banner */
    letter-spacing: 1px;               /* optional: add spacing for emphasis */
}

/* Shared status text for Next refresh and Last updated */
.status-text {
    font-style: italic;
    color: #555;
    font-weight: 400;   /* explicitly non-bold */
    font-size: 1em;
}

@keyframes scoreChange {
  0%   { transform: scale(1);   background-color: inherit; }
  30%  { transform: scale(1.25); background-color: var(--accent); color: #fff; }
  60%  { transform: scale(1.1);  background-color: inherit; }
  100% { transform: scale(1);    background-color: inherit; }
}

.score-cell.updated {
  animation: scoreChange 0.8s ease-out;
  border: 2px solid var(--accent); /* subtle border flash */
}