:root {
	--grey-color: rgb(128, 128, 128);
	--grey-color-20: rgb(128, 128, 128, .2);
	--grey-color-50: rgb(128, 128, 128, .5);
	--red-color: rgb(194, 23, 23);
	--yellow-color: rgb(246, 138, 49);
	--white: rgb(255, 255, 255);
	--bs-body-color: rgb(128, 128, 128);
	--black: rgb(0, 0, 0);
}

body,
table,
th,
td,
input,
select,
body,
textarea {
	color: var(--grey-color);
}

.ts-control, .ts-dropdown {
	color: var(--grey-color) !important;
}

/*
 * Default multi chips: Bootstrap primary.
 * Wrappers with class ts-items-custom keep their own item colors (e.g. market active/inactive badges).
 */
.ts-wrapper.multi:not(.ts-items-custom) .ts-control > .item {
	background-color: var(--bs-primary) !important;
	color: var(--bs-white, #fff) !important;
	border-color: var(--bs-primary) !important;
}
.ts-wrapper.multi:not(.ts-items-custom) .ts-control > .item.active {
	background-color: var(--bs-primary) !important;
}
.ts-wrapper.multi:not(.ts-items-custom) .ts-control > .item .remove {
	border-left-color: rgba(255, 255, 255, 0.35) !important;
	color: var(--bs-white, #fff) !important;
}

.form-control::placeholder {
	color: var(--grey-color-50);
	opacity: 1;
}

.form-floating label {
	color: var(--grey-color-50) !important;
}

header {
	height: 75px;
	border-bottom: thin solid var(--grey-color-20);
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: var(--white);
}

#main-content-wrapper {
	margin-top: 75px;
	padding-top: 1rem;
	margin-left: 0px;
	margin-right: 0px;
}


#alert-wrapper {
	position: absolute;
	top: 0px;
	padding-top: 30px;
	z-index: 100;
	pointer-events: none;
}

#alert-wrapper .alert {
	pointer-events: all;
}

.clickable {
	cursor: pointer;
}


a {
	color: var(--grey-color);
	text-decoration: none;
}

a:hover,
button.dropdown-item:hover {
	text-decoration: underline;
}

.btn-grey {
	background-color: var(--grey-color);
	color: var(--white);
}

/* Request edit step 3 — Pending / Provided line-pricing filters when selected */
.btn.request-rp-line-pricing-filter-btn.active {
	background-color: var(--red-color) !important;
	border-color: var(--red-color) !important;
	color: var(--white) !important;
}

/* Request step 3 — Price Lists / Overlap: link wrapping badge + corner count pill (clickable, no default link chrome) */
a.request-price-list-badge-link {
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	overflow: visible;
}
a.request-price-list-badge-link:hover {
	color: inherit;
	filter: brightness(0.94);
}
a.request-price-list-badge-link:focus-visible {
	outline: 2px solid var(--red-color);
	outline-offset: 2px;
}
a.request-price-list-badge-link .request-price-list-badge {
	overflow: visible;
}
a.request-price-list-badge-link .request-price-list-badge-count {
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1;
	min-width: 1.1rem;
	padding: 0.2em 0.42em;
}

