/**
 * @copyright Martin Procházka (c) 2025
 * @license   MIT License
 */

input:read-only:not([type=range],.form-check-input) {
	background: var(--bs-light);
	color: var(--bs-secondary);
}

input:-webkit-autofill:is(*,:focus,:active,:hover) {
	filter: none; /* needed for firefox! */
	box-shadow: 0 0 0 100px #fff inset;
	border-color: var(--bs-orange) !important;
}

textarea { min-height: 38px; }
textarea.code {
	font-size: .7rem;
	font-family: Consolas, "Courier New", Courier, monospace;
}


.form-label:has(.required-indicator) { font-weight: bold; }
.form-label:has(.required-indicator)::after {
	color: var(--bs-red);
	content: "*";
	margin-left: 4px;
}

.form-text { color: var(--bs-tertiary-color); font-size: .8rem; line-height: 1.5; display: block; }

.input-group-text { background-color: var(--bs-dark-bg-subtle) !important; };


/**
 * TextArea counter
 */
.form-group span[data-count=maxlength] {
	position: absolute;
	text-align: center;
	bottom: 6px;
	left: 5px;
	right: 5px;
}


/**
 * ====================================
 * Summernote
 * ====================================
 */
.note-editor.card {
	border-color: var(--bs-border-color);
	background-color: var(--bs-body-bg);
	margin-bottom: 0px;
}

.note-editor.note-airframe p:last-child { margin-bottom: 0px; }
.note-editor.note-airframe .note-placeholder { padding: 0px; }

.note-editor.note-airframe .note-popover { position: absolute; }
.note-editor.note-airframe .note-popover .note-popover-content {
	--bs-popover-body-padding-y: .5rem;
	--bs-popover-body-padding-x: .5rem;
	display: flex;
	flex-flow: row wrap;
	gap: .5rem;
}

.note-editor.note-airframe .note-popover .popover-arrow { position: absolute; }
.note-editor.note-airframe .note-popover[data-popper-placement=bottom] .popover-arrow { left: .5rem; }


/**
 * Fix washed up button coloring
 */
.note-editor .note-btn:not(:hover, :focus, .active) {
	border-color: var(--bs-btn-border-color);
	background-color: rgba(var(--bs-secondary-rgb), .125);
	color: var(--bs-btn-color);
}

.note-editor .note-btn:hover {
	border-color: var(--bs-btn-hover-border-color);
	background-color: var(--bs-btn-hover-bg);
	color: var(--bs-btn-hover-color);
}

.note-editor .note-btn:is(:focus, .active) {
	border-color: var(--bs-btn-active-border-color);
	background-color: var(--bs-btn-active-bg);
	color: var(--bs-btn-active-color);
}


/**
 * ====================================
 * reCAPTCHA
 * ====================================
 */
.g-recaptcha iframe { margin: -1px 0px 0px -2px; }
.g-recaptcha > div  { overflow: hidden; max-width: 298px; width: auto !important; height: 74px !important; }
.g-recaptcha {
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-sm);
	box-shadow: var(--bs-box-shadow-sm);
	padding: 4px;
}

