.cp-wrapper {
	position: relative;
	display: grid;
	grid-template-columns: max-content auto;
	align-items: start;
	gap: 1.5rem;
	
	@media (width < 992px) {
		grid-template-columns: auto;
	}
	
	#p_anchor {
		position: absolute;
		top: -2.75rem;
	}
}

.cppanel {
	container: cppanel / inline-size;
}

.ucp-overview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	width: min(50rem, 100%);
	
	.cp-card {
		background-color: var(--color-navigation-menu-background);
		border: 1px solid var(--color-navigation-menu-border);
		border-radius: 0.25rem;
	}
		
	@container cppanel (width < 40rem) {
		grid-template-columns: 1fr;
		
		.cp-card {
			
			.card-title {
				font-size: 0.875rem;
				padding: 0.5rem 1rem;

				i {
					font-size: 1rem;
				}
			}

			.card-links {
				padding: 0.5rem;
			}

			.cp-notebook {
				padding: 0.5rem;

				textarea {
					min-height: 8rem;
				}
			}
		}
	}
}

.cp-card {
	display: flex;
	flex-direction: column;

	.card-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 1.25rem;
		font-size: 1rem;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--color-navigation-menu-title);
		background-color: var(--color-navigation-menu-title-background);

		i {
			font-size: 1.5rem;
			font-weight: 300;
		}
	}

	.card-links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.5rem 1rem;
	}

	.cp-notebook {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		padding: 0.5rem 1rem;
	}
}

.cp-nav {
	position: sticky;
	top: 2.75rem;
	max-height: calc(100vh - 2.75rem);
	overflow: auto;
	display: flex;
	flex-direction: column;
	background-color: var(--color-navigation-menu-background);
	border: 1px solid var(--color-navigation-menu-border);
	border-radius: 0.25rem;
	box-sizing: border-box;
	
	.cp-card {

		.card-title {
			font-size: 0.75rem;
			padding: 0.5rem 0.75rem;

			i {
				font-size: 1rem;
			}
		}

		.card-links {
			padding: 0.25rem;
		}
	}
}

.ucp-profile-grid {
	display: grid;
	grid-template-columns: minmax(auto, 12rem) auto;
	gap: 1rem;
	
	.row {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		row-gap: 0.5rem;
		align-items: center;
		justify-items: start;
		text-align: left;
		
		&.disabled {
			display: none;
		}
		
		.label {
			grid-column: 1;
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}
	}
	
	.subtitle {
		grid-column: span 2;
		font-size: 1rem;
		letter-spacing: 0.15em;
	}
	
	input, select {
		min-width: min(12rem, 100%);
	}

	input[type="checkbox"],
	input[type="radio"] {
		min-width: unset;
	}
	
	.profilefield-code {
		display: contents;
	
		&:has(.radio-box) {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			align-items: end;
		}
		
		.radio-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 0.25rem;

			label {
				line-height: 1;
				cursor: pointer;
			}
		}
	}
	
	/* @media (width < 992px) */
	@container cppanel (width < 45rem) {
		
		.row {
			grid-template-columns: 1fr;
			grid-column: span 2;
		}
		
		.profilefield-code:has(.radio-box) {
			grid-template-columns: auto;
			justify-items: start;
			gap: 0.25rem;
			
			.radio-box {
				flex-direction: row-reverse;
			}
		}
	}
}

/* registration and options forms */
.panel.registration,
.panel.options {
	container: registration / inline-size;
	align-items: center;

	.registration-grid,
	.options-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		align-items: center;
		text-align: center;
		width: 40rem;
		max-width: 100%;

		.span-2 {
			grid-column: span 2;
		}
		
		input, select {
			min-width: min(12rem, 100%);
			
			&[type="checkbox"],
			&[type="radio"] {
				min-width: unset;
			}
		}
		
		.input-error-wrapper {
			display: flex;
			flex-direction: column;
			gap: 0.125rem;
		}
		
		@container registration (width < 36rem) {
			grid-template-columns: 1fr;
			
			.span-2 {
				grid-column: unset;
			}
		}
	}
}

