/* =========================================================
   ACCOUNT INFORMATION PAGE
========================================================= */

.accountInfoPage,
.accountInfoPage *,
.accountInfoPage *::before,
.accountInfoPage *::after {
	box-sizing: border-box;
}

.accountInfoPage {
	width: 100%;
	min-height: calc(100vh - 95px);
	padding: 1.25rem;

	font-family:
		"Roboto",
		Arial,
		sans-serif;

	color: #3f443f;
	background: #f7f4eb;
}

/* Ensure controls inherit Roboto */
.accountInfoPage button,
.accountInfoPage input,
.accountInfoPage select,
.accountInfoPage textarea,
.accountInfoPage a {
	font-family: inherit;
}

/* Preserve the Font Awesome icon font */
.accountInfoPage .fa {
	font-family: FontAwesome !important;
	font-style: normal;
	font-weight: normal;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.accountInfoLayout {
	width: 100%;
	overflow: hidden;

	background: #ffffff;
	border: 1px solid #dfe3df;
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(44, 77, 52, 0.06);
}

/* =========================================================
   PAGE HEADER
========================================================= */

.accountInfoHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;

	padding: 1.5rem 1.75rem;

	color: #ffffff;
	background: #2c4d34;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.accountInfoHeaderText {
	display: flex;
	align-items: center;
	gap: 1rem;

	min-width: 0;
}

.accountInfoHeaderIcon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	font-size: 1.15rem;

	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
}

.accountInfoEyebrow {
	margin-bottom: 0.2rem;

	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;

	color: rgba(255, 255, 255, 0.72);
}

.accountInfoHeader h1 {
	margin: 0;

	font-size: clamp(1.45rem, 2.5vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;

	color: #ffffff;
}

.accountInfoHeader p {
	margin: 0.35rem 0 0;

	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;

	color: rgba(255, 255, 255, 0.78);
}

.accountInfoHeaderActions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}


/* =========================================================
   DETAILS SECTION
========================================================= */

.accountInfoDetails {
	padding: 1.65rem 1.75rem;
}

.accountInfoSectionHeading {
	display: flex;
	align-items: center;
	gap: 0.85rem;

	margin-bottom: 1.25rem;
}

.accountInfoSectionIcon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	font-size: 0.95rem;

	color: #7a2c37;
	background: #f8eef0;
	border: 1px solid #ead5d9;
	border-radius: 10px;
}

.accountInfoSectionHeading h2,
.accountInfoFooterText h2 {
	margin: 0;

	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;

	color: #2c4d34;
}

.accountInfoSectionHeading p,
.accountInfoFooterText p {
	margin: 0.2rem 0 0;

	font-size: 0.84rem;
	font-weight: 400;
	line-height: 1.45;

	color: #708090;
}


/* =========================================================
   DETAIL ROWS
========================================================= */

.accountInfoDetailList {
	border-top: 1px solid #e2e5e2;
}

.accountInfoDetailRow {
	display: grid;
	grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;

	min-height: 62px;
	padding: 0.85rem 0.35rem;

	border-bottom: 1px solid #e2e5e2;
}

.accountInfoDetailLabel {
	display: flex;
	align-items: center;
	gap: 0.65rem;

	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;

	color: #59645c;
}

.accountInfoDetailLabel i {
	width: 18px;

	font-size: 0.85rem;
	text-align: center;

	color: #7a2c37;
}

.accountInfoDetailValue {
	min-width: 0;

	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;

	color: #3f443f;
}

.accountInfoEmailLink {
	color: #2c4d34;
	text-decoration: none;
}

.accountInfoEmailLink:hover {
	color: #7a2c37;
	text-decoration: underline;
}

.accountInfoRoleBadge {
	display: inline-flex;
	align-items: center;

	padding: 0.35rem 0.65rem;

	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.2;

	color: #2c4d34;
	background: #edf4ef;
	border: 1px solid #ccdacf;
	border-radius: 999px;
}


