@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/* =====================================================
   VARIABLES
===================================================== */
:root {
	/* Layout */
	--sidebar-width: 260px;
	--mobile-nav-height: 70px;

	/* Base Colors */
	--bg-color: #EEEEEE;
	--text-color: #212529;
	--border-color: #dee2e6;
	--border-color-dark: #404040;
	--surface-color: #ffffff;
	--surface-hover: #f8f9fa;

	/* Primary & Semantic */
	--primary-color: rgb(182, 130, 0);
	/* --primary-color: #764ba2; */
	--secondary-color: #6c757d;
	--success-color: #198754;
	--danger-color: #dc3545;
	--warning-color: #ffc107;
	--info-color: #0dcaf0;

	/* Shadows */
	--shadow-light: rgba(0, 0, 0, 0.05);
	--shadow-dark: rgba(0, 0, 0, 0.3);

	/* Gradients */
	--gradient-main: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-auth: linear-gradient(135deg, #fff2c9, #c4c4c4);

	/* Transition */
	--transition: 0.3s;
}

/* =============================
   DARK MODE VARIABLES
============================= */
[data-bs-theme="dark"] {
	--bg-color: #1a1a1a;
	--text-color: #ffffff;
	--surface-color: #2d2d2d;
	--surface-hover: #404040;
	--border-color: #404040;
	--secondary-color: #adb5bd;
	--shadow-light: rgba(0, 0, 0, 0.3);
	--gradient-main: linear-gradient(135deg, #4450a8 0%, #5b3e80 100%);
	--gradient-auth: linear-gradient(135deg, #0D0D0D, #2C2C2C);
}

* {
  scrollbar-width: none; /* Firefox */
}

::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* HELPERS */
.bg-primary {	background-color: var(--primary-color) !important; }
.text-primary {	color: var(--primary-color) !important; }
.pagination .page-link {
	color: var(--text-color);
}
.pagination .page-item.active .page-link {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}
.btn-outline-primary {
	border-color: var(--primary-color)!important;
	color: var(--primary-color)!important;
}
.btn-outline-primary {
	color: var(--text-color)!important;
}
/* - HELPERS - */

body {
	background-color: var(--bg-color) !important;
	color: var(--text-color);
  font-family: "Poppins", sans-serif!important;
}

/* Sidebar */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--sidebar-width);
	height: 100vh;
	background-color: var(--surface-color);
	border-right: 1px solid var(--border-color);
	z-index: 1000;
	padding: 1.5rem;
}

.sidebar-brand {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--border-color);
	color: var(--primary-color);
}

.sidebar-nav {
	flex-direction: column;
}
.sidebar-nav .nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 10px .8rem;
	color: var(--secondary-color);
	border-radius: 0.5rem;
	text-decoration: none;
	margin: 5px 0;
	position: relative;
	overflow: hidden;
	transition: all 0.2s;
}
.sidebar-nav .nav-link:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0px;
	background-color: var(--surface-hover);
	color: var(--primary-color);
	transition: all .3s;
	z-index: -1;
}
.sidebar-nav .nav-link:hover:after {
	width: 100%;
}
.sidebar-nav .nav-link.active {
	background-color: var(--primary-color);
	color: #fff;
}
.sidebar-nav .nav-link i {
	font-size: 1.25rem;
}
.sidebar-footer {
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color);
}

.mobile-menu .nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--text-color);
	padding: 7.5px 15px;
	border-radius: 0.5rem;
	margin: 15px 0;
}
.mobile-menu  .nav-link:hover {
	background-color: var(--surface-hover);
	color: var(--primary-color);
}
.mobile-menu  .nav-link.active {
	background-color: var(--primary-color);
	color: #fff;
}


/* Main Content */
.main-content {
	margin-left: var(--sidebar-width);
	min-height: 100vh;
}
.content-body {
	padding: 2rem;
}

/* Top Bar */
.top-bar {
	padding: 10px 2em;
}
.nav-icons {
	font-size: 1.4em!important;
}

.page-footer {
	width: calc(100% - var(--sidebar-width));
	margin-left: var(--sidebar-width);
	opacity:.6;
	justify-content: center;
}
.page-footer a {
	color: var(--text-color);
	font-size: 12px;
}
.page-footer a:not(:last-child)::after {
	content: '•';
	margin: 0 8px;
	opacity: 0.7;
}

@media (max-width: 991.98px) {
	.main-content {
		margin-left: 0;
		padding-bottom: calc(var(--mobile-nav-height) + 1rem);
	}
	.content-body {
		padding: 1rem;
	}
	.top-bar {
		padding: 10px 1em;
		margin-bottom: 1em;
	}
	.page-footer {
		width: 100%;
		margin-left: 0;
	}
}

