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