ion-header {
	ion-toolbar {
		text-align: center;
		--ion-toolbar-background: var(--sgc-background-dark-bg);
		ion-title {
			--color: var(--sgc-background-dark-font);
			img {
				margin-top: 0.3rem;
			}
		}
		ion-menu-button,
		ion-button {
			&::part(native) {
				color: var(--sgc-background-dark-font);
			}
		}
	}
	&.header-md::after {
		background: none;
	}
	&.header-ios ion-toolbar:last-of-type {
		--border-width: 0;
	}
}

ion-app {
	--keyboard-height: 0px;
}

ion-modal {
	color: var(--ion-color);
}

div.dummpy-keyboard {
	height: var(--keyboard-height);
	transition: height 0.3s;
}

ion-footer {
	ion-toolbar {
		--ion-toolbar-background: #fff;
		--border-width: 0;
		&.in-toolbar {
			--min-height: 40px;
		}
	}
}

ion-alert.custom-alert,
ion-alert.custom-confirm {
	--backdrop-opacity: 0.7;
	.alert-button-group {
		padding: 1rem;
		justify-content: center;
	}
	button.alert-button {
		border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
		min-width: 5rem;
		text-align: center;
		border-radius: 0.4em;
		padding: 0.5rem 0;
		span {
			display: inline-block;
		}
		&.alert-button-close,
		&.confirm-button-confirm {
			background-color: var(--ion-color-primary);
			color: var(--ion-color-primary-contrast);
		}
	}
}

div.ion-page.can-go-back {
	ion-buttons.detail-page {
		ion-menu-button {
			display: none;
		}
		ion-back-button {
			&::part(native) {
				color: var(--sgc-background-dark-font);
			}
		}
	}
}
ion-button {
	--box-shadow: none;
}
ion-list {
	ion-item {
		&:last-of-type {
			&::part(native) {
				--border-color: transparent;
			}
		}
	}
	ion-list-header {
		padding-inline-start: calc(var(--ion-safe-area-left, 0px) + 5px);
		font-size: 1rem;
		font-weight: 600;
		color: var(--sgc-background-light-font);
		margin-bottom: 0.5rem;
	}
}
ion-list.item-list {
	--ion-item-background: transparent;
	ion-item {
		--ion-item-background: white;
		--border-radius: 8px;
		&::part(native) {
			margin-bottom: 5px;
			--inner-border-width: 0;
		}
		ion-note {
			color: var(--sgc-color-secondary-50);
			&[slot='start'] {
				min-width: 2rem;
				max-width: 2rem;
				margin-right: 0.5rem;
				font-size: 0.9rem;
			}
			&[slot='end'] {
				margin-left: 0.5rem;
				min-width: 2.5rem;
				max-width: 2.5rem;
				font-size: 0.8rem;
			}
		}
		ion-label {
			h3 {
				font-size: 1rem;
				font-weight: 600;
				color: var(--sgc-color-primary-50);
				ion-badge {
					vertical-align: middle;
				}
			}
		}
	}
}

ion-list.item-view {
	--ion-item-background: white;
	border-radius: 8px;
	padding: 8px;
	ion-item {
		--ion-item-background: white;
		--border-width: 0 0 1px 0;
		--ion-border-color: var(--sgc-color-tertiary-90);
		&::part(native) {
			--inner-border-width: 0;
			--padding-start: 0.25rem;
		}
		> ion-note[slot='start'] {
			--color: var(--sgc-color-tertiary-50);
			border-bottom-style: none;
			margin-right: 10px;
			min-width: 5em;
			font-size: 0.8rem;
		}
		&.item {
			ion-label {
				--color: var(--sgc-background-light-font);
				font-size: 0.9rem;
			}
		}
	}
}

