/* GridironGod Dev Site - Base Styles */

/* Reset and Base Styles */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* body background and text */
	body {
		font-family: 'Arial', sans-serif;
		line-height: 1.6;
		color: #ffffff;
		background-color: #000000;
	}

/* Site Structure */
	/* Header */
		/* background for header */
		.site-header {
			background: #070707;
			color: #ffffff;
			padding: 0.85rem 0 0.7rem;
			border-bottom: 1px solid #303030;
		}
		
		/* navigation wrapper */
		.site-nav {
			max-width: none;
			margin: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.75rem;
			gap: 1rem;
		}
		
		.logo {
			display: flex;
			flex-direction: column;
			gap: 0.16rem;
			line-height: 1;
		}

		.wordmark {
			--wordmark-tracking: 0.03em;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			gap: 0.16rem;
			line-height: 1;
			text-decoration: none;
			white-space: nowrap;
		}

		.wordmark-main {
			display: inline-flex;
			align-items: center;
			font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
			font-size: clamp(1.15rem, 2.35vw, 1.8rem);
			font-weight: 700;
			letter-spacing: var(--wordmark-tracking);
			line-height: 1;
			text-transform: uppercase;
			color: #dddddd;
			/* text-shadow: 1px 1px 2px #000000; */
		}

		.wordmark-gridiron {
			color: inherit;
		}

		.wordmark-god {
			color: inherit;
		}

		.wordmark-separator {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.4em;
			height: 0.9em;
			margin: 0 0.24ch;
			font-size: 0.40em;
			line-height: 1;
			transform: none;
			opacity: 0.92;
		}

		.logo-subtitle {
			display: block;
			width: 100%;
			font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
			text-align: center;
			font-size: 0.74rem;
			font-weight: bolder;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: #b61831;
		}

		.wordmark-gap,
		.wordmark-ball {
			display: none;
		}
		
		/* menu */
			.nav-menu {
				list-style: none;
				display: flex;
				gap: 0.75rem;
			}
			
			.nav-menu a {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-height: 2.05rem;
				padding: 0.2rem 0.75rem;
				border: 1px solid #4a4a4a;
				border-radius: 4px;
				color: #dcdcdc;
				font-size: 0.88rem;
				font-weight: 600;
				text-decoration: none;
				letter-spacing: 0.08em;
				text-transform: uppercase;
				background: #121212;
				transition: color 0.3s, opacity 0.3s;
				opacity: 0.95;
			}
			
			.nav-menu a:hover,
			.nav-menu a.active {
				color: #ffffff;
				border-color: #7a7a7a;
				background: #1b1b1b;
				opacity: 1;
			}
	/* Header */
	
	/* Main Content */
		/* content wrapper */
		main {
			max-width: none;
			margin: 2rem 0 0;
			padding: 0 0.75rem;
			min-height: calc(100vh - 200px);
			background-color: #000000;
		}
	/* Main Content */
	
	/* Footer */
		/* footer background */
		footer {
			background: #000000;
			color: #ffffff;
			text-align: center;
			padding: 2rem 0;
			margin-top: 2rem;
			border-top: 2px solid #b61831;
		}
	/* Footer */
/* Site Structure */

/* GridironGod Dev Site - UI Elements */