/* =========================================================
   FOOTER ACTION AREA
========================================================= */

.accountInfoFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;

	padding: 1.2rem 1.75rem;

	background: #f9faf9;
	border-top: 1px solid #dfe3df;
}

.accountInfoFooterActions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.7rem;
}


/* =========================================================
   BUTTONS
========================================================= */

.accountInfoPage .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;

	min-height: 40px;
	padding: 0.55rem 0.85rem;

	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;

	border-radius: 9px;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.accountInfoPage .btn:hover {
	transform: translateY(-1px);
}

.accountInfoPage .btn:active {
	transform: translateY(0);
}

.accountInfoPrimaryButton {
	color: #ffffff;
	background: #7a2c37;
	border: 1px solid #7a2c37;
	box-shadow: 0 3px 8px rgba(122, 44, 55, 0.14);
}

.accountInfoPrimaryButton:hover,
.accountInfoPrimaryButton:focus {
	color: #ffffff;
	background: #68242e;
	border-color: #68242e;
}

.accountInfoSecondaryButton {
	color: #2c4d34;
	background: #ffffff;
	border: 1px solid #bfc9c1;
}

.accountInfoSecondaryButton:hover,
.accountInfoSecondaryButton:focus {
	color: #2c4d34;
	background: #edf4ef;
	border-color: #9faf9f;
}

.accountInfoDeleteButton {
	color: #ffffff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.accountInfoDeleteButton:hover,
.accountInfoDeleteButton:focus {
	color: #ffffff;
	background: #7a2c37;
	border-color: #7a2c37;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

	.accountInfoPage {
		padding: 0.75rem;
	}

	.accountInfoHeader {
		align-items: flex-start;
		flex-direction: column;

		padding: 1.25rem;
	}

	.accountInfoHeaderActions,
	.accountInfoDeleteButton {
		width: 100%;
	}

	.accountInfoDetails {
		padding: 1.25rem;
	}

	.accountInfoDetailRow {
		grid-template-columns: 1fr;
		gap: 0.35rem;

		padding: 0.9rem 0;
	}

	.accountInfoFooter {
		align-items: flex-start;
		flex-direction: column;

		padding: 1.15rem 1.25rem;
	}

	.accountInfoFooterActions {
		width: 100%;
		justify-content: stretch;
	}

	.accountInfoFooterActions .btn {
		flex: 1 1 100%;
		width: 100%;
	}

}

@media (max-width: 480px) {

	.accountInfoHeaderText {
		align-items: flex-start;
	}

	.accountInfoHeaderIcon {
		width: 42px;
		height: 42px;
	}

	.accountInfoHeader h1 {
		font-size: 1.35rem;
	}

}

/* =========================================================
   USERS PAGE
========================================================= */

.usersPage,
.usersPage *,
.usersPage *::before,
.usersPage *::after {
	box-sizing: border-box;
}

.usersPage {
	width: 100%;
	min-height: calc(100vh - 95px);
	padding: 1.25rem;

	font-family:
		"Roboto",
		Arial,
		sans-serif;

	color: #3f443f;
	background: #f7f4eb;
}

.usersPage button,
.usersPage input,
.usersPage select,
.usersPage textarea,
.usersPage a {
	font-family: inherit;
}

/* Preserve Font Awesome */
.usersPage .fa {
	font-family: FontAwesome !important;
	font-style: normal;
	font-weight: normal;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.usersLayout {
	width: 100%;
	overflow: hidden;

	background: #ffffff;
	border: 1px solid #dfe3df;
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(44, 77, 52, 0.06);
}


/* =========================================================
   PAGE HEADER
========================================================= */

.usersHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;

	padding: 1.5rem 1.75rem;

	color: #ffffff;
	background: #2c4d34;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.usersHeaderText {
	display: flex;
	align-items: center;
	gap: 1rem;

	min-width: 0;
}

.usersHeaderIcon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	font-size: 1.15rem;

	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
}

