/* Modern, low-risk UI layer above legacy style.css */
:root {
	--ui-bg: #f4f7fb;
	--ui-surface: #ffffff;
	--ui-text: #2f3a45;
	--ui-muted: #6e7b88;
	--ui-primary: #2f6fb0;
	--ui-primary-2: #245b92;
	--ui-border: #d8e0e8;
	--ui-shadow: 0 8px 24px rgba(32, 52, 72, 0.08);
}

html {
	background: var(--ui-bg);
}

body {
	background: var(--ui-bg);
	color: var(--ui-text);
	line-height: 1.45;
}

body,
td,
p,
div,
span {
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	color: var(--ui-text);
}

h1, h2, h3, h4 {
	color: #213244;
	letter-spacing: 0.2px;
}

.main {
	margin: 18px;
	padding: 18px;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	box-shadow: var(--ui-shadow);
}

.public-page-content {
	margin: 0 25px;
}

.top {
	background: linear-gradient(90deg, var(--ui-primary), var(--ui-primary-2)) !important;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	box-shadow: 0 2px 8px rgba(20, 32, 45, 0.18);
}

.subtop {
	background: #e6ecf2 !important;
	color: var(--ui-text) !important;
	border-top: 1px solid #cfd8e2;
	border-bottom: 1px solid #cfd8e2;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.subtop a.white {
	color: #7b8794 !important;
}

.subtop a.white:hover {
	color: #556371 !important;
}

a {
	color: var(--ui-primary);
}

a:hover {
	color: var(--ui-primary-2);
}

table {
	border-collapse: collapse;
	width: 100%;
	background: #fff;
}

th,
td {
	border: 1px solid #e3e9f0;
	padding: 8px 10px;
	vertical-align: top;
}

tr:nth-child(even) {
	background: #f9fbfd;
}

tr:nth-child(odd) {
	background: #ffffff;
}

tr#default {
	background: transparent !important;
}

input,
select,
textarea,
option {
	border: 1px solid #c8d3df;
	border-radius: 8px;
	padding: 6px 8px;
	background: #fff;
	color: #243241;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #7da3cb;
	box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.15);
}

input[type=submit],
button {
	background: var(--ui-primary);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 8px 16px;
	font-weight: 600;
}

input[type=submit]:hover,
button:hover {
	background: var(--ui-primary-2);
}

fieldset {
	border: 1px solid var(--ui-border);
	border-radius: 12px;
	background: #fff;
	padding: 12px;
}

legend {
	color: #27415a;
	font-weight: 600;
	text-shadow: none;
}

.white {
	color: #eef4fa !important;
}

@media (max-width: 900px) {
	.main {
		margin: 8px;
		padding: 10px;
		border-radius: 10px;
	}

	.top {
		padding-left: 16px !important;
	}

	.subtop {
		padding-left: 16px !important;
	}
}

.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid #e3e9f0;
	border-radius: 10px;
	background: #fff;
}

.table-scroll table {
	width: max-content;
	min-width: 100%;
}

.instructors-main-table th:nth-child(7),
.instructors-main-table td:nth-child(7),
.instructors-main-table th:nth-child(8),
.instructors-main-table td:nth-child(8),
.instructors-main-table th:nth-child(9),
.instructors-main-table td:nth-child(9) {
	width: 150px;
	min-width: 150px;
}