/* Simple, clean responsive design - no layout shifting */

/* Logo responsive sizing */
.navbar-brand .logo {
	height: 70px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

@media (max-width: 767.98px) {
	.navbar-brand .logo {
		height: 46px;
	}
}

@media (max-width: 575.98px) {
	.navbar-brand .logo {
		height: 36px;
	}

	.navbar-nav .nav-item a {
		font-size: 10px;
	}
}

@media (max-width: 479.98px) {
	.navbar-brand .logo {
		height: 34px;
	}

	#sidebarToggle {
		width: 28px;
		height: 28px;
	}

	.navbar-nav .nav-item a div,
	.navbar-nav .nav-item a span {
		display: none;
	}
}

/* Make header sticky */
.header {
	position: sticky;
	top: 0;
	z-index: 1002;
}

/* Sidebar toggle button - always stays in same position */
.sidebar-toggle {
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
	padding: 0.25rem 0.5rem;
	transition: all 0.2s ease-in-out;
	position: relative;
	z-index: 1003;
	border-radius: 0.375rem;
	background: rgba(255, 255, 255, 0.1);
	width: 38px;
	height: 38px;
	line-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-toggle i {
	font-size: 1.5rem;
}

.sidebar-toggle i::before {
	line-height: 3;
}

.sidebar-toggle:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.sidebar-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* Sidebar positioning and animation */
@media (max-width: 991.98px) {
	.sidebar {
		width: 280px;
		position: fixed;
		top: 104px;
		left: -280px;
		z-index: 1000;
		height: calc(100vh - 140px);
		overflow-y: auto;
		transition: left 0.3s ease-in-out;
		box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
	}

	.sidebar.open {
		left: 0;
	}

	.sidebar-overlay {
		position: fixed;
		top: 104px;
		left: 0;
		width: 100%;
		height: calc(100vh - 140px);
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: none;
		transition: opacity 0.3s ease-in-out;
	}

	.sidebar-overlay.show {
		display: block;
		opacity: 1;
	}

	.mainText {
		width: 100%;
	}

	.mainWrap {
		flex-direction: column;
		position: relative;
	}

	.sidebar-toggle {
		display: inline-flex !important;
	}
}

@media (min-width: 992px) {
	.sidebar {
		width: 224px;
		position: sticky;
		top: 104px;
		display: block !important;
		height: calc(100vh - 140px);
	}

	.mainText {
		width: calc(100% - 224px);
	}

	.mainWrap {
		display: flex;
		flex-direction: row;
	}

	.sidebar-toggle {
		display: none !important;
	}
}

/* Basic mobile fixes - no layout breaking */
@media (max-width: 767.98px) {
	body {
		overflow-x: hidden;
	}

	.sidebar,
	.sidebar-overlay {
		top: 2px;
		height: 100vh;
		z-index: 9999;

	}

	.mainText {
		padding: 0.75rem;
	}

	/* Form controls responsive */
	.form-control,
	.form-select {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Table responsive */
	.table-responsive {
		font-size: 0.875rem;
	}

	/* Button groups wrap */
	.btnWrap {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.filterWrap {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.filterWrap>div {
		min-width: 0;
	}

	/* Cards responsive */
	.card {
		margin-bottom: 1rem;
	}

	.card-body {
		padding: 0.75rem;
	}

	/* Title responsive */
	.titleWrap {
		flex-direction: column;
		gap: 1rem;
	}
.user-header-content img{
    max-width: 350px !important;
 }
 .emblem-size {
    max-height: 92px !important;
}
	/* Modal responsive */
	.modal-dialog {
		margin: 0.5rem;
		max-width: calc(100% - 1rem);
	}

	/* Pagination responsive */
	.pagination {
		font-size: 0.875rem;
		justify-content: center;
		flex-wrap: wrap;
	}

	/* Table buttons responsive */
	.tableBtn {
		flex-direction: column;
		gap: 0.25rem;
		align-items: start !important;
	}

	.tableBtn .btn {
		font-size: 0.75rem;
		padding: 0.25rem 0.5rem;
	}
}

/* Extra small screens */
@media (max-width: 575.98px) {
	.mainText {
		padding: 0.5rem;
	}

	.btn {
		font-size: 0.875rem;
		padding: 0.375rem 0.75rem;
	}

	.form-control,
	.form-select {
		font-size: 0.875rem;
	}

	/* Hide less important table columns */
	.table th:nth-child(n + 6),
	.table td:nth-child(n + 6) {
		/* display: none; */
	}
}

/* Print styles */
@media print {
	.sidebar {
		display: none !important;
	}

	.mainText {
		width: 100% !important;
	}

	.header {
		display: none !important;
	}

	.sidebar-toggle {
		display: none !important;
	}
}