.usersEyebrow {
	margin-bottom: 0.2rem;

	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;

	color: rgba(255, 255, 255, 0.72);
}

.usersHeader h1 {
	margin: 0;

	font-size: clamp(1.45rem, 2.5vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;

	color: #ffffff;
}

.usersHeader p {
	margin: 0.35rem 0 0;

	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;

	color: rgba(255, 255, 255, 0.78);
}

.usersHeaderActions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}


/* =========================================================
   DIRECTORY SECTION
========================================================= */

.usersDirectory {
	padding: 1.65rem 1.75rem;
}

.usersSectionHeading {
	display: flex;
	align-items: center;
	gap: 0.85rem;

	margin-bottom: 1.25rem;
}

.usersSectionIcon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	font-size: 0.95rem;

	color: #7a2c37;
	background: #f8eef0;
	border: 1px solid #ead5d9;
	border-radius: 10px;
}

.usersSectionHeading h2,
.usersFooterText h2 {
	margin: 0;

	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;

	color: #2c4d34;
}

.usersSectionHeading p,
.usersFooterText p {
	margin: 0.2rem 0 0;

	font-size: 0.84rem;
	font-weight: 400;
	line-height: 1.45;

	color: #708090;
}


/* =========================================================
   TABLE GRID
========================================================= */

.usersTableHeader,
.usersRow {
	display: grid;
	grid-template-columns:
		minmax(105px, 0.8fr)
		minmax(105px, 0.8fr)
		minmax(190px, 1.6fr)
		minmax(125px, 1fr)
		minmax(135px, 1fr)
		minmax(105px, auto);
	align-items: center;
	column-gap: 1rem;
}

.usersTableHeader {
	min-height: 45px;
	padding: 0 0.75rem;

	background: #f3f6f3;
	border-top: 1px solid #dfe4df;
	border-bottom: 1px solid #d7ded8;
}

.usersSortableColumn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;

	width: 100%;
	height: 44px;
	padding: 0;

	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;

	color: #59645c;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.usersSortableColumn:hover,
.usersSortableColumn:focus {
	color: #7a2c37;
	background: transparent;
	outline: none;
}

.usersSortableColumn .fa {
	font-size: 0.68rem;
	opacity: 0.52;
}

.usersSortableColumn:hover .fa,
.usersSortableColumn:focus .fa {
	opacity: 1;
}

.usersHeaderActionColumn {
	min-height: 1px;
}


/* =========================================================
   USER ROWS
========================================================= */

.usersList {
	border-bottom: 1px solid #e2e5e2;
}

.usersRow {
	position: relative;

	min-height: 68px;
	padding: 0.75rem;

	background: #ffffff;
	border-bottom: 1px solid #e2e5e2;

	transition:
		background-color 160ms ease,
		box-shadow 160ms ease;
}

.usersRow:last-child {
	border-bottom: 0;
}

.usersRow:hover {
	z-index: 1;

	background: #fbfcfb;
	box-shadow: inset 3px 0 0 #7a2c37;
}

.usersCell {
	min-width: 0;
}

.usersCellValue {
	min-width: 0;

	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;

	color: #3f443f;
}

.usersNameValue {
	font-weight: 600;
	color: #2c4d34;
}

.usersMobileLabel {
	display: none;
}

.usersEmailLink {
	color: #2c4d34;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.usersEmailLink:hover,
.usersEmailLink:focus {
	color: #7a2c37;
	text-decoration: underline;
}

.usersActionCell {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.usersEmptyState {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 310px;
	padding: 2.5rem 1.5rem;

	text-align: center;

	border-top: 1px solid #e2e5e2;
}

.usersEmptyIcon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 58px;
	height: 58px;
	margin-bottom: 1rem;

	font-size: 1.25rem;

	color: #7a2c37;
	background: #f8eef0;
	border: 1px solid #ead5d9;
	border-radius: 15px;
}

.usersEmptyState h2 {
	margin: 0;

	font-size: 1.1rem;
	font-weight: 700;

	color: #2c4d34;
}

.usersEmptyState p {
	max-width: 430px;
	margin: 0.4rem 0 1.2rem;

	font-size: 0.87rem;
	line-height: 1.5;

	color: #708090;
}


/* =========================================================
   FOOTER
========================================================= */

.usersFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;

	padding: 1.2rem 1.75rem;

	background: #f9faf9;
	border-top: 1px solid #dfe3df;
}