/* UI Elements */
	/* Buttons */
		.btn {
			display: inline-block;
			background: #b61831;
			color: #ffffff;
			padding: 0.75rem 1.5rem;
			text-decoration: none;
			border-radius: 4px;
			margin-top: 1rem;
			transition: background 0.3s;
		}
		
		.btn:hover {
			background: #ffffff;
			color: #b61831;
		}
	/* Buttons */

	/* Importer Dashboard */
		.admin-importer {
			max-width: 1480px;
			margin: 0 auto;
			padding: 1rem 0 2rem;
		}

		.admin-importer h2 {
			margin-bottom: 0.35rem;
		}

		.admin-importer > p {
			margin-bottom: 1.25rem;
		}

		.importer-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 1.25rem;
		}

		.importer-group {
			background: #1a1a1a;
			border: 1px solid #3a3a3a;
			border-radius: 10px;
			padding: 1rem;
		}

		.importer-group h3 {
			margin-bottom: 0.4rem;
		}

		.importer-group p {
			margin-bottom: 0.9rem;
			color: #c8c8c8;
		}

		.importer-group ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0.9rem;
		}

		.importer-group li {
			display: flex;
			flex-direction: column;
			gap: 0.35rem;
		}

		.importer-link.btn {
			margin-top: 0;
			font-weight: 700;
			text-align: center;
			border: 1px solid #b61831;
		}

		.importer-link.btn:hover {
			border-color: #ffffff;
			color: #b61831;
		}

		.importer-desc {
			display: block;
			font-size: 0.93rem;
			line-height: 1.35;
			color: #c5c5c5;
		}

		.importer-note {
			margin-top: 1rem;
			font-size: 0.98rem;
		}

		.importer-nav {
			margin-bottom: 1rem;
		}

		.importer-nav a {
			color: #e8e8e8;
			text-decoration: none;
		}

		.importer-nav a:hover {
			color: #ffffff;
			text-decoration: underline;
		}
	/* Importer Dashboard */

	/* Admin Dashboard */
		.admin-dashboard {
			max-width: 1480px;
			margin: 0 auto;
			padding: 1rem 0 2rem;
		}

		.admin-page-header {
			margin-bottom: 1.25rem;
		}

		.admin-page-header h2 {
			margin-bottom: 0.35rem;
		}

		.admin-grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.25rem;
		}

		@media (max-width: 1200px) {
			.admin-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		@media (max-width: 760px) {
			.admin-grid {
				grid-template-columns: 1fr;
			}
		}

		.admin-card {
			background: #1a1a1a;
			border: 1px solid #3a3a3a;
			border-radius: 10px;
			padding: 1rem;
		}

		.admin-card h3 {
			margin-bottom: 0.45rem;
		}

		.admin-card > p {
			margin-bottom: 0.9rem;
			color: #c8c8c8;
		}

		.admin-card ul {
			margin: 0;
			padding-left: 1rem;
		}

		.admin-card li {
			margin-bottom: 0.45rem;
		}

		.admin-card a {
			color: #ffffff;
		}

		.admin-card a:hover {
			color: #f0f0f0;
		}

		.btn-card {
			display: inline-block;
			background: #b61831;
			color: #ffffff;
			padding: 0.7rem 1.15rem;
			text-decoration: none;
			border-radius: 4px;
			margin-top: 0.75rem;
			border: 1px solid #b61831;
			transition: all 0.25s ease;
		}

		.btn-card:hover {
			background: #ffffff;
			color: #b61831;
			border-color: #ffffff;
		}

		.importer-subgroup {
			border-top: 1px solid #2e2e2e;
			padding-top: 0.85rem;
			margin-top: 0.85rem;
		}

		.importer-subgroup:first-of-type {
			border-top: 0;
			padding-top: 0;
			margin-top: 0;
		}

		.importer-subgroup h4 {
			margin-bottom: 0.5rem;
		}

		.importer-subgroup p {
			margin-bottom: 0.7rem;
			color: #c8c8c8;
		}

		.importer-links {
			display: flex;
			flex-direction: column;
			gap: 0.55rem;
		}

		.admin-card .importer-link.btn {
			margin-top: 0;
			width: 100%;
			text-align: center;
		}
	/* Admin Dashboard */
/* UI Elements */

/* Page Components */
	/* Homepage */
		.homepage {
			display: flex;
			align-items: flex-start;
			gap: 1rem;
			width: 100%;
		}

		.homepage .main-content,
		.homepage .sidebar {
			min-width: 0;
			margin-top: 0;
		}

		.homepage .main-content {
			flex: 1 1 auto;
			max-width: none;
			padding-right: 0;
			align-self: flex-start;
		}

		.homepage .sidebar {
			flex: 0 0 20%;
			max-width: 20%;
			padding-left: 0;
			align-self: flex-start;
			margin-top: 0;
		}

		.homepage .sidebar .week_schedule_widget {
			margin-top: 0 !important;
		}

		.homepage .features {
			margin-top: 0;
		}

		/* hero section */
		.hero {
			text-align: center;
			padding: 3rem 0;
			background: #242526;
			border: 2px solid #ffffff;
			border-radius: 8px;
			margin-bottom: 2rem;
			box-shadow: 0 2px 10px rgba(0,0,0,0.3);
		}
		
		.hero h2 {
			color: #ffffff;
			margin-bottom: 1rem;
			font-size: 2.5rem;
		}
		
		/* feature grid */
		.feature-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 2rem;
		}
		
		/* feature cards */
			.feature-card {
				background: #242526;
				border: 2px solid #ffffff;
				padding: 2rem;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0,0,0,0.3);
				text-align: center;
			}
			
			.feature-card h3 {
				color: #ffffff;
				margin-bottom: 1rem;
			}
		/* feature cards */

		@media (max-width: 992px) {
			.homepage {
				flex-direction: column;
			}

			.homepage .main-content,
			.homepage .sidebar {
				flex: 0 0 100%;
				max-width: 100%;
			}
		}
	/* Homepage */
