/*
 * staff.eng.cu.edu.eg — look only, to match www.eng.cu.edu.eg where these pages are shown in an iframe.
 * Linked once in each page's <head> (and in MasterPage.master). No ids, names, forms or scripts
 * are touched here: removing this file brings back the old look and nothing else changes.
 */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap");

:root {
	--cufe-navy: #0A1F44;
	--cufe-navy-deep: #061430;
	--cufe-gold: #C9A227;
	--cufe-gold-light: #E6C766;
	--cufe-gold-ink: #8A6A0E;
	--cufe-bg: #F5F7FB;
	--cufe-ink: #17223B;
	--cufe-muted: #5B6680;
	--cufe-line: #E3E8F1;
	--cufe-white: #fff;
	--cufe-radius: 14px;
	--cufe-shadow: 0 10px 28px -18px rgba(10, 31, 68, .45);
}

/* ---------- Base ---------- */
html, body {
	margin: 0;
	background: transparent !important;
	color: var(--cufe-ink);
	font-family: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif !important;
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
body { padding: 8px 4px 24px; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }
font { font-family: inherit !important; }
img { max-width: 100%; }
a { color: var(--cufe-navy); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
a:hover { color: var(--cufe-gold-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--cufe-gold); outline-offset: 2px; }
br[style*="clear"] { display: block; content: ""; }

/* ---------- Departments (DeptsAr.htm / DeptsE.htm) ---------- */
body > div[align="center"], #EnglishDepartments, #ArabicDepartments {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	max-width: 1100px;
	margin: 0 auto;
	text-align: start;
}
/* The Arabic page has no id on its box: it reads right to left. */
body > div[align="center"]:not([id]), #ArabicDepartments { direction: rtl; }
body > div[align="center"] > b, #EnglishDepartments > b, #ArabicDepartments > b {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	color: var(--cufe-navy) !important;
	font-size: 1.375rem;
	font-weight: 800;
}
body > div[align="center"] > b::before, #EnglishDepartments > b::before, #ArabicDepartments > b::before {
	content: "";
	width: 36px;
	height: 3px;
	border-radius: 3px;
	background: var(--cufe-gold);
}
body > div[align="center"] > b font, #EnglishDepartments > b font { color: inherit !important; font-size: inherit !important; }
body > div[align="center"] > br, #EnglishDepartments > br, #ArabicDepartments > br { display: none; }

/* The department buttons, and the filter buttons above a department's list. */
a.btn {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: auto !important;
	height: auto !important;
	min-height: 64px;
	margin: 0 !important;
	padding: 14px 18px !important;
	background: var(--cufe-white) !important;
	background-image: none !important;
	border: 1px solid var(--cufe-line) !important;
	border-radius: var(--cufe-radius) !important;
	box-shadow: var(--cufe-shadow);
	color: var(--cufe-navy) !important;
	font-family: inherit !important;
	font-size: .95rem !important;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none !important;
}
a.btn::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cufe-gold);
	box-shadow: 0 0 0 4px rgba(201, 162, 39, .18);
}
a.btn:hover {
	border-color: var(--cufe-gold) !important;
	background: var(--cufe-navy) !important;
	color: var(--cufe-white) !important;
	transform: translateY(-2px);
}

/* "Search for a staff member" under the department buttons. */
body > div[align="center"] > a[href*="search.aspx"], #EnglishDepartments > a[href*="search.aspx"], #ArabicDepartments > a[href*="search.aspx"] {
	grid-column: 1 / -1;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--cufe-gold) !important;
	color: var(--cufe-navy-deep) !important;
	font-weight: 800 !important;
}
body > div[align="center"] > a[href*="search.aspx"]:hover, #EnglishDepartments > a[href*="search.aspx"]:hover, #ArabicDepartments > a[href*="search.aspx"]:hover {
	background: var(--cufe-navy) !important;
	color: var(--cufe-white) !important;
}

/* ---------- A department's list (SearchResults2.aspx: the "mainpage" div; ASP.NET may prefix its id) ---------- */
[id$="mainpage"] {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 14px;
	max-width: 1100px;
	margin: 0 auto;
}
/* The filter buttons share the first row; the staff cards fill the rows below. */
[id$="mainpage"] > a.btn {
	float: none !important;
	flex: 1 1 calc(20% - 12px); /* five buttons fill the row, so no card sits beside them */
	min-height: 0;
	padding: 10px 16px !important;
	justify-content: center;
	border-radius: 999px !important;
	box-shadow: none;
	font-size: .875rem !important;
}
[id$="mainpage"] > a.btn::before { display: none; }
[id$="mainpage"] > br { display: none; }
[id$="mainpage"] > div[align="center"] {
	flex: 1 1 100%;
	display: flex;
	justify-content: center;
	gap: 12px;
	padding-top: 10px;
}
[id$="mainpage"] > div[align="center"] a {
	padding: 10px 22px;
	border: 1px solid var(--cufe-line);
	border-radius: 999px;
	background: var(--cufe-white);
	font-weight: 700;
}
[id$="mainpage"] > div[align="center"] a:hover { border-color: var(--cufe-navy); background: var(--cufe-navy); color: var(--cufe-white); }

