// global navbar
.bl-navbar {
	border-color: #36405a;
	background-color: #2c3650;
	.bl-navbar__title {
		color: #fff;
	}
	.bl-navbar__badge.is-free {
		color: #d0d5dd;
		background-color: #36405a;
		border-color: #36405a;
	}
	.theme-mood-button {
		border-color: #738bb8;
	}
}

// Manage Links board redesign (dark)
$bld-border: #36405a;
$bld-surface: #252f47;
$bld-card: #2c3650;
$bld-text: #e5e9f2;
$bld-muted: #9aa5bd;

.bl-manage {
	color: $bld-text;

	&__title {
		color: $bld-text;
	}
	&__subtitle {
		color: $bld-muted;
	}
}
.bl-icon-btn,
.bl-viewseg,
.bl-toolbar__search,
.bl-toolbar__fav,
.bl-toolbar__reset,
.bl-toolbar__custom-date,
.bl-filter {
	background: $bld-card;
	border-color: $bld-border;
	color: $bld-muted;

	input {
		color: $bld-text;
		&::placeholder {
			color: $bld-muted;
		}
	}
}
.bl-filter {
	.bl-filter__lead,
	.bl-filter__label {
		color: $bld-muted;
	}
	.bl-rs__single-value,
	.bl-rs__placeholder {
		color: $bld-text;
	}
	.bl-rs__menu {
		background: $bld-card;
		border-color: $bld-border;
	}
	.bl-rs__option {
		background: transparent;
		color: $bld-text;
		&--is-focused {
			background: rgba(#fff, 0.08);
		}
		&--is-selected {
			background: transparent;
		}
	}
	.bl-opt {
		color: $bld-text;
		&__count {
			color: $bld-muted;
		}
	}
}
.bl-viewseg__btn {
	color: $bld-muted;
	&:hover {
		color: $bld-text;
	}
}
// Sticky toolbar background needs to match the dark page canvas.
.bl-manage__scroll .bl-toolbar {
	background: #36405a;
}
.bl-overview {
	background: $bld-card;
	border-color: $bld-border;
	.bl-overview__card {
		border-color: $bld-border;
	}
	.bl-overview__value {
		color: $bld-text;
	}
	.bl-overview__head,
	.bl-overview__sub {
		color: $bld-muted;
	}
}
.bl-empty {
	background: $bld-card;
	border-color: $bld-border;
	.bl-empty__title {
		color: $bld-text;
	}
	.bl-empty__text {
		color: $bld-muted;
	}
}

// List view (dark)
.bl-list {
	background: $bld-card;
	border-color: $bld-border;

	.bl-list__bulk {
		background: rgba(#2f6bff, 0.12);
		border-color: $bld-border;
	}
	.bl-list__bulk-count,
	.bl-list__bulk-btn {
		color: $bld-text;
		background: $bld-surface;
		border-color: $bld-border;
	}
	.bl-list__table thead th {
		background: $bld-card;
		color: $bld-muted;
		border-color: $bld-border;
	}
	.bl-list__table tbody td {
		color: $bld-text;
		border-color: $bld-border;
	}
	.bl-list__table tbody tr:hover td {
		background: rgba(#fff, 0.03);
	}
	.bl-row__title {
		color: $bld-text;
	}
	.bl-row__cat,
	.bl-row__clicks em {
		color: $bld-muted;
	}
	.bl-row__slug,
	.bl-row__target {
		background: $bld-surface;
		border-color: $bld-border;
		color: #b8c2d9;
	}
	.bl-row__tag {
		background: rgba(#fff, 0.08);
		color: $bld-muted;
	}
	.bl-row__type {
		border-color: $bld-border;
		color: $bld-muted;
	}
	.bl-list__c-check input[type='checkbox'] {
		background: $bld-surface;
		border-color: $bld-border;

		&:checked {
			background: #2f6bff;
			border-color: #2f6bff;
		}
	}
}
.bl-pagination {
	&__rows,
	&__info {
		color: $bld-muted;
	}
	&__rows select,
	&__btns button {
		background-color: $bld-card;
		border-color: $bld-border;
		color: $bld-text;
	}
}
.bl-skeleton {
	&__bar,
	&__block,
	&__check,
	&__col-head span {
		background: #2c3650;
		background-image: linear-gradient(90deg, #2c3650 0%, #3a4763 50%, #2c3650 100%);
	}
	&__card {
		background: $bld-card;
		border-color: $bld-border;
	}
	&__row {
		border-color: $bld-border;
	}
}

// Auto-Link Keywords page (dark)
.bl-kw {
	color: $bld-text;

	&__title {
		color: $bld-text !important;
	}
	&__subtitle {
		color: $bld-muted;
	}
	&__icon-btn {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-muted;
		&:hover {
			color: #fff;
		}
	}
	// Export / Import ghost buttons (Add stays blue)
	.btl-import-export-buttons .btl-btn,
	.btl-import-export-buttons .btl-import-button {
		background: $bld-card !important;
		border-color: $bld-border !important;
		color: $bld-text !important;

		&:hover {
			color: #fff !important;
		}
	}

	// Stats
	&__stats {
		background: $bld-card;
		border-color: $bld-border;
	}
	&__stat {
		border-color: $bld-border;
	}
	&__stat-head,
	&__stat-label {
		color: $bld-muted;
	}
	&__stat-value {
		color: $bld-text;
	}

	// Toolbar
	&__search,
	&__filter,
	&__reset {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-muted;

		input {
			color: $bld-text;
			&::placeholder {
				color: $bld-muted;
			}
		}
	}
	&__filter-label {
		color: $bld-muted;
	}
	&__filter-select {
		color: $bld-text;
	}
	&__reset:hover {
		color: #fff;
	}

	// Bulk bar
	&__bulk {
		background: rgba(#2f6bff, 0.12);
		border-color: rgba(#2f6bff, 0.4);
	}
	&__bulk-select,
	&__bulk-btn {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-text;
	}

	// Table
	&__table-wrap {
		background: $bld-card;
		border-color: $bld-border;
	}
	&__table {
		thead th {
			background: $bld-card;
			color: $bld-muted;
			border-bottom-color: $bld-border;
		}
		tbody td {
			border-bottom-color: $bld-border;
		}
		tbody tr:nth-child(even) {
			background: rgba(#fff, 0.025);
		}
		tbody tr:hover {
			background: rgba(#2f6bff, 0.12);
		}
		tbody tr.is-selected {
			background: rgba(#2f6bff, 0.16);
		}
	}
	&__empty-row td {
		color: $bld-muted;
	}

	&__kw-name {
		color: $bld-text;
	}
	&__kw-sub {
		color: $bld-muted;
	}
	&__kw-badge {
		background: rgba(#2f6bff, 0.18);
	}

	// Status pills
	&__status.is-active {
		background: rgba(#16a34a, 0.18);
		color: #4ade80;
	}
	&__status.is-draft {
		background: rgba(#fff, 0.1);
		color: $bld-muted;
	}

	// Shortened URL pill
	&__url-text {
		background: $bld-surface;
		border-color: $bld-border;
		color: #c3cce0;
	}
	&__url-btn {
		color: $bld-muted;
		&:hover {
			background: rgba(#fff, 0.08);
		}
	}

	// Row actions
	.btl-tooltip .dnd-link-button,
	&__action-btn {
		color: $bld-muted;
		&:hover {
			background: rgba(#fff, 0.08);
			color: #fff;
		}
	}
	&__action-btn--danger:hover {
		color: #f87171;
		background: rgba(#ef4444, 0.16);
	}
	&__confirm {
		color: $bld-muted;
	}

	// Checkbox
	&__check-box {
		background: $bld-surface;
		border-color: $bld-border;
	}

	// Footer / pagination
	&__rows {
		color: $bld-muted;

		select {
			background: $bld-card;
			border-color: $bld-border;
			color: $bld-text;
		}
	}
	&__pager-range {
		color: $bld-muted;
	}
	&__pager-btns button {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-text;
	}
}

// Auto-Link Keywords loading skeleton (dark)
.bl-kw-skel {
	&__stat-label,
	&__stat-value,
	&__search,
	&__filter,
	&__reset,
	&__h,
	&__check,
	&__badge,
	&__name,
	&__sub,
	&__pill,
	&__url,
	&__icon {
		background: #2c3650;
		background-image: linear-gradient(90deg, #2c3650 0%, #3a4763 50%, #2c3650 100%);
	}
	&__row {
		border-bottom-color: $bld-border;
	}
}

// Tags & Categories page (dark)
.bl-tc {
	color: $bld-text;

	&__title {
		color: $bld-text !important;
	}
	&__subtitle {
		color: $bld-muted;
	}
	&__icon-btn,
	&__btn-ghost {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-text;

		&:hover {
			color: #fff;
		}
	}

	// Stats
	&__stats {
		background: $bld-card;
		border-color: $bld-border;
	}
	&__stat {
		border-color: $bld-border;
	}
	&__stat-head,
	&__stat-label,
	&__stat-sub {
		color: $bld-muted;
	}
	&__stat-value {
		color: $bld-text;
	}

	// Toolbar
	&__tabs,
	&__search,
	&__sort {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-muted;

		input {
			color: $bld-text;
			&::placeholder {
				color: $bld-muted;
			}
		}
	}
	&__tab {
		color: $bld-muted;
		&:hover {
			color: $bld-text;
		}
		&.is-active {
			background: rgba(#2f6bff, 0.18);
			color: #6f97ff;
		}
	}
	&__tab-count {
		background: rgba(#fff, 0.1);
		color: $bld-muted;
	}
	&__tab.is-active &__tab-count {
		background: rgba(#2f6bff, 0.25);
		color: #6f97ff;
	}
	&__sort-label {
		color: $bld-muted;
	}
	&__sort-select {
		color: $bld-text;
	}

	// Bulk bar
	&__bulk {
		background: rgba(#2f6bff, 0.12);
		border-color: rgba(#2f6bff, 0.4);
	}
	&__bulk-btn {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-text;
	}

	// Table
	&__table-wrap {
		background: $bld-card;
		border-color: $bld-border;
	}
	&__table {
		thead th {
			background: $bld-card;
			color: $bld-muted;
			border-bottom-color: $bld-border;
		}
		tbody td {
			border-bottom-color: $bld-border;
		}
		tbody tr:nth-child(even) {
			background: rgba(#fff, 0.025);
		}
		tbody tr:hover {
			background: rgba(#2f6bff, 0.12);
		}
		tbody tr.is-selected {
			background: rgba(#2f6bff, 0.16);
		}
	}
	&__empty-row td {
		color: $bld-muted;
	}

	&__name-text {
		color: $bld-text;
	}
	&__name-badge {
		background: rgba(#2f6bff, 0.18);
	}
	&__links {
		background: rgba(#fff, 0.08);
		color: $bld-muted;
	}
	&__clicks strong {
		color: $bld-text;
	}
	&__clicks em {
		color: $bld-muted;
	}

	.btl-tooltip .dnd-link-button,
	&__action-btn {
		color: $bld-muted;
		&:hover {
			background: rgba(#fff, 0.08);
			color: #fff;
		}
	}
	&__action-btn--danger:hover {
		color: #f87171;
		background: rgba(#ef4444, 0.16);
	}
	&__confirm {
		color: $bld-muted;
	}

	&__check-box {
		background: $bld-surface;
		border-color: $bld-border;
	}

	&__rows {
		color: $bld-muted;

		select {
			background: $bld-card;
			border-color: $bld-border;
			color: $bld-text;
		}
	}
	&__pager-range {
		color: $bld-muted;
	}
	&__pager-btns button {
		background: $bld-card;
		border-color: $bld-border;
		color: $bld-text;
	}
}
.bl-tc-skel {
	&__label,
	&__value,
	&__tabs,
	&__search,
	&__sort,
	&__check,
	&__badge,
	&__bar,
	&__pill,
	&__icon {
		background: #2c3650;
		background-image: linear-gradient(90deg, #2c3650 0%, #3a4763 50%, #2c3650 100%);
	}
	&__row {
		border-bottom-color: $bld-border;
	}
}

// topbar
.topbar {
	border-color: #36405a;
	background-color: #2c3650;
	&__logo__text {
		color: #fff;
	}
	.btl-view-control {
		.btl-link-view-toggler {
			border-color: #738bb8;
			background: #2c3650;
			color: #738bb8;
			&.active,
			&:hover,
			&:hover {
				background: $success;
				cursor: pointer;
				color: $white;
				border-color: $success;
			}
		}
	}
	.theme-mood-button {
		border-color: #738bb8;
	}
}

// category
.dnd-category-wrapper {
	.dnd-create-category {
		background: $dark-mood-darken;
		.dnd-create-category-text {
			color: $white;
		}
	}
}

// link
.btl-dnd-link {
	background-color: #36405a;
	.btl-dnd-link-body {
		.dnd-link-title {
			color: $white;
			&:before {
				color: darken($secondary-lighten, 10%);
			}

			.dnd-link-button {
				color: $white;
			}
		}
		.btl-dnd-link-button-group {
			.light-tooltip {
				background: #536082;
				color: $white;
				filter: drop-shadow(0px 4px 10.5px rgba(0, 5, 41, 0.04));
				&::after {
					border-top-color: #536082;
				}
			}
			.dnd-link-button {
				color: #697690;
				&:hover {
					color: $white;
				}
			}
		}
	}
	.btl-confirm-message {
		background: #36405a;
		.action-text {
			color: $light-darken;
		}
		.action-set {
			.action {
				color: $white;
				&.yes {
					background: $success-lighten;
				}
				&.no {
					background: $danger;
				}
			}
		}
	}
}

// form
.btl-form-control {
	background: #36405a;
	color: $white;
	border-color: #36405a;
	&::placeholder {
		color: $secondary-lighten;
	}
	&:disabled {
		background: #647397;
		box-shadow: inset 0 2px 4px rgb(255 255 255 / 4%);
	}
}
.dropdown {
	.dropdown-menu {
		background: #536082;
		ul {
			li {
				&:not(:last-child) {
					border-color: #5e6983;
				}
			}
		}
		.link {
			background: #536082;
			color: $light-darken;
			&:hover {
				color: $white;
			}
			&.delete {
				&:hover {
					color: $danger;
				}
			}
		}
		.btl-confirm-message {
			.action-text {
				color: $light-darken;
			}
			.action-set {
				.action {
					color: $white;
					&.yes {
						background: $success-lighten;
					}
					&.no {
						background: $danger;
					}
				}
			}
		}
	}
}

// analytic
.btl-analytic {
	.btl-list-view-calendar,
	.btl-filter-action,
	.btl-single-click-info-header {
		background-color: #2c3650;
		border-color: #2c3650;
		color: $light;

		&:has(> .btl-split-test-winner-image-container) {
			.btl-split-test-winner-image-container {
				background: linear-gradient(180deg, #3d4863 13%, #2c3650 83%);

				p {
					color: $light;
				}
			}
			.btl-split-test-winner-details-container {
				.btl-winner-link-box {
					background: #3d4863;

					> * {
						color: $light;
					}
				}
				.btl-winner-link-details {
					.btl-winner-link-clicks-details {
						> * {
							color: $light;
						}
					}
				}
			}
		}
	}
	.btl-single-click-info-header {
		span:not(.dashicons),
		a {
			color: $white;
		}
	}
	.btl-top-charts {
		.MuiAccordion-root {
			background-color: #2c3650;
			border: 1px solid #2c3650 !important;
			color: $light;

			.MuiIconButton-root {
				color: $light;
			}
		}
	}
	.apexcharts-yaxis .apexcharts-yaxis-texts-g text {
		fill: $white;
	}
}

.apexcharts-xaxis .apexcharts-xaxis-texts-g text tspan,
.apexcharts-yaxis .apexcharts-yaxis-texts-g text tspan {
	fill: $white;
}
.apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
	color: $white !important;
}
.btl-analytics-heading {
	color: $white;
}
.btl-analytics-filter__heading {
	color: $white;
}
.btl-analytic {
	color: $white;
	.btl-chart-preloader {
		background-color: #252f47;
	}
	.btl-analytics-chart {
		border-color: #252f47;
	}
	.btl-analytics-filter,
	.btl-analytic-table-wrapper,
	.btl-analytics-chart > div:first-child {
		background-color: #252f47;
		border: 1px solid #252f47;
	}
	.btl-top-charts > div .MuiAccordion-root.Mui-expanded.Mui-disabled {
		background-color: #252f47 !important;

		.MuiAccordionSummary-content p {
			color: $white !important;
		}
		.apexcharts-datalabels-group text {
			fill: $white !important;
		}
	}
}
.btl-analytic-table-wrapper {
	.rdt_TableHeader {
		background: #252f47;
		color: $white;
	}
	> header {
		background: #252f47;
		.btl-click-filter {
			input {
				background: #252f47;
				border-color: #36405a;
				color: $white;
				&::placeholder {
					color: $light-darken;
				}
			}
			a.btl-go-back-btn {
				color: $white;
				border-color: #36405a;

				&:hover {
					border-color: transparent;
				}
			}

			.rmsc .dropdown-container {
				border-color: #36405a;
			}
		}
	}
	.sc-bBXqnf {
		background: #252f47;
		color: $white;
	}
	.rdt_Table {
		background: #252f47;
		color: $white;
		.rdt_TableCol_Sortable {
			div {
				color: $white;
			}
		}
		.rdt_TableHeadRow,
		.rdt_TableRow {
			background: #252f47;
			color: $white;

			&:hover {
				background: #36405a;
			}
			.rdt_TableCol {
				color: $white;
				.rdt_TableCol_Sortable {
					color: $white;
					&:hover {
						color: $white;
					}
				}
			}
		}
		a {
			color: $white;
			&:hover {
				color: $white;
			}
		}
	}
	.rdt_Pagination {
		background-color: #252f47;
		color: $white;

		> div > svg {
			fill: #2c3650;
		}

		> div:last-child {
			button {
				svg {
					fill: $white;
				}
				&:disabled {
					svg {
						fill: $secondary-lighten;
					}
				}
			}
		}
	}
}

// date picker
.react-date-picker {
	.react-date-picker__wrapper {
		border-color: #36405a;
		.react-date-picker__inputGroup {
			.react-date-picker__inputGroup__input {
				color: $white;
			}
		}
	}
}

// for tab
.react-tabs__tab-list {
	.react-tabs__tab {
		background-color: #2c3650;
		color: $white;
		&.react-tabs__tab--selected {
			background-color: #252f47;
		}
	}
}
.btl-tab-panel-inner {
	background: #2c3650;
	border-radius: 8px;
	.short-description {
		background: #252f47;
		color: $light;
	}
	.submit {
		color: $white;
	}
	#response {
		color: #fff;
		.btl-migration-logs {
			background-color: #252f47;
			color: white;
			box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
		}
	}
}
.btl-tab-panel-inner .btl-tab-panel-header {
	color: #fff;
}

// form data
.btl-form-group {
	.btl-form-label,
	.link-options__body span {
		color: $light-darken;
	}
	.active-status {
		color: $light;
	}

	.btl-modal-select--full {
		.btl-react-select__control {
			background-color: #36405a !important;
			border-color: #36405a !important;
			.btl-react-select__value-container {
				.btl-react-select__single-value {
					color: $white;
				}
				.btl-react-select__input {
					input {
						color: $white !important;
					}
				}
			}
			&.btl-react-select__control--is-focused {
				background-color: #36405a !important;
			}
			.btl-react-select__placeholder {
				color: $white;
			}
		}
		.btl-react-select__multi-value {
			background: #252f47 !important;
			.btl-react-select__multi-value__label {
				color: $white !important;
			}
			.btl-react-select__multi-value__remove {
				svg {
					color: $white;
				}
				&:hover {
					svg {
						color: red;
					}
				}
			}
		}
		.btl-react-select__indicators {
			.btl-react-select__indicator-separator {
				background-color: #666182;
			}
			.btl-react-select__indicator {
				color: $white;
			}
		}
	}
	.btl-utm-action-btns button,
	> button {
		background-color: rgba(0, 0, 0, 0);
		color: $light;
	}

	.btl-form-field {
		// custom domain
		.server-type-wrapper {
			color: $light;
		}
		.btl-individual-config-blocks {
			.btl-instruction-block-wrapper,
			code {
				background-color: #36405a;
				border-color: #6e7178;
				color: #fff;
			}

			.btl-code-block-wrapper {
				color: $light;
			}
		}
	}

	.link-options__body {
		input[type='text'] {
			background-color: #36405a;
			border-color: $secondary-darken;
			color: $white;
		}
		.button.button-secondary {
			background-color: #36405a;
			border-color: $secondary-darken;
			color: $white;
		}
	}
}
.btl-checkbox-field {
	.text {
		color: $white;
	}
	.btl-check:checked + .text:before {
		color: lighten($success, 10%);
	}
	.btl-check:disabled + .text:before {
		background: #647397;
		color: #647397;
		box-shadow: inset 0 2px 4px rgb(255 255 255 / 4%);
		cursor: initial;
	}
}
.btl-radio-group .btl-radio input + span {
	color: $secondary-lighten;
}
.btl-radio-group .btl-radio input:checked + span {
	color: $white;
}
.btl-file-chooser label {
	color: $white;
}
.btl-file-chooser input {
	color: $white;
}
.btl-tooltip {
	span.dashicons.dashicons-info-outline {
		color: #818caa;
	}
}

// list view
.btl-list-view {
	> header {
		.btl-links-filter {
			.btl-click-filter {
				border-color: #2c3650;
				background-color: #2c3650;
				color: $light;
				input {
					color: $white;
					&::placeholder {
						color: $light;
					}
				}
				&:before {
					color: $light;
				}
			}
			.btl-list-view-select {
				.btl-react-select__control {
					background-color: #2c3650;
					border-color: #2c3650;
					.btl-react-select__input {
						input {
							color: $light !important;
						}
					}
					.btl-react-select__placeholder {
						color: $light;
					}
					.btl-react-select__single-value {
						color: $white;
					}
					.btl-react-select__indicators {
						.btl-react-select__indicator {
							svg {
								fill: $light;
							}
						}
					}
				}
			}
			.btl-list-view-calendar {
				background-color: #2c3650;
				border-color: #2c3650;
				color: $light;
				margin-right: 12px;
			}
			.btl-link-input-field {
				background-color: #2c3650;
				border-color: #2c3650;
				color: $white;
				&::placeholder {
					color: $light;
				}
			}
		}
		.btl-bulk-actions {
			.btl-list-view-select {
				.btl-react-select__control {
					background-color: #2c3650;
					border-color: #2c3650;
					.btl-react-select__input {
						input {
							color: $light !important;
						}
					}
					.btl-react-select__placeholder {
						color: $light;
					}
					.btl-react-select__single-value {
						color: $white;
					}
					.btl-react-select__indicators {
						.btl-react-select__indicator {
							svg {
								fill: $light;
							}
						}
					}
				}
			}
			.btl-link-input-field {
				background-color: #2c3650;
				border-color: #2c3650;
				color: $white;
				&::placeholder {
					color: $light;
				}
			}
			.btl-link-apply-button {
				background: $success;
				color: $white;
				border-color: $success;
			}
		}
	}
	.rdt_Table {
		.rdt_TableHead {
			.rdt_TableHeadRow {
				border-color: #2c3650;
				background-color: #2c3650;
				.rdt_TableCol {
					.rdt_TableCol_Sortable {
						color: $white;
						&:hover {
							color: $white;
						}
					}
				}
			}
		}
		.rdt_TableBody {
			.rdt_TableRow {
				border-color: #2c3650;
				background-color: #2c3650;
				.rdt_TableCell {
					div {
						color: $light;
						a {
							color: $success-lighten;
						}
					}
					.btl-link-title {
						color: $white;
					}
					.btl-short-url-wrapper {
						.btl-short-url {
							background: rgba($success, 0.3);
							color: $white;
							font-weight: 500;
						}
					}
					.dnd-link-button {
						color: $light-darken;
						&:hover {
							color: $white;
						}
					}
					.btl-confirm-message {
						background: transparent;
						.action-text {
							color: $white;
						}
					}
				}
			}
		}
		.sc-bBXrwG {
			background: #2c3650;
			color: $white;
		}
	}
	.rdt_Pagination {
		color: $white;

		> div > svg {
			fill: #2c3650;
		}

		> div:last-child {
			button {
				svg {
					fill: $white;
				}
				&:disabled {
					svg {
						fill: $secondary-lighten;
					}
				}
			}
		}
	}
	.sc-bBXqnf {
		background-color: #2c3650;
		border-radius: 5px;
		color: $white;
	}
}

.btl-gopremium-container {
	color: $light;
	.btl-gopremium {
		&-title {
			color: $white;
		}
		&-content {
			p {
				color: $white;
			}
		}
	}
}


.btl-broken-links-panel {
	.btl-broken-link-checker-wrapper {
		.btl-broken-link-checker {
			h3 {
				color: $white;
			}
			p {
				color: $light;
			}
			.btl-schedule-wrapper {
				label {
					color: $light;
				}
			}
		}
		&:not(:last-child) {
			margin-bottom: 15px;
		}
		button {
			color: #fff !important;
		}
	}

	.btl-fullsite {
		.btl-broken-link-checker-wrapper-left {
			background-color: inherit;
			border-color: #6e7178;
			h4 {
				color: $light;
			}
		}
		.btl-broken-link-checker-wrapper-right {
			.btl-flc-scan-details,
			.MuiBox-root > .MuiTypography-caption {
				color: $light;
			}
			.btl-flc-scan-details {
				.btl-flc-scanned-count {
					> div {
						background-color: #36405a;
						border-color: #6e7178;
						color: $light;
					}
				}
			}
		}
	}
	&.btl-broken-links-table-wrapper--fullsite {
		.btl-subheader-form {
			button.button {
				background-color: #36405a;
				border-color: #6e7178;
				color: $light;
			}
			.btl-subheader-form-input {
				input,
				.btl-react-select__control {
					background-color: #36405a;
					border-color: #6e7178;
					color: $light;

					&::placeholder {
						color: $light;
					}
				}

				.btl-react-select__value-container > div {
					color: $light;

					.btl-react-select__input > input {
						height: 30px;
					}
				}
			}
		}

		.btl-broken-links-table {
			.rdt_Table {
				.rdt_TableHeadRow,
				.rdt_TableRow {
					border-color: #6e7178;

					.rdt_TableCell {
						.betterlinks-broken-links-status-column.link-label:has(span.btl-no-status) {
							background-color: #36405a;
							border: 1px solid #e99c85;
						}
					}
				}
				> div:nth-child(2):has(:not(.rdt_TableBody)) {
					background-color: transparent;
					border-color: #6e7178;
					color: $light;

					.btl-no-data-found {
						svg {
							stroke: #6e7178;
							* {
								fill: #36405a;
							}
						}
					}
				}

			}
		}
	}
}

.btl-broken-links-table-wrapper {
	> header {
		.btl-bulk-actions {
			.btl-select {
				&-button {
					color: #fff;
				}
				.btl-react-select__control {
					background-color: #2c3650;
					border-color: #2c3650;
					.btl-react-select__input {
						input {
							color: $light !important;
						}
					}
					.btl-react-select__placeholder {
						color: $light;
					}
					.btl-react-select__single-value {
						color: $white;
					}
					.btl-react-select__indicators {
						.btl-react-select__indicator {
							svg {
								fill: $light;
							}
						}
					}
				}
			}
		}
	}
	.sc-bBXrwG {
		background: #2c3650;
		color: #fff;
	}
	.rdt_Table {
		.rdt_TableHead {
			.rdt_TableHeadRow {
				border-color: #2c3650;
				background-color: #2c3650;
				.rdt_TableCol {
					div {
						color: $white;
					}
					.rdt_TableCol_Sortable {
						color: $white;
						&:hover {
							color: $white;
						}
					}
				}
			}
		}
		.rdt_TableBody {
			.rdt_TableRow {
				border-color: #2c3650;
				background-color: #2c3650;
				.rdt_TableCell {
					div {
						color: $light;
						a {
							color: $success-lighten;

							& > span {
								color: $light;
							}
						}
					}
					div.btl-action-btns a > span {
						color: #a9adb4;

						> svg {
							fill: #a9adb4;
						}
					}
					.btl-broken-link-table-action button svg {
						fill: #a9adb4;
					}
					.btl-link-title {
						color: $white;
					}
					.btl-short-url-wrapper {
						.btl-short-url {
							background: rgba($success, 0.3);
							color: $white;
							font-weight: 500;
						}
					}
					.dnd-link-button {
						color: $light-darken;
						&:hover {
							color: $white;
						}
					}
					.btl-confirm-message {
						background: transparent;
						.action-text {
							color: $white;
						}
					}
				}
			}
		}
	}
	.sc-bCwfaz {
		background-color: #2c3650;
		color: $white;
		border-color: transparent;
	}
	.rdt_Pagination {
		background: transparent;
		color: $white;
		> div:last-child {
			button {
				svg {
					fill: $white;
				}
				&:disabled {
					svg {
						fill: $secondary-lighten;
					}
				}
			}
		}
	}
	input[type='text'] {
		border: 1px solid #485474;
		background-color: #485474;
		color: #fff;
	}
}
.btl-analytic {
	.btl-analytic-table-wrapper .rdt_Table .rdt_TableCell .btl-parameter-tracking-values {
		background-color: #36405a;
		border: 1px solid #525c77;
	}
}
.scheduleweekdayselect {
	label {
		border-collapse: collapse;
		input {
			display: none;
		}
		span {
			display: inline-block;
			border: 1px solid #485474;
			border-right: none;
			color: #fff;
		}
		&:first-child {
			span {
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;
			}
		}
		&:last-child {
			span {
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;
				border-right: 1px solid #485474;
			}
			input:checked + span {
				border-color: #0742e7;
				color: #0742e7;
				position: relative;
				&:after {
					display: none;
				}
			}
		}
		input:checked + span {
			border-color: #0742e7;
			color: #0742e7;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				border-right: 1px solid #0742e7;
			}
		}
	}
}
.MuiInputBase-formControl {
	input {
		border: 1px solid #485474;
		background-color: #485474;
		color: #fff;
	}
}

.btl-scan-outputs {
	.btl-scan-output {
		background: #485474;
		box-shadow: 0px 2px 5px rgba(255, 255, 255, 0.08);
		.count {
			color: #fff;
		}
		.title {
			color: #b0b2ba;
		}
	}
}

.btl-broken-links-panel-disabled {
	.btl__control--is-disabled {
		background-color: #536082 !important;
		border-color: #536082 !important;
	}
	.scheduleweekdayselect {
		pointer-events: none;
		label {
			span {
				background: #536082;
				color: #fff;
			}
		}
	}
	.MuiInputBase-formControl {
		input {
			border-color: #536082;
			background-color: #536082;
			width: 150px;
		}
		&:before,
		&:after {
			display: none;
		}
	}
	button:disabled {
		background: #536082;
		color: #818caa;
		border-color: #536082;
		box-shadow: none;
		cursor: not-allowed;
		&:hover {
			background: #536082;
			color: #818caa;
			border-color: #536082;
			box-shadow: none;
			cursor: not-allowed;
		}
	}
	input.btl-form-control {
		&:disabled {
			background: #536082;
			border-color: #536082;
			box-shadow: none;
			cursor: initial;
		}
	}
	.btl-scan-outputs {
		.btl-scan-output {
			.icon {
				border-radius: 50%;
				position: relative;
				z-index: 1;
				&:after {
					content: '';
					position: absolute;
					top: 2px;
					bottom: 2px;
					left: 2px;
					right: 2px;
					border-radius: 50%;
					background: #fff;
					z-index: -1;
				}
				img,
				svg {
					height: 25px;
				}
			}
		}
	}
}

.btl-select {
	.btl__control {
		border: 1px solid #485474;
		background-color: #485474;
		color: #fff;
		.btl__value-container {
			.btl__single-value {
				color: #fff;
			}
		}
	}
	.btl__menu {
		background-color: #485474;
		&-list {
			.btl__option {
				color: #fff;
				&:hover {
					color: #485474;
				}
			}
		}
	}
}
.pro-badge-new {
	> svg {
		fill: $dark;
	}
}

.btl-analytics-chart-overlay {
	background-color: rgba(54, 64, 90, 0.7);

	.btl-graphteaser-icon {
		svg path {
			stroke: #fff;
		}
		> p {
			color: $light;
		}
	}

	.MuiPaper-root {
		background-color: #252f47;

		.MuiCardContent-root {
			h5,
			span,
			ul > li span {
				color: $white;
			}
		}
	}

	// Premium PRO teaser card (dark)
	&.btl-pro-teaser {
		background-color: rgba(31, 40, 61, 0.72);

		> .btl-pro-teaser__card {
			background: #252f47;
			border-color: #36405a;
			box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
		}

		.btl-pro-teaser__pill {
			background: rgba(126, 162, 255, 0.16);
			color: #9db6ff;
		}

		.btl-pro-teaser__title {
			color: $white;
		}

		.btl-pro-teaser__desc {
			color: #c3cce0;
		}

		.btl-pro-teaser__features .btl-graphteaser-icon {
			> span,
			> svg {
				background: rgba(126, 162, 255, 0.16);
				color: #9db6ff;
			}

			p {
				color: #d0d5dd;
			}
		}
	}
}
.rdt_Table {
	> div {
		background: #252f47;
		color: white;
	}
}

// ---------------------------------------------------------------------------
// Analytics redesign (dark)
// Reuses the $bld-* tokens declared above for the Manage Links board.
// ---------------------------------------------------------------------------
.bl-an {
	color: $bld-text;

	&__title,
	&__sectitle {
		color: $bld-text;
	}
	&__subtitle,
	&__secmeta {
		color: $bld-muted;
	}
	&__secrule,
	&__nav {
		border-color: $bld-border;
	}
	&__secrule {
		background: $bld-border;
	}

	&__range {
		border-color: $bld-border;
		background: $bld-surface;
	}
	&__range-btn,
	&__range-icon {
		color: $bld-muted;

		&:hover {
			color: $bld-text;
		}
		&.is-active {
			background: $bld-card;
			color: #8ba9ff;
			box-shadow: none;
		}
	}
	&__picker {
		border-left-color: $bld-border;
	}

	&__btn {
		border-color: $bld-border;
		background: $bld-card;
		color: $bld-text;

		svg {
			color: $bld-muted;
		}
		&:hover,
		&.is-active {
			border-color: #8ba9ff;
			color: #8ba9ff;
		}
	}

	&__pop {
		border-color: $bld-border;
		background: $bld-card;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	}
	&__menu-item {
		color: $bld-text;

		&:hover {
			background: $bld-surface;
		}
		&.is-active {
			background: rgba(139, 169, 255, 0.16);
			color: #8ba9ff;
		}
	}
	&__menu-sep {
		background: $bld-border;
	}

	&__tab {
		color: $bld-muted;

		&:hover:not(:disabled) {
			color: $bld-text;
			background: $bld-surface;
		}
		&.is-active {
			background: rgba(139, 169, 255, 0.16);
			color: #8ba9ff;
		}
	}
}

.bl-hero {
	border-color: $bld-border;
	background: $bld-card;

	&__rail {
		border-right-color: $bld-border;
	}
	&__label,
	&__na {
		color: $bld-muted;
	}
	&__value {
		color: $bld-text;
	}
	&__fact {
		+ .bl-hero__fact {
			border-top-color: $bld-border;
		}
		dt {
			color: $bld-muted;
		}
		dd {
			color: $bld-text;
		}
	}
	&__key {
		color: $bld-muted;

		b {
			color: $bld-text;
		}
	}
}

.bl-stat {
	border-color: $bld-border;
	background: $bld-card;

	&__head {
		color: $bld-muted;
	}
	&__value {
		color: $bld-text;
	}
	&__value-suffix,
	&__foot,
	&__legend {
		color: $bld-muted;
	}
	&__bar {
		background: $bld-surface;
	}

	&--na {
		.bl-stat__na-title {
			color: #7c869c;
		}
		.bl-stat__na-hint {
			color: $bld-muted;
		}
	}
}

.bl-skel {
	background-color: #313c57;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100%);
}
.bl-spark--empty {
	background: repeating-linear-gradient(90deg, #313c57 0 6px, transparent 6px 12px);
}

@media screen and (max-width: 1024px) {
	.bl-hero__rail {
		border-right: none;
		border-bottom: 1px solid $bld-border;
	}
}

.bl-an__error {
	border-color: $bld-border;
	background: $bld-card;

	.bl-an__error-title {
		color: $bld-text;
	}
	.bl-an__error-text {
		color: $bld-muted;
	}
}

// Sources / Technology bar-list cards (dark)
.bl-bars {
	border-color: $bld-border;
	background: $bld-card;

	&__head {
		border-bottom-color: $bld-border;
	}
	&__icon {
		color: #8ba9ff;
	}
	&__title,
	&__label,
	&__value {
		color: $bld-text;
	}
	&__subtitle,
	&__share,
	&__foot,
	&__state-text {
		color: $bld-muted;
	}
	&__row + .bl-bars__row {
		border-top-color: $bld-border;
	}
	&__chip,
	&__state-badge {
		background: $bld-surface;
		color: $bld-muted;
	}
	&__track {
		background: $bld-surface;
	}
	&__foot {
		border-top-color: $bld-border;
	}
	&__state-title {
		color: #7c869c;
	}
}

// Per-link performance table (dark)
.bl-tbl {
	border-color: $bld-border;
	background: $bld-card;

	&__head-icon {
		color: #8ba9ff;
	}
	&__title,
	&__strong,
	&__link-name {
		color: $bld-text;
	}
	&__subtitle,
	&__slug,
	&__count,
	&__rows,
	&__eye {
		color: $bld-muted;
	}

	&__search input,
	&__select,
	&__apply,
	&__page {
		border-color: $bld-border;
		background-color: $bld-surface;
		color: $bld-text;
	}
	&__search svg {
		color: $bld-muted;
	}
	&__th-label {
		color: $bld-text;
	}
	// Keep the amber Pro pill readable on the dark card.
	&__pro {
		border-color: rgba(255, 233, 166, 0.35);
		background: rgba(255, 168, 8, 0.16);
		color: #ffc65c;
	}
	&__apply:hover:not(:disabled),
	&__page:hover:not(:disabled) {
		border-color: #8ba9ff;
		color: #8ba9ff;
	}

	&__table {
		thead th {
			background: $bld-surface;
			border-top-color: $bld-border;
			border-bottom-color: $bld-border;
			color: $bld-muted;
		}
		tbody tr {
			border-bottom-color: $bld-border;

			&:hover {
				background: rgba(255, 255, 255, 0.03);
			}
			&.is-selected {
				background: rgba(139, 169, 255, 0.1);
			}
		}
	}
	&__sort.is-active {
		color: $bld-text;

		svg {
			color: #8ba9ff;
		}
	}
	&__link-icon {
		background: rgba(139, 169, 255, 0.16);
		color: #8ba9ff;
	}
	&__target {
		color: #8ba9ff;
	}
	&__eye:hover {
		background: $bld-surface;
		color: #8ba9ff;
	}
	&__empty-row td {
		color: $bld-muted;
	}
	&__skel-head {
		background: $bld-surface;
		border-top-color: $bld-border;
		border-bottom-color: $bld-border;
	}
	&__skel-row {
		border-bottom-color: $bld-border;
	}
}

// Geography (dark)
.bl-geo {
	&__panel {
		border-color: $bld-border;
		background: $bld-card;
	}
	&__head {
		border-bottom-color: $bld-border;
	}
	&__icon {
		color: #8ba9ff;
	}
	&__title,
	&__name,
	&__value {
		color: $bld-text;
	}
	&__subtitle,
	&__rank,
	&__share,
	&__state-text {
		color: $bld-muted;
	}
	&__row + .bl-geo__row {
		border-top-color: $bld-border;
	}
	&__track {
		background: $bld-surface;
	}
	&__legend {
		background: rgba(37, 47, 71, 0.85);
		color: $bld-muted;
	}
	&__zoom-btn {
		border-color: $bld-border;
		background: rgba(37, 47, 71, 0.92);
		color: $bld-text;

		&:hover:not(:disabled) {
			color: #8ba9ff;
			border-color: #8ba9ff;
		}
	}
	&__tip {
		border-color: $bld-border;
		background: $bld-card;
		box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
	}
	&__tip-flag {
		background: $bld-surface;
		border-color: $bld-border;
	}
	&__tip-name,
	&__tip-clicks {
		color: $bld-text;
	}
	&__tip-clicks.is-empty {
		color: $bld-muted;
	}
	&__state-badge {
		background: $bld-surface;
		color: $bld-muted;
	}
	&__state-title {
		color: #7c869c;
	}
	&__skel-row {
		border-bottom-color: $bld-border;
	}
}

// Timing heatmap (dark)
.bl-heat {
	border-color: $bld-border;
	background: $bld-card;

	&__head {
		border-bottom-color: $bld-border;
	}
	&__icon,
	&__insight svg {
		color: #8ba9ff;
	}
	&__title,
	&__insight strong {
		color: $bld-text;
	}
	&__subtitle,
	&__hour,
	&__day,
	&__insight,
	&__legend,
	&__state-text {
		color: $bld-muted;
	}
	&__foot {
		border-top-color: $bld-border;
	}
	&__cell.is-peak {
		box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
	}
	&__legend-swatch {
		border-color: $bld-border;
	}
	&__state-badge {
		background: $bld-surface;
		color: $bld-muted;
	}
	&__state-title {
		color: #7c869c;
	}
}

// Attention / top movers (dark)
.bl-mv {
	border-color: $bld-border;
	background: $bld-card;

	&__head {
		border-bottom-color: $bld-border;
	}
	&__title,
	&__name {
		color: $bld-text;
	}
	&__subtitle,
	&__clicks,
	&__rank,
	&__empty {
		color: $bld-muted;
	}
	&__row + .bl-mv__row {
		border-top-color: $bld-border;
	}
}
.bl-mv__note {
	border-color: $bld-border;
	background: $bld-card;
	color: $bld-muted;

	svg {
		color: #8ba9ff;
	}
}
// Sticky section nav needs the dark page canvas behind it.
.bl-an__nav {
	background: #36405a;
}

// Single-link analytics (dark)
.bl-an__back {
	border-color: $bld-border;
	background: $bld-card;
	color: $bld-text;

	svg {
		color: $bld-muted;
	}
	&:hover {
		border-color: #8ba9ff;
		color: #8ba9ff;
	}
}
.bl-slc {
	border-color: $bld-border;
	background: $bld-card;

	&__icon {
		background: rgba(139, 169, 255, 0.16);
		color: #8ba9ff;
	}
	&__title {
		color: $bld-text;
	}
	&__logged {
		color: $bld-muted;
	}
	&__field-label {
		color: $bld-muted;
	}
	&__field-box {
		background: $bld-surface;
		border-color: $bld-border;
	}
	&__field-value {
		color: $bld-text;
	}
	&__field-btn {
		color: $bld-muted;

		&:hover {
			background: $bld-card;
			color: #8ba9ff;
		}
	}
}
.bl-sov {
	&__chart {
		border-color: $bld-border;
		background: $bld-card;
	}
	&__chart-title {
		color: $bld-text;

		svg {
			color: #8ba9ff;
		}
	}
	&__chart-meta {
		color: $bld-muted;
	}
}

// Click log table (dark) — extends the .bl-tbl dark rules
.bl-clog {
	&__cols-item {
		color: $bld-text;

		&:hover {
			background: $bld-surface;
		}
	}
	&__ib svg {
		color: $bld-muted;
	}
	&__mono,
	&__muted,
	&__expandable {
		color: $bld-muted;
	}
	&__locked {
		background: $bld-surface;
		color: $bld-muted;
	}
	&__ref {
		color: #8ba9ff;
	}
	tbody tr.is-expanded {
		background: $bld-surface;

		.bl-clog__expandable {
			color: $bld-text;
		}
	}
}

// Pro lock / teaser (dark)
// The light theme's white veil and white card would glow against the dark
// canvas, so both are restated in the dark palette. Mirrors the dark treatment
// of the Link Scanner teaser card.
.bl-an-lock {
	&::after {
		background: linear-gradient(180deg, rgba(54, 64, 90, 0.4) 0%, rgba(54, 64, 90, 0.8) 50%, rgba(54, 64, 90, 0.4) 100%);
	}
	&__cta {
		border-color: $bld-border;
		background: $bld-card;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	}
	&__pill,
	&__point-icon {
		background: rgba(126, 162, 255, 0.16);
		color: #9db6ff;
	}
	&__title {
		color: $bld-text;
	}
	&__text {
		color: #c3cce0;
	}
	&__points p {
		color: #d0d5dd;
	}
	&__note {
		color: $bld-muted;
	}
}
.bl-an__tab-pro {
	border-color: rgba(255, 233, 166, 0.32);
	background: rgba(255, 168, 8, 0.12);
	color: #f5c257;
}

// Pro-locked bulk action in the list view (dark)
.bl-list .bl-list__bulk-btn.is-pro {
	border-color: rgba(255, 233, 166, 0.32);
	background: rgba(255, 168, 8, 0.12);
	color: #f5c257;
}

// ---- Board (see components/_board.scss) ---------------------------------
.blb-col {
	background: $bld-surface;
	border-color: $bld-border;
	.blb-col__title {
		color: $bld-text;
	}
	.blb-col__clicks {
		color: $bld-muted;
	}
	&--add {
		background: transparent;
		.dnd-create-category-text {
			color: #767c8b;
		}
	}
}

.blb-card {
	background: $bld-card;
	border-color: $bld-border;
	box-shadow: none;

	.blb-card__title,
	.blb-card__clicks {
		color: $bld-text;
	}
	.blb-card__clicks em {
		color: $bld-muted;
	}
	.blb-card__slug {
		background: $bld-surface;
		border-color: $bld-border;
	}
	.blb-card__slug-text {
		color: #b8c2d9;
	}
	.blb-card__tag {
		background: rgba(#fff, 0.08);
		color: $bld-muted;
	}
	.blb-card__foot {
		border-top-color: $bld-border;
	}
	.blb-card__foot-actions {
		background: $bld-surface;
		border-color: $bld-border;
		box-shadow: 0 6px 18px rgba(#000, 0.35);

		.dnd-link-button {
			color: $bld-muted;
		}
		.btl-confirm-message .action-text {
			color: $bld-text;
		}
	}
}