/*
 * Profile Page Responsive Styles
 * Created: 2025-09-30
 * Purpose: Make ANZSRS My Profile page responsive for mobile/tablet devices
 */

#filter table {
	width: 100%;
	max-width: 428px;
}

/*#filter input[type="text"],*/
/*#filter select {*/
/*    width: 100%;*/
/*    max-width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/

/* Results table improvements */
#resultsTable {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#resultsTable table {
	width: 100%;
	min-width: 500px; /* Prevent table from being too compressed */
}

#resultsTable th,
#resultsTable td {
	padding: 8px 10px;
}

/* Button improvements */
input[type="submit"],
input[type="button"] {
	/*padding: 8px 15px;*/
	/*margin: 5px;*/
	cursor: pointer;
}

/* Tablet responsive (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	/*#filter {*/
	/*    padding: 12px;*/
	/*}*/

	#resultsTable table {
		font-size: 11px;
	}

	#resultsTable th,
	#resultsTable td {
		padding: 6px 8px;
	}
}

/* Mobile responsive (up to 767px) */
@media (max-width: 767px) {
	tr.menu {
		display: none;
	}
	table.banner_left {
		height: 70px;
		background-size: contain;
	}
	table.banner_right {
		display: none;
	}
	/* Filter section - stack form fields */
	#filter table,
	#filter tbody,
	#filter tr {
		display: block;
		width: 100%;
	}

	#filter td {
		display: block;
		/*width: 100%;*/
		padding: 5px;
		border: none;
	}

	/*#filter td.logLabel,*/
	/*#filter td.logLabel1st {*/
	/*	padding: 8px 5px 3px 5px;*/
	/*	text-align: left;*/
	/*	border: none;*/
	/*}*/

	/*#filter td.logData,*/
	/*#filter td.logData1st {*/
	/*	padding: 3px 5px 8px 5px;*/
	/*	border: none;*/
	/*}*/

	/* Buttons - full width on mobile */
	#filter .formButtons {
		text-align: center;
	}

	#filter input[type="submit"],
	#filter input[type="button"] {
		width: 100%;
		max-width: 428px;
		margin: 5px 0;
		display: block;
		margin-left: 0;
		margin-right: auto;
	}

	/* Results table - card style layout */
	#resultsTable table {
		min-width: 0;
		border: 0;
	}

	#resultsTable thead {
		display: none; /* Hide headers on mobile */
	}

	#resultsTable tbody tr {
		display: block;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 5px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	#resultsTable tbody td {
		display: block;
		text-align: right;
		padding: 10px;
		border: none;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
		padding-left: 50%;
	}

	#resultsTable tbody td:last-child {
		border-bottom: none;
	}

	/* Add labels before each cell content */
	#resultsTable tbody td:before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		width: 45%;
		padding-right: 10px;
		text-align: left;
		font-weight: bold;
		color: #159fee;
	}

	/* First column (typically name) - make it prominent */
	#resultsTable tbody td:first-child {
		font-weight: bold;
		font-size: 14px;
		background-color: #f8f9fa;
		border-bottom: 2px solid #159fee;
	}

	/* Clickable rows - improve touch targets */
	#resultsTable tbody tr {
		cursor: pointer;
	}

	#resultsTable tbody tr:active {
		background-color: #e8f4fd;
	}
}

@media screen and (max-width: 525px) {
	input[type="text"] {
		width: unset;
	}

	.menu table tbody > tr:first-child {
		display: none;
	}

	/*.menu + td {*/
	/*	max-width: calc(100% - 18px);*/
	/*}*/
	/**/
	/*.menu + td > table {*/
	/*	max-width: calc(100% - 18px);*/
	/*}*/
	/**/
	/*.menu + td > table > tbody {*/
	/*	max-width: calc(100% - 18px);*/
	/*}*/

	.menu-wrapper {
		overflow: visible;
		margin-left: -10px;
	}

	.menu {
		padding: 0;
		border: none;
		background: none;
		position: relative;
	}

	.menu-wrapper {
		/*position: absolute;*/
	}

	.hambgr,
	.hambgr:before,
	.hambgr:after {
		background: black;
	}
}

/* Extra small mobile (up to 480px) */
@media (max-width: 480px) {
	#filter {
		padding: 0px;
	}

	#resultsTable tbody td {
		padding: 8px;
		padding-left: 50%;
		font-size: 11px;
	}

	#resultsTable tbody td:before {
		font-size: 10px;
	}

	input[type="submit"],
	input[type="button"] {
		font-size: 12px;
		padding: 10px 12px;
	}
}

/* Landscape mobile orientation */
@media (max-width: 767px) and (orientation: landscape) {
	#resultsTable tbody td {
		padding: 6px;
		padding-left: 45%;
	}
}