/**
 * TablePress – Beebom theme match
 */
/******************** TablePress button styling START ********************/
.dt-container .dt-buttons {
	margin-bottom: 15px;
}

.dt-button {
	background: transparent !important;
	border: 1px solid #1a1b1e !important;
	border-radius: 20px !important;
	padding: 8px 16px !important;
	margin-right: 6px !important;
	margin-bottom: 6px !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1a1b1e !important;
	cursor: pointer !important;
	transition: border-color .2s !important;
}

.dt-button:hover,
.dt-button:active,
.dt-button:focus,
.dt-button.active {
	background: transparent !important;
	border-color: #46474a !important;
}

.dt-button:hover span:not(.dt-button-down-arrow),
.dt-button:active span:not(.dt-button-down-arrow),
.dt-button:focus span:not(.dt-button-down-arrow),
.dt-button.active span:not(.dt-button-down-arrow) {
	background: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%);
	-webkit-text-fill-color: rgba(0,0,0,0);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* Column visibility dropdown styling */
.dt-button-collection {
	background: #fff !important;
	border: 1px solid #e3e2e6 !important;
	border-radius: 15px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
	padding: 8px !important; /* z-index: 1000 !important; */
}

.dt-button-collection .dt-button {
	border-radius: 20px !important; /* margin: 4px !important; */
	width: 100% !important;
	text-align: left !important;
	position: relative !important;
	padding-right: 30px !important;
}

/* Style for the checkmark */
.dt-button-collection .dt-button-active:after {
	content: "✓" !important;
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: #1a1b1e !important;
	margin-top: 0 !important;
	transition: all .2s !important;
}

/* Make checkmark gradient on hover */
.dt-button-collection .dt-button-active:hover:after {
	background: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%) !important;
	-webkit-text-fill-color: rgba(0,0,0,0) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
}

/******************** TablePress button styling END ********************/
/******************** TablePress pagination buttons - START ********************/
.dt-container .dt-paging .dt-paging-button,
.dt-paging .dt-paging-button {
	background: transparent !important;
	border: 1px solid #e3e2e6;
	color: #757575 !important;
	border-radius: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 21px;
	margin-right: 5px;
	min-width: max-content;
	padding: 5px 11px;
	text-align: center;
	transition: none;
}

/* First 9 buttons get fixed width like pagination.scss */
.dt-container .dt-paging .dt-paging-button:nth-child(-n+9),
.dt-paging .dt-paging-button:nth-child(-n+2) {
	min-width: 36px;
}

/* Current page - use background gradient instead of text gradient */
.dt-container .dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current {
	background: linear-gradient(270deg,#e77de1 0%,#0065c5 100%) !important;
	color: #ffffff !important; /* white text on gradient background */
	border-color: transparent !important;
	-webkit-text-fill-color: #ffffff !important; /* override previous text gradient */
}

/* Hover state - match pagination.scss with solid background */
.dt-container .dt-paging .dt-paging-button:hover,
.dt-paging .dt-paging-button:hover {
	background-color: #ffffff !important;
	border-color: #5e5e62 !important;
	color: #ffb400 !important;
	transition: none;
}

/* Disabled state */
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-paging .dt-paging-button.disabled {
	opacity: .5;
	pointer-events: none;
	border: 1px solid #e3e2e6 !important;
}

@media screen and (max-width: 767px) {
	.dt-container .dt-layout-cell {
		margin-left: unset !important;
	}
}

/**************************** TablePress pagination buttons - END ********************/
/**************************** TablePress Table Body - Start ********************/
/* Fix for DataTables search and filter inputs */
.dt-length select,
.dt-search input {
	border: 1px solid #e3e2e6;
	border-radius: 4px;
	padding: 5px 10px;
}

/* Improve table styling */
.tablepress {
	border: 1px solid #e3e2e6;
}

.tablepress thead th {
	background: #fff;
	background-color: transparent;
}

@media screen and (max-width: 767px) {
	.tablepress thead th {
		font-size: 12px !important;
	}

	.dt-column-order::before,
	.dt-column-order::after {
		font-size: 12px !important;
	}
}

.tablepress thead th:hover,
.tablepress thead .dt-ordering-desc,
.tablepress thead .dt-ordering-asc {
	background: linear-gradient(270deg,#e77de1 0%,#0065c5 100%);
}

.tablepress tbody td:hover {
	border-bottom: 1px solid #e3e2e6;
	background: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%) !important;
	-webkit-text-fill-color: rgba(0,0,0,0) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
}

.tablepress tbody td a {
	color: #1a1b1e;
	text-decoration: none;
}

.tablepress tbody td a:hover {
	background: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%);
	-webkit-text-fill-color: rgba(0,0,0,0);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.tablepress tr.even {
	background: #f5f5f5;
}

/**************************** TablePress Table Body - END ********************/
/******************** TablePress SearchBuilder styling START ********************/
/* Apply the same button styling to SearchBuilder buttons */
.dtsb-searchBuilder {
	border: 1px solid #e3e2e6;
	border-radius: 10px;
	padding: 12px;
}

/* Base styling for all SearchBuilder buttons */
.dtsb-button {
	background: transparent !important;
	border: 1px solid #1a1b1e !important;
	border-radius: 20px !important;
	padding: 8px 16px !important;
	margin-right: 6px !important;
	margin-bottom: 6px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1a1b1e !important;
	cursor: pointer !important;
	transition: border-color .2s !important;
	height: -webkit-fill-available;
}

/* Logic buttons (AND/OR) */
.dtsb-logic {
	min-width: 60px;
}

/* Apply gradient text effect on hover */
.dtsb-button:hover,
.dtsb-button:active,
.dtsb-button:focus,
.dtsb-clearAll:hover,
.dtsb-showAll:hover,
.dtsb-collapseAll:hover {
	background: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%) !important;
	-webkit-text-fill-color: rgba(0,0,0,0);
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
}