/* One staff member's card. */
.user {
	flex: 1 1 300px;
	float: none !important; /* SearchResults2.aspx floats fixed 290x140 boxes */
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 14px;
	font-family: inherit !important;
	font-size: inherit !important;
	text-align: start;
	background: var(--cufe-white);
	border: 1px solid var(--cufe-line);
	border-radius: var(--cufe-radius);
	box-shadow: var(--cufe-shadow);
	transition: border-color .2s, transform .2s;
}
.user:hover { border-color: var(--cufe-gold); transform: translateY(-2px); }
/* Cards keep one width, also on the last, shorter row. */
@media (min-width: 960px) { .user { max-width: calc((100% - 28px) / 3); } }
@media (min-width: 640px) and (max-width: 959px) { .user { max-width: calc((100% - 14px) / 2); } }
.user table { width: 100%; border-collapse: collapse; table-layout: auto !important; }
.user td { padding: 0 6px; vertical-align: top; width: auto !important; color: var(--cufe-muted); font-size: .875rem; line-height: 1.7; }
.user td:first-child { width: 96px !important; }
.user img { display: block; width: 90px !important; height: 120px !important; object-fit: cover; border-radius: 10px; background: var(--cufe-bg); }
.user a { display: inline-block; margin-bottom: 4px; color: var(--cufe-navy); font-size: 1rem; font-weight: 800; line-height: 1.4; }
.user span[onclick] { color: var(--cufe-navy) !important; text-decoration: none !important; border-bottom: 1px dashed var(--cufe-gold); word-break: break-all; }

/* ---------- A staff member's page (ShowInstructorData.aspx: #mrTable) ---------- */
#mrTable {
	float: none !important;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--cufe-white);
	border: 1px solid var(--cufe-line);
	border-radius: var(--cufe-radius);
	box-shadow: var(--cufe-shadow);
	overflow: hidden;
}
#mrTable td { padding: 10px 16px; border-bottom: 1px solid var(--cufe-line); vertical-align: top; color: var(--cufe-ink); font-size: .95rem; }
#mrTable tr { background-color: var(--cufe-white) !important; }
#mrTable tr:first-child td { padding: 22px 20px 8px; border-bottom: 0; }
#mrTable tr:first-child font { color: var(--cufe-navy) !important; font-size: 1.5rem !important; font-weight: 800; line-height: 1.4; }
/* The section headings (department name, Qualifications, Publications…), gold on the old page. */
#mrTable tr[style*="F6BF66"], #mrTable tr[style*="f6bf66"] { background: var(--cufe-navy) !important; }
#mrTable tr[style*="F6BF66"] td, #mrTable tr[style*="f6bf66"] td { padding: 12px 20px; border-bottom: 0; color: var(--cufe-white) !important; text-align: start; }
#mrTable tr[style*="F6BF66"] font, #mrTable tr[style*="F6BF66"] .style2 { color: var(--cufe-white) !important; font-size: 1.05rem !important; font-weight: 700; }
#mrTable tr[style*="F6BF66"] td::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-inline-end: 10px; vertical-align: middle; border-radius: 3px; background: var(--cufe-gold); }
#mrTable .style3, #mrTable td.style3 { width: 170px; color: var(--cufe-muted); white-space: nowrap; }
#mrTable .style3 b { font-weight: 700; }
#mrTable td[style*="dfdfdf"] { background: var(--cufe-bg) !important; }
#mrTable td[onclick] { color: var(--cufe-navy) !important; text-decoration: none !important; }
#mrTable td[rowspan] { width: 160px; text-align: center; }
#mrTable td[rowspan] img { width: 130px !important; height: 170px !important; object-fit: cover; border-radius: 12px; box-shadow: var(--cufe-shadow); background: var(--cufe-bg); }
#mrTable font[color="#000066"] { color: var(--cufe-muted) !important; font-size: 1rem !important; }
/* List items: the old bullet picture becomes a small gold dot. */
#mrTable img[src*="blubul1d"] { width: 8px !important; height: 8px !important; margin: 0 12px; border-radius: 50%; background: var(--cufe-gold); object-position: -99px; vertical-align: middle; }
#mrTable a { color: var(--cufe-navy); font-weight: 600; word-break: break-word; }
#mrTable a:hover { color: var(--cufe-gold-ink); }

