/*!
 * Faculty portal – layout fixes and phone/tablet layout (js-library-upgrade TASK-07)
 * Section 1 fixes spacing/alignment problems on every screen size.
 * The other sections are inside max-width media queries (phones and tablets only).
 * Tables become cards on small screens with js/lib/responsive-tables.js.
 */

/* ---------- 1. all screen sizes ---------- */

/* top bar: keep the portal title off the right screen edge */
header.navbar .navbar-nav-custom.pull-right > li > a {
	padding-right: 20px;
}

/* application form: same gap between all section headers (some had none, Employment had its own margins) */
#accordion > .panel ~ .panel {
	margin-top: 6px;
}

/* footer on the application form: the theme rule (#page-content + footer) did not match its markup,
   so it had no padding or white bar */
#main-container > footer.clearfix {
	padding: 9px 10px;
	font-size: 11px;
	background-color: #fff;
	border-top: 1px solid #dbe1e8;
}

/* empty message holders (e.g. the photo-upload error box) drew a grey bar */
.form-group.form-actions:not(:has(*)) {
	display: none;
}

/* application form: country code and phone number side by side in one column */
.phone-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.phone-pair > select {
	order: 1;
	flex: 0 0 42%;
	min-width: 0;
}
.phone-pair > input {
	order: 2;
	flex: 1 1 0;
	min-width: 0;
}
/* validation messages go under both fields */
.phone-pair > label.error {
	order: 3;
	flex-basis: 100%;
	margin: 0;
}
/* application form: label above the field (core areas, research interests) */
.stacked-field > label {
	display: block;
	margin-bottom: 5px;
}
/* application form: primary department text on the same line as its label */
.department-value {
	display: inline-block;
	padding-top: 7px;
}

/* referee form: button bar below the attachment text (not behind it) */
.form-group > .col-md-12 + .form-group.form-actions {
	clear: both;
}

/* dashboard: application list in a white box, aligned with the page heading */
#page-content > .form-horizontal > .form-group > .table-responsive {
	margin: 0 15px;
	padding: 0 15px;
	background: #fff;
	border: 1px solid #dbe1e8;
}

/* change password: space between a field and the next label */
.modal-body > #f1 .control-group {
	margin-bottom: 15px;
}

/* forgot password: the form was 20px narrower than its box */
#login-container form.margin__right_zero {
	margin-right: -20px;
}
/* register / forgot password: captcha image and input on one line, input next to the image */
#login-container .form-group:has(#captchacode) {
	display: flex;
	align-items: center;
}
#login-container .form-group:has(#captchacode) > [class*="col-xs-"]:first-child {
	width: auto;
	flex: 0 0 auto;
}
#login-container .form-group:has(#captchacode) > [class*="col-xs-"]:last-child {
	width: auto;
	flex: 1 1 0;
}

/* report pages: the page had a fixed width of 1450px (wider than most laptop screens) */
body.body-cls {
	max-width: calc(100% - 40px);
}
/* report pages: wide tables scroll inside their own box instead of running off the page */
.dataTable_wrapper,
#applicant_data {
	overflow-x: auto;
}
/* referee report: label, list and button on one line */
#frmData .col-sm-4:has(#fillRefereeComboDiv) {
	width: 100%;
}
#frmData .form-group:has(> #fillRefereeComboDiv) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}
#frmData .form-group:has(> #fillRefereeComboDiv) > label {
	width: auto;
	float: none;
	padding: 0;
}

/* ---------- desktop with table layout (1200px and wider) ---------- */
@media (min-width: 1200px) {
	/* education table: wider name columns, narrower degree / percentage columns (text was cut off) */
	#DegreeGroup thead td:nth-child(1) { width: 9%; }
	#DegreeGroup thead td:nth-child(2) { width: 13%; }
	#DegreeGroup thead td:nth-child(3) { width: 16%; }
	#DegreeGroup thead td:nth-child(4) { width: 16%; }
	#DegreeGroup thead td:nth-child(5) { width: 11%; }
	#DegreeGroup thead td:nth-child(6) { width: 11%; }
	#DegreeGroup thead td:nth-child(7) { width: 12%; }
	#DegreeGroup thead td:nth-child(8) { width: 8%; }
	/* dropdowns in tables (grading, quartile) were ~50px wide ("Plea…");
	   a table that no longer fits scrolls inside its own box */
	.table-responsive {
		overflow-x: auto;
	}
	.table-responsive td select.form-control {
		min-width: 95px;
	}
}

/* ---------- small laptops / tablets in landscape (992px – 1199px) ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
	/* application form: next to the side menu the 12-column rows were too narrow
	   (phone numbers cut off, "Category" over its list): label above field, full width */
	#accordion .form-group > [class*="col-md-"] {
		width: 100%;
		float: none;
	}
	#accordion .form-group > [class*="col-md-"] > label,
	#accordion .form-group > [class*="col-md-"] > .control-label {
		margin-bottom: 5px;
	}
	.department-value {
		margin-bottom: 10px;
	}
}

