/**
 * dSuite Modern Design System
 * Enterprise-grade UI/UX with professional aesthetics
 * Version: 2.0
 */

/* ============================================
   MODERN TYPOGRAPHY & FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================
   FONT AWESOME ICON FIXES
   ============================================ */
/* Ensure Font Awesome icons display properly */
.fas, .far, .fab, .fal, .fad, .fa,
[class*="fa-"],
i[class*="fa-"] {
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "FontAwesome" !important;
	font-weight: 900 !important;
	font-style: normal !important;
	font-variant: normal !important;
	text-rendering: auto !important;
	line-height: 1 !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	display: inline-block !important;
	speak: none;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
}

/* Ensure Font Awesome pseudo-elements (::before) render properly */
.fas::before, .far::before, .fab::before, .fal::before, .fad::before, .fa::before,
[class*="fa-"]::before,
i[class*="fa-"]::before {
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "FontAwesome" !important;
	font-weight: 900 !important;
	font-style: normal !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	display: inline-block !important;
}

.far::before {
	font-weight: 400 !important;
}

.fab::before {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400 !important;
}

.far {
	font-weight: 400 !important;
}

.fab {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400 !important;
}

/* Ensure icons inside buttons inherit color and have proper size */
button .fas, button .far, button .fab, button .fa,
button i[class*="fa-"],
.ds-button .fas, .ds-button .far, .ds-button .fab, .ds-button .fa,
.ds-button i[class*="fa-"] {
	color: inherit !important;
	font-size: 14px !important;
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "FontAwesome" !important;
	font-weight: 900 !important;
	font-style: normal !important;
	display: inline-block !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}

button .far, .ds-button .far {
	font-weight: 400 !important;
}

button .fab, .ds-button .fab {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400 !important;
}

:root {
	/* Modern Color Palette - Soft & Professional */
	--primary: #6366f1;
	--primary-light: #818cf8;
	--primary-dark: #4f46e5;
	--primary-50: #eef2ff;
	--primary-100: #e0e7ff;
	
	--secondary: #14b8a6;
	--secondary-light: #5eead4;
	--secondary-dark: #0d9488;
	
	--accent: #f59e0b;
	--accent-light: #fbbf24;
	
	/* Neutral Grays - Modern SaaS Style */
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;
	--gray-900: #111827;
	
	/* Semantic Colors */
	--success: #10b981;
	--success-light: #34d399;
	--success-50: #d1fae5;
	
	--warning: #f59e0b;
	--warning-light: #fbbf24;
	--warning-50: #fef3c7;
	
	--danger: #ef4444;
	--danger-light: #f87171;
	--danger-50: #fee2e2;
	
	--info: #3b82f6;
	--info-light: #60a5fa;
	--info-50: #dbeafe;
	
	/* Background & Surface - Explicit white values */
	--bg: #ffffff;
	--bg-alt: #f9fafb;
	--bg-elevated: #ffffff;
	
	--card: #ffffff;
	--card-hover: #fafbfc;
	--card-border: #e5e7eb;
	
	/* Text Colors */
	--text: #111827;
	--text-light: #6b7280;
	--text-muted: #9ca3af;
	--text-inverse: #ffffff;
	
	/* Borders */
	--border: #e5e7eb;
	--border-light: #f3f4f6;
	--border-dark: #d1d5db;
	
	/* Shadows - Soft & Modern */
	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	
	/* Spacing Scale */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.25rem;   /* 20px */
	--space-6: 1.5rem;    /* 24px */
	--space-8: 2rem;      /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	
	/* Typography Scale - Minimized but Readable */
	--text-xs: 0.625rem;   /* 10px */
	--text-sm: 0.75rem;    /* 12px */
	--text-base: 0.875rem; /* 14px */
	--text-lg: 1rem;       /* 16px */
	--text-xl: 1.125rem;   /* 18px */
	--text-2xl: 1.25rem;   /* 20px */
	--text-3xl: 1.5rem;    /* 24px */
	--text-4xl: 1.875rem;  /* 30px */
	
	/* Border Radius */
	--radius-sm: 0.375rem;  /* 6px */
	--radius: 0.5rem;       /* 8px */
	--radius-md: 0.75rem;   /* 12px */
	--radius-lg: 1rem;      /* 16px */
	--radius-xl: 1.5rem;    /* 24px */
	--radius-full: 9999px;
	
	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	
	/* Z-Index Scale */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	--z-toast: 1080;
}

/* Dark Mode Support - DISABLED to ensure visibility on white backgrounds */
/* We force white backgrounds, so we need dark text always */
@media (prefers-color-scheme: dark) {
	:root {
		/* Keep backgrounds white even in dark mode */
		--bg: #ffffff;
		--bg-alt: #f9fafb;
		--bg-elevated: #ffffff;
		
		--card: #ffffff;
		--card-hover: #fafbfc;
		--card-border: #e5e7eb;
		
		/* Force dark text for visibility on white backgrounds */
		--text: #111827 !important;
		--text-light: #6b7280 !important;
		--text-muted: #9ca3af !important;
		
		--border: #e5e7eb;
		--border-light: #f3f4f6;
		--border-dark: #d1d5db;
	}
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	overflow-x: hidden;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.2;
	color: var(--text);
	margin-bottom: var(--space-4);
}