.usersFooterActions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.7rem;
}


/* =========================================================
   BUTTONS
========================================================= */

.usersPage .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;

	min-height: 40px;
	padding: 0.55rem 0.85rem;

	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;

	border-radius: 9px;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.usersPage .btn:hover {
	transform: translateY(-1px);
}

.usersPage .btn:active {
	transform: translateY(0);
}

.usersNewButton {
	color: #2c4d34;
	background: #ffffff;
	border: 1px solid #ffffff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.usersNewButton:hover,
.usersNewButton:focus {
	color: #2c4d34;
	background: #edf4ef;
	border-color: #edf4ef;
}

.usersDetailsButton,
.usersEmptyButton {
	color: #ffffff;
	background: #7a2c37;
	border: 1px solid #7a2c37;
	box-shadow: 0 3px 8px rgba(122, 44, 55, 0.13);
}

.usersDetailsButton:hover,
.usersDetailsButton:focus,
.usersEmptyButton:hover,
.usersEmptyButton:focus {
	color: #ffffff;
	background: #68242e;
	border-color: #68242e;
}

.usersDetailsButton {
	min-height: 36px !important;
	padding: 0.45rem 0.7rem !important;

	font-size: 0.76rem !important;
}

.usersFooterButton {
	color: #2c4d34;
	background: #ffffff;
	border: 1px solid #bfc9c1;
}

.usersFooterButton:hover,
.usersFooterButton:focus {
	color: #2c4d34;
	background: #edf4ef;
	border-color: #9faf9f;
}


/* =========================================================
   MEDIUM SCREENS
========================================================= */

@media (max-width: 1099.98px) {

	.usersTableHeader,
	.usersRow {
		grid-template-columns:
			minmax(95px, 0.8fr)
			minmax(95px, 0.8fr)
			minmax(175px, 1.5fr)
			minmax(115px, 1fr)
			minmax(120px, 1fr)
			minmax(95px, auto);
		column-gap: 0.75rem;
	}

	.usersDirectory {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}

}


/* =========================================================
   MOBILE CARD-STYLE ROWS
========================================================= */

@media (max-width: 899.98px) {

	.usersTableHeader {
		display: none;
	}

	.usersList {
		display: grid;
		gap: 0;

		border-top: 1px solid #e2e5e2;
		border-bottom: 0;
	}

	.usersRow {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		column-gap: 1.5rem;

		min-height: 0;
		padding: 0.45rem 0;

		border-bottom: 1px solid #dfe3df;
		box-shadow: none;
	}

	.usersRow:hover {
		background: #ffffff;
		box-shadow: none;
	}

	.usersCell {
		display: grid;
		grid-template-columns: minmax(110px, 42%) minmax(0, 1fr);
		align-items: center;
		gap: 0.75rem;

		min-height: 52px;
		padding: 0.6rem 0.35rem;

		border-bottom: 1px solid #edf0ed;
	}

	.usersCell:nth-child(5) {
		border-bottom: 0;
	}

	.usersMobileLabel {
		display: flex;
		align-items: center;
		gap: 0.5rem;

		font-size: 0.74rem;
		font-weight: 700;
		line-height: 1.3;

		color: #59645c;
	}

	.usersMobileLabel .fa {
		width: 15px;

		font-size: 0.76rem;
		text-align: center;

		color: #7a2c37;
	}

	.usersActionCell {
		align-items: center;
		justify-content: flex-end;

		padding: 0.65rem 0.35rem;
	}

}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 767.98px) {

	.usersPage {
		padding: 0.75rem;
	}

	.usersHeader {
		align-items: flex-start;
		flex-direction: column;

		padding: 1.25rem;
	}

	.usersHeaderActions,
	.usersNewButton {
		width: 100%;
	}

	.usersDirectory {
		padding: 1.25rem;
	}

	.usersSectionHeading {
		align-items: flex-start;
	}

	.usersRow {
		grid-template-columns: 1fr;
		padding: 0.45rem 0;
	}

	.usersCell {
		grid-template-columns: minmax(125px, 38%) minmax(0, 1fr);
	}

	.usersCell:nth-child(5) {
		border-bottom: 1px solid #edf0ed;
	}

	.usersActionCell {
		justify-content: stretch;

		padding: 0.8rem 0 1rem;
	}

	.usersDetailsButton {
		width: 100%;
	}

	.usersFooter {
		align-items: flex-start;
		flex-direction: column;

		padding: 1.15rem 1.25rem;
	}

	.usersFooterActions,
	.usersFooterActions .btn {
		width: 100%;
	}

}


