/* =====================================================
   UIkit Integration - Enhanced Dark Mode Support
   ===================================================== */

/* Set UIkit inverse variable for dark mode */
.dark-mode:not(.tm-auth-light) {
	--uk-inverse: light;
}

/* UIkit Background Utilities */
.dark-mode:not(.tm-auth-light) .uk-background-default {
	background-color: var(--bg-primary) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .uk-background-muted {
	background-color: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .uk-background-primary {
	background-color: var(--maincolor, #3b82f6) !important;
	color: var(--text-on-primary) !important;
}

.dark-mode:not(.tm-auth-light) .uk-background-secondary {
	background-color: var(--secondcolor, #6366f1) !important;
	color: var(--text-on-primary) !important;
}

/* UIkit Text Utilities */
.dark-mode:not(.tm-auth-light) .uk-text-default {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .uk-text-muted {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .uk-text-emphasis {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .uk-text-primary {
	color: var(--maincolor, #3b82f6) !important;
}

.dark-mode:not(.tm-auth-light) .uk-text-secondary {
	color: var(--secondcolor, #6366f1) !important;
}

/* UIkit Section Components */
.dark-mode:not(.tm-auth-light) .uk-section-default {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-section-muted {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-section-primary {
	background-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .uk-section-secondary {
	background-color: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

/* UIkit Tile Components */
.dark-mode:not(.tm-auth-light) .uk-tile-default {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-tile-muted {
	background-color: var(--bg-secondary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-tile-primary {
	background-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .uk-tile-secondary {
	background-color: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

/* UIkit Card Components - Enhanced */
.dark-mode:not(.tm-auth-light) .uk-card-default {
	background-color: var(--card-bg);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-card-default .uk-card-header {
	border-bottom-color: var(--border-light);
	background-color: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-card-default .uk-card-footer {
	border-top-color: var(--border-light);
	background-color: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-card-default .uk-card-title {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-card-primary {
	background-color: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .uk-card-primary .uk-card-title {
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .uk-card-secondary {
	background-color: var(--secondcolor, #6366f1);
	border-color: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .uk-card-secondary .uk-card-title {
	color: var(--text-on-primary);
}

/* UIkit Navbar Components */
.dark-mode:not(.tm-auth-light) .uk-navbar-container:not(.uk-navbar-transparent) {
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .uk-navbar-nav > li > a {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-navbar-nav > li > a:hover,
.dark-mode:not(.tm-auth-light) .uk-navbar-nav > li.uk-active > a {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

/* UIkit Dropdown Components */
.dark-mode:not(.tm-auth-light) .uk-dropdown {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	box-shadow: var(--shadow-lg);
}

.dark-mode:not(.tm-auth-light) .uk-dropdown-nav > li > a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-dropdown-nav > li > a:hover,
.dark-mode:not(.tm-auth-light) .uk-dropdown-nav > li.uk-active > a {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

.dark-mode:not(.tm-auth-light) .uk-navbar-dropdown {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	box-shadow: var(--shadow-lg);
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu::before {
	display: none !important;
	content: none !important;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu::after {
	display: none !important;
	content: none !important;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-top: 10px;
	overflow: visible;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .dropdown-container,
.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .dropdown-container > ul {
	background: transparent;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .dropdown-container > ul {
	background: #27314a;
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: 12px;
	box-shadow: 0 18px 36px rgba(3, 8, 20, 0.38);
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .dropdown-title {
	display: none;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu li > a {
	display: block;
	padding: 12px 18px;
	color: var(--text-primary) !important;
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu li > a:hover,
.dark-mode:not(.tm-auth-light) .ml-dropdown-menu li > a:focus {
	background: var(--bg-hover) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu li > a:active {
	background: rgba(59, 130, 246, 0.18) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .dropdown-container::before,
.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .dropdown-container::after,
.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .first-item a::before,
.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .last-item a::before,
.dark-mode:not(.tm-auth-light) .ml-dropdown-menu .last-item a::after {
	display: none !important;
	content: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .ml-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-tertiary);
	border: 1px solid rgba(148, 163, 184, 0.16) !important;
	color: var(--text-primary) !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .ml-copy-btn:hover,
.dark-mode:not(.tm-auth-light) .ml-copy-btn:focus,
.dark-mode:not(.tm-auth-light) .open > .ml-copy-btn,
.dark-mode:not(.tm-auth-light) .ml-copy-btn[aria-expanded="true"] {
	background: var(--bg-secondary) !important;
	border-color: rgba(148, 163, 184, 0.22) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .ml-copy-btn::before,
.dark-mode:not(.tm-auth-light) .ml-copy-btn::after,
.dark-mode:not(.tm-auth-light) .ml-copy-btn .icon-copy,
.dark-mode:not(.tm-auth-light) .ml-copy-btn[class*="icon-"]::before {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text {
	position: relative;
	display: block;
	background: var(--input-bg);
	border: 1px solid rgba(148, 163, 184, 0.16) !important;
	border-radius: 8px;
	box-shadow: none !important;
	overflow: hidden;
	min-height: 42px;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text > .form-control,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text > .uk-input {
	display: block;
	width: 100%;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	height: 40px;
	padding: 0 146px 0 18px;
	margin: 0;
	border-radius: 0 !important;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-dropdown,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-dropdown {
	position: absolute !important;
	top: 0;
	bottom: 0;
	display: block;
	border-left: 1px solid rgba(148, 163, 184, 0.08);
	margin: 0;
	z-index: 2;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-dropdown {
	right: 72px;
	width: 56px;
	min-width: 56px;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-dropdown {
	right: 0;
	width: 72px;
	min-width: 72px;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-btn {
	position: static !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	color: var(--text-primary) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	height: 40px;
	line-height: 1;
	text-align: center;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-btn:hover,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-btn:focus,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .open > .ml-btn {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn {
	position: static !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 40px;
	padding: 0;
	line-height: 1;
	margin: 0;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn:hover,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn:focus,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .open > .ml-copy-btn,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: transparent !important;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-dropdown {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn::before,
.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn::after {
	top: auto;
	margin: 0;
	left: auto;
	right: auto;
	position: static;
}

.dark-mode:not(.tm-auth-light) .field-multilingual.field-multilingual-text .ml-copy-btn::before {
	display: block;
	font-size: 1.05rem;
	line-height: 1;
}

/* UIkit Modal Components */
.dark-mode:not(.tm-auth-light) .uk-modal-dialog {
	background-color: var(--bg-primary);
	border-color: var(--border-color);
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(3, 8, 20, 0.42);
}

.dark-mode:not(.tm-auth-light) .uk-modal-header {
	border-bottom-color: var(--border-light);
	background-color: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-modal-footer {
	border-top-color: var(--border-light);
	background-color: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-modal-title {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-modal-close-default {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .uk-modal-close-default:hover {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-modal,
.dark-mode:not(.tm-auth-light) .uk-modal-page {
	background: rgba(7, 11, 24, 0.52);
}

.dark-mode:not(.tm-auth-light) .modal-content,
.dark-mode:not(.tm-auth-light) .popup,
.dark-mode:not(.tm-auth-light) .control-popup,
.dark-mode:not(.tm-auth-light) .oc-popup,
.dark-mode:not(.tm-auth-light) .popup-container,
.dark-mode:not(.tm-auth-light) .popup-dialog,
.dark-mode:not(.tm-auth-light) .popup-content {
	background: var(--bg-primary) !important;
	border: 1px solid rgba(148, 163, 184, 0.14) !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 48px rgba(3, 8, 20, 0.42) !important;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .modal-backdrop,
.dark-mode:not(.tm-auth-light) .popup-backdrop,
.dark-mode:not(.tm-auth-light) .control-popup-backdrop,
.dark-mode:not(.tm-auth-light) .popup-backdrop.fade.in,
.dark-mode:not(.tm-auth-light) .modal-backdrop.in {
	background: rgba(7, 11, 24, 0.32) !important;
	backdrop-filter: blur(4px);
	opacity: 1 !important;
}

.dark-mode:not(.tm-auth-light) .control-popup.modal.fade.in {
	background: rgba(7, 11, 24, 0.32) !important;
	backdrop-filter: blur(4px);
}

.dark-mode:not(.tm-auth-light) .popup-header,
.dark-mode:not(.tm-auth-light) .modal-header,
.dark-mode:not(.tm-auth-light) .control-popup .modal-header,
.dark-mode:not(.tm-auth-light) .oc-popup .modal-header {
	background: var(--bg-secondary);
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	color: var(--text-primary);
	padding: 22px 24px 18px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}

.dark-mode:not(.tm-auth-light) .popup-body,
.dark-mode:not(.tm-auth-light) .modal-body,
.dark-mode:not(.tm-auth-light) .control-popup .modal-body,
.dark-mode:not(.tm-auth-light) .oc-popup .modal-body {
	background: var(--bg-primary);
	color: var(--text-primary);
	padding: 26px 24px 24px;
}

.dark-mode:not(.tm-auth-light) .popup-footer,
.dark-mode:not(.tm-auth-light) .modal-footer,
.dark-mode:not(.tm-auth-light) .control-popup .modal-footer,
.dark-mode:not(.tm-auth-light) .oc-popup .modal-footer {
	background: var(--bg-secondary);
	border-top: 1px solid rgba(148, 163, 184, 0.12);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-end;
	padding: 16px 18px 16px 24px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}

.dark-mode:not(.tm-auth-light) .modal-footer .pull-left,
.dark-mode:not(.tm-auth-light) .popup-footer .pull-left {
	margin-right: auto;
}

.dark-mode:not(.tm-auth-light) .modal-footer > .btn,
.dark-mode:not(.tm-auth-light) .popup-footer > .btn,
.dark-mode:not(.tm-auth-light) .modal-footer > .btn-icon,
.dark-mode:not(.tm-auth-light) .popup-footer > .btn-icon {
	margin-right: 0 !important;
}

.dark-mode:not(.tm-auth-light) .popup-header h1,
.dark-mode:not(.tm-auth-light) .popup-header h2,
.dark-mode:not(.tm-auth-light) .popup-header h3,
.dark-mode:not(.tm-auth-light) .popup-header h4,
.dark-mode:not(.tm-auth-light) .popup-header h5,
.dark-mode:not(.tm-auth-light) .popup-header h6,
.dark-mode:not(.tm-auth-light) .modal-header h1,
.dark-mode:not(.tm-auth-light) .modal-header h2,
.dark-mode:not(.tm-auth-light) .modal-header h3,
.dark-mode:not(.tm-auth-light) .modal-header h4,
.dark-mode:not(.tm-auth-light) .modal-header h5,
.dark-mode:not(.tm-auth-light) .modal-header h6,
.dark-mode:not(.tm-auth-light) .popup-title,
.dark-mode:not(.tm-auth-light) .modal-title {
	color: var(--text-primary);
	margin: 0;
	line-height: 1.25;
}

.dark-mode:not(.tm-auth-light) .popup .close,
.dark-mode:not(.tm-auth-light) .popup-close,
.dark-mode:not(.tm-auth-light) .control-popup .close,
.dark-mode:not(.tm-auth-light) .oc-popup .close,
.dark-mode:not(.tm-auth-light) .modal-header .close {
	color: var(--text-muted);
	opacity: 1;
}

.dark-mode:not(.tm-auth-light) .popup .close:hover,
.dark-mode:not(.tm-auth-light) .popup-close:hover,
.dark-mode:not(.tm-auth-light) .control-popup .close:hover,
.dark-mode:not(.tm-auth-light) .oc-popup .close:hover,
.dark-mode:not(.tm-auth-light) .modal-header .close:hover {
	color: var(--text-primary);
}

/* UIkit Offcanvas Components */
.dark-mode:not(.tm-auth-light) .uk-offcanvas-bar {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-offcanvas-bar .uk-nav-default > li > a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-offcanvas-bar .uk-nav-default > li > a:hover,
.dark-mode:not(.tm-auth-light) .uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

/* UIkit Table Components */
.dark-mode:not(.tm-auth-light) .uk-table {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-table th {
	color: var(--text-secondary);
	border-bottom-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .uk-table td {
	border-bottom-color: var(--border-light);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-table-hover tbody tr:hover {
	background-color: var(--bg-hover);
}

/* UIkit Form Components - Enhanced */
.dark-mode:not(.tm-auth-light) .uk-input,
.dark-mode:not(.tm-auth-light) .uk-select,
.dark-mode:not(.tm-auth-light) .uk-textarea {
	background-color: var(--input-bg);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-input:focus,
.dark-mode:not(.tm-auth-light) .uk-select:focus,
.dark-mode:not(.tm-auth-light) .uk-textarea:focus {
	border-color: var(--maincolor, #3b82f6);
	background-color: var(--input-bg);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-input::placeholder,
.dark-mode:not(.tm-auth-light) .uk-textarea::placeholder {
	color: var(--text-muted);
	opacity: 0.7;
}

/* UIkit Form Label */
.dark-mode:not(.tm-auth-light) .uk-form-label {
	color: var(--text-primary);
	font-weight: 500;
	font-size: 0.875rem;
}

.dark-mode:not(.tm-auth-light) .uk-form-label > * {
	color: var(--text-primary);
}

/* UIkit Headings */
.dark-mode:not(.tm-auth-light) h1,
.dark-mode:not(.tm-auth-light) h2,
.dark-mode:not(.tm-auth-light) h3,
.dark-mode:not(.tm-auth-light) h4,
.dark-mode:not(.tm-auth-light) h5,
.dark-mode:not(.tm-auth-light) h6 {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) h1 {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1rem;
}

.dark-mode:not(.tm-auth-light) h2 {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0.875rem;
}

.dark-mode:not(.tm-auth-light) h3 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.dark-mode:not(.tm-auth-light) h4 {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 0.625rem;
}

.dark-mode:not(.tm-auth-light) h5 {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

.dark-mode:not(.tm-auth-light) h6 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* UIkit Heading Classes */
.dark-mode:not(.tm-auth-light) .uk-heading-small,
.dark-mode:not(.tm-auth-light) .uk-heading-medium,
.dark-mode:not(.tm-auth-light) .uk-heading-large,
.dark-mode:not(.tm-auth-light) .uk-heading-xlarge,
.dark-mode:not(.tm-auth-light) .uk-heading-2xlarge {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-heading-primary {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-heading-divider {
	border-bottom-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control,
html.dark-mode body:not(.tm-auth-light) .widget-field .mask-input-field.form-control,
body.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control {
	background-color: var(--input-bg) !important;
	border: 1px solid var(--border-color) !important;
	border-bottom: 1px solid var(--border-color) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	background-image: none !important;
	background-clip: padding-box !important;
}

.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control:focus,
html.dark-mode body:not(.tm-auth-light) .widget-field .mask-input-field.form-control:focus,
body.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control:focus {
	border: 1px solid var(--maincolor, #3b82f6) !important;
	border-bottom: 1px solid var(--maincolor, #3b82f6) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important;
	-webkit-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important;
}

.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control:-webkit-autofill,
.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control:-webkit-autofill:hover,
.dark-mode:not(.tm-auth-light) .widget-field .mask-input-field.form-control:-webkit-autofill:focus,
html.dark-mode body:not(.tm-auth-light) .widget-field .mask-input-field.form-control:-webkit-autofill,
html.dark-mode body:not(.tm-auth-light) .widget-field .mask-input-field.form-control:-webkit-autofill:hover,
html.dark-mode body:not(.tm-auth-light) .widget-field .mask-input-field.form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-primary) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
	border: 1px solid var(--border-color) !important;
	border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode:not(.tm-auth-light) .uk-heading-bullet::before {
	border-left-color: var(--maincolor, #3b82f6);
}

/* UIkit Label Components */
.dark-mode:not(.tm-auth-light) .tm-label {
	background-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .tm-label-success {
	background-color: var(--color-success);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .tm-label-warning {
	background-color: var(--color-warning);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .tm-label-danger {
	background-color: var(--color-danger);
	color: var(--text-on-primary);
}

/* UIkit Badge Components */
.dark-mode:not(.tm-auth-light) .uk-badge {
	background-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

/* UIkit Progress Components */
.dark-mode:not(.tm-auth-light) .uk-progress {
	background-color: var(--bg-tertiary);
}

.dark-mode:not(.tm-auth-light) .uk-progress::-webkit-progress-bar {
	background-color: var(--bg-tertiary);
}

.dark-mode:not(.tm-auth-light) .uk-progress::-webkit-progress-value {
	background-color: var(--maincolor, #3b82f6);
}

.dark-mode:not(.tm-auth-light) .uk-progress::-moz-progress-bar {
	background-color: var(--maincolor, #3b82f6);
}

/* UIkit Accordion Components */
.dark-mode:not(.tm-auth-light) .uk-accordion-title {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-accordion-title:hover {
	color: var(--maincolor, #3b82f6);
}

.dark-mode:not(.tm-auth-light) .uk-accordion-content {
	color: var(--text-secondary);
}

/* UIkit Divider Components */
.dark-mode:not(.tm-auth-light) .uk-divider-icon::before,
.dark-mode:not(.tm-auth-light) .uk-divider-icon::after {
	border-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .uk-divider-small::after {
	border-top-color: var(--border-color);
}

/* UIkit Tooltip Components */
.dark-mode:not(.tm-auth-light) .uk-tooltip {
	background-color: var(--text-primary);
	color: var(--bg-primary);
}

/* UIkit Light/Dark Classes Integration */
.dark-mode:not(.tm-auth-light) .uk-light {
	/* When using uk-light in dark mode, ensure proper contrast */
	color: rgba(255, 255, 255, 0.9);
}

.dark-mode:not(.tm-auth-light) .uk-dark {
	/* When using uk-dark in dark mode, use our text colors */
	color: var(--text-primary);
}

/* UIkit Link Components */
.dark-mode:not(.tm-auth-light) .uk-link,
.dark-mode:not(.tm-auth-light) a.uk-link {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-link:hover,
.dark-mode:not(.tm-auth-light) .uk-link:focus,
.dark-mode:not(.tm-auth-light) .uk-link:active,
.dark-mode:not(.tm-auth-light) .uk-link:visited,
.dark-mode:not(.tm-auth-light) a.uk-link:hover,
.dark-mode:not(.tm-auth-light) a.uk-link:focus,
.dark-mode:not(.tm-auth-light) a.uk-link:active,
.dark-mode:not(.tm-auth-light) a.uk-link:visited {
	color: var(--text-primary);
}

/* UIkit Code Components */
.dark-mode:not(.tm-auth-light) :not(pre) > code,
.dark-mode:not(.tm-auth-light) :not(pre) > kbd,
.dark-mode:not(.tm-auth-light) :not(pre) > samp {
	background-color: var(--bg-tertiary);
	color: var(--color-danger-light);
	border: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) pre {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) pre code {
	background-color: transparent;
	color: var(--text-primary);
}

/* UIkit Mark/Highlight Components */
.dark-mode:not(.tm-auth-light) mark {
	background-color: rgba(245, 158, 11, 0.3);
	color: var(--color-warning-light);
}

/* UIkit Blockquote Components */
.dark-mode:not(.tm-auth-light) blockquote {
	border-left-color: var(--maincolor, #3b82f6);
	color: var(--text-secondary);
}

/* UIkit List Components */
.dark-mode:not(.tm-auth-light) .uk-list > li::before {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .uk-list-divider > li:nth-child(n+2) {
	border-top-color: var(--border-light);
}

.dark-mode:not(.tm-auth-light) .uk-list-striped > li:nth-of-type(odd) {
	background-color: var(--bg-secondary);
}

/* UIkit Description List Components */
.dark-mode:not(.tm-auth-light) .uk-description-list > dt {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-description-list > dd {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-description-list-divider > dt:nth-child(n+2) {
	border-top-color: var(--border-color);
}

/* UIkit Overlay Components */
.dark-mode:not(.tm-auth-light) .uk-overlay-default {
	background-color: rgba(26, 26, 46, 0.8);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-overlay-primary {
	background-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

/* UIkit Animation & Transition Enhancements */
.dark-mode:not(.tm-auth-light) .uk-transition-toggle:hover .uk-transition-fade,
.dark-mode:not(.tm-auth-light) .uk-transition-toggle:focus .uk-transition-fade {
	opacity: 1;
}

/* Ensure UIkit components respect dark mode boundaries */
.dark-mode:not(.tm-auth-light) .uk-preserve-color,
.dark-mode:not(.tm-auth-light) .tm-auth-light {
	/* Preserve original colors for specific elements */
	--uk-inverse: dark;
}

/* When dark-mode is applied on html/body, auth pages must stay fully light */
html.dark-mode body.tm-auth-light,
body.dark-mode.tm-auth-light {
	color-scheme: light;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	--uk-inverse: dark;
}

html.dark-mode body.tm-auth-light .uk-background-default,
body.dark-mode.tm-auth-light .uk-background-default,
html.dark-mode body.tm-auth-light .uk-card-default,
body.dark-mode.tm-auth-light .uk-card-default,
html.dark-mode body.tm-auth-light .uk-dropdown,
body.dark-mode.tm-auth-light .uk-dropdown,
html.dark-mode body.tm-auth-light .uk-navbar-dropdown,
body.dark-mode.tm-auth-light .uk-navbar-dropdown,
html.dark-mode body.tm-auth-light .uk-modal-dialog,
body.dark-mode.tm-auth-light .uk-modal-dialog,
html.dark-mode body.tm-auth-light .uk-offcanvas-bar,
body.dark-mode.tm-auth-light .uk-offcanvas-bar,
html.dark-mode body.tm-auth-light .control-toolbar,
body.dark-mode.tm-auth-light .control-toolbar,
html.dark-mode body.tm-auth-light .control-filter,
body.dark-mode.tm-auth-light .control-filter {
	background-color: var(--bg-primary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

html.dark-mode body.tm-auth-light .uk-background-muted,
body.dark-mode.tm-auth-light .uk-background-muted,
html.dark-mode body.tm-auth-light .uk-card-default .uk-card-header,
body.dark-mode.tm-auth-light .uk-card-default .uk-card-header,
html.dark-mode body.tm-auth-light .uk-card-default .uk-card-footer,
body.dark-mode.tm-auth-light .uk-card-default .uk-card-footer,
html.dark-mode body.tm-auth-light .uk-modal-header,
body.dark-mode.tm-auth-light .uk-modal-header,
html.dark-mode body.tm-auth-light .uk-modal-footer,
body.dark-mode.tm-auth-light .uk-modal-footer,
html.dark-mode body.tm-auth-light .report-widget .uk-card-body,
body.dark-mode.tm-auth-light .report-widget .uk-card-body {
	background-color: var(--bg-secondary) !important;
	border-color: var(--border-light) !important;
	color: var(--text-primary) !important;
}

html.dark-mode body.tm-auth-light .uk-input,
body.dark-mode.tm-auth-light .uk-input,
html.dark-mode body.tm-auth-light .uk-select,
body.dark-mode.tm-auth-light .uk-select,
html.dark-mode body.tm-auth-light .uk-textarea,
body.dark-mode.tm-auth-light .uk-textarea,
html.dark-mode body.tm-auth-light .form-control,
body.dark-mode.tm-auth-light .form-control,
html.dark-mode body.tm-auth-light .custom-select,
body.dark-mode.tm-auth-light .custom-select,
html.dark-mode body.tm-auth-light .select2-container--default .select2-selection--single,
body.dark-mode.tm-auth-light .select2-container--default .select2-selection--single,
html.dark-mode body.tm-auth-light .select2-container--default .select2-selection--multiple,
body.dark-mode.tm-auth-light .select2-container--default .select2-selection--multiple {
	background-color: var(--input-bg) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

html.dark-mode body.tm-auth-light .uk-text-default,
body.dark-mode.tm-auth-light .uk-text-default,
html.dark-mode body.tm-auth-light .uk-text-emphasis,
body.dark-mode.tm-auth-light .uk-text-emphasis,
html.dark-mode body.tm-auth-light .uk-card-title,
body.dark-mode.tm-auth-light .uk-card-title,
html.dark-mode body.tm-auth-light .uk-modal-title,
body.dark-mode.tm-auth-light .uk-modal-title,
html.dark-mode body.tm-auth-light h1,
body.dark-mode.tm-auth-light h1,
html.dark-mode body.tm-auth-light h2,
body.dark-mode.tm-auth-light h2,
html.dark-mode body.tm-auth-light h3,
body.dark-mode.tm-auth-light h3,
html.dark-mode body.tm-auth-light h4,
body.dark-mode.tm-auth-light h4,
html.dark-mode body.tm-auth-light h5,
body.dark-mode.tm-auth-light h5,
html.dark-mode body.tm-auth-light h6,
body.dark-mode.tm-auth-light h6 {
	color: var(--text-primary) !important;
}

html.dark-mode body.tm-auth-light .uk-text-muted,
body.dark-mode.tm-auth-light .uk-text-muted,
html.dark-mode body.tm-auth-light .text-muted,
body.dark-mode.tm-auth-light .text-muted,
html.dark-mode body.tm-auth-light .help-block,
body.dark-mode.tm-auth-light .help-block {
	color: var(--text-muted) !important;
}

html.dark-mode body.tm-auth-light .uk-button-default,
body.dark-mode.tm-auth-light .uk-button-default,
html.dark-mode body.tm-auth-light .tm-button,
body.dark-mode.tm-auth-light .tm-button,
html.dark-mode body.tm-auth-light .btn-default,
body.dark-mode.tm-auth-light .btn-default {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* =====================================================
   WinterCMS Core Component Dark Mode Overrides
   ===================================================== */

/* Control Tabs - Active state enhancement for dark mode */
.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > ul.nav-tabs > li.active > a,
.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > div > ul.nav-tabs > li.active > a,
.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > div > div > ul.nav-tabs > li.active > a {
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
    color: var(--maincolor, #3b82f6);
}

.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > ul.nav-tabs > li.active,
.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > div > ul.nav-tabs > li.active,
.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > div > div > ul.nav-tabs > li.active {
	background-color: var(--bg-primary);
    border-bottom-color: var(--maincolor, #3b82f6);
}

.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > ul.nav-tabs > li.active,
.dark-mode:not(.tm-auth-light) .control-tabs.content-tabs > ul.nav-tabs > li {
	padding-left: 0;
	border-color: var(--border-color);
}

/* Plugin Exception Beautifier - Dark mode support */
.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-message-container {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-message {
    color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-toggle-stacktrace {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-toggle-stacktrace:hover {
    background: var(--maincolor, #3b82f6);
    color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-stacktrace-line {
    color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-stacktrace-line:nth-child(even) {
    background-color: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-stacktrace-line:nth-child(odd) {
    background-color: var(--bg-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-stacktrace-line-internal {
    color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-file {
    color: #93c5fd;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-line-number {
    color: #f87171;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-class {
    color: #c4b5fd;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-function {
    color: #fda4af;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-system-function {
    color: #fca5a5;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-code {
    color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-string {
    color: #86efac;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-number {
    color: #93c5fd;
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-formatted-content,
.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-raw-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .plugin-exception-beautifier .beautifier-raw-content {
    font-family: monospace;
}