/* ---------- tables as cards: tablets, phones and small laptops (below 1200px) ---------- */
@media (max-width: 1199px) {
	/* data-entry tables as one card per row (labels come from the column headers) */
	.table-responsive {
		border: 0;
		overflow-x: visible;
	}
	table.rt-cards {
		width: 100% !important;
		min-width: 0 !important;
		table-layout: auto !important;
	}
	table.rt-cards thead {
		display: none;
	}
	:where(table.rt-cards) tbody,
	:where(table.rt-cards) tr,
	:where(table.rt-cards) td,
	:where(table.rt-cards) th {
		display: block;
	}
	table.rt-cards tr {
		margin: 0 0 12px;
		padding: 6px 0;
		background: #fff;
		border: 1px solid #dde3ec;
		border-radius: 6px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	}
	table.rt-cards td,
	table.rt-cards th {
		width: auto !important;
		max-width: none !important;
		border: 0 !important;
		padding: 6px 12px !important;
		text-align: left !important;
		white-space: normal !important;
	}
	table.rt-cards td[data-label]:not([data-label=""])::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-size: 12px;
		font-weight: 600;
		color: #394263;
	}
	table.rt-cards td input,
	table.rt-cards td select,
	table.rt-cards td textarea {
		width: 100% !important;
		max-width: 100% !important;
	}
	table.rt-cards td .input-group,
	table.rt-cards td .bootstrap-filestyle {
		width: 100% !important;
	}
	/* dashboard list: the rows are cards here, so no white box around them */
	#page-content > .form-horizontal > .form-group > .table-responsive {
		padding: 0;
		background: none;
		border: 0;
	}
	/* table boxes: no empty space under the last card */
	table.rt-cards {
		margin-bottom: 0;
	}
	table.rt-cards tbody tr:last-child {
		margin-bottom: 0;
	}
}

/* ---------- tablets and phones (below 992px) ---------- */
@media (max-width: 991px) {
	/* admin report pages: the page body had a fixed width of 1450px */
	body.body-cls {
		width: auto !important;
	}
	#page-wrapper .select2-container,
	#page-wrapper select {
		max-width: 100% !important;
	}
	body.body-cls #page-wrapper .row {
		margin-left: 0;
		margin-right: 0;
	}
	body.body-cls #page-wrapper .form-group > * {
		max-width: 100%;
	}
	.dataTable_wrapper,
	#applicant_data {
		-webkit-overflow-scrolling: touch;
	}

	/* pop-up dialogs (e.g. the discipline information pop-up, 850px on desktop) fit the screen */
	.modal-dialog {
		width: auto !important;
		max-width: calc(100% - 20px);
		margin: 30px auto;
	}
	/* application form: space under the primary department text */
	.department-value {
		margin-bottom: 10px;
	}
}

/* ---------- phones (below 768px) ---------- */
@media (max-width: 767px) {
	/* buttons big enough for a finger */
	table.rt-cards td .btn,
	.btn-sm {
		min-width: 36px;
		min-height: 34px;
		line-height: 1.6;
	}

	/* application form: Submit Application button full width */
	.content_border_color .btn-toolbar {
		float: none !important;
		margin: 0;
	}
	.content_border_color .submitBtn {
		display: block;
		width: 100%;
	}

	/* login / register / forgot password box: full width with a small margin */
	#login-container {
		width: auto !important;
		left: 10px !important;
		right: 10px !important;
		margin-left: 0 !important;
	}

	/* login: "Remember Me" on one line */
	.remd-me {
		white-space: nowrap;
	}

	/* 404 page: the "404" graphic scales to the screen */
	#container {
		max-width: 100%;
	}
	#container svg {
		max-width: 100%;
		height: auto;
	}
	#page-content:has(> #container) {
		min-height: calc(100vh - 85px);   /* 51px header + 35px footer */
	}

	/* application form: less nested padding, so the fields get the screen width */
	#accordion .panel-body {
		padding: 10px 0;
	}
	.block.full .block.full {
		padding: 12px 8px;
	}
	table.rt-cards td,
	table.rt-cards th {
		padding: 6px 10px !important;
	}

	/* admin report pages */
	#page-wrapper {
		min-width: 0 !important;
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ---------- small phones (below 480px) ---------- */
@media (max-width: 479px) {
	/* register / forgot password: captcha image and input one above the other, full width */
	#login-container .form-group:has(#captchacode) {
		display: block;
	}
	#login-container .form-group:has(#captchacode) > [class*="col-xs-"] {
		width: 100%;
		float: none;
	}
	#login-container .form-group:has(#captchacode) img {
		max-width: 100%;
		height: auto;
		margin-bottom: 8px;
	}
}