;

.dashboard {
	--dashboard-padding: 1.25rem 1.5rem;
	--dashboard-nav-width: 310px;
	display: grid;


	/* INFO: GRID PLACEMENTS */
	grid-template-columns: 1fr;

	&>.dsidebar {
		grid-row: 1 / -1;
		grid-column: 1 / -1;
	}

	&>.dcontent {
		height: fit-content;
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}


	@media (min-width: 900px) {
		grid-template-columns: var(--dashboard-nav-width) 1fr;

		&>.dsidebar {
			grid-row: 1 / -1;
			grid-column: 1 / 2;
		}

		&>.dcontent {
			grid-row: span 1;
			grid-column: 2 / 3;
		}
	}
}

.dsidebar {
	--sidebar-padding: 0.65rem 0.75rem 0.75rem;

	display: grid;
	gap: 1.5rem;
	align-content: start;
	justify-self: strech;
	background: var(--clr-bg-grey);
	height: 100vh;
	max-width: var(--dashboard-nav-width);
	overflow-y: auto;
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	transition: 200ms ease-in-out;

	// TODO: next line for mobile-nav
	// transform: translateX(-100%);

	padding: var(--dashboard-padding);
	scrollbar-width: thin;

	&[data-open=true] {
		transform: translateX(0);
	}

	@media (min-width: 900px) {
		transform: translate(0);
		transition: none;
	}

	&-logo {
		width: 200px;
	}

	&-hospital {
		display: flex;
		flex-flow: row;
		align-items: start;
		gap: 0.5rem;
		background: transparent;
		border: 2px solid var(--clr-bg-secondary);
		padding: var(--sidebar-padding);
		border-radius: 0.75rem;
		color: var(--clr-bg);
	}

	&-hospital-content {
		display: grid;
		gap: 0px;
	}

	&-hospital-logo {}

	&-hospital-name {
		color: var(--clr-content-5);
		font-size: calc(var(--fs-sm) * 1.25);
		font-weight: 500;
		letter-spacing: -0.25px;
	}


	&-hospital-location {
		font-size: calc(var(--fs-sm) * 1.05);
	}


	&-linkgroup {
		margin-top: 1rem;
		display: grid;
		gap: 0.5rem;


		&+& {
			margin-top: 1.5rem;
		}

		&#dsidebar-linkgroup-settings {
			padding-block: 1.5rem 1rem;
			border-top: 2px solid var(--clr-bg-secondary);
		}
	}

	&-linkgroup-heading {
		//margin-block: 0.5rem 0.35rem;
		padding: 0.25rem 0.85rem 0.1rem;
	}

	&-link-list,
	&-link-li {
		display: contents;
	}

	&-linkgroup-heading {
		font-weight: 400;
		color: var(--clr-bg);
		line-height: 1.5;
		text-transform: uppercase;

	}

}


[data-slink="wrapper"] {
	--icon-size: 25px;
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: 0.35rem;
	background: transparent;
	padding: 0.65rem 0.85rem 0.7rem;
	border-radius: 0.75rem;
	font-size: calc(var(--fs-sm) * 1.25);
	font-weight: 500;

	[data-slink="text"] {
		line-height: 0.9;
		margin-top: 0rem;
	}

	[data-slink="icon"] {
		color: var(--clr-bg);
	}


	&[aria-current="page"] {
		background: var(--clr-primary-border);
		color: var(--clr-primary-pressed);

		[data-slink="icon"] {
			color: currentColor;
		}
	}

}





.dheader {

	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 0.25rem;
	padding: 1rem 1.5rem 1.25rem;
	border-bottom: 1px solid var(--clr-bg-secondary);


	&-profile,
	&-search,
	&-psummary {
		display: flex;
		flex-flow: row;
		align-items: center;
		gap: 0.25rem;
	}


	&-title {
		font-size: calc(1.5 * var(--fs-sm));
		font-weight: 500;
	}


	&-search {
		display: grid;
		isolation: isolate;
		align-items: center;
	}

	&-slabel,
	&-sinput {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	&-slabel {
		--icon-size: 1.75rem;
		color: var(--clr-bg);
		justify-self: start;
		z-index: var(--z-home);
		margin-left: 0.95rem;
	}

	&-sinput {
		padding: 0.85rem 1.25rem 0.9rem 3rem;
		background: var(--clr-bg-grey);
		border-radius: 2rem;
		border: 1px solid var(--clr-stroke);
		width: min(400px, 80vw);

	}

	&-profile {
		gap: 1rem;
		//margin-left: auto;
	}


	&-pbutton {
		--icon-size: 25px;
		background: none;
		border: 0.85px solid var(--clr-stroke);
		border-radius: 50%;
		aspect-ratio: 1;
		color: var(--clr-bg);
		padding: 0.5rem;
		display: flex;
		place-items: center;
		place-content: center;

		&:hover {
			color: var(--clr-primary-pressed);
		}
	}


	&-pimg {
		width: 60px;
		object-fit: cover;
		background: none;
		border: 0.85px solid var(--clr-stroke);
		border-radius: 50%;
		aspect-ratio: 1;
		padding: 0.5rem;
		display: flex;
		place-items: center;
		place-content: center;
	}


	&-pname {
		font-weight: 500;
		font-size: calc(1.35 * var(--fs-sm));
	}

	&-ptype {
		color: var(--clr-bg);
	}

	&-pdown-arrow {
		margin-top: 0.25rem;
		align-self: start;
		color: var(--clr-bg);
		transform: rotate(-90deg);
		transition: 100ms ease-out;
	}


	&-puser[open] &-pdown-arrow {
		transform: none;
	}

}


.dbody {
	padding: 1rem 1.5rem 1.25rem;
}




.padmin-over {
	--padding-inline: 1.25rem;
	display: grid;
	padding-block: 0.5rem 1.5rem;
	border-radius: 1rem;
	border: 2px solid var(--clr-bg-secondary);
	box-shadow: 0px 2px 4px -2px #0000000F,
		0px 2px 4px -2px #00000005;
	color: var(--clr-content-6);


	&>* {
		padding-inline: var(--padding-inline);
	}

	&-greeting {
		font-size: calc(2 * var(--fs-sm));
		font-weight: 600;
		color: var(--clr-content-2);
	}

	&-list {
		display: flex;
		flex-flow: row wrap;
		gap: 1rem;
		margin-top: 1rem;
	}


	&-field {
		display: flex;
		flex-flow: column;
		align-items: start;
		gap: 0.25rem;
	}

	&-number {
		order: -1;
		font-weight: 600;
		font-size: calc(2 * var(--fs-md));
		line-height: 0.95;
		color: var(--clr-content-2);
	}


	&-messages {
		display: grid;
		gap: 0.5rem;
		margin-top: 1rem;
		list-style: none;
		padding-inline: 0;
	}


	&-li {
		padding-inline: var(--padding-inline);
		display: flex;
		align-items: center;
		gap: 0.5rem;

		&:before {
			content: "";
			width: 12.5px;
			aspect-ratio: 1;
			background: var(--clr-indigo);
			border-radius: 50%;
		}

	}
}