/* =====================================================
   Progress Bars
   ===================================================== */
.uk-progress {
	height: 4px;
	margin-bottom: 8px;
	background-color: var(--border-color);
	border-radius: 4px;
	overflow: hidden;
}

.uk-progress::-webkit-progress-bar {
	background-color: var(--border-color);
	border-radius: 4px;
}

.uk-progress::-webkit-progress-value {
	background-color: var(--maincolor, #3b82f6);
	border-radius: 4px;
}

.uk-progress::-moz-progress-bar {
	background-color: var(--maincolor, #3b82f6);
	border-radius: 4px;
}

.uk-progress.success::-webkit-progress-value,
.uk-progress.success::-moz-progress-bar {
	background-color: var(--color-success);
}

.uk-progress.warning::-webkit-progress-value,
.uk-progress.warning::-moz-progress-bar {
	background-color: var(--color-warning);
}

/* =====================================================
   Labels & Badges
   ===================================================== */
.tm-label {
	background-color: var(--maincolor, #3b82f6);
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 4px 10px;
	text-transform: none;
}

.tm-label-success {
	background-color: var(--color-success);
}

.tm-label-warning {
	background-color: var(--color-warning);
}

.tm-label-danger {
	background-color: var(--color-danger);
}

.uk-badge {
	background-color: var(--maincolor, #3b82f6);
	border-radius: 10px;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	min-width: 20px;
}

/* =====================================================
   Tables
   ===================================================== */
.uk-table {
	color: var(--text-primary);
}

.uk-table th {
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.uk-table-striped tbody tr:nth-of-type(odd) {
	background: var(--bg-secondary);
}

.uk-table-hover tbody tr:hover {
	background: var(--bg-hover);
}

.uk-table td,
.uk-table th {
	border-bottom: 1px solid var(--border-light);
}

/* =====================================================
   Sidebar Toggle
   ===================================================== */
#tm-sidebar-main-toggle {
	color: var(--text-on-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

#tm-sidebar-main-toggle:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

#tm-sidebar-main-toggle .tm-menu-close,
#tm-sidebar-main-toggle .tm-menu-open {
	color: var(--text-on-primary);
}

#tm-sidebar-main-toggle .tm-menu-close:before,
#tm-sidebar-main-toggle .tm-menu-open:before {
	font-size: 1.25rem;
}

/* =====================================================
   Modals
   ===================================================== */
.uk-modal-dialog {
	background: var(--bg-primary);
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
}

.uk-modal-header {
	padding: 16px 24px;
	border-bottom: 1px solid var(--border-light);
	border-radius: 16px 16px 0 0;
}

.uk-modal-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
}

.uk-modal-body {
	padding: 24px;
}

.uk-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--border-light);
	border-radius: 0 0 16px 16px;
}

.uk-modal-close-default {
	color: var(--text-muted);
	top: 16px;
	right: 16px;
}

.uk-modal-close-default:hover {
	color: var(--text-primary);
}

/* =====================================================
   Switch
   ===================================================== */
.uk-switch {
	position: relative;
	display: inline-block;
	height: 28px;
	width: 52px;
}

.uk-switch input {
	display: none;
}

.uk-switch-slider {
	background-color: var(--border-color);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 28px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.uk-switch-slider:before {
	content: '';
	background-color: var(--text-on-primary);
	position: absolute;
	width: 22px;
	height: 22px;
	left: 3px;
	bottom: 3px;
	border-radius: 50%;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

input:checked+.uk-switch-slider {
	background-color: var(--color-success, #3b82f6) !important;
}

input:checked+.uk-switch-slider:before {
	transform: translateX(24px);
}

.uk-switch-slider.uk-switch-on-off {
	background-color: var(--color-danger);
}

input:checked+.uk-switch-slider.uk-switch-on-off {
	background-color: var(--color-success) !important;
}

/* =====================================================
   WinterCMS Backend Specific Styles
   ===================================================== */

/* =====================================================
   WinterCMS Form Classes Override - UIkit Compatible
   Keep original class names for JavaScript compatibility
   ===================================================== */

/* Form Control - Override WinterCMS form-control to use UIkit styles */
.form-control {
	background-color: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: var(--text-primary);
	box-shadow: none;
	padding: 8px 14px;
	transition: all 0.15s ease;
	font-size: 0.875rem;
	line-height: 1.5;
	width: 100%;
	box-sizing: border-box;
}

.form-control:focus {
	border-color: var(--maincolor, #3b82f6);
	box-shadow: none;
	outline: none;
	background-color: var(--input-bg);
}

.form-control::placeholder {
	color: var(--text-muted);
	opacity: 0.7;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: color-mix(in srgb, var(--bg-tertiary) 82%, var(--bg-primary) 18%);
	color: var(--text-muted);
	cursor: not-allowed;
	opacity: 0.82;
}

.toolbar-widget .toolbar-item-search .search-grow-group {
	align-items: center;
	display: inline-flex;
	gap: 6px;
	justify-content: flex-end;
	width: clamp(220px, 24vw, 360px);
}

.toolbar-widget .toolbar-item-search .search-input-wrap {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
	position: relative;
}

.toolbar-widget .toolbar-item-search .search-input-wrap > .form-control.growable {
	max-width: 100%;
	transition: width 0.18s ease;
	width: clamp(130px, 14vw, 180px);
}

.toolbar-widget .toolbar-item-search .search-input-wrap > .form-control.growable:active,
.toolbar-widget .toolbar-item-search .search-input-wrap > .form-control.growable:focus {
	width: 100% !important;
}

.toolbar-widget .toolbar-primary [data-control="toolbar"].uk-grid {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
}

.toolbar-widget .toolbar-primary [data-control="toolbar"].uk-grid > * {
	flex: 0 0 auto;
	margin: 0;
}

.toolbar-widget .toolbar-primary [data-control="toolbar"].uk-grid > .uk-grid-margin,
.toolbar-widget .toolbar-primary [data-control="toolbar"].uk-grid > .uk-first-column {
	margin-top: 0 !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Form Group - Container for form fields */
.form-group {
	margin-bottom: 0.5rem;
	padding-bottom: 0;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: var(--text-primary);
	font-size: 0.875rem;
}

.form-group.is-required label:after {
	content: " *";
	color: var(--color-danger);
}

/* Help Block - Field comments and help text */
.help-block {
	display: block;
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.4;
}

.help-block.before-field {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* Buttons - Override WinterCMS btn classes */
.btn {
	display: inline-block;
	padding: 8px 20px;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	transition: all 0.15s ease;
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

.btn:hover,
.btn:focus {
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	border-color: var(--border-color) !important;
}

.btn-primary {
	background-color: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background-color: var(--maincolor2, #2563eb);
	border-color: var(--maincolor2, #2563eb);
	color: var(--text-on-primary);
}

.btn-default {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
	background-color: var(--bg-secondary);
	border-color: var(--border-color) !important;
	color: var(--text-primary);
}

.btn-danger {
	background-color: var(--color-danger);
	border-color: var(--color-danger);
	color: var(--text-on-primary);
}

.btn-danger:hover,
.btn-danger:focus {
	background-color: var(--color-danger);
	opacity: 0.9;
	color: var(--text-on-primary);
}

.btn-success {
	background-color: var(--color-success);
	border-color: var(--color-success);
	color: var(--text-on-primary);
}

.btn-success:hover,
.btn-success:focus {
	background-color: var(--color-success);
	opacity: 0.9;
	color: var(--text-on-primary);
}

.btn-small,
.btn-sm {
	padding: 6px 14px;
	font-size: 0.8rem;
	line-height: 1.4;
	border-radius: 6px;
}

.btn-large,
.btn-lg {
	padding: 12px 24px;
	font-size: 1rem;
	line-height: 1.6;
}

/* Custom Checkbox and Radio - Override WinterCMS custom styles */
.custom-checkbox,
.custom-radio {
	position: relative;
	display: block;
	margin-bottom: 0.5rem;
}

.custom-checkbox input[type="checkbox"],
.custom-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.custom-checkbox label,
.custom-radio label {
	position: relative;
	padding-left: 28px;
	cursor: pointer;
	color: var(--text-primary);
	font-size: 0.875rem;
	line-height: 1.5;
}

.custom-checkbox label:before,
.custom-radio label:before {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--border-color);
	background-color: var(--input-bg);
	transition: all 0.15s ease;
}

.custom-checkbox label:before {
	border-radius: 4px;
}

.custom-radio label:before {
	border-radius: 50%;
}

.custom-checkbox input[type="checkbox"]:checked + label:before,
.custom-radio input[type="radio"]:checked + label:before {
	background-color: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
}

.custom-checkbox input[type="checkbox"]:checked + label:after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: solid var(--text-on-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.custom-radio input[type="radio"]:checked + label:after {
	content: '';
	position: absolute;
	left: 5px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--text-on-primary);
}

/* Loading Indicator */
.loading-indicator-container {
	position: relative;
	min-height: 40px;
}

.loading-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.loading-indicator.indicator-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.loading-indicator span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid var(--border-color);
	border-top-color: var(--maincolor, #3b82f6);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Input Group - For inputs with icons/addons */
.input-group {
	position: relative;
	display: flex;
	width: 100%;
}

.input-group .form-control {
	border-radius: 8px 0 0 8px;
}

.input-group .input-group-addon {
	display: flex;
	align-items: center;
	padding: 8px 14px;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-left: none;
	border-radius: 0 8px 8px 0;
	color: var(--text-secondary);
	font-size: 0.875rem;
	width: auto;
}

/* Input group addon before input */
.input-group > .input-group-addon:first-child {
	border-left: 1px solid var(--border-color);
	border-right: none;
	border-radius: 8px 0 0 8px;
}

.input-group > .input-group-addon:first-child + .form-control {
	border-left: none;
	border-radius: 0 8px 8px 0;
}

.input-group.static .form-control {
	border-radius: 8px;
}

.input-group.static .input-group-addon {
	border-left: 1px solid var(--border-color);
	border-radius: 8px 0 0 8px;
}

.input-group.static .form-control {
	border-left: none;
	border-radius: 0 8px 8px 0;
}

/* Select - Custom select styling */
.custom-select {
	background-color: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: var(--text-primary);
	padding: 8px 14px;
	font-size: 0.875rem;
	line-height: 1.5;
	width: 100%;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	padding-right: 36px;
}

.custom-select:focus {
	border-color: var(--maincolor, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
	outline: none;
}

/* Form Field Span Layout */
.form-group.span-left {
	float: none;
	clear: none;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.form-group.span-right {
	float: none;
	clear: none;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.form-group.span-full {
	width: 100%;
	clear: both;
}

.form-group.span-auto {
	float: none;
	clear: none;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.form-group.span-left,
	.form-group.span-right,
	.form-group.span-auto {
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
	}
}

/* Storm span layout - use Bootstrap-like col classes inside backend form containers */
.form-tabless-fields,
.control-tabs > div.tab-content > div.tab-pane.active {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
}

.form-tabless-fields > .form-group,
.control-tabs > div.tab-content > div.tab-pane > .form-group {
	width: 100%;
	max-width: 100%;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.form-group.span-storm {
	float: none;
	clear: none;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
}

.form-group.span-storm[class*=" col-"],
.form-group.span-storm[class^="col-"] {
	flex: 0 0 auto;
}

.form-group.span-storm.col-1 {
	width: 8.333333%;
	max-width: 8.333333%;
}

.form-group.span-storm.col-2 {
	width: 16.666667%;
	max-width: 16.666667%;
}

.form-group.span-storm.col-3 {
	width: 25%;
	max-width: 25%;
}

.form-group.span-storm.col-4 {
	width: 33.333333%;
	max-width: 33.333333%;
}

.form-group.span-storm.col-5 {
	width: 41.666667%;
	max-width: 41.666667%;
}

.form-group.span-storm.col-6 {
	width: 50%;
	max-width: 50%;
}

.form-group.span-storm.col-7 {
	width: 58.333333%;
	max-width: 58.333333%;
}

.form-group.span-storm.col-8 {
	width: 66.666667%;
	max-width: 66.666667%;
}

.form-group.span-storm.col-9 {
	width: 75%;
	max-width: 75%;
}

.form-group.span-storm.col-10 {
	width: 83.333333%;
	max-width: 83.333333%;
}

.form-group.span-storm.col-11 {
	width: 91.666667%;
	max-width: 91.666667%;
}

.form-group.span-storm.col-12 {
	width: 100%;
	max-width: 100%;
}

@media (min-width: 576px) {
	.form-group.span-storm.col-sm-1 {
		width: 8.333333%;
		max-width: 8.333333%;
	}

	.form-group.span-storm.col-sm-2 {
		width: 16.666667%;
		max-width: 16.666667%;
	}

	.form-group.span-storm.col-sm-3 {
		width: 25%;
		max-width: 25%;
	}

	.form-group.span-storm.col-sm-4 {
		width: 33.333333%;
		max-width: 33.333333%;
	}

	.form-group.span-storm.col-sm-5 {
		width: 41.666667%;
		max-width: 41.666667%;
	}

	.form-group.span-storm.col-sm-6 {
		width: 50%;
		max-width: 50%;
	}

	.form-group.span-storm.col-sm-7 {
		width: 58.333333%;
		max-width: 58.333333%;
	}

	.form-group.span-storm.col-sm-8 {
		width: 66.666667%;
		max-width: 66.666667%;
	}

	.form-group.span-storm.col-sm-9 {
		width: 75%;
		max-width: 75%;
	}

	.form-group.span-storm.col-sm-10 {
		width: 83.333333%;
		max-width: 83.333333%;
	}

	.form-group.span-storm.col-sm-11 {
		width: 91.666667%;
		max-width: 91.666667%;
	}

	.form-group.span-storm.col-sm-12 {
		width: 100%;
		max-width: 100%;
	}
}

@media (min-width: 768px) {
	.form-group.span-storm.col-md-1 {
		width: 8.333333%;
		max-width: 8.333333%;
	}

	.form-group.span-storm.col-md-2 {
		width: 16.666667%;
		max-width: 16.666667%;
	}

	.form-group.span-storm.col-md-3 {
		width: 25%;
		max-width: 25%;
	}

	.form-group.span-storm.col-md-4 {
		width: 33.333333%;
		max-width: 33.333333%;
	}

	.form-group.span-storm.col-md-5 {
		width: 41.666667%;
		max-width: 41.666667%;
	}

	.form-group.span-storm.col-md-6 {
		width: 50%;
		max-width: 50%;
	}

	.form-group.span-storm.col-md-7 {
		width: 58.333333%;
		max-width: 58.333333%;
	}

	.form-group.span-storm.col-md-8 {
		width: 66.666667%;
		max-width: 66.666667%;
	}

	.form-group.span-storm.col-md-9 {
		width: 75%;
		max-width: 75%;
	}

	.form-group.span-storm.col-md-10 {
		width: 83.333333%;
		max-width: 83.333333%;
	}

	.form-group.span-storm.col-md-11 {
		width: 91.666667%;
		max-width: 91.666667%;
	}

	.form-group.span-storm.col-md-12 {
		width: 100%;
		max-width: 100%;
	}
}

@media (min-width: 992px) {
	.form-group.span-storm.col-lg-1 {
		width: 8.333333%;
		max-width: 8.333333%;
	}

	.form-group.span-storm.col-lg-2 {
		width: 16.666667%;
		max-width: 16.666667%;
	}

	.form-group.span-storm.col-lg-3 {
		width: 25%;
		max-width: 25%;
	}

	.form-group.span-storm.col-lg-4 {
		width: 33.333333%;
		max-width: 33.333333%;
	}

	.form-group.span-storm.col-lg-5 {
		width: 41.666667%;
		max-width: 41.666667%;
	}

	.form-group.span-storm.col-lg-6 {
		width: 50%;
		max-width: 50%;
	}

	.form-group.span-storm.col-lg-7 {
		width: 58.333333%;
		max-width: 58.333333%;
	}

	.form-group.span-storm.col-lg-8 {
		width: 66.666667%;
		max-width: 66.666667%;
	}

	.form-group.span-storm.col-lg-9 {
		width: 75%;
		max-width: 75%;
	}

	.form-group.span-storm.col-lg-10 {
		width: 83.333333%;
		max-width: 83.333333%;
	}

	.form-group.span-storm.col-lg-11 {
		width: 91.666667%;
		max-width: 91.666667%;
	}

	.form-group.span-storm.col-lg-12 {
		width: 100%;
		max-width: 100%;
	}
}

@media (min-width: 1200px) {
	.form-group.span-storm.col-xl-1 {
		width: 8.333333%;
		max-width: 8.333333%;
	}

	.form-group.span-storm.col-xl-2 {
		width: 16.666667%;
		max-width: 16.666667%;
	}

	.form-group.span-storm.col-xl-3 {
		width: 25%;
		max-width: 25%;
	}

	.form-group.span-storm.col-xl-4 {
		width: 33.333333%;
		max-width: 33.333333%;
	}

	.form-group.span-storm.col-xl-5 {
		width: 41.666667%;
		max-width: 41.666667%;
	}

	.form-group.span-storm.col-xl-6 {
		width: 50%;
		max-width: 50%;
	}

	.form-group.span-storm.col-xl-7 {
		width: 58.333333%;
		max-width: 58.333333%;
	}

	.form-group.span-storm.col-xl-8 {
		width: 66.666667%;
		max-width: 66.666667%;
	}

	.form-group.span-storm.col-xl-9 {
		width: 75%;
		max-width: 75%;
	}

	.form-group.span-storm.col-xl-10 {
		width: 83.333333%;
		max-width: 83.333333%;
	}

	.form-group.span-storm.col-xl-11 {
		width: 91.666667%;
		max-width: 91.666667%;
	}

	.form-group.span-storm.col-xl-12 {
		width: 100%;
		max-width: 100%;
	}
}

/* Clear floats after form groups */
.control-tabs:after,
.form-tabless-fields:after,
.tab-content:after {
	content: "";
	display: table;
	clear: both;
}

.control-pagination .page-iteration,
.control-pagination .select2-container .select2-selection {
	font-size: 0.875rem;
}

.control-tabs.primary-tabs>ul.nav-tabs,
.control-tabs.primary-tabs>div>ul.nav-tabs,
.control-tabs.primary-tabs>div>div>ul.nav-tabs {
	margin-left: -15px;
	margin-right: -15px;
}

.control-tabs.primary-tabs {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.control-tabs>div.tab-content>div.tab-pane {
	padding: 0;
}

.permissioneditor {
	margin: 0 !important;
}

.control-filter {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.field-fileupload.style-image-single .upload-object .icon-container {
	background: none !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.control-filter-popover .filter-items a:hover,
.control-filter-popover .filter-active-items a:hover {
	background-color: var(--maincolor2, #2563eb);
}

.report-container .manage-widgets:hover,
.report-container .dropdown.open .manage-widgets {
	background-color: var(--maincolor2, #2563eb) !important;
	border-color: var(--maincolor2, #2563eb) !important;
}

.dropdown-menu .dropdown-container>ul li a:hover,
.dropdown-menu .dropdown-container>ul li a:focus {
	background-color: var(--maincolor2, #2563eb) !important;
}

.dropdown-menu .dropdown-container>ul li a:active {
	background-color: var(--maincolor, #3b82f6) !important;
}

/* Layout Classes - Override WinterCMS layout classes */
.layout-row {
	display: flex !important;
	flex-wrap: wrap;
	width: 100%;
	height: auto !important;
}

.layout-cell {
	flex: 1;
	min-width: 0;
}

.layout-relative {
	position: relative;
}

.min-size {
	flex: 0 0 auto;
}

/* Form Widget Container */
.form-widget,
.form-elements {
	width: 100%;
}

/* Form Tabless Fields */
.form-tabless-fields {
	width: 100%;
}

/* Field Types Styling */
.field-section {
	margin: 0.5rem 0;
	padding-bottom: 0;
	border-bottom: none;
}

.field-section h4 {
	margin: 0 0 0.5rem 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
}

/* Status Indicator */
.status-indicator {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

/* Field Comment/Help Text */
.field-comment {
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 0.25rem;
	line-height: 1.4;
}

/* Required Field Indicator */
.is-required label:after {
	content: " *";
	color: var(--color-danger);
	margin-left: 2px;
}

/* Form Group Preview Mode */
.form-group-preview .form-control {
	background-color: var(--bg-tertiary);
	cursor: default;
}

/* Control Balloon Selector */
.control-balloon-selector {
	display: inline-flex;
}

.control-balloon-selector ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg-primary);
}

.control-balloon-selector ul li {
	margin: 0;
	background: var(--bg-primary);
	color: #3f3f46;
	padding: 0 14px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	border-right: 1px solid var(--border-color);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.2;
}

.control-balloon-selector ul li.uk-button,
.control-balloon-selector ul li.uk-button-default {
	border-top: 0;
	border-left: 0;
	border-bottom: 0;
	border-right: 1px solid var(--border-color);
	box-shadow: none;
	border-radius: 0 !important;
}

.control-balloon-selector ul li.uk-button:first-child,
.control-balloon-selector ul li.uk-button-default:first-child {
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
}

.control-balloon-selector ul li.uk-button:last-child,
.control-balloon-selector ul li.uk-button-default:last-child {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.control-balloon-selector ul li.uk-button + li.uk-button {
	margin-left: 0 !important;
}

.control-balloon-selector ul li:last-child {
	border-right: 0;
}

.control-balloon-selector ul li.active,
.control-balloon-selector ul li.uk-active {
	background: #e5e7eb;
	color: #27272a;
}

.control-balloon-selector ul li.uk-button.active,
.control-balloon-selector ul li.uk-button.uk-active {
	background-color: var(--maincolor) !important;
	color: var(--text-on-primary) !important;
}

.control-balloon-selector ul li:hover {
	background-color: var(--secondcolor) !important;
	color: var(--text-on-primary) !important;
}

.control-balloon-selector ul li.active:hover,
.control-balloon-selector ul li.uk-active:hover {
	background-color: var(--secondcolor) !important;
	color: var(--text-on-primary) !important;
}

.control-balloon-selector.control-disabled {
	opacity: 0.6;
	pointer-events: none;
}

.dark-mode:not(.tm-auth-light) .control-balloon-selector ul {
	background: #0f172a;
	border-color: rgba(148, 163, 184, 0.28);
}

.dark-mode:not(.tm-auth-light) .control-balloon-selector ul li {
	background: #0f172a;
	color: #cbd5e1;
	border-right-color: rgba(148, 163, 184, 0.26) !important;
}

.dark-mode:not(.tm-auth-light) .control-balloon-selector ul li:hover {
	background-color: var(--secondcolor) !important;
	color: var(--text-on-primary) !important;
}

.dark-mode:not(.tm-auth-light) .control-balloon-selector ul li.active,
.dark-mode:not(.tm-auth-light) .control-balloon-selector ul li.uk-active,
.dark-mode:not(.tm-auth-light) .control-balloon-selector ul li.uk-button.active,
.dark-mode:not(.tm-auth-light) .control-balloon-selector ul li.uk-button.uk-active {
	background-color: var(--bg-tertiary) !important;
	color: var(--text-on-primary) !important;
}

.custom-checkbox input[type=checkbox]:indeterminate+label:before,
.custom-radio input[type=checkbox]:indeterminate+label:before,
.custom-checkbox input[type=checkbox]:checked+label:before,
.custom-radio input[type=checkbox]:checked+label:before {
	background-color: var(--maincolor2, #2563eb) !important;
	border-color: var(--maincolor2, #2563eb) !important;
}

.btn-icon:hover:before {
	color: var(--maincolor, #3b82f6);
}

.btn-primary {
	background-color: var(--maincolor, #3b82f6) !important;
	border-color: var(--maincolor, #3b82f6) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	background: var(--maincolor2, #2563eb);
	border-color: var(--maincolor2, #2563eb);
}

.dropdown-menu .dropdown-container>ul li.first-item a:hover:after,
.dropdown-menu .dropdown-container>ul li.first-item a:focus:after,
.dropdown-menu .dropdown-container>ul li.first-item a:active:after {
	border-bottom-color: var(--maincolor2, #2563eb) !important;
}

.field-repeater .field-repeater-add-item:hover,
.field-repeater .field-repeater-add-item:focus,
.permissioneditor table tr:hover td {
	background-color: var(--bg-hover) !important;
}

.nested-form.panel-styles {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border-color) !important;
}