/* =====================================================
   UIkit Skin - Modern Flat Design with Light/Dark Mode
   ===================================================== */

/* CSS Variables for Light/Dark Mode Support */
:root {
	/* Light Mode Colors */
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--bg-hover: rgba(0, 0, 0, 0.04);
	
	--text-primary: #212529;
	--text-secondary: #495057;
	--text-muted: #6c757d;
	--text-light: #adb5bd;
	--text-on-primary: #ffffff;
	
	--border-color: #dee2e6;
	--border-light: #e9ecef;
	
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	--sidebar-bg: #ffffff;
	--sidebar-hover: rgba(0, 0, 0, 0.04);
	--sidebar-active: var(--maincolor, #3b82f6);
	
	--card-bg: #ffffff;
	--input-bg: #ffffff;
	
	/* Status Colors */
	--color-success: #22c55e;
	--color-success-light: #86efac;
	--color-danger: #ef4444;
	--color-danger-light: #fca5a5;
	--color-warning: #f59e0b;
	--color-warning-light: #fcd34d;
	--color-info: #3b82f6;
	--color-info-light: #93c5fd;
	
	--navbar-height: 56px;
	--sidebar-width: 260px;
}

/* Dark Mode Variables - Auto mode (system preference) */
@media (prefers-color-scheme: dark) {
	:root:not(.dark-mode):not(.light-mode) {
		--bg-primary: #1a1a2e;
		--bg-secondary: #16213e;
		--bg-tertiary: #0f3460;
		--bg-hover: rgba(255, 255, 255, 0.06);
		
		/* Higher contrast for dark backgrounds */
		--text-primary: #f1f5f9;
		--text-secondary: #cbd5e1;
		--text-muted: #94a3b8;
		--text-light: #64748b;
		--text-on-primary: #ffffff;
		
		--border-color: #2d3748;
		--border-light: #1e2a3a;
		
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
		--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
		
		--sidebar-bg: #1a1a2e;
		--sidebar-hover: rgba(255, 255, 255, 0.06);
		
		--card-bg: #1e2a3a;
		--input-bg: #16213e;
		
		/* Brand Colors - Adjusted for dark mode (lighter for better contrast) */
		--maincolor: #16213e;
		--secondcolor: #818cf8;
		--maincolor2: #4ade80;
		--mainbgcolor: #1a1a2e;
		
		/* Status Colors - same for both modes */
		--color-success: #22c55e;
		--color-success-light: #86efac;
		--color-danger: #ef4444;
		--color-danger-light: #fca5a5;
		--color-warning: #f59e0b;
		--color-warning-light: #fcd34d;
		--color-info: #3b82f6;
		--color-info-light: #93c5fd;
	}
}

/* Manual Dark Mode Class Override - Force dark mode */
/* Set variables on :root when html or body has dark-mode class */
html.dark-mode,
body.dark-mode,
.dark-mode {
	color-scheme: dark;
	--bg-primary: #1a1a2e;
	--bg-secondary: #16213e;
	--bg-tertiary: #0f3460;
	--bg-hover: rgba(255, 255, 255, 0.06);
	
	/* Higher contrast for dark backgrounds */
	--text-primary: #f1f5f9;
	--text-secondary: #cbd5e1;
	--text-muted: #94a3b8;
	--text-light: #64748b;
	--text-on-primary: #ffffff;
	
	--border-color: #2d3748;
	--border-light: #1e2a3a;
	
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
	
	--sidebar-bg: #1a1a2e;
	--sidebar-hover: rgba(255, 255, 255, 0.06);
	
	--card-bg: #1e2a3a;
	--input-bg: #16213e;
	
	/* Brand Colors - Adjusted for dark mode (lighter for better contrast) */
	--maincolor: #16213e;
	--secondcolor: #818cf8;
	--maincolor2: #4ade80;
	--mainbgcolor: #1a1a2e;
	
	/* Status Colors - same for both modes */
	--color-success: #22c55e;
	--color-success-light: #86efac;
	--color-danger: #ef4444;
	--color-danger-light: #fca5a5;
	--color-warning: #f59e0b;
	--color-warning-light: #fcd34d;
	--color-info: #3b82f6;
	--color-info-light: #93c5fd;
}


/* Light Mode Class Override - Force light mode (override system dark preference) */
.light-mode {
	color-scheme: light;
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--bg-hover: rgba(0, 0, 0, 0.04);
	
	--text-primary: #212529;
	--text-secondary: #495057;
	--text-muted: #6c757d;
	--text-light: #adb5bd;
	--text-on-primary: #ffffff;
	
	--border-color: #dee2e6;
	--border-light: #e9ecef;
	
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	--sidebar-bg: #ffffff;
	--sidebar-hover: rgba(0, 0, 0, 0.04);
	
	--card-bg: #ffffff;
	--input-bg: #ffffff;
	
	/* Status Colors - same for both modes */
	--color-success: #22c55e;
	--color-success-light: #86efac;
	--color-danger: #ef4444;
	--color-danger-light: #fca5a5;
	--color-warning: #f59e0b;
	--color-warning-light: #fcd34d;
	--color-info: #3b82f6;
	--color-info-light: #93c5fd;
}

/* Auth layout: force LIGHT mode only (independent of system prefers-color-scheme) */
.tm-auth-light {
	color-scheme: light;
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--bg-hover: rgba(0, 0, 0, 0.04);
	
	--text-primary: #212529;
	--text-secondary: #495057;
	--text-muted: #6c757d;
	--text-light: #adb5bd;
	--text-on-primary: #ffffff;
	
	--border-color: #dee2e6;
	--border-light: #e9ecef;
	
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	--sidebar-bg: #ffffff;
	--sidebar-hover: rgba(0, 0, 0, 0.04);
	--card-bg: #ffffff;
	--input-bg: #ffffff;
	
	/* Status Colors - same for both modes */
	--color-success: #22c55e;
	--color-success-light: #86efac;
	--color-danger: #ef4444;
	--color-danger-light: #fca5a5;
	--color-warning: #f59e0b;
	--color-warning-light: #fcd34d;
	--color-info: #3b82f6;
	--color-info-light: #93c5fd;
}

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

/* Base Styles */
html {
	background: var(--bg-primary);
	background-color: var(--bg-primary);
}

/* Dark mode: html now has dark-mode class, so variables apply correctly */
html.dark-mode {
	background: var(--bg-primary);
	background-color: var(--bg-primary);
}

body {
	font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

body.dark-mode {
	background: var(--bg-primary);
	background-color: var(--bg-primary);
}

p, span, div, h1, h2, h3, h4, h5, h6, a, li, td, th, label {
	font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Base Heading Styles */
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	font-weight: 600;
	margin-top: 0;
}

h1 {
	font-size: 2rem;
	line-height: 1.2;
	margin-bottom: 1rem;
}

h2 {
	font-size: 1.75rem;
	line-height: 1.3;
	margin-bottom: 0.875rem;
}

h3 {
	font-size: 1.5rem;
	line-height: 1.4;
	margin-bottom: 0.75rem;
}

h4 {
	font-size: 1.25rem;
	line-height: 1.4;
	margin-bottom: 0.625rem;
}

h5 {
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

h6 {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 0.5rem;
}

/* UIkit Form Label Base Styles */
.uk-form-label {
	color: var(--text-primary);
	font-weight: 500;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
	display: block;
}

input, textarea, select, button {
	font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

a {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover,
a:focus,
a:active,
a:visited,
.uk-nav-default .uk-nav-sub a:hover,
.user-drop .uk-dropdown-nav>li>a:hover {
	color: var(--text-primary);
	text-decoration: none;
}

a.uk-button-primary:hover,
a.uk-button-primary:focus,
a.uk-button-primary:active,
a.uk-button-primary:visited,
a.btn-primary {
	color: var(--text-on-primary);
}
/* =====================================================
   Top Header / Navigation Bar
   ===================================================== */
#top-head {
	z-index: 1400;
	height: var(--navbar-height);
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	transition: box-shadow 0.2s ease;
}

#top-head .uk-navbar {
	padding: 0 20px;
	border: none;
	border-radius: 0;
	height: var(--navbar-height);
	box-sizing: border-box;
	background: var(--maincolor, #3b82f6);
}

#top-head .tm-brand {
	display: inline-block;
}

#top-head .tm-brand>a {
	line-height: calc(var(--navbar-height) - 6px);
}

/* =====================================================
   Text Logo Styles
   ===================================================== */
/* Anton is served by Google Fonts as unicode-range subsets; load subsets so Vietnamese glyphs render in the logo font */
/* vietnamese */
@font-face {
	font-family: 'TLTLImpactCondensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tltl-impact/Anton-Regular-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'TLTLImpactCondensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tltl-impact/Anton-Regular-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'TLTLImpactCondensed';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src:
		url('../fonts/tltl-impact/Anton-Regular.woff2') format('woff2'),
		url('../fonts/tltl-impact/Anton-Regular.ttf') format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.tm-text-logo {
	display: inline-flex;
	align-items: center;
	height: var(--navbar-height);
	color: var(--text-on-primary);
	text-transform: uppercase;
	/* Use a heavier display-like font stack for clearer text effects */
	font-family: 'TLTLImpactCondensed', Impact, 'Arial Black', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Base: keep clean; each style adds its own "Photoshop-like" effect */
	text-shadow: none;
}

/* Login/Auth: logo on light background */
.tm-text-logo.tm-text-logo--auth {
	height: auto;
	color: var(--maincolor, #3b82f6);
	font-size: 2rem;
	letter-spacing: 0.14em;
}

/* Tweak style 1 for colored text on light background */
.tm-text-logo.tm-text-logo--auth.tm-text-logo-style-1 {
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.55),
		0 10px 18px rgba(0, 0, 0, 0.18);
}

/* Auth card sizing (responsive) */
.tm-auth-card {
	width: min(92vw, 420px);
	border-radius: 16px;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-lg);
}

.tm-auth-card .uk-input {
	height: 44px;
	font-size: 1rem;
}

@media (max-width: 480px) {
	.tm-text-logo.tm-text-logo--auth {
		font-size: 1.6rem;
	}
}

/* Style 1: Bold Simple */
.tm-text-logo-style-1 {
	font-weight: 900;
	letter-spacing: 0.14em;
	/* Photoshop-ish: drop shadow (tight + soft) */
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.25),
		0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Style 2: Gradient */
.tm-text-logo-style-2 {
	/* Photoshop-ish: letterpress / inset feel (engraved) */
	font-weight: 800;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.92);
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.22), /* top highlight */
		0 -1px 0 rgba(0, 0, 0, 0.28),      /* inner shade */
		0 2px 6px rgba(0, 0, 0, 0.30);     /* depth */
}

/* Style 3: With Shadow */
.tm-text-logo-style-3 {
	font-weight: 900;
	letter-spacing: 0.14em;
	/* Photoshop-ish: hard shadow + ambient shadow */
	text-shadow:
		0 3px 0 rgba(0, 0, 0, 0.35),
		0 10px 18px rgba(0, 0, 0, 0.35);
}

/* Style 4: Outlined */
.tm-text-logo-style-4 {
	/* Outline but still readable */
	color: var(--text-on-primary);
	/* Photoshop-ish: stroke/outline */
	-webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
	letter-spacing: 0.16em;
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.25),
		0 8px 16px rgba(0, 0, 0, 0.35);
}

/* Style 5: Bold Large */
.tm-text-logo-style-5 {
	font-size: 1.65rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	/* Photoshop-ish: subtle outer glow + shadow */
	text-shadow:
		0 0 10px rgba(255, 255, 255, 0.22),
		0 2px 0 rgba(0, 0, 0, 0.25),
		0 10px 18px rgba(0, 0, 0, 0.30);
}

/* Style 6: Thin Elegant */
.tm-text-logo-style-6 {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	font-style: italic;
	/* Photoshop-ish: emboss / bevel illusion (highlight + shadow) */
	text-shadow:
		-1px -1px 0 rgba(255, 255, 255, 0.25),
		1px 1px 0 rgba(0, 0, 0, 0.35),
		0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Style 7: Modern with Background */
.tm-text-logo-style-7 {
	/* Photoshop-ish: glass badge + inset highlight */
	padding: 4px 12px;
	border-radius: 10px;
	letter-spacing: 0.14em;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.24);
	backdrop-filter: blur(10px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -1px 0 rgba(0, 0, 0, 0.16),
		0 8px 18px rgba(0, 0, 0, 0.20);
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Style 8: Bold with Underline */
.tm-text-logo-style-8 {
	font-weight: 900;
	letter-spacing: 0.14em;
	border-bottom: 3px solid rgba(255, 255, 255, 0.95);
	padding-bottom: 3px;
	/* Photoshop-ish: underline + shadow */
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.25),
		0 10px 18px rgba(0, 0, 0, 0.30);
}

/* Style 9: Spaced Letters */
.tm-text-logo-style-9 {
	font-weight: 900;
	letter-spacing: 0.28em;
	/* Photoshop-ish: crisp shadow + slight outline via multi-shadow */
	text-shadow:
		1px 0 0 rgba(0, 0, 0, 0.22),
		-1px 0 0 rgba(0, 0, 0, 0.22),
		0 1px 0 rgba(0, 0, 0, 0.22),
		0 -1px 0 rgba(0, 0, 0, 0.22),
		0 10px 18px rgba(0, 0, 0, 0.28);
}

/* Style 10: Compact Bold */
.tm-text-logo-style-10 {
	font-weight: 900;
	letter-spacing: 0.06em;
	/* Photoshop-ish: strong stroke */
	-webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.40);
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.25),
		0 8px 16px rgba(0, 0, 0, 0.32);
}

#top-head .uk-navbar .uk-navbar-nav>li>a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 12px;
	text-shadow: none;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.9);
	height: var(--navbar-height);
	min-height: var(--navbar-height);
	cursor: pointer;
	line-height: var(--navbar-height);
	transition: background-color 0.15s ease, color 0.15s ease;
}

#top-head .uk-navbar .uk-navbar-nav>li>a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--text-on-primary);
}