/* =========================================================
   EXTRA SMALL SCREENS
========================================================= */

@media (max-width: 480px) {

	.usersHeaderText {
		align-items: flex-start;
	}

	.usersHeaderIcon {
		width: 42px;
		height: 42px;
	}

	.usersHeader h1 {
		font-size: 1.35rem;
	}

	.usersDirectory {
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.usersCell {
		grid-template-columns: 1fr;
		gap: 0.3rem;

		padding: 0.7rem 0;
	}

	.usersMobileLabel {
		font-size: 0.71rem;
	}

	.usersCellValue {
		padding-left: 1.45rem;
	}

}
.usersRoleList {
	font-size: 0.84rem;
	font-weight: 500;
	line-height: 1.5;
	white-space: normal;
	overflow-wrap: anywhere;

	color: #3f443f;
}
/* =========================================================
   COMPANY DETAILS
========================================================= */

.companyDetailsPage,
.companyDetailsPage *,
.companyDetailsPage *::before,
.companyDetailsPage *::after {
	box-sizing: border-box;
}


.companyDetailsPage {
	width: 100%;
	min-height: calc(100vh - 95px);
	padding: 1.25rem;

	color: #3f443f;
	background: #f7f4eb;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.companyDetailsTopRow {
	margin-right: 0;
	margin-left: 0;
	padding: 0 0 1.35rem;

	border-bottom: 1px solid #dfe3df;
}


.companyDetailsTopRow h2 {
	margin: 0;

	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.2;

	color: #2c4d34;
}


.companyDetailsTopRow p {
	margin-top: 0.3rem;

	font-size: 0.88rem;

	color: #708090;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.companyDetailsActions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
}


.companyDetailsPage .companyDetailsActions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;

	min-height: 38px;
	padding: 0.48rem 0.8rem;

	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;

	border-radius: 7px;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.companyDetailsPage h3 {
	margin: 0;

	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;

	color: #2c4d34;
}


.companyUsersSection > .row p {
	margin-top: 0.2rem;

	font-size: 0.84rem;

	color: #708090;
}


/* =========================================================
   ACCOUNT INFORMATION
========================================================= */

.companyInfoHeader {
	min-height: 44px;
	margin-right: 0;
	margin-left: 0;
	padding: 0 0.85rem;

	align-items: center;

	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	text-transform: uppercase;

	color: #59645c;
	background: #f3f6f3;
	border-top: 1px solid #dfe4df;
	border-bottom: 1px solid #d7ded8;
}


.companyDetailsPage .list {
	margin: 0;
	padding: 0;

	background: transparent;
}


.companyDetailsPage .companyInfoRow {
	min-height: 70px;
	margin-right: 0;
	margin-left: 0;
	padding: 0.85rem;

	background: #ffffff;
	border-bottom: 1px solid #e2e5e2;
}


.companyDetailsPage .companyInfoRow:hover {
	background: #fbfcfb;
}


.companyInfoValue {
	display: flex;
	align-items: center;

	min-height: 40px;

	font-size: 0.88rem;
	font-weight: 500;
	line-height: 1.45;

	color: #3f443f;
}


.companyInfoValue > div {
	width: 100%;
}


/* =========================================================
   USERS SECTION
========================================================= */

.companyUsersSection {
	display: flex;
	flex-direction: column;

	min-height: 0;
}


.companyUserCount {
	padding-bottom: 0.15rem;

	font-size: 0.8rem;

	color: #708090;
}


/* =========================================================
   USER TABLE HEADER
========================================================= */

.companyUsersHeader {
	position: sticky;
	top: 0;
	z-index: 3;

	min-height: 44px;
	margin-right: 0;
	margin-left: 0;
	padding: 0 0.85rem;

	align-items: center;

	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	text-transform: uppercase;

	color: #59645c;
	background: #f3f6f3;
	border-top: 1px solid #dfe4df;
	border-bottom: 1px solid #d7ded8;
}


/* =========================================================
   SCROLLABLE USER LIST
========================================================= */

.companyUsersList {
	width: 100%;

	max-height: calc(100vh - 475px);
	min-height: 120px;

	overflow-x: hidden;
	overflow-y: auto;

	background: #ffffff;
	border-bottom: 1px solid #e2e5e2;

	scrollbar-width: thin;
}


.companyDetailsPage .companyUserRow {
	position: relative;

	min-height: 62px;
	margin-right: 0;
	margin-left: 0;
	padding: 0.8rem 0.85rem;

	background: #ffffff;
	border-bottom: 1px solid #e2e5e2;

	transition:
		background-color 160ms ease,
		box-shadow 160ms ease;
}


.companyDetailsPage .companyUserRow:last-child {
	border-bottom: 0;
}


.companyDetailsPage .companyUserRow:hover {
	z-index: 1;

	background: #fbfcfb;
	box-shadow: inset 3px 0 0 #7a2c37;
}


.companyUserRow > div {
	min-width: 0;

	font-size: 0.86rem;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;

	color: #3f443f;
}


.companyUserName {
	font-weight: 600;

	color: #2c4d34;
}


/* =========================================================
   MOBILE LABELS
========================================================= */

.companyMobileLabel {
	display: none;
}


/* =========================================================
   MEDIUM SCREENS
========================================================= */

@media (max-width: 1199.98px) {

	.companyDetailsActions {
		justify-content: flex-start;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

	.companyDetailsPage {
		padding: 0.75rem;
	}


	.companyInfoHeader,
	.companyUsersHeader {
		display: none;
	}


	.companyDetailsTopRow {
		padding-bottom: 1rem;
	}


	.companyDetailsActions {
		justify-content: flex-start;
	}


	.companyDetailsPage .companyDetailsActions .btn {
		flex: 1 1 auto;
	}


	.companyDetailsPage .companyInfoRow,
	.companyDetailsPage .companyUserRow {
		padding: 0.55rem 0;
	}


	.companyInfoValue,
	.companyUserRow > div {
		display: grid;
		grid-template-columns:
			minmax(110px, 38%)
			minmax(0, 1fr);

		align-items: center;
		gap: 0.75rem;

		min-height: 50px;
		padding: 0.6rem 0.35rem;

		border-bottom: 1px solid #edf0ed;
	}


	.companyInfoValue:last-child,
	.companyUserRow > div:last-child {
		border-bottom: 0;
	}


	.companyMobileLabel {
		display: block;

		font-size: 0.74rem;
		font-weight: 700;

		color: #59645c;
	}


	.companyUsersList {
		max-height: calc(100vh - 410px);
	}

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 480px) {

	.companyInfoValue,
	.companyUserRow > div {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}


	.companyDetailsPage .companyDetailsActions .btn {
		width: 100%;
		flex: 1 1 100%;
	}

}

/* =========================================================
   COMPANY DETAILS - POLISH
========================================================= */

.companyDetailsPage {
	padding-top: 1.4rem;
}


/* =========================================================
   TOP HEADER
========================================================= */

.companyDetailsTopRow {
	padding: 1.1rem 1.25rem 1.25rem;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.72),
			rgba(255, 255, 255, 0.38)
		);

	border: 1px solid #dfe3df;
	border-radius: 12px;

	box-shadow:
		0 4px 14px rgba(44, 77, 52, 0.05);
}


