/* Import core variables */
@import url('core/variables.css');

@font-face {
	font-display: swap;
	font-family: 'Source Sans 3';
	font-style: normal;
	/* font-weight: 400 700; */
	src: url('/fonts/Source_Sans_3/static/SourceSans3-Black.ttf') format('truetype');
}

@font-face {
	font-display: swap;
	font-family: Pixelify;
	font-style: normal;
	/* font-weight: 400 700; */
	src: url('/fonts/Source_Sans_3/PixelifySans-Regular.ttf') format('truetype');
}

@font-face {
	font-display: swap;
	font-family: 'Gotham';
	font-style: normal;
	/* font-weight: 400 700; */
	src: url('/fonts/Gotham-Medium.otf') format('opentype');
}

:root {
	/* * Core Color Values */


	/* Unique to theme.css - NOT in variables.css */
	--c-accent-light: #B9F2FF;


	/* Legacy variable aliases for backward compatibility */
	/* TODO: Remove these after updating all references */

	/* UNIQUE - Enhanced text color tokens for better hierarchy - NOT in variables.css */
	--c-text-primary: var(--c-fg);
	--c-text-secondary: oklch(0.4 0.020 264.0);
	--c-text-tertiary: oklch(0.6 0.015 264.0);
	--c-text-muted: oklch(0.7 0.010 264.0);

	/* UNIQUE - Background variation tokens - NOT in variables.css */
	--c-bg-secondary: oklch(0.94 0.008 270.0);
	--c-bg-tertiary: oklch(0.92 0.012 270.0);
	--c-border: oklch(0.85 0.015 270.0);

	/* UNIQUE - RGB values for rgba() usage - NOT in variables.css */
	--c-accent-rgb: 0, 45, 61;
}

/* save this for down the road - i like this color pallet better */
/* /* Primary dark */
/* --cg1-1: #1FBFFF; */
/* Accent color */
/* --cg1-2: #23A1FB;/* 
/* Primary light */
/* --cg1-3: #2884F6;/* 
/* Accent color light */
/* --cg1-4: #FD6A21;  */
/* Accent Color dark */
/* --cg1-5: #F88825; */


body {
	background: var(--c-bg);
	color: var(--c-fg);
	font-size: var(--fs-base);
	font-family: var(--ff-gotham);
	padding: 1px;
}

::selection {
	background: var(--c-selected);
	color: var(--c-bg);
	-webkit-text-fill-color: var(--c-bg);
}

::-moz-selection {
	background: var(--c-selected);
	color: var(--c-bg);
}

input::selection,
textarea::selection {
	background: var(--c-selected);
	color: var(--c-bg);
	-webkit-text-fill-color: var(--c-bg);
}

input::-moz-selection,
textarea::-moz-selection {
	background: var(--c-selected);
	color: var(--c-bg);
}

input {
	background: var(--c-tint-or-shade);
	color: var(--c-bg);
	border-radius: var(--br-md);
}

.inverted {
	background: var(--c-fg);
	color: var(--c-bg);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

button {
	font-weight: 600;
}

p {
	margin-bottom: 0 !important;
}


h1,
h2,
section,
form {
	margin-bottom: 1rem;
}

section {
	padding: 1rem;
}

#footer {
	background-color: var(--c-bg);
	align-items: center;
	border-radius: var(--br-lg);
	color: var(--c-accent);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-left: 20px;
	margin-right: 20px;
	max-height: fit-content;
	min-height: 60px;
	/* Reserve space to prevent layout shifts */
	height: 60px;
	/* Fixed height */
	padding: 0;
	margin-top: 10px;
	box-shadow: var(--s-full-sm);
	flex-shrink: 0;
	/* Prevent shrinking */
}

/* Layout shift prevention for footer content */
.footer-text {
	display: flex !important;
	align-items: center;
	justify-content: space-around;
	width: 100% !important;
	min-width: 100% !important;
	/* Ensure full width */
	min-height: 40px;
	/* Reserve height */
	flex-shrink: 0;
}