.g-recaptcha[data-theme=light] { background-color: #f9f9f9; }
.g-recaptcha[data-theme=dark] { background-color: #222; }


/**
 * ====================================
 * TomSelect
 * ====================================
 */
[data-bs-theme=light], :root {
	--ts-image-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	--ts-image-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
	--ts-image-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");

	--ts-wrapper-disabled-color: var(--bs-secondary);
	--ts-wrapper-disabled-bg: var(--bs-light);
}

[data-bs-theme=dark] {
	color-scheme: dark;
	--ts-image-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");

	--ts-wrapper-disabled-bg: var(--bs-gray-dark);
}


.ts-wrapper.disabled { background: var(--ts-wrapper-disabled-bg); color: var(--ts-wrapper-disabled-color); }
.ts-wrapper.multi:is(.form-select):is(.has-items) { background-image: none; }
.ts-wrapper .ts-control {
	--ts-input-padding-y: .275rem;
	--ts-input-padding-x: .625rem;
	--ts-row-height: 29.2px;
	--ts-row-count: 1;

	--ts-pr-min: calc(var(--ts-input-padding-x) / 2);

	min-height: calc(var(--ts-row-height) * var(--ts-row-count) + var(--ts-input-padding-y) * 2 - 2);
	padding: var(--ts-input-padding-y) var(--ts-input-padding-x) !important;
}

.ts-wrapper.single.large .ts-control { --ts-row-height: 52.5px; }
.ts-wrapper:not(.single) .ts-control { align-items: flex-start; gap: .25rem; }
.ts-wrapper.flex-column .ts-control { flex-direction: column; }
.ts-wrapper.multi-row .ts-control { --ts-row-count: 3; }

/* Smaller input */
.ts-wrapper:is(.form-select-sm) .ts-control,
.input-group-sm > .ts-wrapper .ts-control {
	--ts-input-padding-y: .2rem;
	--ts-input-padding-x: .5rem;
	--ts-row-height: 19px;
}


.ts-wrapper .ts-control input { color: var(--bs-body-color); flex-grow: 0; }
.ts-wrapper .ts-control input:first-child { width: 100% !important; }
.ts-wrapper .ts-control input:not(:first-child) { flex: 0 0 auto !important; }
.ts-wrapper.disabled .ts-control input:not(:first-child) {
	position: absolute;
	left: -10000px;
	opacity: 0;
}


.ts-wrapper.single .ts-control .item { color: var(--bs-body-color); flex-grow: 1; }
.ts-wrapper.flex-column .ts-control .item { width: 100%; justify-content: space-between; }
.ts-wrapper.multi .ts-control .item {
	background-color: var(--bs-secondary);
	border-color: var(--bs-border-color);
	color: var(--bs-white);
	padding: 0px calc(var(--ts-input-padding-x) / 1.5);
	margin: 0px;
	border-radius: var(--bs-border-radius-sm);
	transition: background-color .15s ease-in-out,
				color .15s ease-in-out;
}

.ts-wrapper.multi .ts-control > .item.active {
	background-color: var(--bs-primary) !important;
	color: var(--bs-white) !important;
}

.ts-wrapper.multi.disabled .ts-control .item:is(*, .active) {
	background-color: var(--bs-secondary);
	border-color: var(--bs-border-color);
	color: var(--bs-white);
}

/* Remove button */
.ts-wrapper.plugin-remove_button .item .remove:hover { background-color: rgba(var(--bs-black-rgb), .125); }
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
	padding: 0px calc(var(--ts-input-padding-x) / 1.5);
	padding-bottom: 2px;
	margin-left: calc(var(--ts-input-padding-x) / 1.5);
	border-color: var(--bs-border-color-translucent);
	border-radius: var(--bs-border-radius-sm);
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	transition: background-color .15s ease-in-out,
				color .15s ease-in-out;
}

.ts-wrapper.plugin-remove_button:is(.disabled) .item .remove {
	padding: 0px !important;
	border: 0px;
	width: 0px;
	overflow: hidden;
}


/**
 * Carets
 */
.ts-wrapper.single { --ts-image-count: 1; }
.ts-wrapper.single:not(.disabled) .ts-control {
	padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret) * var(--ts-image-count)) !important;
}

.ts-wrapper.is-invalid.single,
.was-validated .invalid.single,
.was-validated :invalid + .ts-wrapper.single {
	--ts-image-count: 2;
	background-image: var(--ts-image-caret), var(--ts-image-invalid);
}

.ts-wrapper.is-valid.single,
.was-validated .valid.single,
.was-validated :valid + .ts-wrapper.single {
	--ts-image-count: 2;
	background-image: var(--ts-image-caret), var(--ts-image-valid);
}

/* Theme aware caret for .tom-select class */
.ts-wrapper:not(.form-control, .form-select).single .ts-control {
	background-image: var(--ts-image-caret);
}


/**
 * Dropdown
 */
.ts-wrapper.dropdown-active .ts-control {
	border-bottom-right-radius: 0px;
}

.ts-wrapper .ts-dropdown .optgroup .dropdown-header {
	text-align: left;
	background: none;
	border: none;
}

