/*
	@description CSS to be imported in all LWR sites
				 Defines several css variables used in LWCs
				 Also contains styling to override standard lightning components, gets around the shadow DOM
	Change history:
		03/21/2025  P230085-1690    Charles Dillery
		04/10/2025	P230085-1690	Mark Winfield
		06/24/2025	P230085-1921	Charles Dillery
*/
:root {

	--color-primary: var(--dxp-g-brand); /*Primary brand*/
	--color-secondary: var(--dxp-g-brand-contrast);

	--background-color: var(--dxp-g-root);

	/*Text colors*/
	--text-color: var(--dxp-s-body-text-color);
	--small-text-color: var(--dxp-s-body-small-text-color);
	--h1-color: var(--dxp-s-text-heading-extra-large-color);
	--h2-color: var(--dxp-s-text-heading-large-color);
	--h3-color: var(--dxp-s-text-heading-medium-color);
	--h4-color: var(--dxp-s-text-heading-small-color);
	--h5-color: var(--dxp-s-text-heading-extra-small-color);
	--h6-color: var(--dxp-s-text-heading-extra-extra-small-color);
	--link-color: var(--dxp-s-link-text-color);
	--link-color-hover: var(--dxp-s-link-text-color-hover);

	/*Font settings*/
	--base-font-family: var(--dxp-s-html-font-family);
	--button-font-family: var(--dxp-s-button-font-family);
	--desktop-font-size: var(--dxp-s-html-font-size);
	--mobile-font-size: var(--dxp-s-html-font-size-mobile);
	--input-font-fize: var(--dxp-s-form-element-level-font-size);
	--h1-font-family: var(--dxp-s-text-heading-extra-large-font-family);
	--h2-font-family: var(--dxp-s-text-heading-large-font-family);
	--h3-font-family: var(--dxp-s-text-heading-medium-font-family);
	--h4-font-family: var(--dxp-s-text-heading-small-font-family);
	--h5-font-family: var(--dxp-s-text-heading-extra-small-font-family);
	--h6-font-family: var(--dxp-s-text-heading-extra-extra-small-font-family);
	--h1-font-size: var(--dxp-s-text-heading-extra-large-font-size);
	--h2-font-size: var(--dxp-s-text-heading-large-font-size);
	--h3-font-size: var(--dxp-s-text-heading-medium-font-size);
	--h4-font-size: var(--dxp-s-text-heading-small-font-size);
	--h5-font-size: var(--dxp-s-text-heading-extra-small-font-size);
	--h6-font-size: var(--dxp-s-text-heading-extra-extra-small-font-size);
	--h1-font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
	--h2-font-weight: var(--dxp-s-text-heading-large-font-weight);
	--h3-font-weight: var(--dxp-s-text-heading-medium-font-weight);
	--h4-font-weight: var(--dxp-s-text-heading-small-font-weight);
	--h5-font-weight: var(--dxp-s-text-heading-extra-small-font-weight);
	--h6-font-weight: var(--dxp-s-text-heading-extra-extra-small-font-weight);
	
	/*Button styling*/
	--button-font-family: var(--dxp-s-button-font-family);
	--button-font-weight: var(--dxp-s-button-font-weight);
	--button-text-case: var(--dxp-s-button-text-transform);
	--button-line-height: var(--dxp-s-button-line-height);
	
	/* --color-primary: token(actionColor);
	--color-secondary: token(overlayTextColor); #C67A4F */
	--color-light-black: #505050;
	--color-grey: #797979;
	--color-light-grey: #DCDDDE;
	--color-extra-light-grey: #F2F2F2;
	--color-background-grey: #EBEBEC;
	--color-white: #FFFFFF;
	--color-error: #C23934;
	--color-primary-nav: #000000;

	--button-border-width: 1.5px;
	--button-border-radius: var(--dxp-s-button-radius-border);
	

	--lwc-zIndexSpinner: 1;

	--slds-c-tabs-item-text-color-active: var(--color-primary);
	--slds-c-tabs-item-color-border-active: var(--color-secondary);
	--slds-c-tabs-item-color-border-hover: var(--color-secondary);
	--dxp-s-dropdown-color-background: var(--color-white);
	--dxp-g-info-contrast: var(--text-color);
	--slds-c-tooltip-color-background: white;

	@media screen and (min-width: 960px) {
		.datatable-filter__search--main {
			margin-bottom: 0;
		}
	
		.datatable-filter .datatable-filter__dropdown-btn lightning-icon {
			padding-right: 15px;
			border-right: 1px solid var(--color-light-grey);
		}
	
		.datatable-filter .datatable-filter__dropdown-btn lightning-icon:last-child {
			border-right: none;
		}
	
		.datatable-filter .datatable-filter__date-btn-wrap lightning-button {
			height: 40px;
		}
	
		.datatable-filter .datatable-filter__date-btn-wrap lightning-button button {
			height: 100%;
		}
	
		.datatable-filter lightning-combobox .slds-form-element__label {
			display: none;
		}
	
		.datatable-filter lightning-combobox .slds-input__icon-group.slds-input__icon-group_right {
			margin-right: 4px;
		}
	
		.datatable-filter lightning-combobox .slds-input_faux:after {
			content: '';
			border-right: 1px solid var(--color-light-grey);
			position: absolute;
			right: 0;
			height: 50%;
			top: 25%;
		}
	
		.datatable-filter lightning-combobox .slds-combobox__input.slds-input_faux {
			padding-right: 15px !important;
			border: none !important;
		}
	
		.datatable-filter lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate {
			font-size: 15px;
			font-weight: 700;
			padding-right: 20px;
		}
	
		.datatable-filter [data-combobox-id="Program"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Program: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Action"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Action: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="State"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'State: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="User ID"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'User ID: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="User Id"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'User Id: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Budget Owner"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Budget Owner: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Status"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Status: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Status"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate {
			text-transform: capitalize;
		}
	
		.datatable-filter [data-combobox-id="Fiscal Year"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Fiscal Year: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Buy Book"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Buy Book: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Type"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Type: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter [data-combobox-id="Ordering Window"] lightning-combobox .slds-combobox__input.slds-input_faux .slds-truncate:before {
			content: 'Ordering Window: ' !important;
			margin-right: 5px;
			font-weight: 400;
		}
	
		.datatable-filter .datatable-filter__filter--ship-to .datatable-filter__dropdown-btn {
			padding-right: 0px;
		}
	
		.datatable-filter .datatable-filter__filter--ship-to .datatable-filter__dropdown-btn lightning-icon {
			padding-right: 8px;
			border-right: 1px solid  var(--color-light-grey);
		}

		c-ims-program-detail c-rckt-data-table  .filter-nav {
			padding: 0;
		}

		.shipping-addresses .slds-form-element__control input {
			font-size: 14px;
			line-height: 1;
		}
	}

	@media (min-width: 1440px) {
		.THIS .checkout {
			padding: 0;
		}
	}

	@media (min-width: 768px) {
		.rckt.cart .cart__header-combobox {
			justify-content: flex-end;
		}
	}

	.datatable-filter__search--main {
		margin-bottom: 30px;
	}
	
	.datatable-filter .datatable-filter__dropdown-btn lightning-icon {
		float: right;
	}
	
	.datatable-filter .datatable-filter__dropdown-btn lightning-primitive-icon svg {
		fill: var(--color-secondary);
		height: 14px;
		width: 14px;
	}
	
	.datatable-filter .datatable-filter__search--main .slds-form-element__label {
		display: none;
	}
	
	.datatable-filter .datatable-filter__search--main lightning-input,
	.datatable-filter .datatable-filter__address-search lightning-input {
		width: 100%;
	}
	
	.datatable-filter .datatable-filter__search--main .slds-form-element__control input,
	.datatable-filter .datatable-filter__address-search .slds-form-element__control input {
		height: 32px;
		border: 1px solid var(--color-light-grey);
		width: 100%;
		padding: 10px 10px 10px 30px;
	}
	
	.datatable-filter .datatable-filter__address-listing .slds-form-element__control input {
		margin-bottom: 12px;
	}
	
	.datatable-filter lightning-combobox .slds-combobox__input {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	
	.datatable-filter lightning-combobox .slds-form-element__label {
		font-weight: 400;
		font-size: 14px;
		line-height: 23px;
	}
	
	.datatable-filter lightning-combobox .slds-form-element__label:after {
		content: ':';
	}
	
	.datatable-filter lightning-radio-group {
		padding-bottom: 12px;
	}
	
	.datatable-filter lightning-radio-group .slds-form-element__legend.slds-form-element__label {
		margin-top: 12px;
	}
	
	.datatable-filter lightning-radio-group .slds-radio {
		margin-top: 12px !important;
	}
	
	.datatable-filter lightning-radio-group .slds-form-element__label {
		font-weight: 400;
	}
	
	.datatable-filter lighting-radio-group .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio_faux:after {
		background-color: var(--color-secondary) !important;
	}
	
	.datatable-filter .datatable-filter__apply-button.slds-button_stretch button {
		background: var(--color-primary);
		color: var(--color-white);
	}

	.ims-dropdown__combobox .slds-combobox__input {
		height: 45px;
	}
	
	.ims-dropdown__combobox .slds-combobox__input span {
		align-self: center;
	}
	
	.ims-dropdown__combobox .slds-icon-utility-down {
		display: none;
	}
	
	.ims-dropdown__combobox .slds-input__icon-group_right {
		border: solid var(--color-secondary);
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 3px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		height: inherit;
		right: 15px;
		top: 55%;
		cursor: pointer;
	}

	.slds-modal__content .slds-form-element__legend{
		margin-bottom: 0px;
	}

	.slds-modal .slds-modal__close lightning-primitive-icon{
		background-color: white;
		padding: 3px;
	}

	c-ims-programs-dashboard c-rckt-data-table .filter-nav__label, 
	c-ims-programs-dashboard c-rckt-data-table .filter, 
	c-ims-programs-dashboard c-rckt-data-table .filter-nav__clear, 
	c-ims-programs-dashboard c-rckt-data-table .filter.filter__show-per-page {
		display: none;
	}

	c-ims-programs-dashboard c-rckt-data-table .datatable.datatable--border lightning-formatted-rich-text {
		font-size: 12px;
		justify-content: space-between;
	}

	.ship-to-filter .slds-input-has-icon .slds-input__icon:not(button){
		visibility: hidden;
	}

	.datatable-filter lightning-combobox button.slds-combobox__input {
		box-shadow: none;
	}

	p {
		font-size: var(--desktop-font-size);
		font-family: var(--base-font-family);
		font-weight: 400;
		color: var(--text-color);
	}

	h1 {
		font-size: var(--h1-font-size);
		font-family: var(--h1-font-family);
		font-weight: var(--h1-font-weight);
		color: var(--h1-color);
	}
	
	h2 {
		font-size: var(--h2-font-size);
		font-family: var(--h2-font-family);
		font-weight: var(--h2-font-weight);
		color: var(--h2-color);
	}
	
	h3 {
		font-size: var(--h3-font-size);
		font-family: var(--h3-font-family);
		font-weight: var(--h3-font-weight);
		color: var(--h3-color);
	}
	
	h4 {
		font-size: var(--h4-font-size);
		font-family: var(--h4-font-family);
		font-weight: var(--h4-font-weight);
		color: var(--h4-color);
	}
	
	h5 {
		font-size: var(--h5-font-size);
		font-family: var(--h5-font-family);
		font-weight: var(--h5-font-weight);
		color: var(--h5-color);
	}
	
	h6 {
		font-size: var(--h6-font-size);
		font-family: var(--h6-font-family);
		font-weight: var(--h6-font-weight);
		color: var(--h6-color);
	}
	
	.salesforceIdentityCommunityLogo2 .communityLogo {
		width: 250px;
		padding: 20px;
	}
	
	.slds-container_x-large {
		max-width: 1440px;
		margin: 0 auto;
		padding: 0 40px;
	}
	
	.ims-dropdown__combobox .slds-combobox__input {
		height: 45px;
	}
	
	.ims-dropdown__combobox .slds-combobox__input span {
		align-self: center;
	}
	
	.ims-dropdown__combobox .slds-icon-utility-down {
		display: none;
	}
	
	.ims-dropdown__combobox .slds-input__icon-group_right {
		border: solid var(--color-secondary);
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 3px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		height: inherit;
		right: 15px;
		top: 55%;
		cursor: pointer;
	}
	
	.checkout .checkout__error-list{
		margin: 0 0 10px 0;
		padding: 15px;
		border: 1px solid var(--color-error);
		display: flex;
		flex-direction: column;
	}
	
	.checkout .checkout__error-list li {
		font-size: 14px;
		line-height: 20px;
		color: var(--color-error);
	}

	.checkout .shipping-addresses .slds-button_neutral{
		font-size: 13px;
	}

	.billing-list-item .slds-accordion__summary-content{
		line-height: 25px;
	}

	.slds-button_stretch button {
		width: 100%;
	}
	
	.order-summary .slds-icon_container svg {
		fill: var(--color-secondary);
	}
	
	.order-summary .slds-button_brand {
		padding: 10px !important;
		width: 100%;
		line-height: normal !important;
	}

	.slds-form-element__control input {
		font-size: var(--input-font-fize);
		line-height: 20px;
		height: 32px;
		border-radius: 4px;
		padding: 6px 12px;
	}

	.slds-grid .slds-button .slds-button__icon {
		/* width: 25px; */
		height: auto;
		z-index: 900;
	}

	lightning-helptext button {
		padding: 0px;
	}

	.cart .cart__sort-container lightning-base-combobox .slds-combobox_container{
		width: 120%;
	}

	c-ims-program-detail c-rckt-data-table .datatable.datatable--border td lightning-button button.slds-button_neutral {
		word-break: break-word !important;
		font-weight: 400;
		padding: 0px !important;
		border: none;
		background: transparent;
		font-size: 12px;
	}
	
	c-ims-program-detail c-rckt-data-table .datatable.datatable--border td lightning-button button.slds-button_neutral:hover {
		text-decoration: underline;
	}
	
	c-ims-program-detail c-rckt-data-table .datatable.datatable--border td lightning-button button.slds-button_neutral:focus {
		box-shadow: none;
	}
	
	c-ims-program-detail c-rckt-data-table .slds-checkbox [type=checkbox][disabled]+.slds-checkbox__label .slds-checkbox_faux {
		cursor: help;
	}

	/* Login styling */
	.salesforceIdentityCommunityLogo2 .communityLogo {
		width: 250px;
		padding: 20px;
	}
	
	.salesforceIdentityLoginForm2, .salesforceIdentityForgotPassword2, .salesforceIdentitySelfRegister2 {
		--lwc-colorTextInverse: black;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 20px;
	}
	
	.salesforceIdentityLoginForm2 .loginButton, .salesforceIdentityForgotPassword2 .loginButton, .salesforceIdentitySelfRegister2 .uiButton {
		width: 211.2px;
	}
	
	.salesforceIdentityLoginForm2 .selfRegister {
		margin-left: 10px;
	}
	
	.employeeLoginLink {
		--lwc-colorTextInverse: black;
	}

	.salesforceIdentityLoginForm2 .inputContainer, .salesforceIdentityLoginForm2 .loginButton, .salesforceIdentityForgotPassword2 .inputContainer, .salesforceIdentityForgotPassword2 .loginButton, .salesforceIdentitySelfRegister2 .inputContainer, .salesforceIdentitySelfRegister2 .uiButton {
		width: 400px;
	}

	.comm-login-form__login-button, .comm-forgot-password__submit-button {
		background-color: var(--dxp-s-button-color) !important;
		border-color: var(--dxp-s-button-border-color) !important;
		color: var(--dxp-s-button-color-contrast) !important;
		transition: var(--dxp-c-button-brand-transition) !important;
	}

	.comm-login-form__login-button:hover, .comm-forgot-password__submit-button:hover {
		background-color: var(--color-primary) !important;
		color: var(--color-secondary) !important;
	}

	.comm-forgot-password__cancel-button {
		background-color: var(--dxp-s-secondary-button-color) !important;
		border-color: var(--dxp-s-secondary-button-border-color) !important;
		color: var(--dxp-s-secondary-button-color-contrast) !important;
		transition: var(--dxp-c-button-brand-transition) !important;
	}

	.comm-forgot-password__cancel-button:hover {
		background-color: var(--color-secondary) !important;
		color: var(--color-primary) !important;
	}

	commerce_checkout-checkout-button {
		margin-bottom: 30px;
	}

	.slds-spinner_container{
		--dxp-c-spinner-color-background: var(--slds-g-color-neutral-100-opacity-75);
	}

	.spinner-container .slds-spinner_container, .spinner-container.slds-spinner_container{
		position: fixed;
	}

	.slds-form-element__icon{
		vertical-align: inherit;
	}

	.addressSearch .icon {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-100%);
	}

	.datatable-filter__search-icon-wrapper .slds-button__icon,
	.switcher-account__desktop--search .slds-button__icon{
		transform: translateY(-50%);
		fill: var(--color-primary);
	}

	.addressSearch .slds-input {
		padding-left: 35px;
	}

	button[disabled] .slds-button__icon, .slds-button:disabled .slds-button__icon{
		fill: rgb(201, 201, 201);
	}

	lightning-card.user-settings .slds-card__header{
		padding-top: 2rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	lightning-card.user-settings .slds-card__header h2{
		font-size: var(--dxp-s-text-heading-medium-font-size);
	}

	lightning-card.user-settings .form-body{
		padding-left: 2rem;
		padding-right: 2rem;
		padding-bottom:2rem;
	}
}