/* Bootstrap icon overrides (CSP-safe, recolorable via mask-image) */

:root {
	--pp-icon-check: url("/lib/bootstrap-icons/icons/check.svg");
	--pp-icon-dash: url("/lib/bootstrap-icons/icons/dash-lg.svg");
	--pp-icon-list: url("/lib/bootstrap-icons/icons/list.svg");
	--pp-icon-chevron-down: url("/lib/bootstrap-icons/icons/chevron-down.svg");
	--pp-icon-chevron-left: url("/lib/bootstrap-icons/icons/chevron-left.svg");
	--pp-icon-chevron-right: url("/lib/bootstrap-icons/icons/chevron-right.svg");
	--pp-icon-close: url("/lib/bootstrap-icons/icons/x-lg.svg");
}

/* Checkbox: render check/dash with mask; size 1em as requested */
.form-check-input[type="checkbox"] {
	position: relative;
}

.form-check-input:checked[type="checkbox"] {
	--bs-form-check-bg-image: none; /* disable Bootstrap data-URI */
}

.form-check-input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1em;
	height: 1em;
	transform: translate(-50%, -50%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0;
	transition: opacity .1s ease-in-out;
	pointer-events: none;
}
.form-check-input[type="checkbox"]:checked::before {
	-webkit-mask-image: var(--pp-icon-check);
	mask-image: var(--pp-icon-check);
	background-color: #fff;
	opacity: 1;
}
.form-check-input[type="checkbox"]:indeterminate::before {
	-webkit-mask-image: var(--pp-icon-dash);
	mask-image: var(--pp-icon-dash);
	background-color: #fff;
	opacity: 1;
}

/* Radio: render inner dot via mask */
.form-check-input[type="radio"] {
	position: relative;
	--bs-form-check-bg-image: none; /* disable Bootstrap data-URI */
}
.form-check-input[type="radio"]:checked::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.65em;
	height: 0.65em;
	transform: translate(-50%, -50%);
	-webkit-mask-image: url("/lib/bootstrap-icons/icons/record-fill.svg");
	mask-image: url("/lib/bootstrap-icons/icons/record-fill.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: #fff;
	pointer-events: none;
}

/* Navbar toggler: recolorable list icon */
.navbar-toggler-icon {
	background-image: none !important;
	-webkit-mask-image: var(--pp-icon-list);
	mask-image: var(--pp-icon-list);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: currentColor;
}

/* Accordion chevron: recolorable down/up indicator */
.accordion-button::after {
	background-image: none !important;
	-webkit-mask-image: var(--pp-icon-chevron-down);
	mask-image: var(--pp-icon-chevron-down);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 1rem 1rem;
	mask-size: 1rem 1rem;
	background-color: currentColor;
	transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::after {
	transform: rotate(-180deg);
}

/* Close button: recolorable X */
.btn-close {
	background-image: none !important;
	-webkit-mask-image: var(--pp-icon-close);
	mask-image: var(--pp-icon-close);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 1em 1em;
	mask-size: 1em 1em;
	background-color: currentColor;
}

/* Carousel controls: recolorable chevrons */
.carousel-control-prev-icon {
	background-image: none !important;
	-webkit-mask-image: var(--pp-icon-chevron-left);
	mask-image: var(--pp-icon-chevron-left);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 1.5rem 1.5rem;
	mask-size: 1.5rem 1.5rem;
	background-color: currentColor;
}
.carousel-control-next-icon {
	background-image: none !important;
	-webkit-mask-image: var(--pp-icon-chevron-right);
	mask-image: var(--pp-icon-chevron-right);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 1.5rem 1.5rem;
	mask-size: 1.5rem 1.5rem;
	background-color: currentColor;
}

/* Validation icons: use external images (CSP-safe) */
.form-control.is-valid,
.was-validated .form-control:valid {
	background-image: url("/lib/bootstrap-icons/icons/check-circle.svg");
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
	background-image: url("/lib/bootstrap-icons/icons/exclamation-circle.svg");
}
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
	--bs-form-select-bg-icon: url("/lib/bootstrap-icons/icons/check-circle.svg");
}
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
	--bs-form-select-bg-icon: url("/lib/bootstrap-icons/icons/exclamation-circle.svg");
}