h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-xl); font-weight: 600; }
h3 { font-size: var(--text-lg); font-weight: 600; }
h4 { font-size: var(--text-base); font-weight: 600; }
h5 { font-size: var(--text-sm); font-weight: 600; }
h6 { font-size: var(--text-xs); font-weight: 600; }

p {
	margin-bottom: var(--space-4);
	color: var(--text-light);
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--primary-dark);
}

/* ============================================
   BUTTONS - Modern & Interactive
   ============================================ */
.ds-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
	font-weight: 500;
	font-family: inherit;
	line-height: 1.4;
	border: none;
	position: relative; /* For ::before positioning */
	overflow: hidden; /* Hide overflow from ::before */
}

/* Ensure button content (text and icons) are above ::before */
.ds-button > *,
.ds-button svg,
.ds-button i,
.ds-button span {
	position: relative;
	z-index: 1;
	background: transparent !important; /* No white backgrounds on button children */
}

/* Ensure SVG icons in buttons are visible */
.ds-button svg {
	fill: none !important; /* No fill, use stroke only */
	stroke: currentColor !important;
	color: inherit !important;
	flex-shrink: 0;
	background: transparent !important; /* No white background */
	background-color: transparent !important;
}

/* Ensure icon elements have no background */
.ds-button i,
.ds-button .fas,
.ds-button .far,
.ds-button .fab,
.ds-button .fa,
.ds-button i[class*="fa-"] {
	background: transparent !important;
	background-color: transparent !important;
}

/* Ensure span elements in buttons have no background */
.ds-button span {
	background: transparent !important;
	background-color: transparent !important;
}
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
	box-shadow: var(--shadow-sm);
}

/* ============================================
   MODALS - Unified Popup Layout
   ============================================ */
.ds-modal {
	position: fixed !important;
	z-index: 9999 !important; /* High z-index to ensure modals appear above everything */
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(0, 0, 0, 0.75) !important;
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

/* When modal is opened via inline style or class */
.ds-modal[style*="display: flex"],
.ds-modal[style*="display:flex"],
.ds-modal[style*="display: block"],
.ds-modal[style*="display:block"],
.ds-modal.is-open,
.ds-modal.show {
	display: flex !important;
	position: fixed !important;
	z-index: 9999 !important;
	visibility: visible !important;
	opacity: 1 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

/* Ensure modals with inline display styles are visible */
.ds-modal[style*="display"] {
	position: fixed !important;
	z-index: 9999 !important;
}

/* Legacy .modal support - map to ds-modal so old popups get same layout */
.modal {
	position: fixed !important;
	z-index: 9999 !important; /* High z-index to ensure modals appear above everything */
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(15, 23, 42, 0.45) !important;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

/* When legacy modal is opened via inline style or class */
.modal[style*="display: flex"],
.modal[style*="display:flex"],
.modal[style*="display: block"],
.modal[style*="display:block"],
.modal.is-open,
.modal.show {
	display: flex !important;
	position: fixed !important;
	z-index: 9999 !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure modals with inline display styles are visible */
.modal[style*="display"] {
	position: fixed !important;
	z-index: 9999 !important;
}

.modal-content {
	background: var(--card);
	border-radius: var(--radius-md);
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--card-border);
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-light);
}

.modal-body {
	padding: var(--space-4);
	font-size: var(--text-sm);
}

.modal-footer {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--border-light);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}

.ds-modal.is-open,
.ds-modal[style*="display: flex"],
.ds-modal[style*="display:flex"] {
	display: flex !important;
	position: fixed !important;
	z-index: 9999 !important;
}

.ds-modal__content {
	background: var(--card);
	border-radius: var(--radius-md);
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--card-border);
}

.ds-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border-light);
}

.ds-modal__title {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.ds-modal__close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-lg);
	color: var(--text-light);
	padding: 0;
	line-height: 1;
}

.ds-modal__close:hover {
	color: var(--text);
}

.ds-modal__body {
	padding: var(--space-4);
	font-size: var(--text-sm);
}

.ds-modal__footer {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--border-light);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}

/* Support for hyphenated class names (ds-modal-content, ds-modal-header, etc.) */
.ds-modal-content {
	background: var(--card) !important;
	border-radius: 8px;
	width: 100%;
	max-width: 95vw;
	max-height: 95vh;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.15);
	position: relative !important;
	z-index: 10000 !important; /* Higher than modal backdrop */
	display: flex;
	flex-direction: column;
	margin: auto; /* Center the modal */
}

.ds-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	cursor: move;
	user-select: none;
	position: relative;
}

.ds-modal-header h3 {
	font-size: 9px;
	font-weight: 500;
	color: #333;
	margin: 0;
	text-align: left;
	flex: 1;
	letter-spacing: 0.3px;
}

/* Windows/Linux style window controls - on the right */
.ds-modal-window-controls {
	display: flex;
	gap: 6px;
	align-items: center;
	order: 2;
}

.ds-modal-window-control {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	line-height: 1;
	font-weight: bold;
	color: rgba(0, 0, 0, 0.5);
}