#top-head .uk-navbar .uk-navbar-nav>li>a>img {
	border-radius: 50%;
}

#top-head .uk-navbar .uk-navbar-nav>li>a>span {
	position: relative;
}

#top-head .uk-navbar .uk-navbar-nav>li>a>i,
#top-head .uk-navbar .uk-navbar-nav>li>a>span {
	color: var(--text-on-primary);
}

#top-head .uk-navbar .uk-navbar-nav>li>a>i,
#top-head .uk-navbar .uk-navbar-nav>li>a>i:before,
#top-head .uk-navbar .uk-navbar-nav>li>a>span,
#top-head .uk-navbar .uk-navbar-nav>li>a>span:before {
	font-size: 1.25rem;
}

#top-head .uk-navbar .uk-navbar-nav>li>a .tm-indicator {
	position: absolute;
	right: 4px;
	top: 8px;
	transform: translateX(50%);
	background: var(--color-danger);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: block;
	border: 2px solid var(--maincolor, #3b82f6);
}

#top-head .uk-navbar-nav>li>a,
#top-head .uk-navbar-item,
#top-head .uk-navbar-toggle {
	min-height: var(--navbar-height);
	padding: 0 10px;
	font-size: 0.875rem;
}

#top-head .uk-search-input {
	font-size: 0.875rem;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.15);
	height: 36px;
	border-radius: 8px;
	border: 1px solid transparent;
	box-shadow: none;
	color: var(--text-on-primary);
	transition: all 0.2s ease;
}

#top-head .uk-search-input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

#top-head .uk-search-input:focus {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}

#top-head.uk-active {
	box-shadow: var(--shadow-md);
}

#top-head .uk-navbar-aside {
	width: 220px;
}

@media (max-width: 959px) {
	#top-head .uk-navbar-aside {
		width: auto;
	}
}

/* =====================================================
   Left Sidebar
   ===================================================== */
#left-col {
	position: fixed;
	left: 0;
	top: var(--navbar-height);
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--sidebar-bg);
	width: var(--sidebar-width);
	z-index: 400;
	transition: transform 0.25s ease, width 0.25s ease;
	border-right: 1px solid var(--border-light);
}

#left-col .left-content-box,
#left-col .left-nav-wrap,
#left-col .bar-bottom {
	border-right: none;
}

#left-col ul.uk-nav-default>li>a {
	padding: 10px 20px;
	border-left: 3px solid transparent;
	color: var(--text-secondary);
	transition: all 0.15s ease;
	font-weight: 500;
}

#left-col ul.uk-nav-default li.uk-nav-header {
	padding: 16px 20px 8px 20px;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	font-weight: 600;
}

#left-col ul.uk-nav-default>li>a:hover,
#left-col ul.uk-nav-default>li.uk-open>a {
	border-left-color: var(--maincolor, #3b82f6);
	color: var(--text-primary);
	background-color: var(--sidebar-hover);
	font-weight: 600;
}

#left-col ul.uk-nav-default li .uk-nav-sub {
	padding-left: 44px;
}

#left-col .uk-dropdown.user-drop {
	min-width: 180px;
	max-width: 200px;
	padding: 8px;
	border-radius: 8px;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
}

#left-col .uk-dropdown.user-drop:after {
	display: none;
}

#left-col ul.uk-nav-default>li>a>i,
.uk-nav-sub i {
	width: 20px;
	height: auto;
	text-align: center;
	margin-right: 10px;
}

.left-content-box {
	padding: 16px 20px;
	border-top: 1px solid var(--border-light);
	margin-bottom: -1px;
	background: var(--sidebar-bg);
}

.left-nav-wrap {
	padding-bottom: 80px;
}

.content-box-dark {
	background-color: var(--bg-tertiary);
}

.text-light {
	font-weight: 300;
	font-size: 1.25rem;
}

.bar-bottom {
	border-top: 1px solid var(--border-light);
	padding: 12px 0;
	background-color: var(--sidebar-bg);
	position: fixed;
	left: 0;
	z-index: 3;
	bottom: 0;
	width: var(--sidebar-width);
}

.left-logo {
	height: var(--navbar-height);
	line-height: var(--navbar-height);
	padding: 0 20px;
	background-color: var(--maincolor, #3b82f6);
}

.custom-logo {
	height: 32px;
}

.profile-img {
	width: 56px;
	margin: 0 auto 8px auto;
	display: block;
	border: none;
}

.navbar-logo {
	background-color: transparent;
	margin-left: 0;
}

/* =====================================================
   Main Content Area
   ===================================================== */
#tm-content {
	padding: 0;
	margin-left: 0;
	margin-top: var(--navbar-height);
	min-height: calc(100vh - var(--navbar-height));
	background-color: var(--bg-primary);
	transition: margin 0.25s ease;
}

@media screen and (min-width: 960px) {
	#tm-content {
		margin-left: var(--sidebar-width);
	}
}

/* =====================================================
   Page Top Bar (Sticky Header for Page)
   ===================================================== */
#tm-page-top-bar.tm-top-bar {
	background: var(--bg-primary);
	box-sizing: border-box;
	position: sticky !important;
	top: var(--navbar-height);
	font-size: 0.875rem;
	display: flex;
	min-height: 56px;
	z-index: 200;
	flex-shrink: 0;
	border-bottom: 1px solid var(--border-light);
}

/* Fix sticky header in report container */
.report-container #tm-page-top-bar.tm-top-bar,
.report-container ~ #tm-page-top-bar.tm-top-bar,
#tm-content:has(.report-container) #tm-page-top-bar.tm-top-bar {
	position: sticky !important;
	top: var(--navbar-height);
	z-index: 200;
}

#tm-page-top-bar .tm-top-bar-content {
	display: flex;
	min-height: 56px;
	align-items: center;
	padding: 8px 24px;
	box-sizing: border-box;
	z-index: 1010;
	position: relative;
	background: var(--bg-primary);
}

#tm-page-top-bar .tm-top-bar-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

#tm-page-top-bar .tm-top-bar-subtitle {
	margin: 0;
	line-height: 1.3;
	color: var(--text-muted);
	font-size: 0.8rem;
}

#tm-page-top-bar.uk-sticky-fixed {
	z-index: 1250;
	box-shadow: var(--shadow-sm);
}

.tm-actions {
	display: flex;
	gap: 8px;
}

.tm-actions-icon {
	width: 36px;
	height: 36px;
	font-size: 1.25rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	transition: all 0.15s ease;
	border-radius: 8px;
	text-decoration: none;
}

