:root {
	/* Base Colors */
	--bg-main: #111827;
	--bg-card: #1f2937;
	--bg-sidebar: #1f2937;
	--bg-header: #1f2937;
	--bg-input: #111827;
	--border-color: #334155; /* slate-700 */
	--border-sidebar: #1e293b; /* slate-800 */
	
	/* Brand Colors */
	--primary: #4f46e5;      /* indigo-600 */
	--primary-hover: #6366f1;
	--success: #10b981;      /* emerald-500 */
	--success-hover: #059669;
	--success-bg-dim: rgba(16, 185, 129, 0.1);
	--warning: #f59e0b;      /* amber-500 */
	--danger: #ef4444;       /* red-500 */
	--danger-bg-dim: rgba(239, 68, 68, 0.1);
	
	/* Text Colors */
	--text-main: #e2e8f0;    /* slate-200 */
	--text-muted: #64748b;   /* slate-500 */
}

/* Layout & Base */
body {
	background-color: var(--bg-main);
	color: var(--text-main);
	overflow-x: hidden;
}

.sidebar {
	background-color: var(--bg-sidebar);
	border-right: 1px solid var(--border-sidebar);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header {
	background-color: var(--bg-header);
	border-bottom: 1px solid var(--border-sidebar);
}

.card {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.section-container {
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 1.5rem;
	overflow: hidden;
}

/* Sidebar Elements */
.sidebar-title { color: var(--primary); }
.sidebar-link-main {
	background-color: rgba(51, 65, 85, 0.5);
	color: #cbd5e1;
	border: 1px solid #475569;
}

/* Form Elements */
.form-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.form-input, .form-select, .form-textarea {
	width: 100%;
	background-color: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: 0.75rem;
	padding: 1rem;
	color: var(--text-main);
	outline: none;
	transition: all 0.2s;
	min-height: 50px; /* Base mobile height */
}

/* PC Version Height Requirement */
@media (min-width: 768px) {
	.form-input, .form-select {
		min-height: 60px;
	}
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.form-textarea { height: 6rem; resize: none; }

/* Buttons */
.btn-primary {
	background-color: var(--primary);
	color: white;
	transition: all 0.2s;
}
.btn-primary:hover { background-color: var(--primary-hover); }

.btn-success {
	background-color: var(--success);
	color: white;
	transition: all 0.2s;
}
.btn-success:hover { background-color: var(--success-hover); }

.btn-secondary { background-color: #334155; color: white; }

.btn-action-success {
	background-color: var(--success-bg-dim);
	color: var(--success);
	border: 1px solid rgba(6, 95, 70, 0.5);
}
.btn-action-success:hover { background-color: var(--success); color: white; }

.btn-action-primary {
	background-color: rgba(79, 70, 229, 0.1);
	color: var(--primary);
	border: 1px solid rgba(49, 46, 129, 0.5);
}
.btn-action-primary:hover { background-color: var(--primary); color: white; }

.btn-logout {
	background-color: var(--danger-bg-dim);
	color: var(--danger);
	border: 1px solid rgba(153, 27, 27, 0.5);
}
.btn-logout:hover { background-color: var(--danger); color: white; }

/* Status Pills */
.pill {
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	border-width: 1px;
}
.pill-paid { background-color: rgba(6, 78, 59, 0.4); color: #34d399; border-color: #065f46; }
.pill-pending { background-color: rgba(120, 53, 15, 0.4); color: #fbbf24; border-color: #92400e; }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #374151; border-radius: 10px; }

/* Masking */
.amount-mask.masked { filter: blur(4px); user-select: none; pointer-events: none; }

/* Mobile Adaptations */
@media (max-width: 1024px) {
	.sidebar {
		transform: translateX(-100%);
		z-index: 50;
	}
	.sidebar.active {
		transform: translateX(0);
	}
	.sidebar-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(4px);
		z-index: 40;
		display: none;
	}
	.sidebar-overlay.active {
		display: block;
	}
}

/* =========================================
   Light Theme (Fintech Clean) Overrides
   ========================================= */
html.light-theme {
	--bg-main: #f8fafc;
	--bg-card: #ffffff;
	--bg-sidebar: #ffffff;
	--bg-header: #ffffff;
	--bg-input: #ffffff;
	--border-color: #e2e8f0;
	--border-sidebar: #e2e8f0;
	--primary: #0000ff;
	--primary-hover: #0000cc;
	--success: #30BF30;
	--success-hover: #008800;
	--text-main: #0f172a;
	--text-muted: #64748b;
}

/* Base Overrides */
html.light-theme .bg-\[\#0f172a\] { background-color: #f8fafc !important; }
html.light-theme .bg-\[\#111827\], html.light-theme .bg-\[\#1f2937\] { background-color: #ffffff !important; }
html.light-theme .odd\:bg-\[\#172031\]:nth-child(odd) { background-color: #f8fafc !important; }
html.light-theme .even\:bg-\[\#1f2937\]:nth-child(even) { background-color: #ffffff !important; }
html.light-theme .hover\:bg-\[\#2a3441\]:hover { background-color: #f1f5f9 !important; }
html.light-theme .bg-\[\#111827\]\/50 { background-color: rgba(255,255,255,0.8) !important; }
html.light-theme .bg-slate-900\/50 { background-color: rgba(241, 245, 249, 0.5) !important; }

/* Typography */
html.light-theme .text-white { color: #0f172a !important; }
html.light-theme .hover\:text-white:hover { color: #0f172a !important; }
html.light-theme .text-slate-100, html.light-theme .text-slate-200, html.light-theme .text-slate-300 { color: #1e293b !important; }
html.light-theme .text-slate-400 { color: #000000f0 !important; }
html.light-theme .text-slate-500 { color: #000000f0 !important; }
html.light-theme .text-slate-600 { color: #000000f0 !important; }

/* Borders & Separators */
html.light-theme .border-slate-700 { border-color: #cbd5e1 !important; }
html.light-theme .border-slate-800, html.light-theme .border-slate-800\/50 { border-color: #e2e8f0 !important; }
html.light-theme .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; }
html.light-theme .divide-slate-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(203, 213, 225, 0.5) !important; }

/* Custom Accents (#0000ff) */
html.light-theme .text-indigo-400 { color: #0000ff !important; }
html.light-theme .text-indigo-400\/80 { color: rgba(0, 0, 255, 0.8) !important; }
html.light-theme .bg-indigo-600 { background-color: #0000ff !important; }
html.light-theme .bg-indigo-600.text-white { color: #ffffff !important; }
html.light-theme .hover\:bg-indigo-500:hover { background-color: #0000cc !important; }
html.light-theme .hover\:bg-indigo-600:hover { background-color: #0000cc !important; color: #ffffff !important; }
html.light-theme .bg-indigo-950, html.light-theme .bg-indigo-900\/40 { background-color: rgba(0,0,255,0.05) !important; }
html.light-theme .border-indigo-800, html.light-theme .border-indigo-500 { border-color: rgba(0,0,255,0.2) !important; }
html.light-theme .ring-indigo-500\/50 { --tw-ring-color: rgba(0,0,255,0.3) !important; }

/* Green Accents (#30BF30) */
html.light-theme .text-emerald-400, html.light-theme .text-emerald-500 { color: #0000ff !important; }
html.light-theme .group:hover .group-hover\:text-emerald-400 { color: #0000ff !important; }
html.light-theme .group:hover .group-hover\:border-emerald-500 { border-color: #0000ff !important; }
html.light-theme .border-emerald-500\/30 { border-color: rgba(0,166,0,0.3) !important; }
html.light-theme .border-emerald-500\/20 { border-color: rgba(0,166,0,0.2) !important; }
html.light-theme .bg-emerald-500\/5 { background-color: rgba(0,166,0,0.05) !important; }

/* Form/Action Buttons */
html.light-theme .bg-slate-800 { background-color: #D6E1EC !important; color: #334155 !important; border: 1px; }
html.light-theme .hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; color: #0f172a !important; }
html.light-theme .bg-slate-800\/30 { background-color: rgba(241, 245, 249, 0.5) !important; }
html.light-theme .bg-slate-800\/50 { background-color: rgba(241, 245, 249, 0.8) !important; }

/* Status Colors & Pills */
html.light-theme .bg-red-600.text-white { color: #ffffff !important; }
html.light-theme .hover\:bg-red-600:hover { background-color: #ef4444 !important; color: #ffffff !important; }
html.light-theme .bg-red-950 { background-color: #fef2f2 !important; }
html.light-theme .border-red-900 { border-color: #fecaca !important; }
html.light-theme .border-red-900\/20 { border-color: rgba(239,68,68,0.2) !important; }
html.light-theme .border-red-900\/30 { border-color: rgba(239,68,68,0.3) !important; }
html.light-theme .bg-red-900\/10 { background-color: rgba(239,68,68,0.05) !important; }
html.light-theme .bg-red-900\/20 { background-color: rgba(239,68,68,0.1) !important; }
html.light-theme .bg-red-900\/40 { background-color: rgba(239,68,68,0.15) !important; }
html.light-theme .text-red-400, html.light-theme .text-red-400\/80 { color: #ef4444 !important; }

html.light-theme .pill-paid { background-color: rgba(0, 166, 0, 0.1) !important; color: #30BF30 !important; border-color: rgba(0, 166, 0, 0.3) !important; }
html.light-theme .pill-pending { background-color: rgba(245, 158, 11, 0.1) !important; color: #d97706 !important; border-color: rgba(245, 158, 11, 0.3) !important; }

/* Utility Override & Logo */
html.light-theme .custom-checkbox { background-color: #ffffff; border-color: #cbd5e1; }
html.light-theme .custom-checkbox:checked { background-color: #0000ff; border-color: #0000ff; }
html.light-theme .brightness-0.invert { filter: brightness(0) !important; }

/* Sidebar Buttons in Light Mode */
html.light-theme .sidebar-link-main { background-color: #f1f5f9; color: #0000ff; border-color: #0000ff; }
html.light-theme .sidebar-link-main:hover { background-color: #0000ff; color: #ffffff; }
html.light-theme .btn-action-success { background-color: rgba(0, 166, 0, 0.1); color: #30BF30; border-color: rgba(0, 166, 0, 0.3); }
html.light-theme .btn-action-success:hover { background-color: #30BF30; color: #ffffff; }
html.light-theme .btn-action-primary { background-color: rgba(0, 0, 255, 0.1); color: #0000ff; border-color: rgba(0, 0, 255, 0.3); }
html.light-theme .btn-action-primary:hover { background-color: #0000ff; color: #ffffff; }