/* ---------- The frame every .aspx page sits in (MasterPage.master) ---------- */
body > form > div > table { width: 100% !important; height: auto !important; border-collapse: collapse; }
body > form > div > table > tbody > tr > td { padding: 0; }
/* The side spacer columns and the gold bar at the bottom (2600px wide, wider than the frame). */
body > form > div > table > tbody > tr > td[style*="13%"],
body > form > div > table > tbody > tr > td[style*="10%"] { width: 0 !important; }
body > form > div > table > tbody > tr:last-child { display: none; }
/* Top row: "Log in" and "Search For a Staff Member". */
body > form > div > table > tbody > tr:first-child > td:nth-child(2) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 1100px;
	margin: 0 auto 18px;
	height: auto !important;
}
body > form > div > table > tbody > tr:first-child .dontprint { float: none !important; }
body > form > div > table > tbody > tr:first-child ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
body > form > div > table > tbody > tr:first-child ul a,
body > form > div > table > tbody > tr:first-child .dontprint:first-child { color: var(--cufe-muted) !important; font-size: .875rem; }
body > form > div > table > tbody > tr:first-child ul a { display: inline-flex; padding: 6px 14px; border: 1px solid var(--cufe-line); border-radius: 999px; background: var(--cufe-white); }
body > form > div > table > tbody > tr:first-child ul a:hover { border-color: var(--cufe-navy); color: var(--cufe-navy) !important; }
body > form > div > table > tbody > tr:first-child a[href*="search.aspx"] {
	display: inline-flex;
	padding: 8px 22px;
	border-radius: 999px;
	background: var(--cufe-gold);
	color: var(--cufe-navy-deep) !important;
	font-size: .9rem;
	font-style: normal !important;
	font-weight: 800 !important;
}
body > form > div > table > tbody > tr:first-child a[href*="search.aspx"]:hover { background: var(--cufe-navy); color: var(--cufe-white) !important; }
body > form > div > table > tbody > tr:nth-child(2) > td[align="center"] { text-align: start; }

/* ---------- The staff search form (Search.aspx) ---------- */
table:has(> tbody > tr > td > table.style3) { max-width: 760px; margin: 0 auto; border-collapse: collapse; }
table:has(> tbody > tr > td > table.style3) > tbody > tr > td { padding: 0; }
table:has(> tbody > tr > td > table.style3) > tbody > tr > td:empty,
table:has(> tbody > tr > td > table.style3) > tbody > tr > td:first-child:not(:only-child):not(.style1) { width: 0; }
td.style1 { padding: 0 0 14px !important; color: var(--cufe-navy) !important; font-size: 1.375rem !important; line-height: 1.5; }
td.style1 strong { display: flex; align-items: center; gap: 12px; font-weight: 800; }
td.style1 strong::before { content: ""; width: 36px; height: 3px; border-radius: 3px; background: var(--cufe-gold); }
td.style1 strong br { display: none; }
td.style1 .style2, td.style1 .style5, td.style1 .style6 { color: var(--cufe-muted) !important; font-size: .875rem !important; text-decoration: none !important; }
td.style1 em { font-style: normal; }
table.style3 {
	width: 100%;
	margin-bottom: 18px;
	padding: 8px 14px;
	border-collapse: separate;
	border-spacing: 0 6px;
	background: var(--cufe-white);
	border: 1px solid var(--cufe-line);
	border-radius: var(--cufe-radius);
	box-shadow: var(--cufe-shadow);
}
table.style3 td { padding: 4px 10px; vertical-align: middle; }
table.style3 td.titles, table.style3 td.style4 { width: 45%; color: var(--cufe-navy) !important; font-size: .9rem !important; font-weight: 700; text-align: end; word-break: break-word; }
table.style3 td.style4 { color: var(--cufe-muted) !important; }
table.style3 td.style4 em { font-style: normal; }
table.style3 .textboxes, table.style3 select { width: 100% !important; max-width: 320px; }
table:has(> tbody > tr > td > table.style3) input[type="submit"] { display: block; margin: 0 auto; }
/* ---------- Form fields ---------- */
input[type="text"], input[type="search"], select, textarea {
	min-height: 42px;
	padding: 8px 12px;
	border: 1px solid var(--cufe-line);
	border-radius: 10px;
	background: var(--cufe-white);
	color: var(--cufe-ink);
	font: inherit;
}
input[type="text"]:focus, select:focus, textarea:focus { border-color: var(--cufe-gold); outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, .25); }
input[type="submit"], input[type="button"], button {
	min-height: 44px;
	padding: 10px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--cufe-navy);
	color: var(--cufe-white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { background: var(--cufe-gold); color: var(--cufe-navy-deep); }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
	body { font-size: 14px; }
	body > div[align="center"], #EnglishDepartments, #ArabicDepartments { grid-template-columns: 1fr; }
	[id$="mainpage"] > a.btn { flex-basis: calc(50% - 7px); } /* the fifth one fills its row */
	#mrTable, #mrTable tbody, #mrTable tr, #mrTable td { display: block; width: 100% !important; }
	#mrTable td:empty { display: none; }
	#mrTable td[rowspan] { text-align: start; }
	#mrTable .style3 { padding-bottom: 0; border-bottom: 0; white-space: normal; }
	table.style3, table.style3 tbody, table.style3 tr, table.style3 td { display: block; width: 100% !important; }
	table.style3 td.titles, table.style3 td.style4 { padding-bottom: 0; text-align: start; }
	table.style3 .textboxes, table.style3 select { max-width: none; }
}