/* Mobile-Responsive Styles for God Image Inventory
 * This CSS makes the existing table-based layout work better on mobile devices
 * without requiring major HTML changes
 */

/* Base mobile styles - prevent zoom on iOS */
body {
	font-size: 16px; /* Prevents automatic zoom on iOS when focusing inputs */
}

/* Make all images responsive */
img {
	max-width: 100%;
	height: auto;
}

/* Make tables responsive - allow horizontal scroll on small screens */
table {
	max-width: 100%;
	box-sizing: border-box;
}

/* Wrap tables in a scrollable container on mobile */
@media (max-width: 768px) {
	/* Make fixed-width tables responsive */
	table[width] {
		width: 100% !important;
		min-width: 100%;
	}
	
	/* Allow horizontal scrolling for wide tables */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	
	/* Make table cells stack better on mobile */
	td[width] {
		width: auto !important;
		min-width: 100px;
	}
	
	/* Improve header table on mobile */
	table[background="images/top_bg.gif"] {
		height: auto !important;
		min-height: 67px;
	}
	
	table[background="images/top_bg.gif"] td {
		padding: 10px 5px !important;
		display: block;
		width: 100% !important;
		text-align: center !important;
	}
	
	/* Stack navigation menu vertically on mobile */
	table[height="20"] {
		display: block;
		width: 100% !important;
	}
	
	table[height="20"] td {
		display: block;
		width: 100% !important;
		text-align: center;
		padding: 10px 5px;
		border-bottom: 1px solid #ddd;
	}
	
	/* Hide the spacer column on mobile */
	td[valign="top"][width="4"] {
		display: none;
	}
	
	/* Make main content area full width */
	td[valign="top"] {
		width: 100% !important;
		padding: 10px !important;
	}
	
	/* Improve form inputs for mobile */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		width: 100%;
		max-width: 100%;
		font-size: 16px; /* Prevents zoom on iOS */
		padding: 10px;
		box-sizing: border-box;
	}
	
	/* Make buttons touch-friendly (minimum 44px height) */
	input[type="submit"],
	input[type="button"],
	button {
		min-height: 44px;
		min-width: 44px;
		padding: 12px 20px;
		font-size: 16px;
		margin: 5px 0;
	}
	
	/* Make links easier to tap */
	a {
		padding: 5px 0;
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
	}
	
	/* Improve radio buttons and checkboxes for touch */
	input[type="radio"],
	input[type="checkbox"] {
		width: 20px;
		height: 20px;
		margin: 5px;
	}
	
	/* Center-align text on mobile for better readability */
	body {
		text-align: left;
	}
	
	/* Remove fixed margins on mobile */
	body[marginwidth],
	body[marginheight],
	body[topmargin],
	body[leftmargin] {
		margin: 0 !important;
		padding: 10px;
	}
	
	/* Make font sizes readable */
	font[size="1"] {
		font-size: 12px !important;
	}
	
	font[size="2"] {
		font-size: 14px !important;
	}
	
	font[size="3"] {
		font-size: 16px !important;
	}
	
	/* Improve spacing in content areas */
	td[valign="top"] {
		padding: 15px 10px !important;
	}
	
	/* Make the login status text wrap */
	td[align="right"] {
		text-align: center !important;
		width: 100% !important;
	}
	
	/* Hide or adjust the right-aligned login info on mobile */
	td[width="1001"] {
		width: 100% !important;
		text-align: center !important;
		display: block;
	}
	
	/* Make forms more mobile-friendly */
	form {
		width: 100%;
		max-width: 100%;
	}
	
	/* Center form buttons on mobile */
	form center,
	center {
		text-align: center;
		width: 100%;
	}
	
	/* Improve table cell padding on mobile */
	td {
		padding: 8px 5px;
	}
}

/* Tablet styles (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	table[width="100%"] {
		width: 100% !important;
	}
	
	td[width="1001"] {
		width: auto !important;
	}
}

/* Prevent text from being too small on any device */
@media (max-width: 480px) {
	body {
		font-size: 14px;
	}
	
	/* Make navigation even more touch-friendly on small phones */
	table[height="20"] td {
		padding: 15px 5px;
		font-size: 16px;
	}
}

/* Utility class for hiding elements on mobile if needed */
.mobile-hide {
	display: none;
}

@media (min-width: 769px) {
	.mobile-hide {
		display: block;
	}
}

/* Ensure content doesn't overflow */
* {
	box-sizing: border-box;
}

/* Improve readability */
p {
	line-height: 1.6;
	margin: 10px 0;
}