/* Request step 3 — product card line tabs: override BS 5.3 nav-tab variables (primary blue) */
.request-product-line-tabs.nav-tabs {
	--bs-nav-link-color: var(--grey-color);
	--bs-nav-link-hover-color: var(--grey-color);
	--bs-nav-tabs-link-hover-border-color: var(--bs-border-color, #dee2e6);
	--bs-nav-tabs-link-active-color: var(--red-color);
	--bs-nav-tabs-link-active-bg: var(--bs-body-bg, #fff);
	--bs-nav-tabs-link-active-border-color: var(--bs-border-color, #dee2e6) var(--bs-border-color, #dee2e6) var(--bs-body-bg, #fff);
}

.request-product-line-tabs.nav-tabs > .nav-item > .nav-link {
	color: var(--bs-nav-link-color);
}

.request-product-line-tabs.nav-tabs > .nav-item > .nav-link:hover:not(.active),
.request-product-line-tabs.nav-tabs > .nav-item > .nav-link:focus:not(.active) {
	color: var(--bs-nav-link-hover-color);
	border-color: transparent transparent var(--bs-nav-tabs-link-hover-border-color);
}

.request-product-line-tabs.nav-tabs > .nav-item > .nav-link.active,
.request-product-line-tabs.nav-tabs > .nav-item > .nav-link.active:hover,
.request-product-line-tabs.nav-tabs > .nav-item > .nav-link.active:focus {
	color: var(--bs-nav-tabs-link-active-color) !important;
	background-color: var(--bs-nav-tabs-link-active-bg);
	border-color: var(--bs-nav-tabs-link-active-border-color);
}

a.btn:hover {
	text-decoration: none !important;
}


.pagination {
	color: var(--grey-color);
}

.pagination a,
.pagination a:hover {
	color: var(--grey-color);
	text-decoration: none;
}

.active>.page-link {
	color: var(--white);
	background-color: var(--red-color);
	border-color: var(--red-color);
}

.page-link:hover {
	background-color: var(--grey-color);
	border-color: var(--grey-color);
	color: var(--white) !important;
}

.min {
	white-space: nowrap;
	width: 1%;
}

.has-error {
	border-color: var(--bs-red);
}

.error-helper-message {
	color: var(--bs-red);
}

.toast-container {
	min-width: 300px;
	max-width: 500px;
	pointer-events: none;
}

.toast-container .toast {
	pointer-events: auto;
	min-width: 300px;
}

.toast.show {
	opacity: 1 !important;
	display: block !important;
}

.toast.showing {
	opacity: 1 !important;
}

.toast-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.pre-scrollable {
	max-height: 340px;
	overflow-y: scroll;
}

/* Full-page thinking overlay (search, export, etc.); message set via JS */
.thinking-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
}

.thinking-overlay.show {
	display: flex !important;
}

.thinking-overlay .thinking-overlay-content {
	background: var(--white);
	color: var(--grey-color);
	padding: 1.5rem 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.thinking-overlay .spinner-border {
	color: var(--grey-color);
}

/* Sticky pagination bar at bottom of viewport. z-index below Bootstrap dropdown (1000)
   so dropdowns in the table (e.g. Actions, Per page) are not covered. */
.pagination-controls-sticky {
	position: sticky;
	bottom: 0;
	z-index: 10;
	background: var(--white);
	padding: 0.5rem 0;
	margin: 0 -0.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Sticky listing filter / action bar; sits below the fixed site header (75px).
   z-index matches .card-header-sticky so menus in the bar stay above the table
   and below the site header (1030) and breadcrumb (1025). */
.list-filter-bar-sticky {
	position: sticky;
	top: 75px;
	z-index: 1020;
	background-color: var(--white);
	background-clip: padding-box;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: thin solid var(--grey-color-20);
}

/* Sticky form card header; sits below the fixed site header (75px).
   Opaque stand-in for Bootstrap's translucent --bs-card-cap-bg (≈ gray-100). */
.card-header-sticky {
	position: sticky;
	top: 75px;
	z-index: 1020;
	background-color: #f8f9fa;
	background-clip: padding-box;
}

/* Breadcrumb step dropdown must sit above sticky request actions (.card-header-sticky is 1020)
   and below the fixed site header (1030). Bootstrap 5 puts .show on the toggle/menu, not
   .dropdown, so the nav itself is the stacking context that has to be raised. */
#breadcrumb {
	position: relative;
	z-index: 1025;
}

/* Icon-only advanced-filters toggle: keep btn-group end radius (needs .dropdown-toggle) without caret. */
.advanced-filters-toggle.dropdown-toggle::after {
	display: none;
}

/* Offcanvas nav – match header styling, subnav instead of dropdowns */
.offcanvas-nav {
	background-color: var(--white);
	color: var(--grey-color);
}

.offcanvas-nav-header {
	border-bottom: thin solid var(--grey-color-20);
	padding: 0.75rem 1rem;
}

.offcanvas-nav .offcanvas-title {
	color: var(--grey-color);
	font-size: 1rem;
	font-weight: normal;
}

.offcanvas-nav-body {
	padding: 0.5rem 0;
}

.offcanvas-nav-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.offcanvas-nav-item {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	color: var(--grey-color);
	text-decoration: none;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	font-size: inherit;
	cursor: pointer;
}

.offcanvas-nav-icon {
	width: 1.25rem;
	margin-right: 0.5rem;
	text-align: center;
}

a.offcanvas-nav-item:hover {
	text-decoration: underline;
	color: var(--grey-color);
}

.offcanvas-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.offcanvas-nav-toggle > span {
	display: flex;
	align-items: center;
}

.offcanvas-nav-chevron {
	font-size: 0.75rem;
	transition: transform 0.2s ease;
}

.offcanvas-nav-toggle[aria-expanded="true"] .offcanvas-nav-chevron {
	transform: rotate(180deg);
}

.offcanvas-subnav-items {
	list-style: none;
	margin: 0;
	padding: 0 0 0.25rem 0;
	padding-left: 1.25rem;
	border-left: thin solid var(--grey-color-20);
	margin-left: 1rem;
}

.offcanvas-subnav-item {
	display: flex;
	align-items: center;
	padding: 0.35rem 0.5rem;
	color: var(--grey-color);
	text-decoration: none;
}

.offcanvas-subnav-icon {
	width: 1.25rem;
	margin-right: 0.5rem;
	text-align: center;
}

.offcanvas-subnav-item:hover {
	text-decoration: underline;
	color: var(--grey-color);
}

/* Thinking overlay for Excel export */
.thinking-overlay {
	position: fixed;
	inset: 0;
	z-index: 1055;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thinking-overlay-backdrop {
	position: absolute;
	inset: 0;
	background: var(--grey-color-50);
}
.thinking-overlay-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 2rem;
	background: var(--white);
	border-radius: 0.25rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Operators export-all thinking overlay */
.operators-export-overlay {
	position: fixed;
	inset: 0;
	z-index: 1055;
	display: flex;
	align-items: center;
	justify-content: center;
}

.operators-export-overlay-backdrop {
	position: absolute;
	inset: 0;
	background: var(--grey-color-50);
}

.operators-export-overlay-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 2rem;
	background: var(--white);
	border-radius: 0.25rem;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Reusable help icon + soft popover styles */
.form-help-icon {
	color: var(--bs-gray-400);
}

.popover.popover-soft {
	--bs-popover-max-width: 280px;
	--bs-popover-bg: var(--bs-gray-100);
	--bs-popover-body-color: var(--bs-gray-600);
	--bs-popover-border-color: var(--bs-gray-200);
	--bs-popover-body-padding-x: 0.75rem;
	--bs-popover-body-padding-y: 0.5rem;
	box-shadow: var(--bs-box-shadow-sm);
}

/* Request pricing: compact price-list notes popover (click sticky-note icon) */
.popover.popover-price-list-notes {
	--bs-popover-max-width: min(24rem, calc(100vw - 2rem));
	--bs-popover-bg: var(--bs-gray-100);
	--bs-popover-body-color: var(--bs-gray-700);
	--bs-popover-border-color: var(--bs-gray-200);
	box-shadow: var(--bs-box-shadow-sm);
	z-index: 2000;
}

.popover.popover-price-list-notes .popover-body {
	max-height: 12rem;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

button.price-list-notes-popover {
	text-decoration: none;
}

tr.distributor-search-row-addable {
	cursor: pointer;
}

/* Request form step 2/3: Add Distributors / Add Products quick-add dropdown in wizard toolbar */
.dropdown-menu.request-add-distributors-menu,
.dropdown-menu.request-add-products-menu {
	min-width: 32rem;
	width: 32rem;
	max-width: min(32rem, 100vw - 2rem);
	overflow: visible;
}

tbody tr.request-list-row {
	cursor: pointer;
}

tbody tr.dashboard-request-row {
	cursor: pointer;
}

/* Assignment dropdown on request list: menu is Popper position fixed; stack above rows so suggestion clicks hit this menu */
.request-list-table-wrap .assignment-dropdown .dropdown-menu.request-list-assignment-menu {
	z-index: 3000;
}

/* Request assign modal: API-backed user autocomplete (no Tom Select) */
.assign-user-suggestions {
	max-height: 15rem;
	overflow-y: auto;
	z-index: 2000;
}

.assign-user-suggestions .list-group-item {
	cursor: pointer;
}

/* Request form step 3: product cards (no-bid switch) and non-biddable tooltips */
.request-nonbiddable-tooltip .tooltip-inner {
	max-width: 420px;
	font-size: 0.95rem;
	padding: 0.5rem 0.75rem;
	text-align: left;
}

.request-product-card-header .rp-no-bid-toggle.form-check-input {
	width: 2.25rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	border-color: rgba(255, 255, 255, 0.85);
	background-color: rgba(255, 255, 255, 0.25);
	cursor: pointer;
}

.request-product-card-header .rp-no-bid-toggle.form-check-input:checked {
	background-color: var(--red-color);
	border-color: var(--red-color);
}

.request-product-card-header .rp-no-bid-toggle.form-check-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.35);
}

/* Keep a product card clear of the fixed site header when scrolling to it after remove. */
.request-product-line-card {
	scroll-margin-top: 5.5rem;
}

/*
 * Step 3 product line (locked): disabled selects/checkboxes do not receive pointer events.
 * Wrapper gets the click so we can enter edit mode; controls use pointer-events: none while locked.
 */
.request-product-line-card[data-line-readonly="true"] .rp-line-field-capture--readonly {
	cursor: pointer;
}

.request-product-line-card[data-line-readonly="true"] .rp-line-field-capture--readonly select,
.request-product-line-card[data-line-readonly="true"] .rp-line-field-capture--readonly .rp-no-bid-toggle {
	pointer-events: none;
}

/* Form submit guard: spinner overlay on the clicked submit control while the post is in flight */
form[data-ifs-submitting="true"] .ifs-btn-submit-locked {
	pointer-events: none;
	cursor: wait;
}

.btn.ifs-btn-loading,
button.ifs-btn-loading,
input[type="submit"].ifs-btn-loading {
	position: relative;
	pointer-events: none;
	cursor: wait;
}

.btn.ifs-btn-loading > *:not(.ifs-btn-loading-overlay),
button.ifs-btn-loading > *:not(.ifs-btn-loading-overlay) {
	opacity: 0.35;
}

.ifs-btn-loading-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.7);
	border-radius: inherit;
	z-index: 1;
}

.ifs-btn-loading-overlay .spinner-border {
	width: 1.1rem;
	height: 1.1rem;
	border-width: 0.15em;
	color: var(--grey-color, #495057);
}

/* dropdown-item submit buttons (e.g. request wizard submit menu) */
.dropdown-item.ifs-btn-loading {
	position: relative;
}

.dropdown-item.ifs-btn-loading > *:not(.ifs-btn-loading-overlay) {
	opacity: 0.35;
}

/* Draggable dialogs with a product-attributes panel (product type picker, vendor bids). */
.ptp-modal .ptp-modal-drag-handle {
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.ptp-modal .ptp-modal-drag-handle:active,
.ptp-modal.ptp-dragging .ptp-modal-drag-handle {
	cursor: grabbing;
}
.ptp-modal .ptp-modal-drag-handle .btn-close {
	cursor: pointer;
}
.ptp-modal .ptp-product-summary {
	flex-shrink: 0;
	padding: 0.75rem 1rem;
	background-color: #f8f9fa;
	border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.ptp-modal .ptp-product-summary-toggle {
	font-size: 0.875rem;
	line-height: 1.25;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}
.ptp-modal .ptp-product-summary-toggle:hover,
.ptp-modal .ptp-product-summary-toggle:focus-visible {
	color: var(--grey-color, #495057);
}
.ptp-modal .ptp-product-summary-chevron {
	transition: transform 0.15s ease;
	width: 0.85rem;
	text-align: center;
}
.ptp-modal .ptp-product-summary-toggle[aria-expanded="false"] .ptp-product-summary-chevron {
	transform: rotate(-90deg);
}
.ptp-modal.ptp-dragging {
	user-select: none;
}

/* Bid line item number Interflex suggestions (plain autocomplete, not Tom Select). */
.rp-line-item-no-wrap .rp-item-no-ac {
	position: absolute;
	z-index: 1050;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 14rem;
	overflow: auto;
	margin-top: 0.125rem;
	padding: 0.25rem 0;
	background: var(--bs-body-bg, #fff);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 0.375rem;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}
.rp-line-item-no-wrap .rp-item-no-ac-option {
	padding: 0.375rem 0.75rem;
	cursor: pointer;
	color: var(--grey-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rp-line-item-no-wrap .rp-item-no-ac-option:hover,
.rp-line-item-no-wrap .rp-item-no-ac-option.active {
	background-color: var(--grey-color-20, rgba(128, 128, 128, 0.2));
	color: var(--grey-color);
}

.rp-interflex-row-toggle {
	line-height: 1;
	min-width: 1.75rem;
}
.rp-interflex-row-toggle .rp-interflex-row-toggle-icon {
	display: inline-block;
	width: 0.85rem;
	text-align: center;
}
.rp-interflex-spec-row[data-line-item-id] {
	cursor: default;
}