.tm-actions-icon:hover {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

/* =====================================================
   Buttons - Modern Flat Design
   ===================================================== */
.uk-button {
	text-transform: none;
	text-shadow: none;
	font-weight: 500;
	border-radius: 8px;
	height: 38px;
	padding: 0 20px;
	line-height: 38px;
	box-shadow: none;
	transition: all 0.15s ease;
	border: 1px solid transparent;
}

.uk-button:hover {
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

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

.uk-button-default:hover,
.uk-button-default:focus {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

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

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

.uk-button-secondary {
	background-color: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

.uk-button-secondary:hover,
.uk-button-secondary:focus {
	background-color: var(--secondcolor, #6366f1);
	opacity: 0.9;
	color: var(--text-on-primary);
}

.uk-button-danger {
	background-color: var(--color-danger);
	color: var(--text-on-primary);
}

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

.uk-button-small {
	padding: 0 14px;
	line-height: 30px;
	height: 30px;
	font-size: 0.8rem;
	border-radius: 6px;
}

.uk-button-link,
.uk-button-text {
	box-shadow: none !important;
}

.uk-button+.uk-button {
	margin-left: 8px;
}

/* Custom TM Buttons */
.tm-button {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: none;
	height: 38px;
	min-width: 70px;
	padding: 0 16px;
	margin: 0;
	text-align: center;
	text-shadow: none;
	text-transform: none;
	transition: all 0.15s ease;
	color: var(--text-primary);
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1;
}

.tm-button:hover {
	background: var(--bg-secondary);
	border-color: var(--border-color);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.tm-button:active,
.tm-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.tm-button-primary,
.tm-button-primary:hover,
.tm-button-primary:active,
.tm-button-primary:focus {
	background: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.tm-button-secondary,
.tm-button-secondary:hover,
.tm-button-secondary:active,
.tm-button-secondary:focus {
	background: var(--secondcolor, #6366f1);
	border-color: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

.tm-button-danger,
.tm-button-danger:hover,
.tm-button-danger:active,
.tm-button-danger:focus {
	background: var(--color-danger);
	border-color: var(--color-danger);
	color: var(--text-on-primary);
}

.tm-button-success,
.tm-button-success:hover,
.tm-button-success:active,
.tm-button-success:focus {
	background: var(--color-success);
	border-color: var(--color-success);
	color: var(--text-on-primary);
}

.tm-button-warning,
.tm-button-warning:hover,
.tm-button-warning:active,
.tm-button-warning:focus {
	background: var(--color-warning);
	border-color: var(--color-warning);
	color: var(--text-on-primary);
}

.tm-button:disabled,
.tm-button-disabled {
	color: var(--text-muted);
	background: var(--bg-tertiary);
	border-color: var(--border-color);
	box-shadow: none !important;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.6;
}

.tm-button-outline {
	box-shadow: none !important;
	background: transparent;
}

.tm-button-outline:hover {
	background: var(--bg-hover);
}

.tm-button-mini {
	line-height: 1;
	min-width: 12px;
	font-size: 0.75rem;
	height: 26px;
	padding: 0 10px;
	border-radius: 6px;
}

/* TM Icon Buttons */
.tm-icon-button,
.tm-icon-button-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bg-primary);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	line-height: 1;
	padding: 0;
	box-shadow: none;
	transition: all 0.15s ease;
}

.tm-icon-button {
	width: 40px;
	height: 40px;
}

.tm-icon-button-small {
	width: 30px;
	height: 30px;
}

.tm-icon-button i,
.tm-icon-button .icon,
.tm-icon-button [class^="icon-"],
.tm-icon-button [class*=" icon-"],
.tm-icon-button-small i,
.tm-icon-button-small .icon,
.tm-icon-button-small [class^="icon-"],
.tm-icon-button-small [class*=" icon-"] {
	line-height: 1;
}

.tm-icon-button i,
.tm-icon-button .icon,
.tm-icon-button [class^="icon-"],
.tm-icon-button [class*=" icon-"] {
	font-size: 16px;
}

.tm-icon-button-small i,
.tm-icon-button-small .icon,
.tm-icon-button-small [class^="icon-"],
.tm-icon-button-small [class*=" icon-"] {
	font-size: 12px;
}

.tm-icon-button:hover,
.tm-icon-button:focus,
.tm-icon-button-small:hover,
.tm-icon-button-small:focus {
	background: var(--bg-hover);
	color: var(--text-primary);
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.tm-icon-button:active,
.tm-icon-button-small:active {
	box-shadow: none;
	transform: translateY(0);
}

.tm-icon-button:disabled,
.tm-icon-button-small:disabled,
.tm-icon-button.tm-button-disabled,
.tm-icon-button-small.tm-button-disabled {
	opacity: 0.6;
	color: var(--text-muted);
	background: var(--bg-tertiary);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

/* Project Members Responsive Display */
.tm-project-members {
	gap: 8px;
	align-items: center;
}

.tm-member-avatar {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

.tm-member-avatar:hover {
	transform: scale(1.1);
	box-shadow: var(--shadow-sm);
}

/* Responsive: Hide extra members on smaller screens */
@media (max-width: 640px) {
	.tm-project-members {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}
	
	.tm-member-avatar:nth-child(n+3) {
		display: none;
	}
}

@media (min-width: 641px) and (max-width: 960px) {
	.tm-member-avatar:nth-child(n+4) {
		display: none;
	}
}

/* FAB Buttons */
.tm-fab {
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bg-primary);
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.tm-fab:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

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

.tm-fab-secondary {
	background: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

.tm-fab-small {
	width: 36px;
	height: 36px;
}

.tm-fab-large {
	width: 64px;
	height: 64px;
}

/* =====================================================
   Cards - Clean Flat Design
   ===================================================== */
.uk-card {
	background: var(--card-bg);
	color: var(--text-primary);
	border-radius: 12px;
	border: 1px solid var(--border-light);
	box-shadow: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.uk-card.uk-card-hover:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.uk-card-header {
	border-radius: 12px 12px 0 0;
	border-bottom: 1px solid var(--border-light);
}

.uk-card-header:not([class*="tm-padding"]) {
	padding: 16px 20px;
}

.uk-card-body:not([class*="tm-padding"]) {
	padding: 20px;
}

.uk-card-footer {
	border-radius: 0 0 12px 12px;
	border-top: 1px solid var(--border-light);
}

.uk-card-footer:not([class*="tm-padding"]) {
	padding: 16px 20px;
}

.uk-card-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
}

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

.uk-card-primary .uk-card-title {
	color: var(--text-on-primary);
}

.uk-card-secondary {
	background-color: var(--secondcolor, #6366f1);
	border-color: var(--secondcolor, #6366f1);
	color: var(--text-on-primary);
}

.uk-card-secondary .uk-card-title {
	color: var(--text-on-primary);
}

/* =====================================================
   Form Elements
   ===================================================== */
.uk-input,
.uk-select,
.uk-textarea {
	background-color: var(--input-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: var(--text-primary);
	padding: 8px 14px;
	transition: all 0.15s ease;
	font-size: 0.875rem;
}

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

.uk-input:disabled,
.uk-select:disabled,
.uk-textarea:disabled,
.uk-input[disabled],
.uk-select[disabled],
.uk-textarea[disabled],
.uk-input[readonly],
.uk-select[readonly],
.uk-textarea[readonly],
.form-control:disabled,
.form-control[disabled],
.form-control[readonly],
.custom-select:disabled,
.custom-select[disabled],
.custom-select[readonly] {
	background-color: color-mix(in srgb, var(--bg-tertiary) 82%, var(--bg-primary) 18%);
	border-color: color-mix(in srgb, var(--border-color) 88%, transparent);
	color: var(--text-muted) !important;
	box-shadow: none;
	opacity: 0.82;
	cursor: not-allowed;
	filter: saturate(0.8);
}

div.uk-select[disabled],
div.custom-select[disabled],
div.form-control[disabled] {
	display: flex;
	align-items: center;
	min-height: 38px;
	line-height: 1.5;
}

.uk-select:disabled,
.uk-select[disabled],
.uk-select[readonly],
.custom-select:disabled,
.custom-select[disabled],
.custom-select[readonly] {
	background-image: none !important;
	padding-right: 14px;
}

.uk-checkbox,
.uk-radio {
	width: 18px;
	height: 18px;
	border: 2px solid var(--border-color);
	background-color: var(--input-bg);
	border-radius: 4px;
	transition: all 0.15s ease;
}

.uk-radio {
	border-radius: 50%;
}

.uk-checkbox:checked,
.uk-checkbox:checked:focus {
	border-color: var(--maincolor, #3b82f6);
	background-color: var(--maincolor, #3b82f6);
}

.uk-radio:checked,
.uk-radio:checked:focus {
	border-color: var(--maincolor, #3b82f6);
	background-color: var(--maincolor, #3b82f6);
}

/* =====================================================
   Offcanvas / Side Panels
   ===================================================== */
.uk-offcanvas {
	z-index: 1300;
}

.uk-offcanvas-bar {
	top: var(--navbar-height);
	color: var(--text-primary);
	background: var(--bg-primary);
	padding: 20px;
	box-shadow: var(--shadow-lg);
}

.uk-offcanvas-bar .uk-close,
.uk-offcanvas-bar .uk-nav-default>li>a,
.uk-offcanvas-bar h1,
.uk-offcanvas-bar h2,
.uk-offcanvas-bar h3,
.uk-offcanvas-bar h4,
.uk-offcanvas-bar h5,
.uk-offcanvas-bar h6 {
	color: var(--text-primary);
}

.uk-offcanvas-bar hr {
	border-color: var(--border-color);
}

.uk-offcanvas-bar .uk-text-muted {
	color: var(--text-muted) !important;
}

.uk-offcanvas-bar-animation {
	transition: all 0.25s ease;
}

.uk-offcanvas-bar .uk-input {
	background-color: var(--input-bg) !important;
	color: var(--text-primary);
	border-color: var(--border-color);
}

/* =====================================================
   Dropdowns
   ===================================================== */
.uk-dropdown,
.uk-navbar-dropdown {
	background: var(--bg-primary);
	border: 1px solid var(--border-light);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	padding: 8px;
}

.uk-dropdown-nav>li>a:hover,
.uk-nav-default>li>a:hover {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

.uk-dropdown-nav>li>a,
.uk-nav-default>li>a {
	color: var(--text-secondary);
	padding: 8px 12px;
	border-radius: 6px;
	transition: all 0.15s ease;
}

.uk-nav-divider {
	border-color: var(--border-light);
	margin: 8px 0;
}

/* =====================================================
   Tooltips
   ===================================================== */
.uk-tooltip {
	background-color: var(--text-primary);
	color: var(--bg-primary);
	border-radius: 6px;
	box-shadow: var(--shadow-md);
	padding: 6px 12px;
	font-size: 0.8rem;
}

/* =====================================================
   Accordion
   ===================================================== */
.uk-accordion-title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-primary);
	padding: 12px 0;
	cursor: pointer;
	transition: color 0.15s ease;
}

.uk-accordion-title:hover {
	color: var(--maincolor, #3b82f6);
}

.uk-accordion-title:before {
	display: none;
}

.uk-accordion-title:after {
	content: '\2303';
	color: var(--maincolor, #3b82f6);
	font-size: 1.25rem;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: rotate(180deg) translateY(50%);
	transition: transform 0.2s ease;
}

.uk-accordion .uk-open .uk-accordion-title:after {
	transform: rotate(0deg) translateY(-50%);
}

.uk-accordion-content {
	margin: 12px 0 0;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.uk-accordion-outline .uk-accordion-title {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 12px 40px 12px 16px;
}

.uk-accordion-outline>li.uk-open .uk-accordion-title {
	border-color: var(--maincolor, #3b82f6);
	background: var(--bg-secondary);
}

/* =====================================================
   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(--maincolor, #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;
}

.form-control.growable:active, .form-control.growable:focus {
	width: 100% !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 transparent;
	border-radius: 8px;
	transition: all 0.15s ease;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	border-color: var(--border-color);
}

.btn:hover,
.btn:focus {
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.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);
	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.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 {
	width: 50%;
	float: left;
	padding-right: 12px;
	box-sizing: border-box;
}

.form-group.span-right {
	width: 50%;
	float: right;
	padding-left: 12px;
	box-sizing: border-box;
}

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

.form-group.span-auto {
	width: 50%;
	float: left;
	padding-right: 12px;
	box-sizing: border-box;
}

/* 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;
	flex-wrap: wrap;
	width: 100%;
}

.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: 8px;
}

.control-balloon-selector ul li {
	margin: 0;
}

.control-balloon-selector ul li.active {
	background-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

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

.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;
}

/* =====================================================
   Left Panel Canvas
   ===================================================== */
#leftpanelcanvas a {
	color: var(--text-primary);
}

#leftpanelcanvas .uk-nav-sub .uk-active a {
	color: var(--maincolor, #3b82f6);
	font-weight: 600;
}

.user-drop .uk-dropdown-nav>li>a {
	color: var(--text-primary);
}

.uk-dark .uk-nav-default>li>a {
	color: var(--text-primary);
}

/* =====================================================
   Utility Padding Classes
   ===================================================== */
.tm-padding-xsmall { padding: 5px !important; }
.tm-padding-xsmall-top { padding-top: 5px !important; }
.tm-padding-xsmall-bottom { padding-bottom: 5px !important; }
.tm-padding-xsmall-y { padding-top: 5px !important; padding-bottom: 5px !important; }
.tm-padding-xsmall-left { padding-left: 5px !important; }
.tm-padding-xsmall-right { padding-right: 5px !important; }
.tm-padding-xsmall-x { padding-left: 5px !important; padding-right: 5px !important; }

.tm-padding-small { padding: 10px !important; }
.tm-padding-small-top { padding-top: 10px !important; }
.tm-padding-small-bottom { padding-bottom: 10px !important; }
.tm-padding-small-y { padding-top: 10px !important; padding-bottom: 10px !important; }
.tm-padding-small-left { padding-left: 10px !important; }
.tm-padding-small-right { padding-right: 10px !important; }
.tm-padding-small-x { padding-left: 10px !important; padding-right: 10px !important; }

.tm-padding-medium { padding: 20px !important; }
.tm-padding-medium-top { padding-top: 20px !important; }
.tm-padding-medium-bottom { padding-bottom: 20px !important; }
.tm-padding-medium-y { padding-top: 20px !important; padding-bottom: 20px !important; }
.tm-padding-medium-left { padding-left: 20px !important; }
.tm-padding-medium-right { padding-right: 20px !important; }
.tm-padding-medium-x { padding-left: 20px !important; padding-right: 20px !important; }
.tm-padding-medium-ends {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

.tm-padding-large { padding: 40px !important; }
.tm-padding-large-top { padding-top: 40px !important; }
.tm-padding-large-bottom { padding-bottom: 40px !important; }
.tm-padding-large-y { padding-top: 40px !important; padding-bottom: 40px !important; }
.tm-padding-large-left { padding-left: 40px !important; }
.tm-padding-large-right { padding-right: 40px !important; }
.tm-padding-large-x { padding-left: 40px !important; padding-right: 40px !important; }

/* =====================================================
   Color Utility Classes
   ===================================================== */
.tm-bg-maroon { background-color: #db2777 !important; }
.tm-color-maroon { color: #db2777 !important; }
.tm-bg-olive { background-color: var(--color-success) !important; }
.tm-color-olive { color: var(--color-success) !important; }
.tm-bg-pink { background-color: #ec4899 !important; }
.tm-color-pink { color: #ec4899 !important; }
.tm-color-white { color: var(--text-on-primary) !important; }

/* =====================================================
   Misc Utilities
   ===================================================== */
.tm-nogap { gap: 0 !important; }

.uk-heading-primary {
	letter-spacing: -0.02em;
	font-weight: 600;
}

.uk-heading-line> :after,
.uk-heading-line> :before {
	border-color: var(--border-color);
}

.member-avatar { width: 32px; border-radius: 50%; }

.panel-icons { margin: 0 4px; }

.TinyMDE { line-height: 1.75 !important; }

/* CyberChef */
#workspace-wrapper { top: 0 !important; }
#workspace-wrapper .panel { padding: 0 !important; }
#controls { height: 120px; padding: 0 !important; }

/* Search field */
.search-field {
	width: 160px;
	transition: all 0.25s ease;
}

.search-field:focus {
	width: 240px;
}

/* Chart containers */
.chart-container {
	position: relative;
	height: 300px;
	margin: 0 auto;
}

/* Comment list */
.uk-comment-list>:nth-child(n+2) {
	margin-top: 24px;
}

/* Fancy tree */
.hip-tree ul.fancytree-container {
	border: none;
}

/* Calendar */
.calendar-title {
	text-transform: uppercase;
	font-weight: 600;
}

/* Select2 */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin: 4px 0 0 4px;
	border-radius: 6px;
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

/* Cart/Bell counters */
.nav-cart__counter,
.nav-bell__counter {
	top: -14px;
	left: -6px;
	font-size: 0.65rem !important;
	padding: 2px 5px;
	border-radius: 10px;
	background-color: var(--color-danger);
	color: var(--text-on-primary);
	font-weight: 600;
}

/* Fullscreen editors */
.field-codeeditor.editor-fullscreen,
html body .fr-box.fr-fullscreen,
.field-markdowneditor.is-fullscreen {
	z-index: 1401 !important;
}

/* Text utilities */
.tm-text-tiny {
	font-size: 0.75rem !important;
	line-height: 1.3 !important;
}

/* Friend bookmark button */
.hfb-btn-bookmark {
	z-index: 9999;
	margin-top: 10%;
}

.tm-button-custom-friend {
	color: var(--maincolor, #3b82f6);
	border-color: var(--border-color);
	border-radius: 8px;
	background-color: var(--bg-primary);
	width: 80px;
}

/* Page header right */
.tm-pageheader-right {
	float: right;
}

/* =====================================================
   Button Groups
   ===================================================== */
.uk-button-group {
	border-radius: 8px;
	display: inline-flex;
	align-items: stretch;
	padding: 0;
}

.uk-button-group>.tm-button,
.uk-button-group>.uk-button {
	border-radius: 0;
}

.uk-button-group>.tm-button:first-child,
.uk-button-group>.uk-button:first-child {
	border-radius: 8px 0 0 8px;
}

.uk-button-group>.tm-button:last-child,
.uk-button-group>.tm-button+div>.tm-button,
.uk-button-group>.uk-button:last-child,
.uk-button-group>.uk-button+div>.uk-button {
	border-radius: 0 8px 8px 0;
}

.uk-button-group:not(.tm-button-group-outline) {
	box-shadow: none;
	border: 1px solid var(--border-color);
	overflow: hidden;
}

.uk-button-group:not(.tm-button-group-outline)>.tm-button,
.uk-button-group:not(.tm-button-group-outline)>.uk-button {
	box-shadow: none !important;
	border: none;
	border-radius: 0;
	margin: 0;
}

.uk-button-group:not(.tm-button-group-outline)>.tm-button:not(:first-child),
.uk-button-group:not(.tm-button-group-outline)>.uk-button:not(:first-child) {
	border-left: 1px solid var(--border-light);
}

.uk-button-group:not(.tm-button-group-outline)>.uk-button:first-child {
	border-radius: 8px 0 0 8px;
}

.uk-button-group:not(.tm-button-group-outline)>.uk-button:last-child {
	border-radius: 0 8px 8px 0;
}

.uk-button-group>.uk-button {
	min-width: 44px;
	width: 44px;
	height: 40px;
	padding: 0;
	margin-left: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.uk-button-group>.uk-button:first-child {
	margin-left: 0 !important;
}

.uk-button-group.tm-button-group-auto {
	flex-wrap: nowrap;
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: none;
	overflow: hidden;
}

.uk-button-group.tm-button-group-auto>.uk-button {
	width: auto;
	min-width: 0;
	padding: 0 14px;
	border-radius: 0;
}

.uk-button-group.tm-button-group-auto:not(.tm-button-group-outline)>.uk-button {
	border: 0;
	margin: 0;
}

.uk-button-group.tm-button-group-auto:not(.tm-button-group-outline)>.uk-button:not(:first-child) {
	border-left: 1px solid var(--border-color);
}

.uk-button-group.tm-button-group-auto>.uk-button:first-child {
	border-radius: 8px 0 0 8px;
}

.uk-button-group.tm-button-group-auto>.uk-button:last-child {
	border-radius: 0 8px 8px 0;
}

.uk-button-group>.uk-button:hover,
.uk-button-group>.uk-button:focus {
	transform: none;
	box-shadow: none;
	z-index: 1;
}

.uk-button-group:not(.tm-button-group-outline) .tm-button.uk-active {
	background: var(--maincolor, #3b82f6) !important;
	color: var(--text-on-primary);
}

/* =====================================================
   Dark Mode Specific Overrides
   ===================================================== */
@media (prefers-color-scheme: dark) {
	/* Ensure auth pages stay light even if system is dark */
	body.tm-auth-light,
	body.tm-auth-light * {
		color-scheme: light;
	}

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

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

	/* Sidebar: active/hover contrast */
	body:not(.tm-auth-light) #left-col ul.uk-nav-default>li>a {
		color: var(--text-secondary);
	}

	body:not(.tm-auth-light) #left-col ul.uk-nav-default li.uk-nav-header {
		color: rgba(255, 255, 255, 0.55);
	}

	body:not(.tm-auth-light) #left-col ul.uk-nav-default>li>a:hover,
	body:not(.tm-auth-light) #left-col ul.uk-nav-default>li.uk-open>a,
	body:not(.tm-auth-light) #left-col ul.uk-nav-default>li.uk-active>a {
		background-color: rgba(59, 130, 246, 0.22);
		color: var(--text-primary);
		border-left-color: var(--maincolor, #3b82f6);
	}

	body:not(.tm-auth-light) #left-col ul.uk-nav-default .uk-nav-sub li>a {
		color: var(--text-secondary);
	}

	body:not(.tm-auth-light) #left-col ul.uk-nav-default .uk-nav-sub li>a:hover,
	body:not(.tm-auth-light) #left-col ul.uk-nav-default .uk-nav-sub li.uk-active>a {
		background-color: rgba(59, 130, 246, 0.18);
		color: var(--text-primary);
	}

	/* Offcanvas left menu (mobile) */
	body:not(.tm-auth-light) #leftpanelcanvas .uk-nav-default>li>a,
	body:not(.tm-auth-light) #leftpanelcanvas .uk-nav-sub li>a {
		color: var(--text-secondary);
	}

	body:not(.tm-auth-light) #leftpanelcanvas .uk-nav-default>li>a:hover,
	body:not(.tm-auth-light) #leftpanelcanvas .uk-nav-default>li.uk-active>a,
	body:not(.tm-auth-light) #leftpanelcanvas .uk-nav-sub li>a:hover,
	body:not(.tm-auth-light) #leftpanelcanvas .uk-nav-sub li.uk-active>a {
		background-color: rgba(59, 130, 246, 0.18);
		color: var(--text-primary);
	}

	/* Report widgets: keep text readable on dark */
	body:not(.tm-auth-light) .report-container,
	body:not(.tm-auth-light) .report-widget,
	body:not(.tm-auth-light) .report-widget h1,
	body:not(.tm-auth-light) .report-widget h2,
	body:not(.tm-auth-light) .report-widget h3,
	body:not(.tm-auth-light) .report-widget h4,
	body:not(.tm-auth-light) .report-widget h5,
	body:not(.tm-auth-light) .report-widget h6 {
		color: var(--text-primary);
	}

	/* Report widgets: dark backgrounds */
	body:not(.tm-auth-light) .report-widget {
		background: var(--bg-primary);
		/* border: 1px solid var(--border-light); */
		box-shadow: var(--shadow-sm);
	}

	/* Nested cards inside report widgets - avoid double card styling */
	body:not(.tm-auth-light) .report-widget .uk-card-default {
		background-color: var(--bg-secondary);
		border-color: var(--border-color);
	}

	body:not(.tm-auth-light) .report-widget .uk-card-header {
		background-color: var(--bg-tertiary);
		border-bottom-color: var(--border-color);
	}

	body:not(.tm-auth-light) .report-widget .uk-card-body {
		background-color: var(--bg-secondary);
	}

	/* Toolbar + search */
	body:not(.tm-auth-light) .control-toolbar {
		background: var(--bg-primary);
		border: none;
		border-radius: 10px;
	}

	body:not(.tm-auth-light) .control-toolbar .toolbar-item {
		color: var(--text-secondary);
	}

	body:not(.tm-auth-light) .form-control,
	body:not(.tm-auth-light) .custom-select,
	body:not(.tm-auth-light) input.form-control,
	body:not(.tm-auth-light) select.form-control,
	body:not(.tm-auth-light) textarea.form-control {
		background-color: var(--input-bg) !important;
		border: 1px solid var(--border-color) !important;
		color: var(--text-primary) !important;
	}

	body:not(.tm-auth-light) .form-control::placeholder {
		color: rgba(255, 255, 255, 0.55);
	}

	body:not(.tm-auth-light) .form-control:focus,
	body:not(.tm-auth-light) .custom-select:focus {
		border-color: var(--maincolor, #3b82f6) !important;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
		outline: none;
	}

	body:not(.tm-auth-light) .loading-indicator-container.size-input-text .clear-input-text i {
		color: rgba(255, 255, 255, 0.7);
	}

	/* Filter widget */
	body:not(.tm-auth-light) .control-filter {
		background: var(--bg-primary);
		border-color: var(--border-color);
	}

	body:not(.tm-auth-light) .control-filter .filter-label {
		color: var(--text-secondary);
	}

	/* Buttons used by filter scopes */
	body:not(.tm-auth-light) .btn-default {
		background: var(--bg-tertiary);
		border-color: var(--border-color);
		color: var(--text-primary);
	}

	body:not(.tm-auth-light) .btn-default:hover,
	body:not(.tm-auth-light) .btn-default:focus {
		background: var(--bg-secondary);
		border-color: var(--border-color);
		color: var(--text-primary);
	}

	/* Select2 */
	body:not(.tm-auth-light) .select2-container--default .select2-selection--single,
	body:not(.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;
	}

	body:not(.tm-auth-light) .select2-dropdown {
		background-color: var(--bg-primary) !important;
		border-color: var(--border-color) !important;
	}

	body:not(.tm-auth-light) .select2-container--default .select2-results__option {
		color: var(--text-primary);
	}

	.uk-button-default {
		background-color: var(--bg-tertiary);
	}
	
	.uk-button-default:hover {
		background-color: var(--bg-secondary);
	}
	
	.tm-button {
		background: var(--bg-tertiary);
		border-color: var(--border-color);
	}
	
	.tm-button:hover {
		background: var(--bg-secondary);
	}
	
	#top-head .uk-search-input {
		background: rgba(0, 0, 0, 0.2);
	}
	
	#top-head .uk-search-input:focus {
		background: rgba(0, 0, 0, 0.3);
	}
}

.dark-mode .uk-button-default {
	background-color: var(--bg-tertiary);
}

.dark-mode .uk-button-default:hover {
	background-color: var(--bg-secondary);
}

.dark-mode .tm-button {
	background: var(--bg-tertiary);
	border-color: var(--border-color);
}

.dark-mode .tm-button:hover {
	background: var(--bg-secondary);
}

.dark-mode #top-head .uk-search-input {
	background: rgba(0, 0, 0, 0.2);
}

.dark-mode #top-head .uk-search-input:focus {
	background: rgba(0, 0, 0, 0.3);
}

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

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

/* Sidebar: active/hover contrast */
.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default>li>a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default li.uk-nav-header {
	color: rgba(255, 255, 255, 0.55);
}

.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default>li>a:hover,
.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default>li.uk-open>a,
.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default>li.uk-active>a {
	background-color: rgba(59, 130, 246, 0.22);
	color: var(--text-primary);
	border-left-color: var(--maincolor, #3b82f6);
}

.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default .uk-nav-sub li>a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default .uk-nav-sub li>a:hover,
.dark-mode:not(.tm-auth-light) #left-col ul.uk-nav-default .uk-nav-sub li.uk-active>a {
	background-color: rgba(59, 130, 246, 0.18);
	color: var(--text-primary);
}

/* Offcanvas left menu (mobile) */
.dark-mode:not(.tm-auth-light) #leftpanelcanvas .uk-nav-default>li>a,
.dark-mode:not(.tm-auth-light) #leftpanelcanvas .uk-nav-sub li>a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) #leftpanelcanvas .uk-nav-default>li>a:hover,
.dark-mode:not(.tm-auth-light) #leftpanelcanvas .uk-nav-default>li.uk-active>a,
.dark-mode:not(.tm-auth-light) #leftpanelcanvas .uk-nav-sub li>a:hover,
.dark-mode:not(.tm-auth-light) #leftpanelcanvas .uk-nav-sub li.uk-active>a {
	background-color: rgba(59, 130, 246, 0.18);
	color: var(--text-primary);
}

/* Report widgets: keep text readable on dark */
.dark-mode:not(.tm-auth-light) .report-container,
.dark-mode:not(.tm-auth-light) .report-widget,
.dark-mode:not(.tm-auth-light) .report-widget h1,
.dark-mode:not(.tm-auth-light) .report-widget h2,
.dark-mode:not(.tm-auth-light) .report-widget h3,
.dark-mode:not(.tm-auth-light) .report-widget h4,
.dark-mode:not(.tm-auth-light) .report-widget h5,
.dark-mode:not(.tm-auth-light) .report-widget h6 {
	color: var(--text-primary);
}

/* Report widgets: dark backgrounds */
.dark-mode:not(.tm-auth-light) .report-widget {
	background: transparent;
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
}

/* Nested cards inside report widgets - avoid double card styling */
.dark-mode:not(.tm-auth-light) .report-widget .uk-card-default {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

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

.dark-mode:not(.tm-auth-light) .report-widget .uk-card-body {
	background-color: var(--bg-secondary);
}

/* Toolbar + search */
.dark-mode:not(.tm-auth-light) .control-toolbar {
	background: var(--bg-primary);
	/* border: 1px solid var(--border-light); */
	border-radius: 10px;
}

.dark-mode:not(.tm-auth-light) .control-toolbar .toolbar-item {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .form-control,
.dark-mode:not(.tm-auth-light) .custom-select,
.dark-mode:not(.tm-auth-light) input.form-control,
.dark-mode:not(.tm-auth-light) select.form-control,
.dark-mode:not(.tm-auth-light) textarea.form-control {
	background-color: var(--input-bg) !important;
	border: 1px solid var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .form-control::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.dark-mode:not(.tm-auth-light) .form-control:focus,
.dark-mode:not(.tm-auth-light) .custom-select:focus {
	border-color: var(--maincolor, #3b82f6) !important;
	box-shadow: none;
	outline: none;
}

.dark-mode:not(.tm-auth-light) .input-group .form-control {
	border-color: var(--border-color) !important;
	border-right: 0 !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .input-group .input-group-addon {
	background-color: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	border-left: 1px solid rgba(148, 163, 184, 0.14) !important;
	color: var(--text-secondary) !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .input-group.static .input-group-addon {
	border-left-color: var(--border-color) !important;
}

.dark-mode:not(.tm-auth-light) .input-group.static .form-control {
	border-left: 0 !important;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text .clear-input-text i {
	color: rgba(255, 255, 255, 0.7);
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.is-opaque,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.is-opaque .loading-indicator,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.is-opaque > .loading-indicator {
	background: rgba(15, 23, 42, 0.72) !important;
	color: rgba(255, 255, 255, 0.78) !important;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text.in-progress > .loading-indicator,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text > .loading-indicator.is-opaque {
	position: absolute;
	inset: 0;
	padding: 0 12px 0 0;
	justify-content: flex-end;
	background: transparent !important;
	border: 0 !important;
	border-radius: inherit;
	box-shadow: none !important;
	pointer-events: none;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text.in-progress > .loading-indicator > div,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text > .loading-indicator.is-opaque > div {
	display: none !important;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text.in-progress > .clear-input-text {
	visibility: hidden;
	opacity: 0;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text.in-progress > .loading-indicator > span,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text > .loading-indicator.is-opaque > span {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(148, 163, 184, 0.28) !important;
	border-top-color: #7dd3fc !important;
	border-radius: 50%;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* Filter widget */
.dark-mode:not(.tm-auth-light) .control-filter {
	background: var(--bg-primary);
	border-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .control-filter .filter-label {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .control-filter .filter-scope,
.dark-mode:not(.tm-auth-light) .control-filter .filter-scope label,
.dark-mode:not(.tm-auth-light) .control-filter .filter-scope.active label,
.dark-mode:not(.tm-auth-light) .filter-scope.checkbox.custom-checkbox label {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .control-filter .filter-scope:not(.active) label {
	color: var(--text-secondary) !important;
}

.dark-mode:not(.tm-auth-light) .control-filter .filter-scope.active {
	background: rgba(96, 165, 250, 0.08);
}

.control-filter .filter-scope.checkbox.custom-checkbox label:before,
.control-filter .filter-scope.checkbox.custom-checkbox label:after {
	top: 0;
}

.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-items,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-active-items {
	background: var(--bg-secondary) !important;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-items ul,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-active-items ul {
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-items li,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-active-items li {
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-items a,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-active-items a {
	background: transparent !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-items a:hover,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-items a:focus,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-active-items a:hover,
.dark-mode:not(.tm-auth-light) .control-filter-popover .filter-active-items a:focus {
	background: rgba(96, 165, 250, 0.1) !important;
	color: var(--text-primary) !important;
}

/* Buttons used by filter scopes */
.dark-mode:not(.tm-auth-light) .btn-default {
	background: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .btn-default:hover,
.dark-mode:not(.tm-auth-light) .btn-default:focus {
	background: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-button-group:not(.tm-button-group-outline) {
	background: var(--bg-secondary);
	border-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .uk-button-group:not(.tm-button-group-outline)>.uk-button {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .uk-button-group:not(.tm-button-group-outline)>.uk-button:not(:first-child) {
	border-left-color: rgba(148, 163, 184, 0.16);
}

.dark-mode:not(.tm-auth-light) .uk-button-group:not(.tm-button-group-outline)>.uk-button:hover,
.dark-mode:not(.tm-auth-light) .uk-button-group:not(.tm-button-group-outline)>.uk-button:focus {
	background: rgba(96, 165, 250, 0.1);
	color: var(--text-primary);
}

/* Select2 */
.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--single,
.dark-mode:not(.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;
	border-radius: 8px !important;
	min-height: 40px;
	box-shadow: none;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	padding: 0 44px 0 0;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple {
	padding: 8px 10px !important;
	height: auto !important;
	display: flex;
	align-items: center;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 0 !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-selection__choice {
	margin: 0 !important;
	padding: 6px 12px 6px 30px !important;
	background: var(--bg-tertiary) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 999px !important;
	color: var(--text-primary) !important;
	line-height: 1.4;
	position: relative;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted) !important;
	font-size: 1rem;
	line-height: 1;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-search--inline {
	margin: 0;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-search__field {
	margin-top: 0 !important;
	padding: 6px 0 !important;
	color: var(--text-primary) !important;
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text-primary) !important;
	line-height: 40px !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 40px !important;
	width: 40px !important;
	right: 14px !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--text-primary) transparent transparent transparent !important;
	border-width: 7px 6px 0 6px !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--text-primary) transparent !important;
	border-width: 0 6px 7px 6px !important;
	right: 5px;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--single,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--multiple {
	border-color: color-mix(in srgb, var(--border-color) 88%, transparent) !important;
	box-shadow: none !important;
	opacity: 0.82;
	cursor: not-allowed;
	filter: saturate(0.8);
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled.select2-container--focus .select2-selection--single,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled.select2-container--open .select2-selection--single,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled.select2-container--focus .select2-selection--multiple,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled.select2-container--open .select2-selection--multiple {
	border-color: color-mix(in srgb, var(--border-color) 88%, transparent) !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--single {
	min-height: 40px !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--multiple .select2-selection__rendered {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
	line-height: 40px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow {
	display: none !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--focus .select2-selection--single,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--open .select2-selection--single,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--focus .select2-selection--multiple,
.dark-mode:not(.tm-auth-light) .select2-container--default.select2-container--open .select2-selection--multiple {
	border-color: var(--maincolor2, #2563eb) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

.dark-mode:not(.tm-auth-light) .select2-dropdown {
	background-color: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	border-radius: 10px !important;
	box-shadow: var(--shadow-lg) !important;
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-search--dropdown:after {
	top: 24px !important;
	right: 24px !important;
}

.dark-mode:not(.tm-auth-light) .select2-search--dropdown {
	padding: 12px;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .select2-search--dropdown .select2-search__field {
	background: var(--input-bg) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px !important;
	color: var(--text-primary) !important;
	padding: 10px 12px !important;
	appearance: none;
	-webkit-appearance: none;
	background-image: none !important;
}

.dark-mode:not(.tm-auth-light) .select2-search--dropdown .select2-search__field::placeholder {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .select2-search--dropdown .select2-search__field::-webkit-search-decoration,
.dark-mode:not(.tm-auth-light) .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button,
.dark-mode:not(.tm-auth-light) .select2-search--dropdown .select2-search__field::-webkit-search-results-button,
.dark-mode:not(.tm-auth-light) .select2-search--dropdown .select2-search__field::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.dark-mode:not(.tm-auth-light) .select2-results {
	background: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .select2-results__options {
	background: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-results__option {
	background: transparent;
	color: var(--text-primary);
	padding: 12px 14px;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-results__option[aria-selected="true"] {
	background: rgba(59, 130, 246, 0.14);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-results__option--highlighted[aria-selected],
.dark-mode:not(.tm-auth-light) .select2-container--default .select2-results__option--highlighted[aria-selected="false"] {
	background: var(--maincolor2, #2563eb) !important;
	color: var(--text-on-primary) !important;
}

.dark-mode:not(.tm-auth-light) .select2-container--default .select2-results__option + .select2-results__option {
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* =====================================================
   Responsive Adjustments
   ===================================================== */
@media (max-width: 959px) {
	#left-col {
		transform: translateX(-100%);
	}
	
	.tm-sidebar-main-visible #left-col {
		transform: translateX(0);
	}
	
	#tm-content {
		margin-left: 0;
	}
	
	.bar-bottom {
		display: none;
	}
}

@media (max-width: 639px) {
	#top-head .uk-search-input {
		font-size: 1rem;
	}
	
	.uk-card-body:not([class*="tm-padding"]) {
		padding: 16px;
	}
	
	.uk-card-header:not([class*="tm-padding"]),
	.uk-card-footer:not([class*="tm-padding"]) {
		padding: 12px 16px;
	}
}

/* =====================================================
   Scrollbar Styling
   ===================================================== */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* =====================================================
   Print Styles
   ===================================================== */
@media print {
	#top-head,
	#left-col,
	.bar-bottom,
	#leftpanelcanvas,
	#rightpanelcanvas {
		display: none !important;
	}
	
	#tm-content {
		margin: 0 !important;
	}
}

/* =====================================================
   Enhanced Dark Mode Support - WinterCMS Components
   ===================================================== */

/* =====================================================
   Form Tabs - UIkit Override (Replacing WinterCMS Default)
   ===================================================== */

/* Override WinterCMS default tab styles with UIkit */
.control-tabs {
	position: relative;
	margin-bottom: 1rem;
}

/* Make nav-tabs use UIkit tab styling */
.control-tabs .nav-tabs,
.control-tabs .nav.nav-tabs {
	/* UIkit tab base styles */
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
	padding: 0;
	list-style: none;
	position: relative;
}

/* UIkit tab ::before border */
.control-tabs .nav-tabs::before,
.control-tabs .nav.nav-tabs::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 0;
	border-bottom: 1px solid var(--border-color);
}

/* UIkit tab items */
.control-tabs .nav-tabs > li,
.control-tabs .nav.nav-tabs > li {
	flex: none;
	padding-left: 20px;
	position: relative;
	margin: 0;
}

/* UIkit tab links */
.control-tabs .nav-tabs > li > a,
.control-tabs .nav.nav-tabs > li > a {
	/* UIkit tab link styles */
	display: flex;
	align-items: center;
	column-gap: 0.25em;
	justify-content: center;
	padding: 0px;
	color: var(--text-secondary);
	border-bottom: 1px solid transparent;
	font-size: 0.875rem;
	text-transform: uppercase;
	transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;
	text-decoration: none;
}

/* UIkit tab link title wrapper */
.control-tabs .nav-tabs > li > a .title,
.control-tabs .nav.nav-tabs > li > a .title {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

/* UIkit tab hover */
.control-tabs .nav-tabs > li > a:hover,
.control-tabs .nav.nav-tabs > li > a:hover {
	color: var(--text-primary);
	text-decoration: none;
}

/* UIkit tab active (both WinterCMS and UIkit classes) */
.control-tabs .nav-tabs > li.active > a,
.control-tabs .nav-tabs > li.uk-active > a,
.control-tabs .nav.nav-tabs > li.active > a,
.control-tabs .nav.nav-tabs > li.uk-active > a {
	color: var(--text-primary);
	border-color: var(--maincolor, #1e87f0);
}

/* UIkit tab disabled */
.control-tabs .nav-tabs > li.disabled > a,
.control-tabs .nav.nav-tabs > li.disabled > a {
	color: var(--text-muted);
	cursor: not-allowed;
}

/* Tab content - use UIkit switcher styling */
.control-tabs .tab-content,
.control-tabs .tab-content.uk-switcher {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

/* Tab pane - UIkit switcher item styling */
.control-tabs .tab-pane {
	display: none;
}

.control-tabs .tab-pane.active,
.control-tabs .tab-pane.uk-active {
	display: block;
}

/* Tab lazy loading indicator */
.control-tabs .tab-pane.lazy {
	min-height: 100px;
}

/* Primary tabs specific overrides */
.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: -20px;
}

.control-tabs.primary-tabs > ul.nav-tabs > li,
.control-tabs.primary-tabs > div > ul.nav-tabs > li,
.control-tabs.primary-tabs > div > div > ul.nav-tabs > li {
	padding-left: 20px;
}

/* Dark mode overrides for UIkit tabs */
.dark-mode:not(.tm-auth-light) .control-tabs .nav-tabs::before,
.dark-mode:not(.tm-auth-light) .control-tabs .nav.nav-tabs::before {
	border-bottom-color: var(--border-color);
}

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

.dark-mode:not(.tm-auth-light) .control-tabs .nav-tabs > li > a:hover,
.dark-mode:not(.tm-auth-light) .control-tabs .nav.nav-tabs > li > a:hover {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-tabs .nav-tabs > li.active > a,
.dark-mode:not(.tm-auth-light) .control-tabs .nav-tabs > li.uk-active > a,
.dark-mode:not(.tm-auth-light) .control-tabs .nav.nav-tabs > li.active > a,
.dark-mode:not(.tm-auth-light) .control-tabs .nav.nav-tabs > li.uk-active > a {
	color: var(--text-primary);
	border-color: var(--maincolor, #1e87f0);
}

.dark-mode:not(.tm-auth-light) .control-tabs .nav-tabs > li.disabled > a,
.dark-mode:not(.tm-auth-light) .control-tabs .nav.nav-tabs > li.disabled > a {
	color: var(--text-muted);
}

.control-tabs.primary-tabs>div>ul.nav-tabs>li a>span.title:before,
.control-tabs.primary-tabs>div>ul.nav-tabs>li a>span.title:after,
.control-tabs.primary-tabs>div>ul.nav-tabs>li.active a:before {
	background-color: var(--bg-primary);
	background: var(--bg-primary);
}

.control-tabs.primary-tabs>div>div>ul.nav-tabs>li a>span.title:before,
.control-tabs.primary-tabs>div>ul.nav-tabs>li a>span.title:before,
.control-tabs.primary-tabs>ul.nav-tabs>li a>span.title:before {
	border-left: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}

.control-tabs.primary-tabs>div>div>ul.nav-tabs>li a>span.title:after,
.control-tabs.primary-tabs>div>ul.nav-tabs>li a>span.title:after,
.control-tabs.primary-tabs>ul.nav-tabs>li a>span.title:after {
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}

.control-tabs>div>div>ul.nav-tabs>li a>span.title>span,
.control-tabs>div>ul.nav-tabs>li a>span.title>span,
.control-tabs>ul.nav-tabs>li a>span.title>span {
	border-top: 1px solid var(--border-color);
}

.control-tabs.primary-tabs>div>div>ul.nav-tabs:before,
.control-tabs.primary-tabs>div>ul.nav-tabs:before,
.control-tabs.primary-tabs>ul.nav-tabs:before {
	border-bottom: none;
}

/* Primary tabs inside popups/modal content need to inherit the local surface color */
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > ul.nav-tabs > li a > span.title::before,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title::before,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > div > div > ul.nav-tabs > li a > span.title::before,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > ul.nav-tabs > li a > span.title::after,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title::after,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > div > div > ul.nav-tabs > li a > span.title::after,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > div > ul.nav-tabs > li.active a::before,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > div > div > ul.nav-tabs > li.active a::before,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs.primary-tabs > ul.nav-tabs > li.active a::before,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > ul.nav-tabs > li a > span.title::before,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title::before,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > div > div > ul.nav-tabs > li a > span.title::before,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > ul.nav-tabs > li a > span.title::after,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title::after,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > div > div > ul.nav-tabs > li a > span.title::after,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > div > ul.nav-tabs > li.active a::before,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > div > div > ul.nav-tabs > li.active a::before,
.dark-mode:not(.tm-auth-light) .popup .control-tabs.primary-tabs > ul.nav-tabs > li.active a::before {
	background-color: var(--bg-secondary) !important;
	background: var(--bg-secondary) !important;
}

.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs > div > div > ul.nav-tabs > li a > span.title > span,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs > div > ul.nav-tabs > li a > span.title > span,
.dark-mode:not(.tm-auth-light) .uk-modal-dialog .control-tabs > ul.nav-tabs > li a > span.title > span,
.dark-mode:not(.tm-auth-light) .popup .control-tabs > div > div > ul.nav-tabs > li a > span.title > span,
.dark-mode:not(.tm-auth-light) .popup .control-tabs > div > ul.nav-tabs > li a > span.title > span,
.dark-mode:not(.tm-auth-light) .popup .control-tabs > ul.nav-tabs > li a > span.title > span {
	background: var(--bg-secondary);
}

.control-tabs .nav-tabs > li.active > a,
.control-tabs .nav-tabs > li.uk-active > a,
.control-tabs .nav.nav-tabs > li.active > a,
.control-tabs .nav.nav-tabs > li.uk-active > a {
	border-color: var(--border-color);
}

/* Form Fields */
.dark-mode:not(.tm-auth-light) .form-group label,
.dark-mode:not(.tm-auth-light) .field-text label,
.dark-mode:not(.tm-auth-light) .field-number label,
.dark-mode:not(.tm-auth-light) .field-textarea label {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .help-block,
.dark-mode:not(.tm-auth-light) .field-comment {
	color: var(--text-muted) !important;
}

.field-checkboxlist:not(.is-scrollable) .field-checkboxlist-inner {
	padding: 15px 15px !important;
}

.field-checkboxlist-quickselect {
	margin-bottom: 10px;
}

.field-checkboxlist-quickselect-group {
	width: auto;
	max-width: 100%;
}

.uk-button-group:not(.tm-button-group-outline) > .field-checkboxlist-quickselect-button,
.field-checkboxlist-quickselect-group > .field-checkboxlist-quickselect-button {
	width: auto;
	min-width: 0;
	height: 34px;
	padding: 0 12px;
	gap: 6px;
	white-space: nowrap;
	line-height: 1;
}

.field-checkboxlist-quickselect-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.field-checkboxlist-quickselect-text {
	display: inline-block;
	line-height: 1.2;
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist,
.dark-mode:not(.tm-auth-light) .field-checkboxlist-inner {
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .checkbox.custom-checkbox {
	margin-bottom: 0.625rem;
	padding: 0.625rem 0.875rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .checkbox.custom-checkbox:last-child {
	margin-bottom: 0;
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .custom-checkbox:hover {
	background: var(--bg-tertiary);
	border-color: var(--maincolor2, #2563eb);
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .custom-checkbox label {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.125rem 0 0.125rem 2rem;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .custom-checkbox label:before {
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--input-bg) !important;
	border-color: var(--border-color) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .custom-checkbox input[type="checkbox"]:focus + label:before {
	border-color: var(--maincolor2, #2563eb) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .custom-checkbox input[type="checkbox"]:checked + label:after {
	left: 6px;
	top: 50%;
	transform: translateY(-58%) rotate(45deg);
}

.dark-mode:not(.tm-auth-light) .field-checkboxlist .custom-checkbox input[type="checkbox"]:checked + label {
	color: var(--text-primary) !important;
}

/* Repeater Widget */
.dark-mode:not(.tm-auth-light) .field-repeater {
	background: var(--bg-primary);
	border: 1px solid rgba(148, 163, 184, 0.12);
	border-radius: 14px;
	padding: 10px;
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-items {
	background: transparent;
	margin: 0;
	padding: 0;
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item {
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	border-radius: 6px;
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item:hover {
	background: var(--bg-tertiary);
	border-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .field-repeater li.field-repeater-item {
	background: var(--bg-secondary);
	border: 1px solid rgba(148, 163, 184, 0.14);
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.dark-mode:not(.tm-auth-light) .field-repeater li.field-repeater-item::before,
.dark-mode:not(.tm-auth-light) .field-repeater li.field-repeater-item::after {
	color: rgba(148, 163, 184, 0.55);
}

.dark-mode:not(.tm-auth-light) .field-repeater ul.field-repeater-items > li.dragged {
	background: var(--bg-secondary);
	border: 1px dashed rgba(148, 163, 184, 0.28);
	box-shadow: var(--shadow-md);
}

.dark-mode:not(.tm-auth-light) .field-repeater ul.field-repeater-items > li.placeholder::before {
	color: var(--maincolor2, #2563eb);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-header {
	background: var(--bg-tertiary);
	border-bottom: 1px solid var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-header:hover {
	background: var(--bg-hover);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-content {
	background: var(--bg-primary);
}

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

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:hover {
	background: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-form {
	background: transparent;
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapsed-title {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-handle {
	background: var(--bg-primary);
	color: var(--text-muted);
	border: 1px solid rgba(148, 163, 184, 0.14);
	box-shadow: 0 8px 18px rgba(3, 8, 20, 0.18);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-handle:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapse a,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapse button,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-remove .close {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapse a:hover,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapse a:focus,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapse button:hover,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-collapse button:focus,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-remove .close:hover,
.dark-mode:not(.tm-auth-light) .field-repeater .repeater-item-remove .close:focus {
	color: var(--text-primary);
	text-decoration: none;
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item {
	border: 2px dashed rgba(148, 163, 184, 0.18);
	border-radius: 10px;
	margin: 0 !important;
	min-height: 0;
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item::before {
	display: none;
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 20px;
	color: var(--text-secondary);
	text-transform: none;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0;
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item > a::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba(148, 163, 184, 0.12);
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:hover,
.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:focus {
	background: var(--bg-hover);
	border-color: rgba(148, 163, 184, 0.24);
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:hover::before,
.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:focus::before,
.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:hover > a,
.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:focus > a {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:hover > a::before,
.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:focus > a::before {
	background: rgba(148, 163, 184, 0.18);
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:active {
	background: rgba(59, 130, 246, 0.16);
	border-color: rgba(59, 130, 246, 0.24);
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item:active > a {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-repeater .field-repeater-add-item.in-progress {
	border-color: rgba(148, 163, 184, 0.18) !important;
	background: transparent !important;
}

.dark-mode:not(.tm-auth-light) .control-popover {
	background: var(--bg-primary);
	border: 1px solid rgba(148, 163, 184, 0.14);
	border-radius: 14px;
	box-shadow: 0 24px 48px rgba(3, 8, 20, 0.42);
}

.dark-mode:not(.tm-auth-light) .control-popover > div {
	background: transparent;
	border-radius: inherit;
}

.dark-mode:not(.tm-auth-light) .control-popover .popover-head {
	background: var(--bg-secondary);
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	border-radius: 14px 14px 0 0;
}

.dark-mode:not(.tm-auth-light) .control-popover .popover-head h3 {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-popover .popover-head .close {
	color: var(--text-muted);
	opacity: 1;
}

.dark-mode:not(.tm-auth-light) .control-popover .popover-head .close:hover {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search-container,
.dark-mode:not(.tm-auth-light) .control-popover .popover-fixed-height,
.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-items-container {
	background: var(--bg-primary);
	border-top-color: rgba(148, 163, 184, 0.08);
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search-container > div {
	position: relative;
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search-container .icon-search,
.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search-clear,
.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search-clear i {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search {
	background: var(--input-bg) !important;
	border: 1px solid rgba(148, 163, 184, 0.16) !important;
	border-radius: 999px !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-search::placeholder {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-no-results {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-grid {
	background: transparent;
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-item a {
	background: var(--bg-secondary) !important;
	border: 1px solid rgba(148, 163, 184, 0.14) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	transform: none !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-item a:hover,
.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-item a:focus {
	background: var(--bg-hover) !important;
	border-color: rgba(148, 163, 184, 0.24) !important;
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-item i {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-item .title {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-popover .repeater-group-item .description {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .control-popover .scrollpad-scrollbar .drag-handle {
	background: rgba(148, 163, 184, 0.22);
}

/* Relation Manager */
.dark-mode:not(.tm-auth-light) .relation-manager {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .relation-manager .relation-toolbar {
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .control-table,
.dark-mode:not(.tm-auth-light) .control-table .table-container {
	background: var(--bg-primary);
	border: 1px solid rgba(148, 163, 184, 0.16);
	border-radius: 10px;
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .control-table .toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px;
	background: var(--bg-secondary);
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.dark-mode:not(.tm-auth-light) .control-table .toolbar .btn,
.dark-mode:not(.tm-auth-light) .control-table .toolbar .table-icon {
	background: var(--bg-tertiary);
	border: 1px solid rgba(148, 163, 184, 0.12);
	color: var(--text-primary);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .control-table .toolbar .btn:hover,
.dark-mode:not(.tm-auth-light) .control-table .toolbar .table-icon:hover {
	background: var(--bg-hover);
	border-color: var(--maincolor2, #2563eb);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-table .toolbar .btn.disabled,
.dark-mode:not(.tm-auth-light) .control-table .toolbar .btn[disabled],
.dark-mode:not(.tm-auth-light) .control-table .toolbar .table-icon.disabled,
.dark-mode:not(.tm-auth-light) .control-table .toolbar .table-icon[disabled] {
	opacity: 0.5;
	background: var(--bg-secondary);
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .control-table .table-search {
	margin-left: auto;
}

.dark-mode:not(.tm-auth-light) .control-table .table-search-input {
	background: var(--input-bg) !important;
	border: 1px solid rgba(148, 163, 184, 0.18) !important;
	color: var(--text-primary) !important;
	border-radius: 999px !important;
	min-width: 260px;
}

.dark-mode:not(.tm-auth-light) .control-table .table-search-input::placeholder {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) input.form-control.icon.search,
.dark-mode:not(.tm-auth-light) .form-control.icon.search.growable {
	background-color: var(--input-bg) !important;
	background-image: none !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text .clear-input-text,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text .clear-input-text:hover,
.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text .clear-input-text:focus {
	background: transparent !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .loading-indicator-container.size-input-text .clear-input-text {
	border: 0 !important;
}

.dark-mode:not(.tm-auth-light) .control-table table {
	width: 100%;
	background: var(--bg-primary);
}

.dark-mode:not(.tm-auth-light) .control-table table.headers {
	background: var(--bg-secondary);
}

.dark-mode:not(.tm-auth-light) .control-table table.headers th {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	border-right: 1px solid rgba(148, 163, 184, 0.08);
}

.dark-mode:not(.tm-auth-light) .control-table table.headers th:last-child {
	border-right: 0;
}

.dark-mode:not(.tm-auth-light) .control-table .header-language {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .control-table .header-language i {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .control-table table.data tbody tr {
	background: var(--bg-primary);
}

.dark-mode:not(.tm-auth-light) .control-table table.data tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-secondary) 28%);
}

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

.dark-mode:not(.tm-auth-light) .control-table table.data td {
	border-top: 1px solid #25314d !important;
	border-right: 1px solid rgba(37, 49, 77, 0.55) !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-table table.data td:last-child {
	border-right: 0;
}

.dark-mode:not(.tm-auth-light) .control-table .content-container {
	background: transparent;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-table .content-container.readonly {
	background: rgba(148, 163, 184, 0.08);
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .control-table [data-view-container="data-view-container"] {
	color: inherit;
}

.dark-mode:not(.tm-auth-light) .control-table .pagination {
	background: var(--bg-secondary);
	border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.dark-mode:not(.tm-auth-light) .control-table .pagination > ul > li > a,
.dark-mode:not(.tm-auth-light) .control-table .pagination > ul > li > span,
.dark-mode:not(.tm-auth-light) .control-table .pagination .pagination-link {
	background: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-table .pagination > ul > li.active > a,
.dark-mode:not(.tm-auth-light) .control-table .pagination > ul > li.active > span,
.dark-mode:not(.tm-auth-light) .control-table .pagination .active .pagination-link {
	background: var(--maincolor2, #2563eb);
	border-color: var(--maincolor2, #2563eb);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .relation-manager .relation-list {
	background: var(--bg-primary);
}

.dark-mode:not(.tm-auth-light) .relation-manager .relation-list-item {
	border-bottom: 1px solid var(--border-light);
}

.dark-mode:not(.tm-auth-light) .relation-manager .relation-list-item:hover {
	background: var(--bg-hover);
}

/* File Upload Widget */
.dark-mode:not(.tm-auth-light) .field-fileupload {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload .upload-object {
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	border-radius: 6px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload .upload-object:hover {
	background: var(--bg-tertiary);
	border-color: var(--border-color);
}

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

.dark-mode:not(.tm-auth-light) .field-fileupload .upload-button:hover {
	background: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	border-radius: 14px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi .upload-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 12px;
	background: #27314a;
	border: 1px solid rgba(148, 163, 184, 0.16);
	box-shadow: none;
	font-size: 0.95rem;
	font-weight: 600;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi .upload-button:hover,
.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi .upload-button:focus {
	background: var(--bg-hover);
	border-color: rgba(148, 163, 184, 0.24);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi .upload-files-container {
	width: 100%;
	min-height: 120px;
	padding: 18px;
	border: 1px dashed rgba(148, 163, 184, 0.18);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.015);
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi .upload-files-container:empty::before {
	content: "No files uploaded yet";
	display: block;
	color: var(--text-muted);
	font-size: 0.92rem;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-file-multi .upload-object {
	border-radius: 10px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi {
	padding: 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-button {
	float: left;
	width: 76px;
	height: 76px;
	border-radius: 14px;
	border: 1px dashed rgba(148, 163, 184, 0.18) !important;
	background: #21497a;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-files-container {
	margin-left: 90px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-object {
	width: 260px;
	overflow: hidden;
	border-radius: 14px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-object .icon-container {
	float: left;
	width: 75px;
	height: 75px;
	border-right: 1px solid rgba(148, 163, 184, 0.14);
	border-radius: 14px 0 0 14px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-object .icon-container img {
	width: auto;
	height: auto;
	max-height: 100%;
	border-radius: 0;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-object .info {
	margin-left: 90px;
	padding-right: 14px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-object .meta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 15px 0 90px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-multi .upload-object .drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	width: auto;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single .upload-files-container {
	display: inline-flex;
	width: auto;
	max-width: 100%;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single .upload-object {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	width: auto;
	max-width: 236px;
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single .upload-object .info {
	width: 100%;
	min-width: 0;
	padding: 10px 12px 12px;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single .upload-object .filename {
	margin: 0 0 6px;
	font-size: 0.95rem;
	line-height: 1.35;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single .upload-object .filename span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dark-mode:not(.tm-auth-light) .field-fileupload.style-image-single .upload-object .size {
	color: var(--text-secondary);
}

/* Code Editor */
.dark-mode:not(.tm-auth-light) .field-codeeditor .CodeMirror {
	background: var(--bg-tertiary) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .field-codeeditor .CodeMirror-gutters {
	background: var(--bg-secondary) !important;
	border-right: 1px solid var(--border-color) !important;
}

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

.dark-mode:not(.tm-auth-light) .field-codeeditor .CodeMirror-cursor {
	border-left-color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-codeeditor .CodeMirror-selected {
	background: rgba(59, 130, 246, 0.2) !important;
}

/* Markdown Editor */
.dark-mode:not(.tm-auth-light) .field-markdowneditor {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	overflow: hidden;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .TinyMDE {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-toolbar,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .TinyMDE .editor-toolbar {
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-toolbar .toolbar-item + .toolbar-item {
	border-left: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-toolbar .btn,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .TinyMDE .editor-toolbar button {
	background: transparent;
	border-color: var(--border-color);
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-toolbar .btn:hover,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-toolbar .btn:focus,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-toolbar .btn.active,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .TinyMDE .editor-toolbar button:hover,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .TinyMDE .editor-toolbar button.active {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .dropdown-menu {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-lg);
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .dropdown-menu li a,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .dropdown-menu .dropdown-container > ul li a,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .md-dropdown-button {
	color: var(--text-primary) !important;
}

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

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-write,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview,
.dark-mode:not(.tm-auth-light) .field-markdowneditor textarea {
	background: var(--bg-primary) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview {
	border-left: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview p,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview li,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview h1,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview h2,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview h3,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview h4,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview h5,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview h6,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview blockquote,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview code,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .editor-preview pre {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_editor,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_editor.ace-github,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_scroller,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_content {
	background: var(--bg-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_text-layer,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_text-layer .ace_text,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_line,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_line span {
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_cursor {
	border-left-color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_marker-layer .ace_active-line {
	background: rgba(59, 130, 246, 0.08) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_marker-layer .ace_selection {
	background: rgba(59, 130, 246, 0.2) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_print-margin {
	background: var(--border-light) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_gutter,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_scrollbar,
.dark-mode:not(.tm-auth-light) .field-markdowneditor .ace_scrollbar-inner {
	background: var(--bg-primary) !important;
	border-color: var(--border-color) !important;
}

.dark-mode:not(.tm-auth-light) .field-markdowneditor .TinyMDE .editor-content {
	background: var(--bg-primary);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .callout {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	outline: none;
}

.dark-mode:not(.tm-auth-light) .callout .header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .callout .header i,
.dark-mode:not(.tm-auth-light) .callout .header .icon-info,
.dark-mode:not(.tm-auth-light) .callout .header .icon-warning,
.dark-mode:not(.tm-auth-light) .callout .header .icon-success,
.dark-mode:not(.tm-auth-light) .callout .header .icon-error {
	color: var(--text-primary);
	opacity: 0.9;
}

.dark-mode:not(.tm-auth-light) .callout .header h3 {
	margin: 0;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .callout .content {
	padding: 18px 20px;
	background: var(--bg-primary);
	color: var(--text-secondary);
	border: 0 !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .callout .content p:last-child {
	margin-bottom: 0;
}

.dark-mode:not(.tm-auth-light) .callout::before,
.dark-mode:not(.tm-auth-light) .callout::after,
.dark-mode:not(.tm-auth-light) .callout .header::before,
.dark-mode:not(.tm-auth-light) .callout .header::after,
.dark-mode:not(.tm-auth-light) .callout .content::before,
.dark-mode:not(.tm-auth-light) .callout .content::after {
	border-color: transparent !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .callout.callout-info {
	border-color: rgba(59, 130, 246, 0.3);
}

.dark-mode:not(.tm-auth-light) .callout.callout-info .header {
	background: rgba(59, 130, 246, 0.16);
}

.dark-mode:not(.tm-auth-light) .callout.callout-info .header i {
	color: var(--color-info-light);
}

.dark-mode:not(.tm-auth-light) .callout.callout-success {
	border-color: rgba(34, 197, 94, 0.3);
}

.dark-mode:not(.tm-auth-light) .callout.callout-success .header {
	background: rgba(34, 197, 94, 0.16);
}

.dark-mode:not(.tm-auth-light) .callout.callout-success .header i {
	color: var(--color-success-light);
}

.dark-mode:not(.tm-auth-light) .callout.callout-warning {
	border-color: rgba(245, 158, 11, 0.32);
}

.dark-mode:not(.tm-auth-light) .callout.callout-warning .header {
	background: rgba(245, 158, 11, 0.16);
}

.dark-mode:not(.tm-auth-light) .callout.callout-warning .header i {
	color: var(--color-warning-light);
}

.dark-mode:not(.tm-auth-light) .callout.callout-danger,
.dark-mode:not(.tm-auth-light) .callout.callout-error {
	border-color: rgba(239, 68, 68, 0.32);
}

.dark-mode:not(.tm-auth-light) .callout.callout-danger .header,
.dark-mode:not(.tm-auth-light) .callout.callout-error .header {
	background: rgba(239, 68, 68, 0.16);
}

.dark-mode:not(.tm-auth-light) .callout.callout-danger .header i,
.dark-mode:not(.tm-auth-light) .callout.callout-error .header i {
	color: var(--color-danger-light);
}

.dark-mode:not(.tm-auth-light) .sweet-overlay,
.dark-mode:not(.tm-auth-light) .sweet-alert-overlay,
.dark-mode:not(.tm-auth-light) .sweet-alert[data-overlay="true"] {
	background-color: rgba(7, 11, 24, 0.56) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert {
	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) !important;
}

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

.dark-mode:not(.tm-auth-light) .sweet-alert p,
.dark-mode:not(.tm-auth-light) .sweet-alert .lead,
.dark-mode:not(.tm-auth-light) .sweet-alert .text-muted {
	color: var(--text-secondary) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert button.cancel.btn.btn-default {
	background: var(--bg-secondary) !important;
	border: 1px solid rgba(148, 163, 184, 0.16) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert button.cancel.btn.btn-default:hover,
.dark-mode:not(.tm-auth-light) .sweet-alert button.cancel.btn.btn-default:focus {
	background: var(--bg-hover) !important;
	border-color: rgba(148, 163, 184, 0.22) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert button.confirm.btn.btn-primary {
	background: var(--maincolor2, #2563eb) !important;
	border: 1px solid var(--maincolor2, #2563eb) !important;
	color: var(--text-on-primary) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert button.confirm.btn.btn-primary:hover,
.dark-mode:not(.tm-auth-light) .sweet-alert button.confirm.btn.btn-primary:focus {
	background: var(--maincolor, #3b82f6) !important;
	border-color: var(--maincolor, #3b82f6) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.error,
.dark-mode:not(.tm-auth-light) .sweet-alert .icon.error .x-mark .line {
	border-color: var(--color-danger) !important;
	background-color: var(--color-danger) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.warning {
	border-color: var(--color-warning) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.warning .body,
.dark-mode:not(.tm-auth-light) .sweet-alert .icon.warning .dot {
	background-color: var(--color-warning) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.info {
	border-color: var(--color-info) !important;
	color: var(--color-info-light) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.success {
	border-color: var(--color-success) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.success .line {
	background-color: var(--color-success) !important;
}

.dark-mode:not(.tm-auth-light) .sweet-alert .icon.success .placeholder {
	border-color: rgba(34, 197, 94, 0.25) !important;
}

/* Alerts & Notifications */
.dark-mode:not(.tm-auth-light) .alert {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .alert-success {
	background: rgba(34, 197, 94, 0.15);
	border-color: rgba(34, 197, 94, 0.3);
	color: var(--color-success-light);
}

.dark-mode:not(.tm-auth-light) .alert-danger {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.3);
	color: var(--color-danger-light);
}

.dark-mode:not(.tm-auth-light) .alert-warning {
	background: rgba(245, 158, 11, 0.15);
	border-color: rgba(245, 158, 11, 0.3);
	color: var(--color-warning-light);
}

.dark-mode:not(.tm-auth-light) .alert-info {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.3);
	color: var(--color-info-light);
}

/* Flash Messages */
.dark-mode:not(.tm-auth-light) #layout-flash-messages .flash-message {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: var(--shadow-md);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) #layout-flash-messages .flash-message.success {
	background: rgba(34, 197, 94, 0.15);
	border-color: rgba(34, 197, 94, 0.3);
	color: var(--color-success-light);
}

.dark-mode:not(.tm-auth-light) #layout-flash-messages .flash-message.error {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.3);
	color: var(--color-danger-light);
}

/* List Widget Enhancements */
.dark-mode:not(.tm-auth-light) .control-list {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .control-list table th {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-color);
}

.dark-mode:not(.tm-auth-light) .control-list table td {
	border-bottom: 1px solid var(--border-light);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-list table tr:hover td {
	background: var(--bg-hover);
}

.dark-mode:not(.tm-auth-light) .control-list .no-data {
	color: var(--text-muted);
}

/* Pagination */
.dark-mode:not(.tm-auth-light) .pagination > li > a,
.dark-mode:not(.tm-auth-light) .pagination > li > span {
	background: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .pagination > li > a:hover,
.dark-mode:not(.tm-auth-light) .pagination > li > span:hover {
	background: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .pagination > .active > a,
.dark-mode:not(.tm-auth-light) .pagination > .active > span {
	background: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

/* Breadcrumb */
.dark-mode:not(.tm-auth-light) .control-breadcrumb {
	background: var(--bg-primary);
	border-bottom: 1px solid var(--border-light);
}

.dark-mode:not(.tm-auth-light) .control-breadcrumb a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .control-breadcrumb a:hover {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-breadcrumb .breadcrumb-item.active {
	color: var(--text-primary);
}

/* Loading Indicators */
.dark-mode:not(.tm-auth-light) .loading-indicator {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: var(--shadow-lg);
}

.dark-mode:not(.tm-auth-light) .loading-indicator .indicator {
	color: var(--maincolor, #3b82f6);
}

/* Permission Editor */
.dark-mode:not(.tm-auth-light) .permissioneditor table {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}

.dark-mode:not(.tm-auth-light) .permissioneditor table th {
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-color);
}

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

/* Date/Time Picker */
.dark-mode:not(.tm-auth-light) .datepicker,
.dark-mode:not(.tm-auth-light) .pika-single,
.dark-mode:not(.tm-auth-light) .timepicker {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border-color) !important;
	box-shadow: var(--shadow-lg) !important;
}

.dark-mode:not(.tm-auth-light) .datepicker table th,
.dark-mode:not(.tm-auth-light) .pika-table th,
.dark-mode:not(.tm-auth-light) .timepicker table th {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .datepicker table td,
.dark-mode:not(.tm-auth-light) .pika-table td,
.dark-mode:not(.tm-auth-light) .timepicker table td {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .datepicker table td.day:hover,
.dark-mode:not(.tm-auth-light) .pika-button:hover,
.dark-mode:not(.tm-auth-light) .timepicker table td:hover {
	background: var(--bg-hover);
}

.dark-mode:not(.tm-auth-light) .datepicker table td.day.active,
.dark-mode:not(.tm-auth-light) .pika-table td.is-selected .pika-button,
.dark-mode:not(.tm-auth-light) .timepicker table td.active {
	background: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .field-datepicker .input-with-icon {
	background: var(--input-bg) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .field-datepicker .input-with-icon > .form-control,
.dark-mode:not(.tm-auth-light) .field-datepicker .input-with-icon > .uk-input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .field-datepicker .input-with-icon > .icon,
.dark-mode:not(.tm-auth-light) .field-datepicker .input-with-icon > i {
	color: var(--text-muted) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border-color) !important;
	border-radius: 12px !important;
	box-shadow: var(--shadow-lg) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .popover-title {
	background: var(--bg-secondary) !important;
	border-bottom: 1px solid var(--border-light) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .popover-content {
	background: var(--bg-primary) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-plate {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
}

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

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-tick:hover,
.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-tick.active {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-canvas line {
	stroke: #8ec5ff !important;
	stroke-width: 2px !important;
	opacity: 1 !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-canvas-out {
	opacity: 0.78 !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-canvas-bearing,
.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-canvas-fg {
	fill: #8ec5ff !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-canvas-bg {
	fill: rgba(59, 130, 246, 0.35) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-canvas-bg-trans {
	fill: rgba(59, 130, 246, 0.52) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-span-hours.text-primary,
.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-span-minutes.text-primary,
.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-tick.active {
	color: #8ec5ff !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-button {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-color) !important;
	color: var(--text-primary) !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-button:hover,
.dark-mode:not(.tm-auth-light) .clockpicker-popover .clockpicker-button:focus {
	background: var(--bg-hover) !important;
	color: var(--text-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover.top > .arrow,
.dark-mode:not(.tm-auth-light) .clockpicker-popover.bottom > .arrow,
.dark-mode:not(.tm-auth-light) .clockpicker-popover.left > .arrow,
.dark-mode:not(.tm-auth-light) .clockpicker-popover.right > .arrow {
	border-color: transparent !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover.top > .arrow::after {
	border-top-color: var(--bg-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover.bottom > .arrow::after {
	border-bottom-color: var(--bg-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover.left > .arrow::after {
	border-left-color: var(--bg-primary) !important;
}

.dark-mode:not(.tm-auth-light) .clockpicker-popover.right > .arrow::after {
	border-right-color: var(--bg-primary) !important;
}

.dark-mode:not(.tm-auth-light) .pika-single {
	padding: 10px;
}

.dark-mode:not(.tm-auth-light) .pika-lendar,
.dark-mode:not(.tm-auth-light) .pika-table,
.dark-mode:not(.tm-auth-light) .pika-title {
	background: transparent;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .pika-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-bottom: 8px;
}

.dark-mode:not(.tm-auth-light) .pika-label {
	color: var(--text-primary);
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 6px;
	padding: 6px 28px 6px 10px;
	position: relative;
}

.dark-mode:not(.tm-auth-light) .pika-select {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--text-primary);
	inset: 0;
	width: 100%;
	height: 100%;
}

.dark-mode:not(.tm-auth-light) .pika-label::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-35%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--text-muted);
	pointer-events: none;
}

.dark-mode:not(.tm-auth-light) .pika-prev,
.dark-mode:not(.tm-auth-light) .pika-next {
	filter: invert(0.88) saturate(0) brightness(1.1);
	opacity: 0.8;
}

.dark-mode:not(.tm-auth-light) .pika-prev:hover,
.dark-mode:not(.tm-auth-light) .pika-next:hover {
	opacity: 1;
}

.dark-mode:not(.tm-auth-light) .pika-table abbr {
	color: var(--text-muted);
	text-decoration: none;
}

.dark-mode:not(.tm-auth-light) .pika-button {
	background: transparent;
	color: var(--text-primary);
	border-radius: 6px;
}

.dark-mode:not(.tm-auth-light) .pika-button:hover {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .pika-table td.is-today .pika-button {
	color: var(--color-info-light);
	border: 1px solid rgba(59, 130, 246, 0.35);
}

.dark-mode:not(.tm-auth-light) .pika-table td.is-disabled .pika-button,
.dark-mode:not(.tm-auth-light) .pika-table td.is-empty {
	color: var(--text-light);
	opacity: 0.45;
}

/* Color Picker */
.dark-mode:not(.tm-auth-light) .field-colorpicker .colorpicker {
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: var(--shadow-lg);
}

/* Rich Text Editor (Froala) */
.dark-mode:not(.tm-auth-light) .field-richeditor {
	background: var(--bg-primary);
	border: 1px solid var(--border-color) !important;
	border-radius: 8px;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .fr-box.fr-basic {
	background: var(--bg-primary);
	border: 1px solid var(--border-color) !important;
	border-radius: 8px;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar {
	background: var(--bg-secondary);
	border-bottom: 1px solid rgba(148, 163, 184, 0.12);
	border-top: 0 !important;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-btn {
	color: var(--text-secondary);
	background: transparent;
	border: none;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-btn:hover,
.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-btn.fr-active {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper {
	background: var(--bg-primary);
	color: var(--text-primary);
	border: 1px solid var(--border-color) !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view {
	background: var(--bg-primary);
	color: var(--text-primary);
	border: 0 !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view p,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view div,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view span,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view h1,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view h2,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view h3,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view h4,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view h5,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view h6,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view li,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view td,
.dark-mode:not(.tm-auth-light) .fr-box .fr-wrapper .fr-view th {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-element {
	background: var(--bg-primary);
	color: var(--text-primary);
	border: 0 !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-element:focus {
	outline: none;
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-placeholder {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-separator {
	border-left-color: var(--border-color);
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-command.fr-btn .fr-icon {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-command.fr-btn:hover .fr-icon,
.dark-mode:not(.tm-auth-light) .fr-box .fr-toolbar .fr-command.fr-btn.fr-active .fr-icon {
	color: var(--text-primary);
}

/* Light mode base styles for Froala */
.field-richeditor {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: var(--bg-primary);
}

.field-richeditor .fr-box.fr-basic {
	background: var(--bg-primary);
	border: none;
	border-radius: 8px;
}

.field-richeditor .fr-box .fr-toolbar {
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}

.field-richeditor .fr-box .fr-wrapper {
	background: var(--bg-primary);
}

.field-richeditor .fr-box .fr-wrapper .fr-view {
	background: var(--bg-primary);
	color: var(--text-primary);
}

/* Sidebar Bottom Icons */
.dark-mode:not(.tm-auth-light) .bar-bottom a {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .bar-bottom a:hover {
	color: var(--text-primary);
	background: var(--bg-hover);
}

/* Improved Contrast for Links */
.dark-mode:not(.tm-auth-light) a:not(.uk-button):not(.btn):not(.tm-button) {
	color: var(--text-primary);
}

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

/* Icon Colors */
.dark-mode:not(.tm-auth-light) .uk-icon,
.dark-mode:not(.tm-auth-light) [data-uk-icon] {
	color: var(--text-secondary);
}

.dark-mode:not(.tm-auth-light) .uk-icon:hover,
.dark-mode:not(.tm-auth-light) [data-uk-icon]:hover {
	color: var(--text-primary);
}

/* Smooth Transitions for All Elements */
.dark-mode:not(.tm-auth-light) * {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Ensure Images Maintain Visibility */
.dark-mode:not(.tm-auth-light) img {
	opacity: 0.95;
}

.dark-mode:not(.tm-auth-light) img:hover {
	opacity: 1;
}

/* =====================================================
   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;
}

/* =====================================================
   Report Container Widget - Dark Mode Support
   ===================================================== */

/* Report Container Main Container */
.dark-mode:not(.tm-auth-light) .report-container {
	background-color: transparent;
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-grid {
	background-color: transparent;
}

/* Widget Cards */
.dark-mode:not(.tm-auth-light) .report-container .uk-card-default {
	background-color: var(--card-bg);
	border-color: var(--border-light);
	color: var(--text-primary);
	box-shadow: var(--shadow-sm);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-card-default:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--border-color);
}

/* Widget Card Header */
.dark-mode:not(.tm-auth-light) .report-container .uk-card-header {
	background-color: var(--bg-secondary);
	border-bottom-color: var(--border-light);
	padding: 12px 16px;
}

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

/* Widget Card Body */
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body {
	background-color: var(--card-bg);
	color: var(--text-primary);
	border-radius: inherit;
}

/* Icon Navigation (Edit, Delete, Move buttons) */
.dark-mode:not(.tm-auth-light) .report-container .uk-iconnav a {
	color: var(--text-muted);
	transition: color 0.2s ease;
}

.dark-mode:not(.tm-auth-light) .report-container .uk-iconnav a:hover {
	color: var(--text-primary);
	background-color: var(--bg-hover);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-iconnav a[uk-icon="cog"]:hover {
	color: var(--color-info);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-iconnav a[uk-icon="close"]:hover {
	color: var(--color-danger);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-iconnav a[uk-icon="move"]:hover {
	color: var(--text-secondary);
	cursor: move;
}

/* Sortable Handle */
.dark-mode:not(.tm-auth-light) .report-container .uk-sortable-handle {
	color: var(--text-muted);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-sortable-handle:hover {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-sortable-item {
	background-color: transparent;
}

.dark-mode:not(.tm-auth-light) .report-container .uk-sortable-item:hover {
	background-color: transparent;
}

/* Separator Items */
.dark-mode:not(.tm-auth-light) .report-container .item.separator {
	border-color: var(--border-light);
}

/* Container Toolbar */
.dark-mode:not(.tm-auth-light) .report-container [data-container-toolbar] {
	background-color: transparent;
	border-top: 1px solid var(--border-light);
	padding-top: 16px;
	margin-top: 16px;
}

/* Toolbar Buttons */
.dark-mode:not(.tm-auth-light) .report-container [data-container-toolbar] .uk-button-default {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container [data-container-toolbar] .uk-button-default:hover {
	background-color: var(--bg-hover);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container [data-container-toolbar] .uk-button-primary {
	background-color: var(--maincolor, #3b82f6);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .report-container [data-container-toolbar] .uk-button-primary:hover {
	background-color: var(--color-info);
	border-color: var(--color-info);
	color: var(--text-on-primary);
}

/* Modal Popups */
.dark-mode:not(.tm-auth-light) .report-container .uk-modal-header,
.dark-mode:not(.tm-auth-light) .report-container .modal-content {
	background-color: var(--bg-secondary);
	border-bottom-color: var(--border-light);
	color: var(--text-primary);
}

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

.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

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

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

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

/* Form Elements in Modals */
.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .form-group label {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .uk-select,
.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .custom-select {
	background-color: var(--input-bg);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .uk-select:focus,
.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .custom-select:focus {
	background-color: var(--input-bg);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-primary);
	outline: none;
}

.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .uk-select option,
.dark-mode:not(.tm-auth-light) .report-container .uk-modal-body .custom-select option {
	background-color: var(--input-bg);
	color: var(--text-primary);
}

/* Buttons in Modals */
.dark-mode:not(.tm-auth-light) .report-container .uk-modal-footer .uk-button-default {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-modal-footer .uk-button-default:hover {
	background-color: var(--bg-hover);
	border-color: var(--border-color);
	color: var(--text-primary);
}

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

.dark-mode:not(.tm-auth-light) .report-container .uk-modal-footer .uk-button-primary:hover {
	background-color: var(--color-info);
	border-color: var(--color-info);
	color: var(--text-on-primary);
}

/* Widget Toolbar (Legacy) */
.dark-mode:not(.tm-auth-light) .report-container .manage-widgets {
	color: var(--text-muted);
	border-color: var(--border-color);
	background-color: transparent;
}

.dark-mode:not(.tm-auth-light) .report-container .manage-widgets:hover {
	background-color: var(--maincolor2, #2563eb);
	border-color: var(--maincolor2, #2563eb);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .dropdown.open .manage-widgets {
	background-color: var(--maincolor2, #2563eb);
	border-color: var(--maincolor2, #2563eb);
	color: var(--text-on-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .dropdown-menu {
	background-color: var(--bg-secondary);
	border-color: var(--border-light);
	box-shadow: var(--shadow-lg);
}

.dark-mode:not(.tm-auth-light) .report-container .dropdown-menu a {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .dropdown-menu a:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .dropdown-menu .divider {
	border-top-color: var(--border-light);
}

/* Section Small (Toolbar spacing) */
.dark-mode:not(.tm-auth-light) .report-container .uk-section-small {
	background-color: transparent;
}

/* Ensure widget content inside cards is readable */
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body * {
	color: inherit;
}

.dark-mode:not(.tm-auth-light) .report-container .uk-card-body h1,
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body h2,
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body h3,
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body h4,
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body h5,
.dark-mode:not(.tm-auth-light) .report-container .uk-card-body h6 {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container .uk-card-body p {
	color: var(--text-secondary);
}

/* Input fields in widget forms */
.dark-mode:not(.tm-auth-light) .report-container input[type="text"],
.dark-mode:not(.tm-auth-light) .report-container input[type="number"],
.dark-mode:not(.tm-auth-light) .report-container input[type="email"],
.dark-mode:not(.tm-auth-light) .report-container input[type="password"],
.dark-mode:not(.tm-auth-light) .report-container textarea {
	background-color: var(--input-bg);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .report-container input[type="text"]:focus,
.dark-mode:not(.tm-auth-light) .report-container input[type="number"]:focus,
.dark-mode:not(.tm-auth-light) .report-container input[type="email"]:focus,
.dark-mode:not(.tm-auth-light) .report-container input[type="password"]:focus,
.dark-mode:not(.tm-auth-light) .report-container textarea:focus {
	background-color: var(--input-bg);
	border-color: var(--maincolor, #3b82f6);
	color: var(--text-primary);
	outline: none;
}

.field-colorpicker .colorpicker-container {
	max-width: none !important;
	align-items: stretch;
	overflow: hidden;
}

.field-colorpicker [data-color-preview] {
	display: block;
	align-self: stretch;
	height: auto;
	min-height: 38px;
	margin: 0 !important;
	top: 0;
	box-shadow: none !important;
}

.field-colorpicker [data-color-value] {
	margin: 0;
	min-height: 38px;
	border-bottom-left-radius: 0;
	box-shadow: none !important;
}

.field-colorpicker input[data-color-value] {
	height: 38px;
	line-height: 38px;
}

.dark-mode:not(.tm-auth-light) .form-preview {
	background: var(--bg-primary);
	border-color: var(--border-color);
	color: var(--text-primary);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.dark-mode:not(.tm-auth-light) .form-preview .form-group,
.dark-mode:not(.tm-auth-light) .form-preview p,
.dark-mode:not(.tm-auth-light) .form-preview span,
.dark-mode:not(.tm-auth-light) .form-preview div,
.dark-mode:not(.tm-auth-light) .form-preview li,
.dark-mode:not(.tm-auth-light) .form-preview label {
	color: inherit;
}

.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > div > div > ul.nav-tabs > li a > span.title:after,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > div > div > ul.nav-tabs > li a > span.title:before,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title:after,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > div > ul.nav-tabs > li a > span.title:before,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > ul.nav-tabs > li a > span.title:after,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > ul.nav-tabs > li a > span.title:before,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > div > div > ul.nav-tabs > li.active a:before,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > div > ul.nav-tabs > li.active a:before,
.dark-mode:not(.tm-auth-light) .form-preview .control-tabs.primary-tabs > ul.nav-tabs > li.active a:before {
	background-color: var(--bg-secondary);
}

.form-preview .uk-input:not(input),
.form-preview .uk-select:not(select) {
	display: flex;
	align-items: center;
	min-height: 38px;
	line-height: 1.4;
	padding-top: 8px;
	padding-bottom: 8px;
}

.uk-card .control-list[data-control="listwidget"] {
	background: transparent;
	border: none !important;
	border-radius: inherit;
	box-shadow: none !important;
	overflow: hidden;
}

.uk-card .control-list[data-control="listwidget"] .uk-table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}

.uk-card .control-list[data-control="listwidget"] .uk-table th,
.uk-card .control-list[data-control="listwidget"] .uk-table td {
	padding: 10px 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
	vertical-align: middle;
	background: transparent;
	line-height: 1.35;
}

.uk-card .control-list[data-control="listwidget"] .uk-table th {
	background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
	color: var(--text-secondary);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding-top: 12px;
	padding-bottom: 12px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table td {
	color: var(--text-primary);
}

.uk-card .control-list[data-control="listwidget"] .uk-table th:first-child,
.uk-card .control-list[data-control="listwidget"] .uk-table td:first-child {
	padding-left: 18px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table th:last-child,
.uk-card .control-list[data-control="listwidget"] .uk-table td:last-child {
	padding-right: 18px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table thead th:first-child {
	border-top-left-radius: 12px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table thead th:last-child {
	border-top-right-radius: 12px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table-striped tbody tr:nth-of-type(odd) {
	background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
}

.uk-card .control-list[data-control="listwidget"] .uk-table-hover tbody tr:hover {
	background: color-mix(in srgb, var(--bg-hover) 85%, transparent);
}

.uk-card .control-list[data-control="listwidget"] .uk-table-hover tbody tr:hover td {
	background: transparent;
}

.uk-card .control-list[data-control="listwidget"] .uk-table tbody tr:last-child td {
	border-bottom: none !important;
}

.uk-card .control-list[data-control="listwidget"] .uk-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 12px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 12px;
}

.uk-card .control-list[data-control="listwidget"] .uk-table tbody tr:last-child td:only-child {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.uk-card .list-footer {
	background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
	border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.uk-card .list-footer .list-pagination {
	display: flex;
	justify-content: center;
}

.uk-card .list-footer .control-pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 36px;
}

.uk-card .list-footer .page-iteration {
	color: var(--text-muted);
	font-weight: 500;
}

.uk-card .list-footer .control-pagination .form-control.custom-select {
	min-width: 76px;
	height: 32px;
	padding-right: 32px;
	border-radius: 10px;
}

.tm-radius-remove {
	border-radius: 0 !important;
}

.text-center {
	text-align: center !important;
}

/* Simple List */
.dark-mode:not(.tm-auth-light) .control-simplelist {
	background: var(--bg-secondary) !important;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	color: var(--text-primary);
	box-shadow: none;
}

.dark-mode:not(.tm-auth-light) .control-simplelist.uk-panel-scrollable {
	border-color: rgba(148, 163, 184, 0.16);
}

.dark-mode:not(.tm-auth-light) .control-simplelist ul {
	margin-bottom: 0;
	padding-left: 12px;
	padding-right: 8px;
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes li {
	margin-top: 0;
	padding: 2px 0;
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes li + li {
	border-top: 1px solid rgba(148, 163, 184, 0.08);
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes .checkbox.custom-checkbox {
	margin: 0;
	padding: 8px 8px 8px 10px;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes .checkbox.custom-checkbox:hover {
	background: rgba(96, 165, 250, 0.06);
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes label.choice {
	color: var(--text-primary);
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes .custom-checkbox label:before {
	background: var(--bg-secondary) !important;
	border-color: rgba(148, 163, 184, 0.22) !important;
	box-shadow: none !important;
}

.control-simplelist.with-checkboxes .custom-checkbox input[type="checkbox"]:checked + label.choice:before {
	content: '';
	background-image: none !important;
}

.control-simplelist.with-checkboxes .custom-checkbox input[type="checkbox"]:checked + label.choice: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);
	background: transparent !important;
	box-shadow: none !important;
}

.dark-mode:not(.tm-auth-light) .control-simplelist.with-checkboxes li.placeholder::before {
	border-left-color: #60a5fa;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-3xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
	font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.tm-border-none {
	border: none !important;
}

.tm-flex-header {
    display: flex;
    align-items: center;
	padding: 5px 10px 5px 10px !important;
}
.tm-flex-header > .uk-iconnav {
    margin-left: auto;
}

.dark-mode .uk-icon-button {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-secondary);
}

.dark-mode .uk-icon-button:hover,
.dark-mode .uk-icon-button:focus {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark-mode .uk-icon-button:active {
	background-color: var(--bg-hover);
}