/* private messages */
.pmspace {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	flex-wrap: wrap;
	
	.pmspace-bar {
		position: relative;
		width: min(25rem, 100%);
		height: 0.75rem;
		border-radius: 1rem;
		overflow: hidden;
		background-color: var(--color-primary);
		border: 1px solid var(--color-white);
		
		
		.pmspace-used {
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, green, orange, red);
			mask: linear-gradient(90deg, #000 calc(var(--used)), transparent 0);
			-webkit-mask: linear-gradient(90deg, #000 calc(var(--used)), transparent 0);
		}
		
		.pmspace-text-overhalf,
		.pmspace-text-belowhalf {
			--width: 3rem;
			--padding: 0.5rem;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 3rem;
			font-size: 0.75rem;
			font-weight: 500;
		}
		
		.pmspace-text-overhalf {
			left: calc(var(--used) - var(--width) - var(--padding));
			text-align: right;
			color: var(--color-white);
		}
		
		.pmspace-text-belowhalf {
			left: calc(var(--used) + var(--padding));
			color: var(--color-text);
		}
	}
}

.pm-list {
	width: 100%;
	display: grid;
	grid-template-columns: auto max-content max-content min-content;
	grid-template-areas: "subject user date select";
	column-gap: 1rem;
	
	.row {
		display: grid;
		grid-template-columns: subgrid;
		justify-items: center;
        align-items: center;
		grid-column: subject / select;
		padding: 0.75rem 0.5rem;
		
		&:not(.head):has(input[type="checkbox"]:checked) {
			background-color: var(--color-table-row-selected);
		}
		
		&.head {
			color: var(--color-table-header-text);
			background-color: var(--color-table-header-background);
			font-weight: 500;
			padding: 0.25rem 0.5rem;
			
			div {
				display: flex;
				align-items: center;
				gap: 0.5rem;
			}
			
			a {
				color: var(--color-table-header-text);
				display: flex;
                align-items: baseline;
                gap: 0.25rem;
			}
			
			i {
				font-size: 0.675rem;
			}
		}
		
		&.info {
			grid-template-columns: unset;
			text-align: center;
			font-style: italic;
		}
		
		.subject,
		.folder {
			grid-column: subject;
			justify-self: start;
			display: flex;
			align-items: center;
			gap: 0.75rem;
			
			.title {
				display: flex;
				flex-direction: column;
				gap: 0.125rem;
				
				[class*="new"] {
					font-weight: 600;
				}
			}
			
			i {
				color: var(--color-accent);
			}
		}
		
		.date {
			grid-column: date;
		}
		
		.user {
			grid-column: user;
		}
		
		.count {
			grid-column: date / user;
		}
		
		.select {
			grid-column: select;
			white-space: nowrap;
		}
	}
	
	@media (width < 577px) {
		grid-template-columns: auto max-content min-content;
		grid-template-areas: "subject date select";
	}
}

.multiple-recipients {
	position: relative;
	
	button {
		color: var(--color-text-link);
	}
	
	.popup-menu {
		position: absolute;
		top: 1.5rem;
	}
}

.pm_status {
	--fa-style-thin: 300;
	--fa-style-regular: 500;
	--fa-style-bold: 900;
	
    font-family: "Font Awesome 7 Pro";
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: var(--fa-style-thin, 500);
    line-height: 1.5;
    text-align: center;
    text-rendering: auto;
    width: var(--fa-width, 1.25em);
	-webkit-font-smoothing: antialiased;
	
	&.new_pm:before {
		content: "\f0e0";
		color: var(--color-accent);
		font-weight: var(--fa-style-regular);
	}
	
	&.old_pm:before {
		content: "\f658";
	}
	
	&.re_pm:before {
		content: "\e16f";
	}
	
	&.fw_pm:before {
		content: "\e170";
	}
}