@media screen and (max-width: 1024px) {
	.layout-container {
		height: auto;
		min-height: calc(100vh - 50px);
	}

	.sidebar {
		width: 200px;
		padding: 15px 5px;
	}

	.header-search {
		width: 250px;
	}

	.files-grid-layout {
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}

	.quick-apps {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

@media screen and (max-width: 768px) {

	body {
		overflow: auto;
	}

	.top-bar {
		padding: 0 5px;
	}

	.app-logo{
		margin-left: 5px;
	}

	.header-search {
		display: none;
	}

	.doc-title {
		display: none;
	}

	.profile-text {
		display: none !important;
	}

	.layout-container {
		flex-direction: column;
		height: auto;
	}

	.sidebar {
		position: fixed;
		top: 50px;
		left: 0;
		bottom: 0;
		width: 260px;
		z-index: 1050;
		background-color: var(--menu-bg);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
		transform: translateX(-100%);
		transition: transform 0.3s ease-in-out;
		display: flex;
	}

	.sidebar.show {
		transform: translateX(0);
	}

	.sidebar-overlay {
		display: none;
		position: fixed;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1040;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.sidebar-overlay.active {
		display: block;
		opacity: 1;
	}

	#sidebar-toggle{
		display: flex;
	}

	.main-content {
		padding: 15px;
		height: auto;
		overflow-y: visible;
	}

	.quick-apps {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 100%;
	}

	.quick-card {
		width: auto;
	}

	.files-grid-layout {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.files-table {
		display: block;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.app-launcher-menu {
		width: 100%;
	}

	.apps-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.settings-group-toggle {
		max-width: 100%;
	}

	.form-select {
		max-width: 100%;
	}

	.theme-options {
		justify-content: center;
	}
}