/*--------------------------------------------------
    ## All responsive style
---------------------------------------------------*/
@media all and (max-width: 1199px) {
	.referral-image {
		display: none !important;
	}
	.history-table {
		overflow-x: scroll;
	}
	.history-table .table-list {
		width: 767px;
	}
}
@media all and (max-width: 991px) {
	.mt-neg-120 {
		margin-top: -120px;
	}

	.text-white-small {
		color: #fff;
	}
	.single-card-box-slider .btn {
		width: 48%;
	}
	.walet-slider .owl-nav button {
		color: #fff !important;
	}
	.single-card-box-slider {
		margin-top: -120px;
	}
	.single-amount-card-area {
		padding: 20px;
		background: #fff;
		border-radius: 16px;
		padding-bottom: 0;
		border: 1px solid var(--border-color);
	}
	.single-amount-card {
		box-shadow: none !important;
		padding-left: 0;
		padding-right: 0;
	}
	.single-amount-card .media {
		display: block;
		text-align: center;
	}
	.single-amount-card a {
		display: none;
	}

	.single-card-box-shadow {
		background: #fff;
		padding: 0;
		border-radius: 16px;
	}
	.single-card-box-shadow .main-title {
		border-bottom: 1px solid var(--border-color);
		padding: 25px 30px;
	}
	.left-menu-box-card {
		padding: 20px;
	}
	.sidebar-menu .left-menu-box li a {
		padding: 0;
	}

	.quick-links-item {
		font-size: 12px;
		background: #F1F3FF;
		padding: 3px 14px;
		border-radius: 8px;
		margin-bottom: 5px;
		margin-right: 15px;
		display: inline-block;
	}

	.quick-links-item:hover {
		background: #dde0f5;
		border-radius: 8px;
	}
	.quick-links-item svg {
		margin-bottom: 7px;
	}



}
@media all and (max-width: 767px) {
	.stats-wrapper {
		padding: 0;
		border: none;
		background-color: transparent;
	}
	.stat-column {
		border: 1px solid var(--border-color);
		border-radius: 0.5rem;
		margin-bottom: 1rem;
		padding: 1rem;
		background: #fff;
	}
	.stat-label{
		margin: 0;
	}
	.summery-row {
		margin: 0;
	}
}
@media all and (max-width: 575px) {
	.single-amount-card h6 {
		font-size: 18px;
	}
	.single-chart-inner .details .chart-down .btn {
		width: 100%;
	}
	.notification-message {
		font-size: 0.95rem;
	}

	.notification-header h5 {
		font-size: 1.2rem;
	}
	.pagination-list li a {
		height: 34px;
		width: 34px;
		line-height: 34px;
		font-size: 12px;
		border-radius: 4px;
	}
	.pagination-list li a.prev,
	.pagination-list li a.next {
		padding: 0 8px;
		height: 34px;
		line-height: 34px;
	}
	.pagination-list li + li {
		margin-left: 3px;
	}
}
@media all and (max-width: 360px) {
	.single-chart-inner .details .chart-down .btn {
		padding: 0 15px;
	}
	.single-chart-inner .details .chart-down a {
		font-size: 14px;
	}
}
@media (max-width: 576px) {
	.notification-dropdown {
		width: calc(100vw - 20px) !important;
		min-width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		left: 10px !important;
		right: 10px !important;
		margin: 0 auto !important;
		font-size: 0.875rem !important;
		border-radius: 12px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
	}
	.notification-dropdown .list-group-item {
		padding: 0.75rem 1rem;
	}
	.notification-dropdown svg {
		height: 30px;
		width: 30px;
	}
	
	/* Notification items mobile optimization */
	.notification-dropdown .notification-item {
		padding: 12px 15px !important;
	}
	
	.notification-dropdown .notification-item .flex-grow-1 {
		font-size: 13px !important;
	}
	
	.notification-dropdown .notification-item small {
		font-size: 11px !important;
	}
	
	.notification-dropdown .btn-sm {
		font-size: 12px !important;
		padding: 8px 12px !important;
	}
	.card-title{
		padding: 14px !important;
	}

	.login-card {
		max-width: 350px;
		padding: 1.5rem;
	}

	.login-card h4 {
		font-size: 1.25rem;
	}

	.login-card .form-label {
		font-size: 0.9rem;
	}

	.login-card .form-control {
		font-size: 0.9rem;
		padding: 0.5rem 0.75rem;
	}

	.login-card .mb-3 {
		margin-bottom: 0.75rem !important;
	}

	.sm-mb-text{
		font-size: 0.875rem !important;
	}
}