ion-list.item-form {
	--ion-item-background: white;
	border-radius: 8px;
	padding: 8px;
	margin-bottom: 1rem;
	ion-item {
		--ion-item-background: white;
		--border-color: var(--ion-color-light-shade);
		ion-label {
			--color: var(--ion-color-tertiary) !important;
			font-size: 0.8rem !important;
			&.label-fixed {
				min-width: 70px;
				max-width: 90px;
			}
		}
		ion-searchbar {
			padding: 0;
			height: 2.6em;
		}
		ion-input {
			font-size: 0.9rem;
			--padding-start: 0;
			--color: var(--sgc-background-light-font);
		}
		ion-textarea {
			textarea.native-textarea {
				font-size: 0.9rem;
				color: var(--sgc-background-light-font);
			}
		}
		ion-select.in-item {
			max-width: none;
			width: 100%;
			font-size: 0.9rem;
			color: var(--sgc-background-light-font);
			--padding-start: 0;
		}
		&::part(native) {
			--inner-border-width: 0;
			--padding-start: 0.25rem;
			--inner-padding-end: 0;
		}
		div > label {
			font-size: 0.8rem;
		}
	}
	&.free-label {
		ion-item {
			ion-label {
				min-width: unset;
				max-width: unset;
				&.sc-ion-label-ios-h,
				&.sc-ion-label-md-h {
					flex: 0 0 120px;
				}
			}
		}
	}
	&.form-line {
		border: 4px solid var(--sgc-color-tertiary-70);
	}
}

ion-list.item-list,
ion-list.item-view,
ion-list.item-form {
	ion-item-divider {
		--background: transparent;
		--ion-item-border-color: transparent;
		font-size: 1.3em;
		--padding-start: 0;
		--color: var(--ion-color-tertiary);
	}
}

ion-title.page-title {
	padding-left: 0;
	margin-bottom: 1em;
	position: relative;
	overflow: visible;
	z-index: 1;
	height: 3rem;
	font-size: 1rem;
	p {
		font-weight: 600;
		color: var(--sgc-background-light-font);
		text-align: left;
		margin: 0 0 0 5px;
	}
	&.with-title-deco {
		padding-right: 5rem;
	}
	ion-note.title-deco {
		position: absolute;
		right: 0;
		top: 0;
		> ion-badge.work-wki-push,
		> ion-badge.emg-gb,
		> ion-badge.deft-prcg-stus {
			display: block;
		}
	}
}
div.deft-status {
	max-width: 80px;
	min-width: 70px;
	ion-badge.work-wki-push,
	ion-badge.emg-gb,
	ion-badge.deft-prcg-stus {
		display: block;
		margin-right: 0;
	}
}
ion-badge.work-wki-push,
ion-badge.emg-gb,
ion-badge.deft-prcg-stus {
	display: inline-block;
	margin: 0.1em 0.3em 0.1em 0;
	padding: 0.4em 0.5em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	border-radius: 1rem;

	&::after {
		content: '';
		display: inline-block;
		clear: after;
	}
	--color: rgba(255, 0, 0, 1);
	--background: rgba(255, 0, 0, 0.3);
	&.work-wki-push {
		&.yes {
			--color: #2fa36b;
			--background: #c5f5ee;
		}
		&.no {
			--color: #e54553;
			--background: #ffdee0;
		}
	}
	&.deft-prcg-stus {
		&.A {
			--color: #ebe8fe;
			--background: #695ab0;
		}
		&.B {
			--color: #f3f5f9;
			--background: #364855;
		}
		&.C {
			--color: #fff1e1;
			--background: #e9850e;
		}
		&.D {
			--color: #cbebff;
			--background: #3691cb;
		}
		&.Z {
			--color: #ddf6f2;
			--background: #219080;
		}
		&.X {
			--color: #ffeff0;
			--background: #e54553;
		}
	}
	&.emg-gb {
		&::before {
			content: '';
			display: inline-block;
			width: 0.5em;
			height: 0.5em;
			border-radius: 50%;
			vertical-align: middle;
			margin: 0 0.3em 0.25em 0;
			background-color: var(--color);
		}
		&.A {
			--color: #e54553;
			--background: #ffdee0;
		}
		&.B {
			--color: #e9850e;
			--background: #ffe6ca;
		}
		&.C {
			--color: #117243;
			background: #c2ebd2;
		}
		&.D {
			--color: #2471a3;
			background: #c9e8fc;
		}
		&.E {
			--color: #466378;
			background: #cad7e1;
		}
	}
}