/* Page Components */

/* Widget */
	/* Schedule */
		/* Widget container */
		.week_schedule_widget {
			background-color: #000;
			color: #fff;
			padding: 20px;
			border: 1px solid #b61831;
			border-radius: 5px;
			margin-top: 0;
		}

		/* Title */
		.week_schedule_widget_title {
			text-align: center;
			font-size: 24px; /* Adjust the size if needed */
			color: #fff; /* Adjust the color if needed */
		}

		/* Header (Week Number) */
		.week_schedule_widget h2 {
			color: #b61831;
			font-size: 24px;
			margin-bottom: 10px;
			text-align: center;
		}

		/* Subheader (Day and Date) */
		.week_schedule_widget h4 {
			color: #fff;
			font-size: 18px;
			margin-bottom: 5px;
			border-bottom: 1px solid #383838;
			padding-top: 5px;
		}

		/* Make the date smaller */
		.week_schedule_widget h4 span.date {
			font-size: 14px;
			color: #b61831;
			margin-left: 5px;
		}

		/* Kickoff Time */
		.week_schedule_widget p.time {
			color: #fff;
			font-size: 16px;
		}

		/* Match-up (Teams) */
		.week_schedule_widget p.matchup {
			color: #383838;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		/* Separate days with border */
		.week_schedule_widget .day_container {
			border-bottom: 2px solid #383838;
			padding-bottom: 10px;
			margin-bottom: 10px;
		}

		/* Remove the last border */
		.week_schedule_widget .day_container:last-child {
			border-bottom: none;
		}

		/* Container for time and day of week */
		.week_schedule_widget .time_day_container {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;
			border-bottom: 1px solid #383838; /* Restore the line under header */
			padding-bottom: 5px;
		}

		/* Time styling */
		.week_schedule_widget .time {
			color: #fff;
			font-size: 16px;
			text-align: left;
		}

		/* Day of week styling */
		.week_schedule_widget .day_of_week {
			color: #fff; /* Change to white or another preferred color */
			font-size: 16px;
			text-align: right;
		}

		/* Style for the matchup row */
		.week_schedule_widget .matchup_row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;
		}

		/* Style for individual matchups */
		.week_schedule_widget .matchup {
			color: #b61831;
			font-size: 16px;
			font-weight: bold;
			width: 48%; /* Ensures matchups are equally distributed across the width */
			text-align: center;
		}

	/* Schedule */
/* Widget */