.ds-modal-window-control.close {
	background: #ff5f57;
}

.ds-modal-window-control.close:hover {
	background: #ff3b30;
}

.ds-modal-window-control.minimize {
	background: #ffbd2e;
}

.ds-modal-window-control.minimize:hover {
	background: #ff9500;
}

.ds-modal-window-control.maximize {
	background: #28ca42;
}

.ds-modal-window-control.maximize:hover {
	background: #20c933;
}

.ds-modal-close {
	display: none; /* Hide the separate close button, we use window controls */
}

.ds-modal-body {
	padding: 12px 16px;
	font-size: 8px;
	background: var(--card);
	flex: 1;
	overflow-y: auto;
}

.ds-modal-footer {
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--border-light);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
	background: var(--card);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.ds-modal-footer .ds-button {
	font-size: 8px;
	padding: 4px 10px;
}

@media (max-width: 640px) {
	.ds-modal {
		padding: var(--space-2);
	}

	.ds-modal__content,
	.ds-modal-content {
		max-width: 100%;
		border-radius: var(--radius-md);
	}
	
	.ds-modal-header {
		padding: var(--space-3) var(--space-4);
		border-radius: var(--radius-md) var(--radius-md) 0 0;
	}
	
	.ds-modal-body {
		padding: var(--space-4);
	}
	
	.ds-modal-footer {
		padding: var(--space-3) var(--space-4);
		border-radius: 0 0 var(--radius-md) var(--radius-md);
	}
}

.ds-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
	pointer-events: none; /* Don't interfere with clicks */
	z-index: 0; /* Behind content */
	opacity: 0; /* Hidden by default */
}

.ds-button:active::before {
	width: 300px;
	height: 300px;
	opacity: 1; /* Show ripple on active */
}