.companyDetailsTopRow h2 {
	position: relative;

	padding-left: 0.9rem;

	font-size: 1.7rem;
}


.companyDetailsTopRow h2::before {
	content: "";

	position: absolute;
	top: 0.12rem;
	bottom: 0.12rem;
	left: 0;

	width: 4px;

	background: #7a2c37;
	border-radius: 999px;
}


/* =========================================================
   ACTION BUTTON POLISH
========================================================= */

.companyDetailsPage .companyDetailsActions .btn {
	box-shadow:
		0 2px 5px rgba(44, 77, 52, 0.08);

	transition:
		transform 150ms ease,
		box-shadow 150ms ease,
		background-color 150ms ease,
		border-color 150ms ease;
}


.companyDetailsPage .companyDetailsActions .btn:hover {
	transform: translateY(-1px);

	box-shadow:
		0 4px 10px rgba(44, 77, 52, 0.12);
}


/* =========================================================
   SECTION SPACING
========================================================= */

.companyDetailsPage .mb-5 {
	margin-bottom: 2.3rem !important;
}


/* =========================================================
   SECTION TITLES
========================================================= */

.companyDetailsPage h3 {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;

	margin-bottom: 0.7rem;

	font-size: 1.16rem;
}

.companySectionIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	font-size: 0.82rem;

	color: #7a2c37;
	background: rgba(122, 44, 55, 0.08);

	border: 1px solid rgba(122, 44, 55, 0.16);
	border-radius: 8px;
}