/* Custom Tabs */
.custom-tabs {
	border-bottom: 2px solid var(--border-color);
}

.custom-tabs .nav-link {
	color: var(--secondary-color);
	border: none;
	padding: 1rem 1.5rem;
	position: relative;
}

.custom-tabs .nav-link:hover {
	color: var(--primary-color);
}

.custom-tabs .nav-link.active {
	color: var(--primary-color);
	background: none;
}

.custom-tabs .nav-link.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--primary-color);
}

.custom-tabs .badge {
	margin-left: 0.5rem;
}

/* Cards */
.card {
	border: none;
	border-radius: .8rem;
	box-shadow: 0 2px 8px var(--shadow-light);
	margin-bottom: 1.5rem;
	background-color: var(--surface-color);
}

.balance-card {
	background: var(--gradient-main);
	color: white;
}

/* Balance card buttons */
.balance-card .btn-primary {
	background-color: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	backdrop-filter: blur(10px);
}

.balance-card .btn-primary:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.balance-card .btn-outline-secondary {
	border-color: rgba(255, 255, 255, 0.5);
	color: white;
}

.balance-card .btn-outline-secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: white;
}

/* Account Card */
.account-card {
	transition: transform 0.2s;
}

.account-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px var(--shadow-light);
}

.account-icon {
	width: 60px;
	height: 60px;
	border-radius: 1rem;
	background-color: var(--surface-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

/* Transaction List */
.transaction-list {
	display: flex;
	flex-direction: column;
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.2rem;
	border-bottom: 1px solid var(--border-color);
	transition: background-color 0.2s;
}

.transaction-item:last-child {
	border-bottom: none;
}

.transaction-item:hover {
	background-color: var(--surface-hover);
}

.transaction-icon {
	width: 40px;
	height: 40px;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
}

/* Deposit Methods */
.deposit-method .btn {
	height: 100%;
}

.deposit-method .btn-check:checked+.btn {
	background-color: var(--primary-color);
	color: white;
}

.trx-details .transaction-icon {
	width: 75px;
	height: 75px;
	font-size: 2.3rem;
	border-radius: 50%;
}

/* Mobile Bottom Navigation */
.mobile-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--mobile-nav-height);
	background-color: var(--surface-color);
	border-top: 1px solid var(--border-color);
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 1000;
	padding: 0.5rem;
}

.mobile-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	color: var(--secondary-color);
	text-decoration: none;
	font-size: 0.75rem;
	flex: 1;
	transition: color 0.2s;
}

.mobile-nav-item i {
	font-size: 1.5rem;
}

.mobile-nav-item.active {
	color: var(--primary-color);
}

.mobile-nav-item:hover {
	color: var(--primary-color);
}

.profile-pic {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--gradient-main);
}

/* Auth Pages */
.auth-page {
	background: var(--gradient-auth);
	min-height: 100vh;
}

/* Profile Avatar */
.profile-avatar {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--gradient-main);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 4rem;
}

.profile-edit-btn {
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Quick Amount Buttons */
.quick-amount {
	min-width: 100px;
}

/* Responsive Tables */
.table-responsive {
	overflow-x: auto;
}

@media (max-width: 767.98px) {
	.table {
		font-size: 0.875rem;
	}

	.table th,
	.table td {
		padding: 0.5rem;
	}
	.transaction-item {
		padding: 0.75rem 1rem;
	}
	.transaction-icon  {
		width: 35px;
		height: 35px;
		font-size: .8rem;
	}
}

/* Form Controls */
.form-label { font-size: .9em; }
.form-control:focus,
.form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
	background-color: var(--surface-hover);
	border-color: var(--border-color);
	color: #fff;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
	background-color: var(--surface-hover);
	border-color: var(--primary-color);
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	animation: fadeIn 0.3s ease-in-out;
}

/* Utility Classes */
.text-success {
	color: var(--success-color) !important;
}

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

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

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

/* Dark Mode Adjustments */
[data-bs-theme="dark"] .text-muted {
	color: var(--secondary-color) !important;
}

[data-bs-theme="dark"] .border {
	border-color: var(--border-color) !important;
}

[data-bs-theme="dark"] .list-group-item {
	background-color: var(--surface-color);
	border-color: var(--border-color);
	color: #fff;
}

[data-bs-theme="dark"] .progress {
	background-color: var(--surface-hover);
}

[data-bs-theme="dark"] .badge {
	color: #fff;
}

[data-bs-theme="dark"] .table {
	color: #fff;
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
	background-color: var(--surface-hover);
}

/* Responsive Adjustments */
@media (max-width: 575.98px) {
	.display-4 {
		font-size: 2rem;
	}

	.card-body {
		padding: 1rem;
	}

	.btn-lg {
		padding: 0.75rem 1.5rem;
	}
}