.ds-button:focus {
	outline: none;
	box-shadow: var(--shadow-sm), 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ds-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary Button */
.ds-button {
	background: var(--primary, #ff5b74) !important;
	color: #ffffff !important;
	border: none !important;
}

.ds-button:hover {
	background: var(--primary-dark, #e04a5f) !important;
	color: #ffffff !important;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.ds-button:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

/* Secondary Button */
.ds-button.secondary {
	background: var(--secondary);
	color: var(--text-inverse);
}

.ds-button.secondary:hover {
	background: var(--secondary-dark);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Ghost/Outline Button */
.ds-button.ghost {
	background: transparent !important;
	color: #111827 !important;
	border: 1px solid #d1d5db !important;
	box-shadow: none;
}

.ds-button.ghost:hover {
	background: var(--bg-alt, #f3f4f6) !important;
	border-color: var(--primary, #ff5b74) !important;
	color: var(--primary, #ff5b74) !important;
	box-shadow: var(--shadow-sm);
}

/* Danger Button */
.ds-button.danger {
	background: var(--danger);
	color: var(--text-inverse);
}

.ds-button.danger:hover {
	background: #dc2626;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Button Sizes */
.ds-button.sm {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
}

.ds-button.lg {
	padding: var(--space-4) var(--space-6);
	font-size: var(--text-base);
}

/* Button with Loading State */
.ds-button.loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.ds-button.loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

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

/* ============================================
   FORMS - Modern with Floating Labels
   ============================================ */
.form-group {
	margin-bottom: var(--space-5);
	position: relative;
}

.form-group label {
	display: block;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--text);
	margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-xs);
	font-family: inherit;
	line-height: 1.4;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: all var(--transition-base);
	appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
	background: var(--bg-alt);
	cursor: not-allowed;
	opacity: 0.6;
}

.form-input::placeholder,
.form-textarea::placeholder {
	color: var(--text-muted);
}

/* Form Validation States */
.form-input.error,
.form-select.error,
.form-textarea.error {
	border-color: var(--danger);
}

.form-input.error:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input.success,
.form-select.success,
.form-textarea.success {
	border-color: var(--success);
}

.form-input.success:focus {
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-error {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--danger);
}

.form-success {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--success);
}

/* Form Grid */
.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-5);
}

.form-grid .full {
	grid-column: 1 / -1;
}

/* Responsive form grid for modals - expands based on available space */
.ds-modal-body .form-grid {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}

.ds-modal-body .form-group {
	margin-bottom: 8px;
	position: relative;
}

/* Material Design Text Field */
.ds-modal-body .form-group {
	margin-bottom: 20px;
}

.ds-modal-body .md-text-field {
	position: relative;
	width: 100%;
}

.ds-modal-body .md-text-field input,
.ds-modal-body .md-text-field select,
.ds-modal-body .md-text-field textarea {
	width: 100%;
	font-size: 8px;
	padding: 12px 0 4px 0;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.42);
	background: transparent;
	outline: none;
	color: rgba(0, 0, 0, 0.87);
	transition: border-color 0.2s;
}

.ds-modal-body .md-text-field input:focus,
.ds-modal-body .md-text-field select:focus,
.ds-modal-body .md-text-field textarea:focus {
	border-bottom: 2px solid var(--primary, #6366f1);
	padding-bottom: 3px;
}

.ds-modal-body .md-text-field input[type="time"] {
	cursor: pointer;
}

.ds-modal-body .md-text-field input:focus + label,
.ds-modal-body .md-text-field select:focus + label,
.ds-modal-body .md-text-field textarea:focus + label,
.ds-modal-body .md-text-field input:not(:placeholder-shown) + label,
.ds-modal-body .md-text-field select:not([value=""]) + label,
.ds-modal-body .md-text-field textarea:not(:placeholder-shown) + label,
.ds-modal-body .md-text-field select.has-value + label,
.ds-modal-body .md-text-field input.has-value + label,
.ds-modal-body .md-text-field input[type="date"]:not([value=""]) + label,
.ds-modal-body .md-text-field input[type="time"]:not([value=""]) + label {
	top: -8px;
	font-size: 7px;
	color: var(--primary, #6366f1);
}

.ds-modal-body .md-text-field label {
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 8px;
	color: rgba(0, 0, 0, 0.6);
	pointer-events: none;
	transition: all 0.2s;
	background: var(--card, #ffffff);
	padding-right: 4px;
	z-index: 1;
}

.ds-modal-body .md-text-field textarea {
	resize: vertical;
	min-height: 40px;
	padding-top: 16px;
}

.ds-modal-body .md-text-field select {
	cursor: pointer;
	padding-right: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 8px;
	appearance: none;
}

.ds-modal-body .md-text-field .md-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.42);
}

.ds-modal-body .md-text-field .md-ripple {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--primary, #6366f1);
	transition: width 0.3s, left 0.3s;
}

.ds-modal-body .md-text-field input:focus ~ .md-ripple,
.ds-modal-body .md-text-field select:focus ~ .md-ripple,
.ds-modal-body .md-text-field textarea:focus ~ .md-ripple {
	width: 100%;
	left: 0;
}

/* Legacy support - keep old form-group label style for non-MD fields */
.ds-modal-body .form-group label:not(.md-text-field label) {
	font-size: 8px;
	margin-bottom: 4px;
	color: #555;
	font-weight: 500;
}

.ds-modal-body .form-input:not(.md-text-field input):not(.md-text-field select):not(.md-text-field textarea) {
	font-size: 8px;
	padding: 4px 6px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
}

.ds-modal-body .form-input:not(.md-text-field input):not(.md-text-field select):not(.md-text-field textarea):focus {
	outline: 1px solid var(--primary, #6366f1);
	outline-offset: -1px;
}

.ds-modal-body .ds-button {
	font-size: 8px;
	padding: 4px 10px;
}

.ds-modal-body textarea {
	font-size: 8px;
}

.ds-modal-body select {
	font-size: 8px;
}

.ds-modal-body input[type="text"],
.ds-modal-body input[type="email"],
.ds-modal-body input[type="tel"],
.ds-modal-body input[type="number"],
.ds-modal-body input[type="date"] {
	font-size: 8px;
}

.ds-modal-body option {
	font-size: 8px;
}

@media (min-width: 768px) {
	.ds-modal-body .form-grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

@media (min-width: 1024px) {
	.ds-modal-body .form-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

@media (min-width: 1280px) {
	.ds-modal-body .form-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* ============================================
   CARDS - Modern & Elevated
   ============================================ */
.ds-card {
	background: var(--card, #ffffff); /* CSS variable with white fallback */
	border: 1px solid var(--card-border, #e5e7eb);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-base);
	position: relative;
	overflow: hidden;
}

.ds-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	opacity: 0;
	transition: opacity var(--transition-base);
}

.ds-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: var(--primary-100);
}

.ds-card:hover::before {
	opacity: 1;
}

.ds-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border-light);
}

.ds-card-title {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.ds-card-body {
	color: var(--text-light);
}

.ds-card-footer {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
}

/* KPI Cards */
.kpi-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: linear-gradient(135deg, var(--card) 0%, var(--card-hover) 100%);
}

.kpi-title {
	font-size: 0.625rem; /* 10px */
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.kpi-value {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--primary);
	line-height: 1.2;
}

.kpi-change {
	font-size: var(--text-xs);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.kpi-change.positive {
	color: var(--success);
}

.kpi-change.negative {
	color: var(--danger);
}

/* ============================================
   TABLES - Modern with Sticky Headers
   ============================================ */
.table-wrapper {
	overflow-x: auto;
	border-radius: var(--radius-md);
	border: 1px solid var(--border, #e5e7eb);
	background: var(--card, #ffffff); /* CSS variable with white fallback */
}

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--text-sm);
	background: var(--card, #ffffff); /* CSS variable with white fallback */
}

.table thead {
	background: var(--bg-alt, #f9fafb); /* CSS variable with light gray fallback */
	position: sticky;
	top: 0;
	z-index: 10;
}

.table th {
	padding: var(--space-2) var(--space-3);
	text-align: left;
	font-weight: 600;
	font-size: 0.625rem; /* 10px */
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
}

.table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--border-light, #f3f4f6);
	color: var(--text, #111827);
	background: var(--card, #ffffff); /* CSS variable with white fallback */
	transition: background var(--transition-fast);
	font-size: var(--text-xs);
}

.table tbody tr {
	transition: all var(--transition-fast);
}

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

.table tbody tr:last-child td {
	border-bottom: none;
}

/* Table Actions */
.table-actions {
	display: flex;
	gap: var(--space-2);
	align-items: center;
}

.table-action-btn {
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-xs);
	border: none;
	background: transparent;
	color: var(--text-light);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

.table-action-btn:hover {
	background: var(--bg-alt);
	color: var(--primary);
}

/* ============================================
   MODALS - Modern Overlay System
   ============================================ */
.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	z-index: var(--z-modal-backdrop);
	opacity: 0;
	animation: fadeIn var(--transition-base) forwards;
}

@keyframes fadeIn {
	to { opacity: 1; }
}

.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.95);
	background: var(--card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	z-index: var(--z-modal);
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
	opacity: 0;
	animation: modalSlideIn var(--transition-slow) forwards;
}

@keyframes modalSlideIn {
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5);
	border-bottom: 1px solid var(--border-light);
}

.modal-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.modal-close {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast);
}

.modal-close:hover {
	background: var(--bg-alt);
	color: var(--text);
}

.modal-body {
	padding: var(--space-5);
}

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	padding: var(--space-5);
	border-top: 1px solid var(--border-light);
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */
.alert {
	padding: var(--space-4);
	border-radius: var(--radius);
	border-left: 4px solid;
	margin-bottom: var(--space-4);
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	animation: slideInRight var(--transition-base);
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.alert-success {
	background: var(--success-50);
	border-color: var(--success);
	color: #065f46;
}

.alert-error,
.alert-danger {
	background: var(--danger-50);
	border-color: var(--danger);
	color: #991b1b;
}

.alert-warning {
	background: var(--warning-50);
	border-color: var(--warning);
	color: #92400e;
}

.alert-info {
	background: var(--info-50);
	border-color: var(--info);
	color: #1e40af;
}

/* Toast Notifications */
.toast-container {
	position: fixed;
	top: var(--space-4);
	right: var(--space-4);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 400px;
}

.toast {
	padding: var(--space-4);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	animation: toastSlideIn var(--transition-base);
	min-width: 300px;
}

@keyframes toastSlideIn {
	from {
		opacity: 0;
		transform: translateX(100%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes toastSlideOut {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(100%);
	}
}

.toast-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.toast-content {
	flex: 1;
}

.toast-title {
	font-weight: 600;
	font-size: var(--text-xs);
	color: var(--text);
	margin-bottom: var(--space-1);
}

.toast-message {
	font-size: 0.625rem; /* 10px */
	color: var(--text-light);
}

.toast-close {
	width: 20px;
	height: 20px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast);
	flex-shrink: 0;
}

.toast-close:hover {
	background: var(--bg-alt);
	color: var(--text);
}

/* ============================================
   LOADING STATES
   ============================================ */
/* Spinner */
.spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border);
	border-top-color: var(--primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: var(--space-4) auto;
}

.spinner.sm {
	width: 20px;
	height: 20px;
	border-width: 2px;
}

.spinner.lg {
	width: 60px;
	height: 60px;
	border-width: 4px;
}

/* Skeleton Loader */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--bg-alt) 0%,
		var(--gray-200) 50%,
		var(--bg-alt) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s ease-in-out infinite;
	border-radius: var(--radius);
}

@keyframes skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.skeleton-text {
	height: 1em;
	margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
	margin-bottom: 0;
}

.skeleton-title {
	height: 1.5em;
	width: 60%;
	margin-bottom: var(--space-3);
}

.skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.skeleton-card {
	padding: var(--space-5);
	border-radius: var(--radius-md);
}

/* Progress Bar */
.progress {
	width: 100%;
	height: 8px;
	background: var(--bg-alt);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	border-radius: var(--radius-full);
	transition: width var(--transition-slow);
	position: relative;
	overflow: hidden;
}

.progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */
.ds-app {
	display: flex;
	min-height: 100vh;
	background: var(--bg);
}

.ds-sidebar {
	width: 260px;
	background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: var(--text-inverse);
	padding: var(--space-5);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: var(--shadow-lg);
	transition: transform var(--transition-base);
}

.ds-sidebar::-webkit-scrollbar {
	width: 6px;
}

.ds-sidebar::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}

.ds-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-full);
}

.ds-sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

.brand-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	margin-bottom: var(--space-6);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

.brand-logo {
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	object-fit: cover;
	background: var(--text-inverse);
	padding: var(--space-1);
	box-shadow: var(--shadow-md);
}

.brand-name {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-inverse);
}

.ds-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.ds-nav a,
.nav-item {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius);
	color: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-xs);
	font-weight: 500;
	transition: all var(--transition-base);
	position: relative;
}

