/**
 * Global Styles
 * Uses Material Design 3 design tokens from tokens.css
 */

* {
	font-family: var(--md-sys-typescale-font-family-name);
	box-sizing: border-box;
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(/MaterialIcons-Regular.ttf) format('truetype');
}

body {
	margin: 0;
	background-color: var(--md-sys-color-background);
	color: var(--md-sys-color-on-background);
	font-size: var(--md-sys-typescale-body-medium-size);
	line-height: var(--md-sys-typescale-body-medium-line-height);
	font-weight: var(--md-sys-typescale-body-medium-weight);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
	/* Performance optimizations */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography Scale */
h1 {
	font-size: var(--md-sys-typescale-headline-large-size);
	line-height: var(--md-sys-typescale-headline-large-line-height);
	font-weight: var(--md-sys-typescale-headline-large-weight);
	letter-spacing: var(--md-sys-typescale-headline-large-tracking);
	color: var(--md-sys-color-on-background);
	margin: 0;
}

h2 {
	font-size: var(--md-sys-typescale-headline-medium-size);
	line-height: var(--md-sys-typescale-headline-medium-line-height);
	font-weight: var(--md-sys-typescale-headline-medium-weight);
	letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
	color: var(--md-sys-color-on-background);
	margin: 0;
}

h3 {
	font-size: var(--md-sys-typescale-headline-small-size);
	line-height: var(--md-sys-typescale-headline-small-line-height);
	font-weight: var(--md-sys-typescale-headline-small-weight);
	letter-spacing: var(--md-sys-typescale-headline-small-tracking);
	color: var(--md-sys-color-on-background);
	margin: 0;
}

/* Form Inputs - Using MD3 Design Tokens */
input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
input[type='tel'],
select,
textarea {
	width: 100%;
	padding: 10px 8px; /* Original padding - matches previous design */
	margin: var(--md-sys-spacing-1) 0 var(--md-sys-spacing-3) 0;
	display: inline-block;
	border: 1px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-small);
	box-sizing: border-box;
	font-size: var(
		--md-sys-typescale-body-medium-size
	); /* 14px - matches original */
	line-height: var(--md-sys-typescale-body-medium-line-height);
	font-weight: var(--md-sys-typescale-body-medium-weight);
	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
	background-color: var(--md-sys-color-surface);
	color: var(--md-sys-color-on-surface);
	transition:
		border-color var(--md-sys-motion-transition-standard),
		background-color var(--md-sys-motion-transition-standard),
		box-shadow var(--md-sys-motion-transition-standard);
	/* No min-height - let it size naturally based on padding and line-height */
}

/* Placeholder styling */
input[type='text']::placeholder,
input[type='password']::placeholder,
input[type='email']::placeholder,
input[type='number']::placeholder,
input[type='tel']::placeholder,
textarea::placeholder {
	color: var(--md-sys-color-on-surface-variant);
	opacity: 0.6;
}

/* Focus State */
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='tel']:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--md-sys-color-action);
	border-width: 2px;
	padding: 9px 7px; /* Adjust for 2px border (10-1, 8-1) */
	box-shadow: 0 0 0 1px var(--md-sys-color-action);
}

/* Hover State */
input[type='text']:hover:not(:disabled):not(:focus),
input[type='password']:hover:not(:disabled):not(:focus),
input[type='email']:hover:not(:disabled):not(:focus),
input[type='number']:hover:not(:disabled):not(:focus),
input[type='tel']:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) {
	border-color: var(--md-sys-color-on-surface);
	background-color: var(--md-sys-color-surface-container-low);
}

/* Textarea specific styling */
textarea {
	min-height: 80px;
	resize: vertical;
	font-family: var(--md-sys-typescale-font-family-name);
}

/* Select dropdown styling */
select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='%23666'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--md-sys-spacing-3) center;
	background-size: 24px;
	padding-right: calc(
		var(--md-sys-spacing-3) + 24px + var(--md-sys-spacing-2)
	);
	cursor: pointer;
}

select:hover:not(:disabled) {
	background-color: var(--md-sys-color-surface-container-low);
}

select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='%23374151'/%3E%3C/svg%3E");
}