/* ============================================
   PHASE 1: CRITICAL MOBILE RESPONSIVE FIXES
   ============================================ */

/* Forms & Inputs - Mobile Optimization */
@media (max-width: 767px) {
	/* Fix input padding for mobile - prevents iOS zoom */
	.single-input-inner input,
	.single-input-inner.style-border input {
		padding: 0 15px !important;
		font-size: 16px; /* Prevents iOS auto-zoom */
	}
	
	.single-input-inner textarea {
		padding: 14px 15px !important;
		font-size: 16px;
	}
	
	/* Form controls responsive */
	.form-control,
	.form-select {
		font-size: 16px;
		padding: 10px 15px;
	}
	
	/* Input groups */
	.input-group .form-control {
		font-size: 16px;
	}
	
	/* Buttons full width on mobile */
	.btn-group {
		width: 100%;
	}
	
	.btn-group .btn {
		flex: 1;
	}
}

/* Charts Responsive */
@media (max-width: 767px) {
	.single-chart-inner {
		margin-bottom: 1.5rem;
	}
	
	.single-chart-inner .chart-thumb {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	#deposit-chart,
	#withdraw-chart {
		max-width: 100%;
		overflow-x: auto;
	}
}

/* Tables Responsive */
@media (max-width: 767px) {
	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		display: block;
		width: 100%;
		border: 1px solid var(--border-color);
		border-radius: 8px;
	}
	
	.table {
		min-width: 600px;
		margin-bottom: 0;
	}
	
	/* Hide less important columns on mobile */
	.table th:nth-child(n+4),
	.table td:nth-child(n+4) {
		display: none;
	}
}

/* Modals Responsive */
@media (max-width: 575px) {
	.modal-dialog {
		margin: 10px;
		max-width: calc(100% - 20px);
	}
	
	.modal-content {
		border-radius: 8px;
	}
	
	.modal-header,
	.modal-body,
	.modal-footer {
		padding: 15px;
	}
	
	.modal-title {
		font-size: 1.1rem;
	}
}

/* Cards & Containers */
@media (max-width: 767px) {
	.single-form-card {
		margin-bottom: 1.5rem;
	}
	
	.card-title {
		padding: 15px !important;
		font-size: 1rem;
	}
	
	.card-main {
		padding: 15px !important;
	}
}

/* Navigation Tabs Responsive */
@media (max-width: 575px) {
	.nav-tabs {
		flex-wrap: wrap;
		border-bottom: 1px solid var(--border-color);
	}
	
	.nav-tabs .nav-link {
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
		white-space: nowrap;
	}
	
	.nav-tabs .nav-item {
		flex: 1;
		min-width: 0;
	}
}

/* Summary Cards Stack on Mobile */
@media (max-width: 1199px) {
	.col-xl-5,
	.col-xl-7 {
		margin-bottom: 1.5rem;
	}
}

/* User Cards in Direct Transfer */
@media (max-width: 575px) {
	.user-card .d-flex {
		flex-direction: column;
		text-align: center;
	}
	
	.user-card .flex-shrink-0 {
		margin-bottom: 1rem;
		margin-right: 0 !important;
	}
	
	.user-card .btn {
		width: 100%;
		margin-top: 0.5rem;
	}
}

/* QR Code Preview Responsive */
@media (max-width: 767px) {
	.qr-invoice-container,
	.preview-container {
		padding: 1rem;
	}
	
	.qr-code-wrapper {
		max-width: 100%;
		overflow-x: auto;
	}
	
	.qr-code-wrapper svg {
		max-width: 200px;
		height: auto;
	}
}

@media (min-width: 992px) {
	.navbar-area {
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #fff;
	}
	.fixed-wrapper {
		display: flex;
		height: calc(100vh - 78px);
		overflow: hidden;
	}

	.sidebar {
		overflow-y: auto;
		padding-top: 30px;
		height: 100%;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE 10+ */
	}

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

	.main-content {
		flex: 1;
		overflow-y: auto;
		padding-top: 30px;
		height: 100%;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.main-content::-webkit-scrollbar {
		display: none;
	}

	.dashboard-sidebar,
	.main-content {
		scroll-behavior: smooth;
	}
}