.ds-nav a:hover,
.nav-item:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--text-inverse);
	transform: translateX(4px);
}

.ds-nav a.active,
.nav-item.active {
	background: var(--text-inverse);
	color: var(--primary);
	box-shadow: var(--shadow-md);
	font-weight: 600;
}

.ds-nav a.active::before,
.nav-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 60%;
	background: var(--primary);
	border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.ds-main-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--bg);
}

.ds-header {
	height: 64px;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: 0 var(--space-5);
	background: var(--card);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	box-shadow: var(--shadow-sm);
}

.ds-header .toggle {
	width: 40px;
	height: 40px;
	border: none;
	background: var(--bg-alt);
	color: var(--text);
	border-radius: var(--radius);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-base);
}

.ds-header .toggle:hover {
	background: var(--primary);
	color: var(--text-inverse);
	transform: scale(1.05);
}

.ds-main {
	padding: var(--space-6);
	flex: 1;
}

.ds-footer {
	padding: var(--space-5);
	background: var(--card);
	border-top: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--text-xs);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
	.ds-sidebar {
		position: fixed;
		left: 0;
		z-index: var(--z-fixed);
		transform: translateX(-100%);
	}
	
	.ds-sidebar.open {
		transform: translateX(0);
	}
	
	.ds-main-wrap {
		margin-left: 0;
	}
}