/* Data */
	/* main division for data */
	.data_content {
		/* Remove negative margins */
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 40px;
		/* Add padding to create spacing from the edges */
		padding-right: 20px;
		padding-left: 20px;
	}

	.data_content::after {
		display: table;
		clear: both;
		content: '';
	}
	/* main division for data */

	/* title of page */
	.data_title {
		/* Remove current margin-bottom */
		margin-bottom: 0; /* or adjust as needed */
		
		/* Add h4 font-size and font-weight */
		font-size: 18px;
		font-weight: bold;
		
		/* Set color to #ffffff */
		color: #ffffff;

		/* hide current display */
		display: none;
	}	
	/* title of page */

	/* data forms */	
		/* data form row */
			.data_form_row {
				margin: 20px; /* Adjust margin as needed */
				display: flex; /* Use flexbox */
				align-items: center; /* Vertically center items */
			} 

			.data_form_row button {
				/* Optional: Adjust individual flex item properties */
				flex: 1; /* This allows items to grow and fill available space */
				background-color: #b61831;
    			color: #000;
				text-decoration: underline;
				border:1px solid #fff;
			}

			.data_form_row button:hover {
				background-color: #000;
				color: #b61831;
				text-decoration: underline;
				border:1px solid #b61831;
			}

			.data_form_row label {
				/* Add styles for the label */
				margin-right: 10px; /* Adjust margin-right for spacing between label and select box */
				color: #ffffff;
				font-size: 12px;
				width: auto; /* Set width to auto */
			}

			.data_form_row select {
				/* Add styles for the select box */
				/* display: inline-block; */ /* Remove display property */
				/* vertical-align: middle; */ /* Remove vertical-align property */
				flex: 1; /* Take remaining space */
				margin-right: 10px; /* Adjust margin-right for spacing between select boxes */
				padding: 5px; /* Example padding for the select box */
				border: 1px solid #ccc; /* Example border for the select box */
				border-radius: 4px; /* Example border-radius for rounded corners */
				box-sizing: border-box; /* Ensure padding and border are included in the width */
				font-size: 14px; /* Example font size for the select box */
			}


			.data_form_row select:focus {
				border-color: #999; /* Example border color on focus */
				background-color: #000000; /* Background color when focused */
				color: #b61831; /* Text color when focused */
			}


			
			/* Optional: Add hover and focus styles for better user interaction */
			.data_form_row select:hover,
			.data_form_row select:focus {
				border-color: #999; /* Example border color on hover/focus */
			}

			/* Add margin between divisions with the same class */
				.data_form_row + .data_form_row {
    				margin-top: 20px; /* Example margin-top for spacing between divisions */
				}
			/* Add margin between divisions with the same class */
			
			/* button styling */
			.data_form_row button {
				margin-left: auto; /* Push the button to the right */
			}
			/* button styling */
			/* checkbox for RSOS */
			.checkbox-large {
				width: 20px;
				height: 20px;
				transform: scale(1.5);
				-webkit-transform: scale(1.5); /* For Safari */
			}
			/* checkbox for RSOS */
		/* data form row */
	/* data forms */

	/* form labels for data header */
		.col-md-1,
		.col-md-2 {
				padding-top: 10px;
				font-weight: 700;
				text-align: right;
				color: #ffffff;
		}
	/* form labels for data header */


	/* Data Tables */
		/* main */
			table, .opp3, .oppS, .oppL, .oppP, .player, .season, .salary, .last_game{
				border: 3px solid black;
				vertical-align: middle;
				table-layout: fixed;
				background-color: #fff;
				width: 100%;
				height: 100%;
				margin: 0;
				color: #000;
			}
		/* main */

		/* text for data content */
			.main-content {
				color: #000000;
			}
		/* text for data content */

		/* display for full team name vs abbreviated team opp */
			h1.headT {
						
				background-color: #000;
				text-align: center;
				margin:0;
				-webkit-text-stroke-width: 1px;
				-webkit-text-stroke-color: #fff;
				-webkit-text-fill-color: #b61831;
				font-family: 'Helvetica Neue';
				font-weight: bold;

			}
		/* display for full team name vs abbreviated team opp */

		/* data tables - nest */   
			.nest {
				margin: 0;
				height: 100%;
				width: 100%;
			}

			.nest td {
				width: 100%;
				border: 3px solid black;
                color: #000;
			}

			.nest tr:first-child td {
				border-top: none;
			}

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

			.nest tr td:first-child {
				border-left: none;
			}

			.nest tr td:last-child {
				border-right: none;
			}
		/* data tables - nest */

		/* data division & table layout structure */
			.top    {
				display : flex;
				align-items : center;
				text-align: center;
				justify-content: center; /* Add this */
				width: 100%;
				color: #fff;
				
			}

			.topL  {
				float: left;
				width: 20%;
				color: #fff;
				vertical-align: middle;
				height:100%;
			}

			.topR {
				float: left;
				width: 20%;
				color: #fff;
				vertical-align: middle;
				height:100%;

			}

			.topM {
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center; /* Add this */
				width: 100%;
				vertical-align: middle;
				height:100%;

			}

				

			.card {
				background-color: #000;
			}


			.holder {
				margin: 50px auto;
				background-color: #000;
				border: 10px solid #fff;
				width: 95%;
				
			}

			/* title for previous pos vs f_opp */
				h3.history {
					width: 100%;
					color:#fff;
					text-align: center;
				}
			/* title for previous pos vs f_opp */

			/* tables - float  Season & Last 3 Games */
				.row2 {
					background-color: #000;
				}

				.column {
					float: left;
					width: 45%;
					color: #000;
				}

				.column2 {
					float: left;
					width: 10%;
					color: #000;
				}

                /* ADDED AFTER CONVERSION */
                .oppP {
                    color: #000;
                }
			/* tables - float  Season & Last 3 Games */	
		/* data division & table layout structure */

		/* subheadings */
			.subhead {
				vertical-align: middle;
				text-align: center;
				background-color: #383838;
				color:#fff;
			}        

			.subheadP_left {
				vertical-align: middle;
				text-align: left;
				text-transform: uppercase;
				background-color: #000;
				color: #fff;
				padding-left: 5px;
			}
			.subheadP_center {
				vertical-align: middle;
				text-align: center;
				text-transform: uppercase;
				background-color: #000;
				color: #b61831;
				font-size: xx-large;
				text-decoration: underline;
			}

			.subheadP_right {
				vertical-align: middle;
				text-align: right;
				background-color: #000;
				color: #fff;
				padding-right: 5px;
			}

			.subheadL {
				vertical-align: middle;
				text-align: center;
				background-color: #383838;
				color:#fff;
			}       
		/* subheadings */

		/* Indicators */
			.fill td{
				background-color: black;
				height: 100%;
			}
			
			td, th, tr{
				vertical-align: middle;
				text-align: center;
			}
			
			tr.wk_break {
				background-color: #000;
			}

			tr.wk_break * {
				height: 3px !important;
				padding: 0 !important;
				margin: 0 !important;
				border: none !important;
			}
			
			td.salary_diff {
				text-align:left;  
			}
			
			td.grey{
				background-color:#fff;
				color:#000;
			}
			
			tr.grey{
				background-color:#fff;
				color:#000;
			}
			
			.green, .yellow, .red {
				font-weight: bold;
			}
			
			.green {
				background-color:#90EE90 !important;
			}
			
			.yellow{
				background-color:#fcffa4 !important;
			}
			
			.red {
				background-color:#f67a7b !important;
			}
		/* Indicators */
	/* Data Tables */

	/* Importer */
			.import_table {
				background-color: #ffffff;
				border: 3px solid #000000;
				margin: 10px auto;
				width: 100%;
				padding: 20px;
			}
		.popup_import {
			color: #ffffff;
		}
	/* Importer */
	/* Logs */
	.import-logs-container {
		max-width: 800px;
		margin: 0 auto;
	}
	.import-logs-container h1 {
		color: #fff;
	}
	.import-section {
		border: 1px solid #ccc;
		padding: 20px;
		margin-bottom: 30px;
		background-color: #000;
		color: #fff;
	}
	.import-section h2 {
		margin-top: 0;
		color: #b61831;
	}
	.log_note {
		font-size: 0.4em; /* Smaller font size */
		color: #fff; /* Lighter color for the note */
	}
	.header-container {
		display: flex; /* Use flexbox for layout */
		justify-content: space-between; /* Space between heading and button */
		align-items: center; /* Center align items vertically */
    	margin-bottom: 10px; /* Add space below header */
	}
	.timestamp {
		background: #333;
		padding: 10px;
		margin-bottom: 10px;
		font-family: monospace;
		color: #fff;
	}
	.log-content {
		padding: 10px;
		max-height: 400px;
		overflow-y: scroll;
		margin-bottom: 10px;
		font-family: monospace;
	}
	.log-content pre {
		white-space: pre-wrap;
		background: #333;
		color: #fff;
	}
	.notice.notice-success {
		background: #dff0d8;
		padding: 10px;
		margin-bottom: 20px;
	}
	.button {
		background: #b61831;
		color: #fff;
		border: none;
		padding: 8px 12px;
		cursor: pointer;
	}
	.button:hover {
		background: #fff;
		color: #000;
	}
	.injury_button {
		background: #b61831;
		color: #000;
		border: none;
		padding: 4px 8px;
		cursor: pointer;
	}
	.injury_button:hover {
		background: #000;
		color: #fff;
	}
	/* Logs */
	/* for injury status toggle */
	.injury-row {
		transition: all 0.3s ease; /* Adds a smooth transition effect when showing/hiding the row */
	}
	.injury-details-table,
	.injury-details-table td,
	.injury-details-table th {
		color: #000;
	}
/* Data */

/* Responsive Design */
	@media (max-width: 768px) {
		.site-nav {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
			padding: 0 0.5rem;
		}

		.wordmark-main {
			font-size: clamp(1rem, 7vw, 1.35rem);
			letter-spacing: var(--wordmark-tracking);
		}

		.logo-subtitle {
			font-size: 0.68rem;
			letter-spacing: var(--wordmark-tracking);
		}

		.wordmark-gap {
			width: 0.3ch;
		}
		
		.nav-menu {
			gap: 0.5rem;
		}

		.nav-menu a {
			font-size: 0.82rem;
			min-height: 1.9rem;
			padding: 0.18rem 0.62rem;
		}
		
		main {
			padding: 0 0.5rem;
		}
	}
/* Responsive Design */