@media screen and (max-device-width: 640px){

	:root{
		--navLeftClosed: 0;
	}

	/* Login screen */
	#clientForm .card, #loginForm .card { max-width: 600px; width: 90vw; }
	#clientForm .card .row div, #loginForm .card .row div { padding: 10px 0; }
	#clientForm img, #loginForm img { max-height: 75px; }


	h2{font-size: 1.2em;}

	.main{padding: 30px 2px 0 2px; width: calc(100%); margin-left: 0}

	.main > div, .main > form {width: 100%;display: inline-flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;align-content: flex-start;}
	.main.filled > div, .main.filled > form{ max-width: calc(100%); padding: 0 0 30px 0 ;}
	.main.center > div, .main.center > form{justify-content: center;}

	.navLeft:not(.active) + div + .main,
	.navLeft:not(.active) ~ .main{width: calc(100% - var(--navLeftClosed)); margin-left: var(--navLeftClosed);}

	.main .sectionBox.w20{width: 100%;}
	.main .sectionBox.w25{width: 50%;}
	.main .sectionBox.w30{width: 50%;}
	.main .sectionBox.w33{width: 50%;}
	.main .sectionBox.w40{width: 100%;}
	.main .sectionBox.w50{width: 100%;}
	.main .sectionBox.w60{width: 100%;}
	.main .sectionBox.w70{width: 100%;}
	.main .sectionBox.w75{width: 100%;}
	.main .sectionBox.w80{width: 100%;}
	.main .sectionBox.w100{width: 100%;}

	.main #selectedScheduledOrderForm {width: 100%;}

	.main .sectionBox.la{text-align: center;}
	.main .sectionBox.ra{text-align: center;}

	.headerBar .btn.noHover:has(img){display: none;}

	.navLeft{
		height: calc(100% - 50px);
		margin-top: 50px;
		width: var(--navLeftClosed);
		overflow: hidden;
		white-space: nowrap;
		background-color: var(--mainBGDarkHeader);
		box-sizing: border-box;
		vertical-align: top;
		display: inline-block;
		position: fixed;
		left: 0;
		z-index: 10;
		transition: width 0.3s;
	}

	.navLeft.active{width: 80vw; max-width: 350px;}
	.navLeft .btn { font-size: 18px; height: 3em; display: flex; }
	.navLeft .btn:hover{background-color: var(--mainBGDark);color: #ffffff;cursor: pointer;}
	.navLeft .btn i{width: 30px;text-align: center;margin: 0 10px;left: 0;}
	.navLeft .btn .expand, .navLeft .childBtn { display: none; }

	.navRight.active{width: calc(100%);}
	.main.rightNavActive{width: calc(100% - 50px);}

	.headerBar{
		height: 50px;
		width: 100%;
		font-size: 14px;
		overflow: hidden;
		background-color:  var(--mainBGDarkHeader);;
		box-sizing: border-box;
		vertical-align: top;
		position: fixed;
		left: 0;
		z-index: 9;
	}


	.headerBar img.logo{
		margin: 5px 15px;
		height: calc(100% - 10px);
		width: 190px;
	}


	.headerBar .btn{
		display: inline-block;
		box-sizing: border-box;
		height: 100%;
		line-height: 100%;
		min-width: 0;
		padding: 15px 5px;
		vertical-align: top;
		text-align: center;
	}

	.headerBar .btn.sml{
		display: inline-block;
		box-sizing: border-box;
		height: 100%;
		line-height: 100%;
		min-width: 55px;
		padding: 15px 5px;
		vertical-align: top;
		font-size: 1.2em;
		text-align: center;
	}

	.headerBar .btn{
		min-width: 55px;
		font-size: 1.2em;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	.headerBar .btn.noIcon i, .headerBar .btn i {font-size: 20px;}
	.headerBar .btn.noIcon i {display: block;}
	.headerBar .btn.noIcon span { display: none; }

	.headerBar .btn:first-child{
		min-width: 50px;
		font-size: 1.2em;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	/*--- Operations Dashboard ---*/
	.main.filled section#opDashHead {justify-content: center;}
	.main.filled section#opDashHead h1 br {display: block;}

	/*section.block.long.xLargeCenter{height: initial;}*/
	section.block.long.xLargeCenter .longBlock.formInput{width: 100%; padding-left: 0; padding-right: 0;}
	section.block.long.xLargeCenter .longBlock.formInput input[type='text']{width: 100%;}
	section.block.long.xLargeCenter .longBlock.formInput .subject{align-items: center; margin-bottom: 20px;}
	section.block.long.xLargeCenter .longBlock.formInput .subject label{font-size: 1.2em}

	.locationOptions{
		width: calc(100% - 70px);
		margin: 60px 10px 10px 60px;
		padding: 20px;
		height: calc(100% - 70px);
		background-color: #fff;
		z-index: 10;
		font-size: 16px;
		box-sizing: border-box;
		border: 1px #ccc solid;
		overflow-y: auto;
	}
	.locationOptions.active{display: inline-block;}


	.locationOptionsHead{
		font-size: 18px;
		padding: 0 0 10px 0;
		margin: 0;
		/*width: 100%;*/
		height: 30px;
		line-height: 30px;
		box-sizing: border-box;
		display: inline-block;
	}

	.popUpOptionsItem.mod i{
		font-size: 0px;
		margin: 0;
	}

	.popUpOptionsItem,
	.popUpOptionsItem.plant,
	.popUpOptionsItem.mod{
		height: 45px;
		/*padding: 3px 0 5px 0;*/
		padding: 13px 0;
		margin: 3px 0;
		background-color: var(--blue);
		color: #fff;
		width: 100%;
		display: inline-block;
		box-sizing: border-box;
	}

	.modHomeMenu a{
		font-size: 14px;
		width: calc(50% - 10px);
		height: 100px;
		padding: 10px;
		margin: 10px 5px;
		line-height: 1em;
	}

	.innerPart{
		width: 100%;
	}

	.kpiBar .item{
		height: 65px;
		width: calc((100% - 10px)/3);
		margin: 0 5px 0 0;
		font-size: 32px;
		line-height: 85px;
	}

	.kpiBar.active{ height: 80px;}

	#rmsg::after{left: 5%;}

	section{
		padding: 5px;
		width: 100%;
		margin-bottom: 5px;
		font-size: 16px;
	}

	section.half{width: calc(100%);}
	section.third{width: calc(100%);}
	section.forth{width: calc(100%);}
	section.forthMobileHalf{width: calc(50%);}
	section.fifth{width: calc(100%);}
	section.sixth{width: calc(100%);}

	.formBtn.inRow{margin: 5px;}

	section.block.long .longBlock{font-size: 16px;}
	section.block.long .longBlock .subject{padding: 0 5px}

	.popUpBox{
		display: none;
		position: fixed;
		width: calc(100% - 10px);
		margin: 60px 5px 0 5px;
		padding: 20px 15px 30px;
		min-height: 200px;
		max-height: calc(100vh - 80px);
		font-size: 16px;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.popUpBox.small{margin: 60px 5px 0 5px;}

	/* Comment thread popup - maximize space for chat */
	.popUpBox.commentThreadPopUp {
		padding: 10px 8px;
		max-height: calc(100vh - 70px);
		width: calc(100% - 16px);
	}

	/* Constrain chatBox to prevent overflow */
	.popUpBox.commentThreadPopUp .chatBox {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Ensure header fits within popup and icons don't overflow */
	.popUpBox.commentThreadPopUp .chatBox .header {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 12px !important;
		overflow: visible;
	}
	.popUpBox.commentThreadPopUp .chatBox .header .icons {
		flex-shrink: 0;
		gap: 8px;
		padding-right: 4px;
		margin-right: 0;
	}
	.popUpBox.commentThreadPopUp .chatBox .header .icons i {
		font-size: 1.3rem;
		min-width: 20px;
	}

	/* Task title: limit to 2 lines max */
	.popUpBox.commentThreadPopUp .chatBox .header .title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.3;
		max-height: 2.6em;
	}

	/* Three-state toggle: constrain icon size */
	.popUpBox.commentThreadPopUp .three-state-toggle {
		width: 50px;
		height: 22px;
	}
	.popUpBox.commentThreadPopUp .three-state-toggle .toggle-slider {
		width: 18px;
		height: 18px;
	}
	.popUpBox.commentThreadPopUp .three-state-toggle .toggle-slider i {
		font-size: 8px !important;
		min-width: unset;
	}
	/* Update slider positions for smaller mobile toggle */
	.popUpBox.commentThreadPopUp .three-state-toggle.state-comments .toggle-slider { left: 2px; }
	.popUpBox.commentThreadPopUp .three-state-toggle.state-both .toggle-slider { left: 16px; }
	.popUpBox.commentThreadPopUp .three-state-toggle.state-actions .toggle-slider { left: 30px; }

	/* Comment/Action tabs: hide markdown toolbar and preview toggle on mobile */
	.popUpBox.commentThreadPopUp .formBtn.secondaryBtn.chartNarrow:not(.leoPromptBtn) {
		display: none;
	}
	.popUpBox.commentThreadPopUp .preview-toggle-control {
		display: none;
	}

	/* Make popup and chatBox scrollable when content overflows */
	.popUpBox.commentThreadPopUp {
		overflow-y: auto;
	}
	.popUpBox.commentThreadPopUp .chatBox {
		overflow: visible !important;
	}
	/* Limit messageBody height so form area always has space */
	.popUpBox.commentThreadPopUp .chatBox .messageBody {
		flex-shrink: 1 !important;
	}
	/* Ensure form footer has minimum space */
	.popUpBox.commentThreadPopUp .chatBox .tab-container-switch {
		flex-shrink: 0 !important;
		min-height: 140px !important;
	}

	/* Action form: 2-row grid layout (Description full width, Owner/Due/Send inline) */
	.popUpBox.commentThreadPopUp .tab-pane.active form.sectionBox {
		display: grid !important;
		grid-template-columns: 1fr 1fr auto !important;
		gap: 6px 8px !important;
	}
	/* Description spans full width on first row */
	.popUpBox.commentThreadPopUp .tab-pane.active form.sectionBox > section:first-child {
		grid-column: 1 / -1 !important;
	}
	/* Compact field sections */
	.popUpBox.commentThreadPopUp section.chatV1NewAction {
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
		min-height: unset !important;
	}
	.popUpBox.commentThreadPopUp section.chatV1NewAction > div.longBlock {
		min-height: unset !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.popUpBox.commentThreadPopUp section.chatV1NewAction .subject {
		padding: 2px 0 !important;
		margin: 0 !important;
		min-height: unset !important;
	}
	.popUpBox.commentThreadPopUp section.chatV1NewAction label {
		font-size: 0.6em !important;
		line-height: 1 !important;
		position: relative !important;
		top: 0 !important;
	}
	.popUpBox.commentThreadPopUp section.chatV1NewAction input,
	.popUpBox.commentThreadPopUp section.chatV1NewAction select {
		height: 26px !important;
		padding: 2px 6px !important;
		font-size: 13px !important;
	}
	/* Send button compact */
	.popUpBox.commentThreadPopUp .tab-pane.active form.sectionBox + .formBtn,
	.popUpBox.commentThreadPopUp .tab-pane.active .formBtn.inRow {
		padding: 6px 12px !important;
		font-size: 13px !important;
		height: auto !important;
		align-self: end;
	}

	#rmsg{max-width: calc(100vw - 20px); margin: 15px 10px 0; font-size: 1.1em;}

	.scrollIndicator {position: fixed; display: flex; border-width: 0; padding: 0; margin: 0; justify-content: center; bottom: 0; z-index: 100; width: 100vw; height: 120px; background-color: rgba(0,0,0,0.85); opacity: 1; transition: opacity 1s;}
	.scrollIndicator.hide {opacity: 0;}
	/*box-shadow: 0 0 50px 70px #333;*/
	.scrollIndicator a {
		padding-top: 70px;
		padding-bottom: 30px;
		color: #ffffff;
		font-size: 1.2em;
		text-decoration: none;
		font-family: 'Spline Sans', sans-serif;
	}
	.scrollIndicator a span {
		position: absolute;
		top: 0;
		left: 50%;
		width: 30px;
		height: 30px;
		margin-left: -15px;
		border-left: 3px solid #fff;
		border-bottom: 3px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		-webkit-animation: sdb05 1.5s infinite;
		animation: sdb05 1.5s infinite;
		box-sizing: border-box;
	}
	@-webkit-keyframes sdb05 {
		0% {
			-webkit-transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			-webkit-transform: rotate(-45deg) translate(-20px, 20px);
			opacity: 0;
		}
	}
	@keyframes sdb05 {
		0% {
			transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
		100% {
			transform: rotate(-45deg) translate(-20px, 20px);
			opacity: 0;
		}
	}

	/* Live Remote Plant */
	.realtimeDisplayMainInternal #linesContainer h1 { font-size: 3vh; }
	.realtimeDisplayMainInternal #linesContainer .lineInfo { padding: 15px 0; flex-wrap: wrap; font-size: 2vh; }
	.realtimeDisplayMainInternal #linesContainer .lineNameTime > span { display: block; font-size: 2.5vh; }

	/* Live Remote Line */
	#liveRemoteLine .main.realtimeDisplayMainInternal.filled,
	.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > h1,
	.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .downActionTitle { font-size: 6vw; }
	.main.realtimeDisplayMainInternal.filled .sidebar h1 { font-size: 3vh; }
	.main.realtimeDisplayMainInternal.filled .sidebar .kpiBoxV2 .kpi > span { font-size: 10vw; }
	.main.realtimeDisplayMainInternal.filled .xyz .downActionWrap .daItemDetails { font-size: 5vw; }

	/*--- Mobile Header: hamburger + search + inspire strip ---*/
	.headerBar { display: flex !important; flex-wrap: wrap; overflow: visible; }
	.headerBar > .headerBar-outerSection:first-child { flex: 0 0 auto; }
	.headerBar > .headerBar-outerSection.right { display: none; }

	/* Search bar visible and fills remaining width */
	.globalSearchBar { display: flex !important; flex: 1; min-width: 0; max-width: 100% !important; margin: 0 !important; }

	/* hb-inspire: full-width strip below header row */
	.hb-inspire {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 24px;
		line-height: 24px;
		order: 99;
		background-color: var(--mainBGDarkHeader);
		border-top: 1px solid var(--mainBGDarkBorder);
		opacity: 1;
		padding: 0 12px;
		box-sizing: border-box;
	}
	.hb-inspire:not(.static) span { position: relative !important; animation: none !important; height: 24px !important; line-height: 24px !important; left: 0 !important; right: 0 !important; }
	.hb-inspire span { height: 24px !important; line-height: 24px !important; }
	.hb-inspire span:not(:first-child) { display: none !important; }

	/* Adjust offsets for inspire strip (50px header + 32px strip) */
	.main { padding-top: 40px !important; }
	.navLeft { margin-top: 74px; height: calc(100% - 74px); display: flex !important; flex-direction: column; }

	/* Search results popover for mobile viewport */
	.globalSearchBar .searchResult[popover],
	.globalSearchBar .searchResult:popover-open { width: calc(100vw - 20px); left: 50% !important; transform: translateX(-50%); }

	/* Nav action icons at bottom of drawer */
	.navLeftActions {
		display: flex !important;
		justify-content: space-around;
		margin-top: auto;
		padding: 12px 0;
		border-top: 1px solid var(--mainBGDarkBorder);
		background-color: var(--mainBGDarkHeader);
	}
	.navLeftActions .btn { float: none !important; display: flex !important; flex-direction: column; align-items: center; font-size: 11px !important; min-width: auto !important; padding: 8px 4px !important; height: auto !important; line-height: normal !important; color: var(--mainBGDarkTextGold) !important; }
	.navLeftActions .btn i { font-size: 18px !important; display: block; margin-bottom: 4px; color: var(--mainBGDarkTextGold) !important; }

	/* Favorites popover opened from the mobile nav footer: footer is bottom-anchored,
	   so render as a centered bottom sheet above it instead of the (off-screen) default. */
	#headerMenuFavMobile-searchResult[popover],
	#headerMenuFavMobile-searchResult:popover-open {
		position: fixed; inset: auto; top: auto !important; left: 50% !important; right: auto !important;
		bottom: 80px; transform: translateX(-50%);
		width: calc(100vw - 20px); max-width: 340px; max-height: 60vh; overflow-y: auto;
	}
}