/* Narrower drawer on small screens so it doesn't cover too much content
   and remove extra page padding so content isn't indented. */
@media (max-width: 768px) {
	.ds-sidebar {
		width: 110px !important; /* Minimized to fit text and links only */
	}

	/* Remove global left/right padding so main content touches screen edges */
	.ds-main {
		padding: var(--space-3) var(--space-2);
	}
}

@media (max-width: 768px) {
	:root {
		font-size: 12px;
	}
	
	.ds-main {
		padding: var(--space-4);
	}
	
	.form-grid {
		grid-template-columns: 1fr;
	}
	
	.modal {
		max-width: 95vw;
		margin: var(--space-4);
	}
	
	.table-wrapper {
		font-size: var(--text-xs);
	}
	
	.table th,
	.table td {
		padding: var(--space-2) var(--space-3);
	}
}

@media (max-width: 480px) {
	.ds-header {
		padding: 0 var(--space-3);
	}
	
	.ds-card {
		padding: var(--space-4);
	}
	
	.ds-button {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.hidden { display: none; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fadeIn {
	animation: fadeIn var(--transition-base);
}

.animate-slideUp {
	animation: slideUp var(--transition-base);
}

.animate-slideDown {
	animation: slideDown var(--transition-base);
}

/* ============================================
   FORCE WHITE BACKGROUNDS - Override dark themes
   ============================================ */
/* Force white backgrounds for cards and tables - override any dark themes or browser defaults */
/* This applies globally to all pages */

/* All card types */
.ds-card,
.form-card,
.kpi-card,
.dashboard-card,
.card,
.card-body,
.card-content,
.card-section,
.content-section,
.section-card,
.info-card,
.data-card {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* Card children (except table headers, buttons, button children, and modals) */
.ds-card *:not(.table thead):not(.table th):not(.table thead tr):not(.table thead th):not(button):not(.ds-button):not(button *):not(.ds-button *):not(.ds-button i):not(.ds-button svg):not(.ds-button span):not(.ds-button .fas):not(.ds-button .far):not(.ds-button .fab):not(.ds-button .fa):not(.ds-button i[class*="fa-"]):not(.ds-modal):not(.modal):not(.ds-modal *):not(.modal *):not(.ds-modal-content):not(.modal-content):not(.ds-modal-header):not(.modal-header):not(.ds-modal-body):not(.modal-body):not(.ds-modal-footer):not(.modal-footer),
.form-card *:not(.table thead):not(.table th):not(.table thead tr):not(.table thead th):not(button):not(.ds-button):not(button *):not(.ds-button *):not(.ds-button i):not(.ds-button svg):not(.ds-button span):not(.ds-button .fas):not(.ds-button .far):not(.ds-button .fab):not(.ds-button .fa):not(.ds-button i[class*="fa-"]):not(.ds-modal):not(.modal):not(.ds-modal *):not(.modal *):not(.ds-modal-content):not(.modal-content):not(.ds-modal-header):not(.modal-header):not(.ds-modal-body):not(.modal-body):not(.ds-modal-footer):not(.modal-footer),
.card-body *:not(.table thead):not(.table th):not(.table thead tr):not(.table thead th):not(button):not(.ds-button):not(button *):not(.ds-button *):not(.ds-button i):not(.ds-button svg):not(.ds-button span):not(.ds-button .fas):not(.ds-button .far):not(.ds-button .fab):not(.ds-button .fa):not(.ds-button i[class*="fa-"]):not(.ds-modal):not(.modal):not(.ds-modal *):not(.modal *):not(.ds-modal-content):not(.modal-content):not(.ds-modal-header):not(.modal-header):not(.ds-modal-body):not(.modal-body):not(.ds-modal-footer):not(.modal-footer),
.card-content *:not(.table thead):not(.table th):not(.table thead tr):not(.table thead th):not(button):not(.ds-button):not(button *):not(.ds-button *):not(.ds-button i):not(.ds-button svg):not(.ds-button span):not(.ds-button .fas):not(.ds-button .far):not(.ds-button .fab):not(.ds-button .fa):not(.ds-button i[class*="fa-"]):not(.ds-modal):not(.modal):not(.ds-modal *):not(.modal *):not(.ds-modal-content):not(.modal-content):not(.ds-modal-header):not(.modal-header):not(.ds-modal-body):not(.modal-body):not(.ds-modal-footer):not(.modal-footer) {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* All table types */
.table-wrapper,
.table,
.table tbody,
.table tbody tr,
.table tbody td,
table,
table tbody,
table tbody tr,
table tbody td,
.data-table,
.data-table tbody,
.data-table tbody tr,
.data-table tbody td {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* Table headers - light gray */
.table thead,
.table thead tr,
.table thead th,
table thead,
table thead tr,
table thead th,
.data-table thead,
.data-table thead tr,
.data-table thead th {
	background-color: #f9fafb !important;
	background: #f9fafb !important;
}

/* Form elements inside cards */
.ds-card .form-group,
.ds-card .form-input,
.ds-card .form-select,
.ds-card .form-textarea,
.form-card .form-group,
.form-card .form-input,
.form-card .form-select,
.form-card .form-textarea {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* List items and breakdown items */
.breakdown-item,
.expense-breakdown,
.invoice-breakdown,
.list-item,
.data-item {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* Page-specific containers that might have dark backgrounds */
.ds-main,
.ds-container,
.page-container,
.content-wrapper,
.main-content {
	background-color: #f8fafc !important;
	background: #f8fafc !important;
}

/* Universal rule: Force white background on common page container patterns */
/* This catches pages using container/body/section classes */
.purchases-container,
.purchases-body,
.inv-products,
.inv-body,
.inv-form,
.inv-form-body,
.serials-container,
.serials-body,
.loans-container,
.loans-body,
.invoices-container,
.invoices-body,
.reports-container,
.reports-body,
.profit-loss-container,
.profit-loss-body,
.general-ledger-container,
.general-ledger-body,
.balance-sheet-container,
.balance-sheet-body,
.account-summary-container,
.account-summary-body,
.journal-entry-container,
.journal-entry-body,
.customers-container,
.customers-body,
.suppliers-container,
.suppliers-body,
.price-lists-container,
.price-lists-body,
.product-kits-container,
.product-kits-body,
.kits-container,
.kits-body,
.product-variants-container,
.product-variants-body,
.product-batches-container,
.product-batches-body,
.batches-container,
.batches-body,
.serial-numbers-container,
.serial-numbers-body,
.analytics-container,
.analytics-body,
.forecast-container,
.forecast-body,
.sales-orders-container,
.sales-orders-body,
.approvals-container,
.approvals-body,
.alerts-container,
.alerts-body {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* ============================================
   FORCE DARK TEXT & VISIBLE ICONS ON WHITE BACKGROUNDS
   ============================================ */
/* Ensure all text is dark and visible on white backgrounds */
/* EXCLUDE SIDEBAR AND FOOTER - They should keep their original white text */
.ds-sidebar,
.ds-sidebar *,
.ds-header,
.ds-header * {
	color: inherit !important; /* Preserve original colors */
}

/* FORCE WHITE TEXT IN FOOTER - Override any dark text rules */
.ds-footer,
.ds-footer *,
.ds-footer .footer-brand p,
.ds-footer .footer-section a,
.ds-footer .footer-section li,
.ds-footer .social-link,
.ds-footer .quick-action-btn,
.ds-footer .legal-links a,
.ds-footer .footer-bottom,
.ds-footer .footer-bottom p,
.ds-footer .system-info,
.ds-footer span:not(.brand-name):not(.tenant-info),
.ds-footer .footer-section a i,
.ds-footer .social-link i,
.ds-footer .quick-action-btn i {
	color: #ffffff !important; /* Force white text in footer */
}

/* Footer icons should also be white */
.ds-footer .fas,
.ds-footer .far,
.ds-footer .fab,
.ds-footer .fa,
.ds-footer i[class*="fa-"] {
	color: #ffffff !important; /* Force white icons in footer */
}

/* FORCE WHITE TEXT IN SIDEBAR - Override any dark text rules */
.ds-sidebar,
.ds-sidebar .brand-name,
.ds-sidebar .nav-item-modern,
.ds-sidebar .nav-item-modern *,
.ds-sidebar .nav-section-header,
.ds-sidebar .nav-section-header *,
.ds-sidebar .nav-section-title,
.ds-sidebar .nav-section-title *,
.ds-sidebar .nav-submenu,
.ds-sidebar .nav-submenu *,
.ds-sidebar .nav-submenu-item,
.ds-sidebar .nav-submenu-item *,
.ds-sidebar .nav-submenu-nested-item,
.ds-sidebar .nav-submenu-nested-item *,
.ds-sidebar .ds-nav,
.ds-sidebar .ds-nav *,
.ds-sidebar .ds-nav a,
.ds-sidebar .ds-nav a *,
.ds-sidebar span,
.ds-sidebar div,
.ds-sidebar p,
.ds-sidebar label,
.ds-sidebar .nav-search-input,
.ds-sidebar .nav-search-input::placeholder {
	color: #ffffff !important; /* Force white text in sidebar */
}

/* Sidebar icons should also be white */
.ds-sidebar .fas,
.ds-sidebar .far,
.ds-sidebar .fab,
.ds-sidebar .fa,
.ds-sidebar i[class*="fa-"],
.ds-sidebar .nav-item-modern .fas,
.ds-sidebar .nav-item-modern .far,
.ds-sidebar .nav-item-modern .fab,
.ds-sidebar .nav-item-modern .fa,
.ds-sidebar .nav-item-modern i[class*="fa-"],
.ds-sidebar .nav-section-header .fas,
.ds-sidebar .nav-section-header .far,
.ds-sidebar .nav-section-header .fab,
.ds-sidebar .nav-section-header .fa,
.ds-sidebar .nav-section-header i[class*="fa-"] {
	color: #ffffff !important; /* Force white icons in sidebar */
}

.ds-card,
.form-card,
.kpi-card,
.dashboard-card,
.card-content,
.card-body,
.table-wrapper,
.table,
.table tbody,
.table tbody tr,
.table tbody td,
.purchases-container,
.purchases-body,
.inv-products,
.inv-body,
.inv-form,
.inv-form-body,
.serials-container,
.serials-body,
.analytics-container,
.analytics-body,
.forecast-container,
.forecast-body,
.sales-orders-container,
.sales-orders-body,
.approvals-container,
.approvals-body,
.alerts-container,
.alerts-body,
.price-lists-container,
.price-lists-body,
.kits-container,
.kits-body,
.batches-container,
.batches-body {
	color: #111827 !important; /* Force dark text */
	color: var(--text, #111827) !important;
}

/* Ensure light text is still visible but darker (exclude sidebar/footer) */
.ds-card .text-muted,
.ds-card .text-light,
.form-card .text-muted,
.form-card .text-light,
.table .text-muted,
.table .text-light {
	color: #6b7280 !important; /* Dark gray instead of light */
	color: var(--text-light, #6b7280) !important;
}

/* Force icons to be dark and visible */
.ds-card .fas,
.ds-card .far,
.ds-card .fab,
.ds-card .fa,
.ds-card i[class*="fa-"],
.form-card .fas,
.form-card .far,
.form-card .fab,
.form-card .fa,
.form-card i[class*="fa-"],
.table .fas,
.table .far,
.table .fab,
.table .fa,
.table i[class*="fa-"],
.purchases-container .fas,
.purchases-container .far,
.purchases-container .fab,
.purchases-container .fa,
.purchases-container i[class*="fa-"],
.inv-products .fas,
.inv-products .far,
.inv-products .fab,
.inv-products .fa,
.inv-products i[class*="fa-"],
.analytics-container .fas,
.analytics-container .far,
.analytics-container .fab,
.analytics-container .fa,
.analytics-container i[class*="fa-"],
.forecast-container .fas,
.forecast-container .far,
.forecast-container .fab,
.forecast-container .fa,
.forecast-container i[class*="fa-"],
.sales-orders-container .fas,
.sales-orders-container .far,
.sales-orders-container .fab,
.sales-orders-container .fa,
.sales-orders-container i[class*="fa-"],
.approvals-container .fas,
.approvals-container .far,
.approvals-container .fab,
.approvals-container .fa,
.approvals-container i[class*="fa-"],
.alerts-container .fas,
.alerts-container .far,
.alerts-container .fab,
.alerts-container .fa,
.alerts-container i[class*="fa-"],
.price-lists-container .fas,
.price-lists-container .far,
.price-lists-container .fab,
.price-lists-container .fa,
.price-lists-container i[class*="fa-"],
.kits-container .fas,
.kits-container .far,
.kits-container .fab,
.kits-container .fa,
.kits-container i[class*="fa-"],
.batches-container .fas,
.batches-container .far,
.batches-container .fab,
.batches-container .fa,
.batches-container i[class*="fa-"] {
	color: #374151 !important; /* Dark gray for icons */
}

/* But preserve icon colors in buttons and colored elements */
button .fas,
button .far,
button .fab,
button .fa,
button i[class*="fa-"],
.ds-button .fas,
.ds-button .far,
.ds-button .fab,
.ds-button .fa,
.ds-button i[class*="fa-"],
.ds-nav a .fas,
.ds-nav a .far,
.ds-nav a .fab,
.ds-nav a .fa,
.ds-nav a i[class*="fa-"],
.ds-sidebar .fas,
.ds-sidebar .far,
.ds-sidebar .fab,
.ds-sidebar .fa,
.ds-sidebar i[class*="fa-"],
.ds-header .fas,
.ds-header .far,
.ds-header .fab,
.ds-header .fa,
.ds-header i[class*="fa-"] {
	color: inherit !important; /* Let buttons/sidebar control icon colors */
}

/* POS Page Specific - Force white backgrounds */
.pos-products-section,
.pos-section-body,
.pos-cart-section,
.pos-cart-body,
.pos-list,
.pos-list-item,
.pos-list-header,
.cart-item,
.cart-item-info,
.pos-cart-totals,
.pos-cart-items,
.empty-cart,
.pos-list-col {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* Purchases and Inventory pages */
.pur-products,
.pur-cart,
.inv-products,
.inv-card,
.pur-item {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

/* All table rows and cells */
.pos-list-item,
.pos-list-header,
.cart-item {
	background-color: #ffffff !important;
	background: #ffffff !important;
}

.pos-list-item:hover {
	background-color: #f9fafb !important;
	background: #f9fafb !important;
}