.footer-text>div {
	flex-shrink: 0;
	/* Prevent individual elements from shrinking */
	min-height: 20px;
	/* Reserve height for each section */
}

.side-nav-main {
	border-radius: 7px;

}

.sidebar-container {
	border: 2px solid;
	border-color: var(--c-fg);
	border-radius: 7px;
	margin: 2px;
	margin-top: 3px;

}

.dash-main {
	background-color: var(--c-bg);
	border-radius: 7px;
}

.border-gradient {
	border: 10px solid;
	border-image-slice: 1;
	border-width: 5px;
}


.recolor {
	fill: var(--c-accent) !important;
}


code {
	border-radius: 7px;
	color: var(--c-accent);
	font-family: monospace;
	font-size: large;
	padding: 2px;
}

pre {
	background-color: var(--c-bg);
	border-radius: 7px;
	box-shadow: 1px 1px 2px black;
	color: var(--c-accent);
	font-size: large;
	padding: 20px;
	width: fit-content;
}

.form-control {
	background-color: light-dark(var(--c-bg), var(--c-bg)) !important;
	color: light-dark(var(--c-black-800), var(--c-fg)) !important;
}

.skinny {
	/* grid-template-columns: 4% 96% !important; */
	grid-template-columns: var(--sidebar-width-collapsed) 1fr !important;
	;
}

.fatty {
	/* grid-template-columns: 14% 86% !important; */
	grid-template-columns: var(--sidebar-width-expanded) 1fr !important;
}

.mobile-full {
	/* grid-template-columns: 100% !important; */
	grid-template-columns: 1fr !important;
}

/* Mobile: Comprehensive layout fixes for devices <= 1120px */
@media (max-width: 1120px) {

	/* NUCLEAR OPTION: Prevent ANY horizontal overflow */
	*,
	*::before,
	*::after {
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}

	html {
		overflow-x: clip !important;
		width: 100vw !important;
		max-width: 100vw !important;
	}

	body {
		overflow-x: clip !important;
		width: 100vw !important;
		max-width: 100vw !important;
	}

	/* Convert main from grid to block layout */
	.main {
		display: block !important;
		grid-template-columns: none !important;
		width: calc(100vw - 10px) !important;
		max-width: calc(100vw - 10px) !important;
		margin: 5px !important;
		padding: 10px !important;
		overflow-x: clip !important;
	}

	/* Reset everything-else positioning */
	.everything-else {
		grid-column-start: 1 !important;
		grid-column: unset !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	/* Header mobile sizing */
	#header-vue-app {
		margin: 10px !important;
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
	}

	/* Ensure fixed elements stay in viewport */
	.toolbar-tab,
	.toolbar-tab.my-week-tab,
	.mobile-header-menu-button,
	.mobile-home-button {
		position: fixed !important;
	}
}

.split-vertical {
	display: grid;
	grid-template-columns: 50% 50% !important;
	gap: 20px;
}

i {
	color: inherit;
	font-size: large;
}

/* Liquid glass effect class */
.glass {
	position: relative;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(2px) saturate(180%);
	border: 0.0625rem solid rgba(255, 255, 255, 0.8);
	border-radius: var(--br-md);
	padding: 0.25rem;
	box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

.glass::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--br-md);
	backdrop-filter: blur(1px);
	box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
		inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
	opacity: 0.6;
	z-index: -1;
	filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
	pointer-events: none;
}


.stat-item {
	border-color: var(--c-bg);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--c-bg) 20%, transparent 80%);
	transform: translateY(-1px);
	background:
		color-mix(in srgb, var(--c-bg) 8%, transparent 92%);
	padding: 10px 5px;
}