/* Style for delete/clear buttons (X) */
.dtsb-delete,
.dtsb-clearGroup {
	padding: 4px 10px !important;
	font-size: 16px !important;
	line-height: 1 !important;
}

/* Style for add condition button */
.dtsb-add {
	background: transparent !important;
	border: 1px solid #1a1b1e !important;
	margin-top: 8px !important;
}

/* Container styling */
.dtsb-group {
	background: #fff;
	padding: 15px;
}

/* Criteria row styling */
.dtsb-criteria {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

/* Dropdown styling to match inputs */
.dtsb-dropDown {
	border: 1px solid #e3e2e6;
	border-radius: 4px;
	padding: 5px 10px;
	background-color: #fff;
	margin-right: 5px;
	color: #1a1b1e;
	font-size: 14px;
}

.dtsb-dropDown:hover,
.dtsb-dropDown:focus {
	border-color: #46474a;
	outline: none;
}

/* Logic container position adjustment */
.dtsb-logicContainer {
	margin-bottom: 10px;
	background: transparent !important;
	border: none !important;
}

/******************** TablePress SearchBuilder styling END ********************/
/******************** TablePress Filter Section styling Start ********************/
div.dtsp-searchPane button.dtsp-paneButton {
	opacity: unset !important;
}

/* Container for FilterPanes buttons */
div.dtsp-panesContainer button.dtsp-collapseAll:hover,
div.dtsp-panesContainer button.dtsp-collapseAll:active,
div.dtsp-panesContainer button.dtsp-showAll:hover,
div.dtsp-panesContainer button.dtsp-showAll:active,
div.dtsp-panesContainer button.dtsp-clearAll:hover,
div.dtsp-panesContainer button.dtsp-clearAll:active {
	background: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%) !important;
	-webkit-text-fill-color: rgba(0,0,0,0);
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent !important;
}

div.dtsp-searchPane div.dt-container div.dt-scroll-body div.dtsp-nameCont span.dtsp-pill {
	background: linear-gradient(270deg,#e77de1 0%,#0065c5 100%) !important;
	color: #ffffff !important; /* white text on gradient background */
}

table.dataTable>tbody>tr.selected {
	background-color: #858a92e6 !important;
}

/******************** TablePress Filter Section styling END ********************/
/* Alphabet Search Container */
div.alphabet {
	margin: 15px 0;
	padding: 12px;
	border: 1px solid #e3e2e6;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1b1e;
	align-items: center;
	gap: 5px;
}

/* Individual alphabet letters and "None" button */
div.alphabet span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 3px;
	border: 1px solid #e3e2e6;
	background: transparent;
	color: #000000 !important;
	transition: all .2s;
	padding: 5px;
	text-align: center;
}

/* Active state (currently selected letter or "None") */
div.alphabet span.active {
	background: linear-gradient(270deg,#e77de1 0%,#0065c5 100%);
	border-color: transparent;
}

/* Hover effect with gradient text */
div.alphabet span:not(.active):hover {
	background: transparent;
	border-color: #46474a;
}

div.alphabet span:not(.active):hover {
	background: transparent;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(270deg,#ff3200 4.18%,#ff3200 5.3%,#ffb400 46.79%,#da33d0 81.55%,#006fd9 116.31%);
}

/* Info tooltip */
div.alphabet .alphabetInfo {
	display: none;
}