@import url("https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css"); 
@import url("https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css"); 

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* Legend */
.legend { display: flex; gap: 24px; margin-bottom: 16px;/*padding-left: 24px; font-family: 'Arial', sans-serif; font-size: 0.85rem; color: #444;*/ }
.legend-item { display: flex; align-items: center; gap: 6px; }
.asterisk-maroon { color: #850928; font-weight: bold; font-size: 2rem; line-height: 1; }
.asterisk-black   { color: #000; font-weight: bold; font-size: 2rem; line-height: 1; }

/* Filter Panel */
.filter-panel {
	background: #fff;
	/*border-radius: 6px;*/
	/*box-shadow: 0 2px 12px rgba(0,0,0,0.08);*/
	/*padding: 20px 24px;*/
	margin-bottom: 16px;
}

.dropdown-filters { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }

.filter-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; }

.filter-group label {
	font-family: 'Arial', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.filter-group select {
	font-family: 'Arial', sans-serif;
	font-size: 13px;
	padding: 7px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #333;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s;
	width: 100%;
}
.filter-group select:focus { border-color: #4e0a0a; }

/* Alpha filter */
.alpha-filter { border-top: 1px solid #ede8e0; padding-top: 16px; }

.alpha-filter-label {
	font-family: 'Arial', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.alpha-buttons { display: flex; flex-wrap: wrap; gap: 4px; }

.alpha-btn {
	font-family: 'Arial', sans-serif;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #555;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	min-width: 34px;
	text-align: center;
	line-height: 1.4;
}
.alpha-btn:hover  { background: #CA1E50; border-color: #c07070; color: #fff; }
.alpha-btn.active { background: #850928; border-color: #4e0a0a; color: #fff; }

/* Table card */
.table-card {
	background: #fff;
	/*border-radius: 6px;*/
	/*box-shadow: 0 2px 12px rgba(0,0,0,0.08);*/
	/*padding: 24px 28px 28px;*/
}

table.dataTable { width: 100% !important; border-collapse: collapse; /*font-family: ' ', sans-serif; font-size: 14px;*/ }

table.dataTable thead th {
	background-color: #850928;
	color: #fff;
	font-weight: 600;
	padding: 12px 14px;
	border-bottom: 3px solid #7a1010;
	white-space: nowrap;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after { opacity: 0.7; }

table.dataTable tbody td { padding: 10px 14px; border-bottom: 1px solid #e8e2d9; vertical-align: middle; }
table.dataTable tbody tr:last-child td { border-bottom: none; }
table.dataTable tbody tr:hover { background-color: #faf7f2; }
table.dataTable tbody tr:nth-child(even) { background-color: #f9f6f1; }
table.dataTable tbody tr:nth-child(even):hover { background-color: #f4f0e9; }

.name-cell { display: flex; align-items: center; gap: 5px; }
.honor-star { font-size: 2rem; font-weight: bold; line-height: 1; flex-shrink: 0; }
.honor-star.maroonasterisk { color: #850928; }
.honor-star.blackasterisk   { color: #000; }

.honor-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.honor-badge {
	display: inline-block;
	font-size: 0.72rem;
	padding: 3px 9px;
	border-radius: 20px;
	font-family: 'Arial', sans-serif;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.01em;
}
.honor-summa-cum-laude { background-color: #fff8e1; color: #6d4c00; border: 1px solid #f9c825; }
.honor-magna-cum-laude { background-color: #e8f5e9; color: #1b5e20; border: 1px solid #66bb6a; }
.honor-cum-laude       { background-color: #e3f2fd; color: #0d3c61; border: 1px solid #64b5f6; }
.honor-honor-scholar   { background-color: #fce8e8; color: #4e0a0a; border: 1px solid #c0504d; }
.honor-touchstone      { background-color: #e8eaf6; color: #1a237e; border: 1px solid #7986cb; }
.honor-reitch          { background-color: #f3e5f5; color: #4a148c; border: 1px solid #ba68c8; }
.honor-ima-jean        { background-color: #fff3e0; color: #bf360c; border: 1px solid #ff8a65; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 14px; font-family: 'Arial', sans-serif; font-size: 13px; color: #444; }
.dataTables_wrapper .dataTables_filter input {
	border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px;
	margin-left: 8px; font-size: 13px; outline: none; transition: border-color 0.2s;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #4e0a0a; }
.dataTables_wrapper .dataTables_length select { border: 1px solid #ccc; border-radius: 4px; padding: 4px 8px; margin: 0 6px; font-size: 13px; }
.dataTables_wrapper .dataTables_info { font-family: 'Arial', sans-serif; font-size: 13px; color: #666; margin-top: 12px; }
.dataTables_wrapper .dataTables_paginate { margin-top: 12px; font-family: 'Arial', sans-serif; font-size: 13px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 4px 10px; margin: 0 2px; border-radius: 4px; border: 1px solid #ddd;
	cursor: pointer; color: #444 !important; background: #fff; transition: background 0.15s, color 0.15s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: #4e0a0a !important; color: #fff !important; border-color: #4e0a0a;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: #7a1010 !important; color: #fff !important; border-color: #7a1010;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	background: #f5f5f5 !important; color: #aaa !important; border-color: #eee; cursor: default;
}

#loading { text-align: center; padding: 60px 20px; font-family: 'Arial', sans-serif; color: #888; font-size: 15px; }
.spinner {
	width: 40px; height: 40px;
	border: 4px solid #e8e2d9; border-top-color: #4e0a0a;
	border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

#studentTable { display: none; }

@media (max-width: 600px) {
	.dropdown-filters { flex-direction: column; }
	.alpha-btn { padding: 4px 7px; font-size: 12px; min-width: 28px; }
}