/*******************************************
    GLOBAL COLORS + VARIABLES
*******************************************/
:root {
/*    --pens-gold: rgba(255, 184, 28, 1);
    --pens-gold-faint: rgba(255, 184, 28, 0.75);
    --pens-shadow: rgba(207, 196, 147, 1);
    --black-bg: rgba(0, 0, 0, 0.25);
*/
	--beef-blue: rgba(150,200,255,1);
	--beef-lightBlue: rgba(150,200,255,0.55);
	--beef-shadow: rgba(100,100,255,1);
	--black-bg: rgba(0,0,0,0.25);
	--white: rgba(255,255,255,1);
}

/*******************************************
    BASE STYLES
*******************************************/
body {
    background: black url(images/Pens01_vig01.jpg) no-repeat center fixed;
    background-size: auto;
    display: flex;
    justify-content: center;
    margin: 0;
    font-family: sans-serif;
    color: white;
    width: 100%;
}

main {
    width: 100%;
    justify-content: center;
}

form {
    width: auto;
    align-self: center;
}

h1, h2 {
    color: var(--beef-blue);
    text-align: center;
    text-shadow: var(--beef-shadow) 1px 1px;
    margin: 0 auto 10px;
    width: 100%;
}

h3 {
	color: var(--beef-blue);
	text-shadow: var(--beef-shadow) 1px 1px;
   	text-align: center;
   	margin: 10px auto auto;
   	width: 100%;
}

h1 { font-size: 3vw; }
h2 { font-size: 2vw; }
h3 { font-size: 1.5vw; }

p {
	align: center;
	text-align: center;
	width: 100%;
}


/*******************************************
    NAVIGATION
*******************************************/
.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.nav-center a {
	color: var(--beef-blue);
	text-shadow: var(--beef-shadow);
    	display: inline-block;
	padding: 5px 10px;
	font-size: clamp(15px, 0.5em, 20px);
}
*******************************************
    DIV STYLES
*******************************************/
div {
	padding: 5px;
	width: fit-content;
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        margin: 0 auto;
	overflow-x: auto;
	align-items: center;
	justify-content: center;
}

.info {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px auto 10px;
}

.title {
    width: 100%;
}

.stats {
	justify-content: center;
	width: fit-content;
	display: wrap;
	gap: 5px;
	margin: 0 auto;
	align-items: center;
	padding: 5px 10px;
}

.shrink-wrap {
    width: fit-content;
    padding: 5px;
}

.matches {
    text-align: center;
}

.dataTables_wrapper {
	width: fit-content;
	overflow-x: auto;
	align-content: center;

}

.ChartGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  align-items: start;
}

.ChartContainer {
  position: relative;
  width: 80%;
  aspect-ratio: 1 / 1; /* keeps charts square */
  max-width: 400px; /* optional: prevent huge charts */
  margin: 0 auto;
}

.ChartContainer canvas {
  width: 100% !important;
  height: 100% !important;
}

.GraphContainer {
    position: center;
    width: 80%;
    aspect-ratio: 1 / 1; /* keeps charts square */
    max-width: 65%; /* optional: prevent huge charts */
    margin: 0 auto;
}

.RinkContainer {
    width: 100% !important;
    height: 100% !important;
    background: #e8f4ff;
    border: 1px solid #333;

}

/*******************************************
    TABLE STYLES
*******************************************/
table {
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0.555);
    margin: 0 auto;
    border: 1px solid var(--beef-blue);
}

caption {
    font-size: clamp(10px, 1.5vw, 20px);
    font-weight: normal;
    text-shadow: 0.05em 0.05em black;
    color: var(--white);
    border: 0.05em solid var(--beef-shadow);
    background: linear-gradient(var(--beef-lightBlue), rgba(0, 0, 0, 0.75));
}

thead th {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--pens-gold);
    font-size: clamp(10px, 2vw, 20px);
    text-shadow: 0.05em 0.05em black;
    white-space: nowrap;
    padding: 10px;
    text-align: center;
    border: 0.05em solid var(--beef-blue);
}

tbody td {
    border: 1px solid var(--beef-blue);
    padding: 5px;
    text-align: center;
    text-shadow: 1px 2px black;
    background-color: var(--black-bg);
    white-space: nowrap;
}

#matchesTable tbody tr:nth-child(4n+1),
#matchesTable tbody tr:nth-child(4n+2) {
	background-color: rgba(200, 200, 200, 0.35);
}

#matchesTable tbody tr:nth-child(4n+3), 
#matchesTable tbody tr:nth-child(4n+4) {
	background-color: rgba(0, 0, 0, 0.05);
}

/* Specific to stats table */
.statsTable thead th {
    font-weight: normal;
    border: 1px solid var(--beef-blue);

}

.statsTable tbody, tr, td {
	overflow-x: auto;
	font-size: clamp(10px, 2vw, 20px);
        padding: 0px 0px;
        text-align: center;
        text-shadow: 0.1em 0.1em black;
        background-color: var(--black-bg);
        white-space: nowrap;
	border-collapse: collapse;
}

.matchSummaryWrapper {
        padding: 5px;
        width: fit-content;
        display: flex;
        gap: 5px;
        margin: 0 auto;
	border-collapse: collapse;
}

.matchSummaryTable {
	width: fit-content;
	border-collapse: collapse; /* removes spacing between cells */
	margin: 0; /* avoid extra margin */
	padding: 0;
	table-layout: auto;
}

.matchSummaryTable thead th,
.matchSummaryTable tbody td {
	font-size: clamp(10px, 2vw, 20px);
 	padding: 2px 5px;
	text-align: center;
	text-shadow: 0.1em 0.1em black;
	background-color: var(--black-bg);
	white-space: nowrap;
}


/*******************************************
    DATATABLE CUSTOMIZATION
*******************************************/
.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px;
    padding: 5px;
    background-color: white;
    color: var(--beef-blue);
}

/*******************************************
    STATUS DOTS
*******************************************/
.GreenDot, .RedDot, .GreyDot, .OrangeDot {
    height: 1.25em;
    width: 1.25em;
    border-radius: 50%;
    display: inline-block;
}

.GreenDot  { background-color: #14d60e; }
.RedDot    { background-color: #ff0000; }
.GreyDot   { background-color: #808080; }
.OrangeDot { background-color: #FFA500; }

/*******************************************
    FONT COLOR HELPERS
*******************************************/
.WhiteFont  { color: white; text-shadow: 1px 1px black; }
.RedFont    { color: red; text-shadow: 1px 1px black; }
.GreenFont  { color: green; text-shadow: 1px 1px black; }
.OrangeFont { color: orange; text-shadow: 1px 1px black; }