ion-toast {
	&.ion-color-primary {
		--ion-background-color-rgb: var(--ion-color-primary-rgb);
		--ion-color-contrast: var(--ion-color-primary-contrast);
	}
	&.ion-color-secondary {
		--ion-background-color-rgb: var(--ion-color-secondary-rgb);
		--ion-color-contrast: var(--ion-color-primary-contrast);
	}
	&.ion-color-tertiary {
		--ion-background-color-rgb: var(--ion-color-tertiary-rgb);
		--ion-color-contrast: var(--ion-color-tertiary-contrast);
	}
	&.ion-color-success {
		--ion-background-color-rgb: var(--ion-color-success-rgb);
		--ion-color-contrast: var(--ion-color-success-contrast);
	}
	&.ion-color-warning {
		--ion-background-color-rgb: var(--ion-color-warning-rgb);
		--ion-color-contrast: var(--ion-color-warning-contrast);
	}
	&.ion-color-danger {
		--ion-background-color-rgb: var(--ion-color-danger-rgb);
		--ion-color-contrast: var(--ion-color-danger-contrast);
	}
	&.ion-color-dark {
		--ion-background-color-rgb: var(--ion-color-dark-rgb);
		--ion-color-contrast: var(--ion-color-dark-contrast);
	}
	&.ion-color-medium {
		--ion-background-color-rgb: var(--ion-color-medium-rgb);
		--ion-color-contrast: var(--ion-color-medium-contrast);
	}
	&.ion-color-light {
		--ion-background-color-rgb: var(--ion-color-light-rgb);
		--ion-color-contrast: var(--ion-color-light-contrast);
	}
	&::part(header) {
		font-size: 1.1em;
		margin-bottom: 0.5em;
	}
	&::part(message) {
		--white-space: pre-wrap;
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	box-sizing: border-box;
	border: 1px solid #ffffff99;
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0px 1000px #ffffff33 inset;
	transition: background-color 5000s ease-in-out 0s;
}

ion-datetime {
	border: 3px solid var(--ion-color-light);
}
@media (prefers-color-scheme: darkunuse) {
	:root {
		--sgc-background-light-bg: #364855;
		--sgc-background-light-font: #f3f5f9;
		--sgc-background-dark-bg: #364855;
		--sgc-background-dark-font: #f1f3f6;
		--ion-background-color: #364855;
		--ion-color-primary-contrast: #364855 /*#2471A3 */;
		--ion-color-primary-contrast-rgb: 36, 57, 72;
		--ion-color-primary: #96afc1;
		--ion-color-primary-rgb: 255, 255, 255;
		--ion-color-primary-shade: #243948 /*#18567E  */;
		--ion-color-primary-tint: #466378 /*#3691CB */;
		--ion-text-color: var(--sgc-background-light-font);
		--ion-color-step-550: var(--sgc-background-light-font);
		--ion-color-step-600: var(--sgc-background-light-font);
		--ion-color-tertiary-contrast: #695ab0;
		--ion-color-tertiary-contrast-rgb: 100, 84, 174;
		--ion-color-tertiary: #ffffff;
		--ion-color-tertiary-rgb: 255, 255, 255;
		--ion-color-tertiary-shade: #513fa1;
		--ion-color-tertiary-tint: #9382e1;
	}
	ion-header ion-toolbar {
		--ion-toolbar-background: #273641;
	}
	ion-footer ion-toolbar {
		--ion-toolbar-background: var(--sgc-background-light-bg);
	}
	ion-content {
		--ion-background-color: var(--sgc-background-light-bg);
		ion-list.item-form {
			--ion-item-background: var(--ion-color-primary-tint);
			ion-item {
				--color: var(--sgc-background-light-font);
				&::part(native) {
					--background: #466378;
				}
			}
		}
		ion-card {
			background-color: rgba(0, 0, 0, 0.2) !important;
		}
		ion-item.selected {
			--background: #3f5667 !important;
		}
		div.table-wrap {
			background-color: var(--ion-background-color) !important;
			color: var(--ion-color-tertiary);
			ion-text.room-rev {
				color: var(--ion-color-primary-shade);
			}
		}
		ion-list.item-view {
			--ion-item-background: #4f697c;
			ion-item {
				--ion-item-background: rgba(0, 0, 0, 0.3);
				--color: var(--sgc-background-light-font);
				--ion-border-color: #3e5667;
				ion-note[slot='start'] {
					--color: #96adbd;
				}
			}
		}
		ion-list.item-list ion-item {
			--ion-item-background: var(--ion-color-primary-tint);
			--color: var(--sgc-background-light-font);
		}
	}
	ion-datetime {
		--ion-color-base: var(--sgc-background-light-font);
		--background: var(--sgc-background-light-bg);
		--ion-color: var(--sgc-background-light-font);
	}
}