/* File input styling */
input[type='file'] {
	padding: var(--md-sys-spacing-3);
	min-height: auto;
	cursor: pointer;
	border-style: dashed;
}

input[type='file']:hover:not(:disabled) {
	border-color: var(--md-sys-color-action);
	background-color: var(--md-sys-color-action-container);
}

/* Error/Invalid state */
input[type='text']:invalid:not(:placeholder-shown),
input[type='password']:invalid:not(:placeholder-shown),
input[type='email']:invalid:not(:placeholder-shown),
input[type='number']:invalid:not(:placeholder-shown),
input[type='tel']:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
	border-color: var(--md-sys-color-error);
}

input[type='text']:invalid:not(:placeholder-shown):focus,
input[type='password']:invalid:not(:placeholder-shown):focus,
input[type='email']:invalid:not(:placeholder-shown):focus,
input[type='number']:invalid:not(:placeholder-shown):focus,
input[type='tel']:invalid:not(:placeholder-shown):focus,
select:invalid:not(:placeholder-shown):focus,
textarea:invalid:not(:placeholder-shown):focus {
	border-color: var(--md-sys-color-error);
	box-shadow: 0 0 0 1px var(--md-sys-color-error);
}

/* Form Labels */
label {
	font-size: var(--md-sys-typescale-label-large-size);
	line-height: var(--md-sys-typescale-label-large-line-height);
	font-weight: var(--md-sys-typescale-label-large-weight);
	letter-spacing: var(--md-sys-typescale-label-large-tracking);
	color: var(--md-sys-color-on-surface);
	display: block;
	margin-bottom: var(--md-sys-spacing-1);
}

/* Checkbox styling */
input[type='checkbox'] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin: 0 var(--md-sys-spacing-2) 0 0;
	cursor: pointer;
	accent-color: var(--md-sys-color-action);
	appearance: none;
	border: 2px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-extra-small);
	background-color: var(--md-sys-color-surface);
	transition:
		background-color var(--md-sys-motion-transition-standard),
		border-color var(--md-sys-motion-transition-standard),
		box-shadow var(--md-sys-motion-transition-standard);
	position: relative;
	flex-shrink: 0;
}

input[type='checkbox']:hover:not(:disabled) {
	border-color: var(--md-sys-color-action);
	background-color: var(--md-sys-color-surface-container-low);
}

input[type='checkbox']:checked {
	background-color: var(--md-sys-color-action);
	border-color: var(--md-sys-color-action);
}

input[type='checkbox']:checked::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--md-sys-color-on-action);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

input[type='checkbox']:focus-visible {
	outline: 2px solid var(--md-sys-color-action);
	outline-offset: 2px;
}

input[type='checkbox']:disabled {
	opacity: var(--legacy-disabled-opacity);
	cursor: not-allowed;
	background-color: var(--md-sys-color-surface-container);
	border-color: var(--md-sys-color-outline);
}

/* Radio button styling */
input[type='radio'] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	margin: 0 var(--md-sys-spacing-2) 0 0;
	cursor: pointer;
	accent-color: var(--md-sys-color-action);
	appearance: none;
	border: 2px solid var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-full);
	background-color: var(--md-sys-color-surface);
	transition:
		background-color var(--md-sys-motion-transition-standard),
		border-color var(--md-sys-motion-transition-standard),
		box-shadow var(--md-sys-motion-transition-standard);
	position: relative;
	flex-shrink: 0;
}

input[type='radio']:hover:not(:disabled) {
	border-color: var(--md-sys-color-action);
	background-color: var(--md-sys-color-surface-container-low);
}

input[type='radio']:checked {
	border-color: var(--md-sys-color-action);
}

input[type='radio']:checked::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: var(--md-sys-shape-corner-full);
	background-color: var(--md-sys-color-action);
}

input[type='radio']:focus-visible {
	outline: 2px solid var(--md-sys-color-action);
	outline-offset: 2px;
}

input[type='radio']:disabled {
	opacity: var(--legacy-disabled-opacity);
	cursor: not-allowed;
	background-color: var(--md-sys-color-surface-container);
	border-color: var(--md-sys-color-outline);
}