/* =========================================================
   ACCOUNT INFO CARD
========================================================= */

.companyInfoHeader {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}


.companyDetailsPage .companyInfoRow {
	border-right: 1px solid #e2e5e2;
	border-left: 1px solid #e2e5e2;

	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;

	box-shadow:
		0 3px 10px rgba(44, 77, 52, 0.04);
}


/* subtle column separation */

.companyInfoRow > div:not(:last-child) {
	border-right: 1px solid #edf0ed;
}


/* =========================================================
   USERS PANEL
========================================================= */

.companyUsersSection {
	padding: 1rem 1.1rem 1.15rem;

	background: rgba(255, 255, 255, 0.35);

	border: 1px solid #e2e5e2;
	border-radius: 12px;

	box-shadow:
		0 4px 14px rgba(44, 77, 52, 0.045);
}


.companyUsersHeader {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}


.companyUsersList {
	border-right: 1px solid #e2e5e2;
	border-left: 1px solid #e2e5e2;

	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}


/* =========================================================
   USER ROWS
========================================================= */

.companyDetailsPage .companyUserRow {
	transition:
		background-color 150ms ease,
		box-shadow 150ms ease,
		transform 150ms ease;
}


.companyDetailsPage .companyUserRow:hover {
	transform: translateX(2px);

	background: #fbfcfb;

	box-shadow:
		inset 4px 0 0 #7a2c37;
}


.companyUserName {
	color: #2c4d34;
}


/* =========================================================
   USER COUNT BADGE
========================================================= */

.companyUserCount {
	display: inline-flex;
	align-items: center;

	padding: 0.3rem 0.65rem;

	font-size: 0.74rem;
	font-weight: 700;

	color: #2c4d34;
	background: #edf4ef;
	border: 1px solid #ccdacf;
	border-radius: 999px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

	.companyDetailsTopRow {
		padding: 1rem;
	}


	.companyUsersSection {
		padding: 0.85rem;
	}


	.companyInfoRow > div:not(:last-child) {
		border-right: 0;
	}

}
.companyUserRowClickable {
	cursor: pointer;
}