/* Items */
.ts-wrapper .ts-dropdown .ts-dropdown-content { padding-bottom: 2px; }
.ts-wrapper .ts-dropdown {
	margin: 0px;
	top: calc(100% - 1px);
	min-width: 0px !important;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

/* Input */
.ts-wrapper .ts-dropdown .dropdown-input-wrap .dropdown-input {
	border-radius: var(--bs-border-radius);
	border-width: 1px;
}

/* Colors */
.ts-wrapper .ts-dropdown .dropdown-item.active { color: var(--bs-body-color); background-color: transparent; }
.ts-wrapper .ts-dropdown .dropdown-item:is(:hover, :focus) { color: var(--bs-primary); background-color: var(--bs-secondary-bg); }
.ts-wrapper .ts-dropdown .dropdown-item.selected { color: var(--bs-white); background-color: var(--bs-primary); }
.ts-wrapper .ts-dropdown .dropdown-item.selected:is(:hover, :focus) { color: var(--bs-white); background-color: var(--lte-primary-hover); }
.ts-wrapper .ts-dropdown .dropdown-item:is(.disabled, [aria-disabled=true]) { color: var(--bs-dropdown-link-disabled-color); background-color: transparent; }


/**
 * Fixed rounding when in .input-group alone
 */
.input-group .ts-hidden-accessible + .ts-wrapper {
	border-top-left-radius: var(--bs-border-radius-sm) !important;
	border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}


/**
 * ====================================
 * RANGE SLIDER
 * ====================================
 */
.range-slider {
	background: none !important;
	display: flex;
	align-items: center;
	column-gap: 1.25rem;
}

.range-slider .form-range { flex: 1 1 auto !important; }
.range-slider .range-value {
	--lte-range-value-color: var(--bs-body-color);
	--lte-range-value-bg: var(--bs-dark-bg-subtle);

	min-width: 4.5rem;
	line-height: 20px;
	text-align: center;
	padding: .25rem .5rem;
	position: relative;
	color: var(--lte-range-value-color);
	background-color: var(--lte-range-value-bg);
	border-radius: var(--bs-border-radius-sm);
}

.range-slider .range-value:after {
	position: absolute;
	top: calc(50% - 7px);
	right: -6px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-left: 7px solid var(--lte-range-value-bg);
	border-bottom: 7px solid transparent;
	content: '';
}


/**
 * Range slider (small)
 */
.range-slider.range-slider-sm .range-value:after { top: calc(50% - 7px); }
.range-slider.range-slider-sm .range-value {
	padding: .125rem .25rem;
	font-size: .8rem;
	min-width: 3rem;
}


/**
 * Color variants
 */
.range-value.bg-primary { --lte-range-value-bg: var(--bs-primary); }
.range-value.bg-secondary { --lte-range-value-bg: var(--bs-secondary); }
.range-value.bg-info { --lte-range-value-bg: var(--bs-info); }
.range-value.bg-success { --lte-range-value-bg: var(--bs-success); }
.range-value.bg-warning { --lte-range-value-bg: var(--bs-warning); }
.range-value.bg-danger { --lte-range-value-bg: var(--bs-danger); }
.range-value.bg-indigo { --lte-range-value-bg: var(--lte-indigo); }
.range-value.bg-lightblue { --lte-range-value-bg: var(--lte-light-blue); }
.range-value.bg-navy { --lte-range-value-bg: var(--lte-navy); }
.range-value.bg-purple { --lte-range-value-bg: var(--lte-purple); }
.range-value.bg-fuchsia { --lte-range-value-bg: var(--lte-fuchsia); }
.range-value.bg-pink { --lte-range-value-bg: var(--lte-pink); }
.range-value.bg-maroon { --lte-range-value-bg: var(--lte-maroon); }
.range-value.bg-orange { --lte-range-value-bg: var(--lte-orange); }
.range-value.bg-lime { --lte-range-value-bg: var(--lte-lime); }
.range-value.bg-teal { --lte-range-value-bg: var(--lte-teal); }
.range-value.bg-olive { --lte-range-value-bg: var(--lte-olive); }
.range-value.bg-gray-dark { --lte-range-value-bg: var(--lte-gray-dark); }

/**
 * Range with white colored value
 */
.range-value:is(.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-indigo, .bg-lightblue, .bg-navy, .bg-purple, .bg-fuchsia, .bg-pink, .bg-maroon, .bg-olive, .bg-gray-dark) {
	--lte-range-value-color: var(--bs-white);
}

/**
 * Range with black colored value
 */
.range-value:is(.bg-orange, .bg-teal, .bg-lime, .bg-warning, .text-bg-warning, .bg-info, .text-bg-info) {
	--lte-range-value-color: var(--bs-black);
}


/**
 * ====================================
 * DARK MODE
 * ====================================
 */
[data-bs-theme=dark] input:-webkit-autofill:is(*,:focus,:active,:hover) { box-shadow: 0 0 0 100px var(--bs-gray-dark) inset; }
[data-bs-theme=dark] input:read-only:not([type=range],.form-check-input) {
	background: var(--bs-gray-dark);
	color: var(--bs-secondary);
}