.material-icons {
	text-transform: lowercase;
	font-family: 'Material Icons';
	font-size: 1.3em;
}

.login-header {
	height: 80px;
	background-color: var(--md-sys-color-surface);
	display: flex;
	align-items: center;
	position: relative;
	box-shadow: var(--md-sys-elevation-1);
}

.login-header img {
	max-height: 100%;
	height: 50px;
}

.login-page {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	box-sizing: border-box;
	padding-top: 40px;
}

.login-form {
	margin: 0 auto;
}

.selectContainer > input {
	box-sizing: border-box;
}

.icon-button {
	padding: var(--md-sys-spacing-1);
	color: var(--md-sys-color-secondary);
	display: inline-block;
	width: 40px;
	height: 40px;
	text-align: center;
	border-radius: var(--md-sys-shape-corner-full);
	transition:
		background-color var(--md-sys-motion-transition-standard),
		color var(--md-sys-motion-transition-standard);
	cursor: pointer;
}

.icon-button:hover {
	background-color: var(--md-sys-state-hover);
	color: var(--md-sys-color-secondary-light);
}

.icon-button:active {
	background-color: var(--md-sys-state-pressed);
}

.icon-button:focus-visible {
	outline: 2px solid var(--md-sys-color-action);
	outline-offset: 2px;
}

.fileupload {
	width: 99%;
	height: 100px;
	border: 1px dashed var(--md-sys-color-outline);
	border-radius: var(--md-sys-shape-corner-small);
	background-color: var(--md-sys-color-surface-container-low);
	transition:
		border-color var(--md-sys-motion-transition-standard),
		background-color var(--md-sys-motion-transition-standard);
}

.fileupload:hover {
	border-color: var(--md-sys-color-action);
	background-color: var(--md-sys-color-action-container);
}

.dialog-btn {
	float: right;
}

.link {
	text-decoration: none;
	color: var(--md-sys-color-link);
	font-weight: 600;
	transition: color var(--md-sys-motion-transition-standard);
}

.link:hover {
	text-decoration: underline;
	cursor: pointer;
	color: var(--md-sys-color-link-hover);
}

.link:visited {
	color: var(--md-sys-color-link-visited);
}

@media (max-width: 1800px) {
	.hide-large {
		display: none;
	}
}

@media (max-width: 1280px) {
	.hide-medium {
		display: none;
	}
}

@media (max-width: 600px) {
	.hide-mobile {
		display: none;
	}
}

.hidden {
	display: none;
}

input:disabled,
textarea:disabled,
select:disabled,
div[data-disabled='true'] {
	background: var(--md-sys-color-surface-container);
	color: var(--md-sys-color-on-surface);
	opacity: var(--legacy-disabled-opacity);
	pointer-events: none;
	cursor: not-allowed;
}

/* Tippy.js MD3 Theme */
.tippy-box[data-theme~='md3'] {
	background-color: var(--md-sys-color-inverse-surface);
	color: var(--md-sys-color-inverse-on-surface);
	font-size: var(--md-sys-typescale-body-small-size);
	font-weight: var(--md-sys-typescale-body-small-weight);
	line-height: var(--md-sys-typescale-body-small-line-height);
	border-radius: var(--md-sys-shape-corner-small);
	padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
	box-shadow: var(--md-sys-elevation-2);
}

.tippy-box[data-theme~='md3'] .tippy-content {
	padding: var(--md-sys-spacing-1) var(--md-sys-spacing-2);
}

.tippy-box[data-theme~='md3'] .tippy-arrow {
	color: var(--md-sys-color-inverse-surface);
}

.tippy-box[data-theme~='md3'][data-placement^='top'] > .tippy-arrow::before {
	border-top-color: var(--md-sys-color-inverse-surface);
}

.tippy-box[data-theme~='md3'][data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: var(--md-sys-color-inverse-surface);
}

.tippy-box[data-theme~='md3'][data-placement^='left'] > .tippy-arrow::before {
	border-left-color: var(--md-sys-color-inverse-surface);
}

.tippy-box[data-theme~='md3'][data-placement^='right'] > .tippy-arrow::before {
	border-right-color: var(--md-sys-color-inverse-surface);
}