/* General styles for table */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
/* Flexbox layout for large screens */
tr {
	display: inline-block;
	flex-wrap: wrap; /* Allow wrapping of items in case of multiple rows */
	justify-content: space-between; /* Space between each cell */
	/* 	margin-bottom: 10px; */
	margin: 10px;
}

th, td {
	display: block; /* Stack <th> above <td> */
	text-align: left;
	/* Align text left for better readability on small screens */
	width: 100%; /* Make each <th> and <td> take full width */
	margin-bottom: 10px; /* Add space between header and data */
}

.left-table {
	width: 100%;
}

.cable-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* KEY FIX: allow shrinking properly */
.cable-box {
	flex: 1 1 260px; /* smaller base helps mobile fit 2 columns */
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0; /* CRITICAL: allows flex shrinking */
	border: 1px solid #ccc;
	padding: 8px;
}

/* Force tables not to expand container */
.cable-box table {
	width: 100%;
	table-layout: fixed; /* CRITICAL */
}

/* Prevent inputs from forcing overflow */
.cable-box input {
	width: 100%;
	max-width: 90px;
}

.container-coordinator-admin-width {
	width: 900px;
}

.container-system-admin-width {
	width: 1200px;
}

.container-choose-view-temperatures-width {
	width: 900px;
}

.container-view-temperatures-width {
	width: 30%;
}

.container-password-width {
	width: 25%
}

.container-manage-users-width {
	width: 60%;
}

.display_header {
	width: 90%;
}

.container-edit_users-width {
	width: 1000px;
}

.display_invite_user {
	/* 	padding: 5px; */
	/* 	margin:5px; */
	
}

.position-input {
	width: 40px; /* small enough for 2 characters */
	font-size: 14px; /* smaller font */
	padding: 2px 4px; /* less padding for compact look */
	text-align: center; /* center the number inside */
}

.arrow-btn {
	font-size: 12px; /* smaller arrow inside the button */
	width: 25px; /* smaller button width */
	height: 25px; /* smaller button height */
	margin: 0 3px; /* small space between buttons */
	cursor: pointer;
	user-select: none; /* prevent text selection */
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; /* remove default padding */
}
/* table postions */
.left-table {
	display: flex;
	justify-content: flex-start;
}

.right-table {
	display: flex;
	justify-content: flex-end;
}

.arrow-btn:hover {
	background-color: #ddd;
}

.status {
	padding-left: 50px;
}
/* For mobile screens (max-width: 768px) */
@media ( max-width : 768px) {
	/* Style for table to use Flexbox */
	table {
		display: flex;
		flex-wrap: wrap; /* Allow wrapping of rows */
		width: 100%;
	}

	/* Style for each tr element */
	tr {
		display: flex;
		flex: 1 1 45%;
		/* This will allow two rows per line, you can adjust the percentage */
		margin-bottom: 20px;
	}

	/* Style for each th and td */
	th, td {
		display: block;
		text-align: left;
		width: 100%; /* Make each th and td take full width */
		margin-bottom: 10px;
	}
	th {
		/* 		background-color: #f4f4f4; */
		font-weight: bold;
	}
	.left-table {
		width: 100%;
	}
	.container-coordinator-admin-width {
		width: 90%;
	}
	.container-system-admin-width {
		width: 90%;
	}
	.container-choose-view-temperatures-width {
		width: 100%;
	}
	.container-view-temperatures-width {
		width: 100% !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}
	.container-password-width {
		width: 75%
	}
	.container-manage-users-width {
		width: 90%;
	}
	.container-edit_users-width {
		width: 90%;
	}
	.status {
		padding-left: 0px;
	}
}
/* Media query for small screens */
@media screen and (max-width: 480px) {
	tr {
		display: block; /* Stack rows vertically on small screens */
		margin-bottom: 20px;
	}
	th, td {
		display: block; /* Stack <th> above <td> */
		text-align: left;
		/* Align text left for better readability on small screens */
		width: 100%; /* Make each <th> and <td> take full width */
		margin-bottom: 10px; /* Add space between header and data */
	}
	th {
		/* 		background-color: #f4f4f4; Optional: background color for headers */
		font-weight: bold;
	}
	.left-table {
		width: 100%;
	}
	.cable-box {
		flex: 1 1 calc(50% - 1px);
		box-sizing: border-box;
	}
	.container-coordinator-admin-width {
		width: 90%;
	}
	.container-system-admin-width {
		width: 90%;
	}
	.container-choose-view-temperatures-width {
		width: 100% !important;
		max-width: none !important;
	}
	.container-view-temperatures-width {
		width: 100%;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}
	.container-password-width {
		width: 90%;
	}
	.container-manage-users-width {
		width: 90% !important;
	}
	.container-edit_users-width {
		width: 90%;
	}
}
/* Style for the div */
.bordered-div {
	width: 80%;
	display: inline-block;
	border: 3px solid lightgray; /* Light gray border */
	padding: 5px; /* Adds some space inside the div */
	margin: 10px; /* Adds space outside the div */
	border-radius: 12px;
	border: 3px solid lightgray; /* Rounded corners */
}

.container {
	/*	background-color: #f5f5f5; */
	padding: 10px 0; /* Remove left and right padding */
	/*	margin: 0; /* Remove any margin that may create space */
	text-align: center; /* Optionally, center the text */
	/*	border-bottom: 2px solid #000;
	/* Optional: adds border between heading and table */
}