/* Mobile responsive layout - Complete version */
@media screen and (max-width: 900px) {
	/* Remove horizontal overflow */
	body, html {
		overflow-x: hidden !important;
		width: 100% !important;
	}
	
	/* Make main container responsive */
	body > div[style*="position:absolute"][style*="width: 900px"] {
		position: relative !important;
		left: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
	}
	
	/* Table: single column layout */
	body > div > table {
		width: 100% !important;
		display: block !important;
	}
	
	body > div > table tbody,
	body > div > table tr {
		display: block !important;
		width: 100% !important;
	}
	
	body > div > table td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		height: auto !important;
	}
	
	/* Navigation boxes */
	div[style*="background-image:url(img/navi_element_bg.jpg)"] {
		width: 100% !important;
		margin: 5px 0 !important;
		height: auto !important;
		float: none !important;
	}
	
	div[style*="background-image:url(img/navi_element_bg.jpg)"] > div {
		width: 100% !important;
		padding: 10px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
	
	/* Hide login box when logged in */
	div[style*="background-image:url(img/navi_element_bg.jpg)"]:has(h4) {
		display: none !important;
	}
	
	/* Content area - REMOVE MIN-HEIGHT TO FIX WHITE SPACE */
	div[style*="width: 700px"] {
		width: 100% !important;
		min-height: 0 !important;
		padding: 15px !important;
		margin: 0 !important;
		float: none !important;
		box-sizing: border-box !important;
	}
	
	/* Hide footer */
	div[style*="footer_area"],
	div[style*="shadow"],
	div[style*="width: 1000px"] {
		display: none !important;
	}
	
	/* Forms - vertical layout */
	form:not([name="Login"]) table {
		display: block !important;
	}
	
	form:not([name="Login"]) tr {
		display: flex !important;
		flex-direction: column !important;
		margin-bottom: 15px !important;
	}
	
	form:not([name="Login"]) td {
		display: block !important;
		width: 100% !important;
	}
	
	form:not([name="Login"]) input[type="text"],
	form:not([name="Login"]) input[type="password"],
	form:not([name="Login"]) input[type="email"] {
		width: 100% !important;
		padding: 10px !important;
		font-size: 16px !important;
		box-sizing: border-box !important;
	}
	
	/* Login form */
	form[name="Login"] input {
		width: 140px !important;
	}
	
	/* Host list table */
	div[style*="width: 700px"] form table {
		display: table !important;
		width: 100% !important;
		table-layout: fixed !important;
	}
	
	div[style*="width: 700px"] form tr {
		display: table-row !important;
	}
	
	div[style*="width: 700px"] form td {
		display: table-cell !important;
		padding: 4px 2px !important;
		vertical-align: middle !important;
	}
	
	/* Hide token */
	div[style*="width: 700px"] input[readonly] {
		display: none !important;
	}
	
	/* Hostname column */
	div[style*="width: 700px"] form td:first-child {
		width: 28% !important;
		font-size: 12px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}
	
	/* IP column */
	div[style*="width: 700px"] form td:nth-child(2) {
		width: 72% !important;
		font-size: 0 !important;
		position: relative !important;
		padding-top: 20px !important;
	}
	
	/* IP label */
	div[style*="width: 700px"] form tr:first-child td:nth-child(2)::before {
		content: "IP:" !important;
		position: absolute !important;
		top: 5px !important;
		left: 5px !important;
		font-size: 12px !important;
		font-weight: bold !important;
	}
	
	/* IP input */
	div[style*="width: 700px"] input[type="text"]:not([readonly]) {
		width: 110px !important;
		font-size: 12px !important;
		padding: 5px !important;
		margin: 5px 2px !important;
	}
	
	div[style*="width: 700px"] input[type="submit"],
	div[style*="width: 700px"] input[type="button"] {
		font-size: 10px !important;
		padding: 4px 8px !important;
		margin: 2px !important;
	}
	
	/* Icons */
	div[style*="width: 700px"] form tr:nth-child(2) td {
		text-align: center !important;
	}
	
	div[style*="width: 700px"] form td img {
		max-width: 20px !important;
		margin: 2px !important;
	}
	
	/* Popups */
	.popup_code_anz,
	.popup_token_anz {
		width: 90% !important;
		left: 5% !important;
		margin-left: 0 !important;
		height: auto !important;
		max-height: 80vh !important;
		overflow-y: auto !important;
		padding: 15px !important;
		position: fixed !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 9999 !important;
		box-sizing: border-box !important;
	}
	
	.popup_code_anz *,
	.popup_token_anz * {
		word-wrap: break-word !important;
		word-break: break-all !important;
		max-width: 100% !important;
	}
}