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

	--page-header-height: 50px;
	--page-footer-height: 60px;
}

/* 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: #3b82f6;
		--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: #3b82f6;
	--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);
	height: auto;
}

/* 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);
	height: auto;
}

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

.tm-text-primary {
	color: var(--text-primary) !important;
}

.tm-background-remove, .tm-no-background {
	background: transparent !important;
}