.upload-success {
	margin-top: 20px;
	padding: 20px;
	background:
		color-mix(in srgb, green 5%, transparent 95%);
	border: 1px solid color-mix(in srgb, green 30%, transparent 70%);
	border-radius: var(--br-lg);
}


/* Large Screen Layout Override - Remove 1200px max-width constraint for screens wider than 1920px */
@media (min-width: 1921px) {

	.account-requests-container,
	.accountrequests-app,
	.admin-content,
	.birthdays-container,
	/* Dashboard container */
	.dashboard-container,
	/* Content containers */
	.content-container,
	.main-container,
	.wrapper,
	/* Header */
	.header-container,
	#holidays-app,
	/* Specific route containers */
	.fr-container,
	.extusers-container,
	.frview-container,
	.feature-requests-container,
	.help-container,
	.portal-content,
	.events-container,
	.fileupload-container,
	.links-container,
	.directory-container,
	.admin-container,
	.mp-container,
	.motorpooladmin-container,
	.mp-vue-app,
	.mp-forbidden-container,
	.motorpool-acknowledge-app,
	.notices,
	.printshop-container,
	.pagesadmin-container,
	.teamtuesday-container,
	.tests-container,
	.test-page-content,
	.tools-container,
	.qrcode-container,
	.phonebook-container,
	.signature-vue-app,
	.user-admin-container,
	.countyconnection-container,
	/* Generic containers that might have 1200px limits */
	.container,
	.page-container,
	.app-container,
	/* Any element with max-width: 1200px */
	[style*="max-width: 1200px"],
	/* Class-based 1200px constraints */
	.max-width-1200 {
		max-width: none !important;
		width: 100% !important;
	}

	/* Ensure proper centering and padding on large screens */
	.dashboard-container,
	.content-container,
	.main-container {
		margin: 0 auto;
		padding-left: max(20px, calc((100vw - 1800px) / 2));
		padding-right: max(20px, calc((100vw - 1800px) / 2));
	}

	/* Force override dashboard-specific CSS that loads after theme.css */
	.dashboard-container {
		max-width: none !important;
		width: 100% !important;
		padding-left: unset !important;
		padding-right: unset !important;
	}
}

/* Utility classes for new design tokens */
.text-primary {
	color: var(--c-text-primary);
}

.text-secondary {
	color: var(--c-text-secondary);
}

.text-tertiary {
	color: var(--c-text-tertiary);
}

.text-muted {
	color: var(--c-text-muted);
}

.bg-secondary {
	background: var(--c-bg-secondary);
}

.bg-tertiary {
	background: var(--c-bg-tertiary);
}

.border-standard {
	border-color: var(--c-border);
}

/* Standard section styling for consistent app-wide sections */
.app-section {
	margin-bottom: 30px;
	padding: 20px;
	background: color-mix(in srgb, var(--c-accent) 5%, var(--c-bg) 95%);
	border-radius: var(--br-lg);
	border: 1px solid color-mix(in srgb, var(--c-accent) 20%, transparent 80%);
}

/* Enhanced section styling that works with new background */
.section-enhanced {
	background: color-mix(in srgb, var(--c-accent) 5%, var(--c-bg) 95%);
	border: 1px solid color-mix(in srgb, var(--c-accent) 20%, transparent 80%);
	border-radius: var(--br-lg);
	padding: 20px;
}

/* Developer/Admin Header Pattern */
.dev-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
	padding: 20px;
	background: linear-gradient(135deg, var(--c-dev-header-bg) 0%, color-mix(in srgb, var(--c-dev-header-bg) 80%, transparent 20%) 100%);
	border-radius: var(--br-lg);
	color: var(--c-dev-header-text);
}

.admin-header {
	background: linear-gradient(135deg, var(--c-admin-header-bg) 0%, color-mix(in srgb, var(--c-admin-header-bg) 80%, transparent 20%) 100% 100%) !important;

}

aside.sidebar-container.app-section {
	padding: 0 !important;
}

iconify-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
}