/* ===== Pixel Result — Frontend ===== */

:root {
	--pxr-primary: #0055a5;
	--pxr-accent:  #24B1DA;
	--pxr-bg:      #f7faff;
	--pxr-head:    #e5edfa;
	--pxr-border:  #dbeafe;
	--pxr-text:    #1f2937;
	--pxr-muted:   #6b7280;
	--pxr-danger:  #b91c1c;
}

/* ---------- Search form ---------- */

.pxr-search-form {
	max-width: 420px;
	margin: 2em auto;
	background: var(--pxr-bg);
	border: 1px solid var(--pxr-border);
	padding: 1.8em 1.5em;
	border-radius: 1rem;
	box-shadow: 0 2px 12px rgba(36, 177, 218, 0.08);
	box-sizing: border-box;
}
.pxr-search-form p { margin: 0 0 1em; }
.pxr-search-form label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
	color: var(--pxr-primary);
}
.pxr-search-form select,
.pxr-search-form input[type="text"] {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--pxr-border);
	border-radius: 0.5em;
	background: #fff;
	font-size: 1rem;
	box-sizing: border-box;
}
.pxr-search-form select:focus,
.pxr-search-form input[type="text"]:focus {
	outline: none;
	border-color: var(--pxr-accent);
	box-shadow: 0 0 0 3px rgba(36, 177, 218, 0.15);
}
.pxr-submit-btn {
	width: 100%;
	background: var(--pxr-accent);
	color: #fff;
	border: none;
	padding: 0.8em 1.5em;
	border-radius: 0.5em;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.18s;
}
.pxr-submit-btn:hover { background: var(--pxr-primary); }

.pxr-not-found {
	max-width: 420px;
	margin: 1.5em auto 0;
	color: var(--pxr-danger);
	background: #fee2e2;
	padding: 0.9em 1.2em;
	border-radius: 0.6em;
	text-align: center;
	font-weight: 600;
}

/* ---------- Results list ---------- */

.pxr-results {
	max-width: 1000px;
	margin: 2rem auto;
	overflow-x: auto;
}
.pxr-results table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 0.8em;
	overflow: hidden;
	box-shadow: 0 1px 8px rgba(36, 177, 218, 0.08);
}
.pxr-results th,
.pxr-results td {
	border: 1px solid var(--pxr-border);
	padding: 0.8em 0.7em;
	text-align: left;
}
.pxr-results th {
	background: var(--pxr-head);
	color: var(--pxr-primary);
	font-weight: 700;
}
.pxr-results tr:nth-child(even) td { background: #f8fafc; }

/* ---------- Result view page ---------- */

.pxr-view-body {
	margin: 0;
	padding: 0;
	background: #eef4fb;
	color: var(--pxr-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", "Hind Siliguri", Arial, sans-serif;
	line-height: 1.6;
}
.pxr-card-wrap {
	max-width: 760px;
	margin: 2.5rem auto;
	padding: 0 1rem;
}
.pxr-card-btns {
	display: flex;
	gap: 0.6em;
	justify-content: flex-end;
	margin-bottom: 0.9em;
}
.pxr-print-btn,
.pxr-close-btn {
	background: var(--pxr-accent);
	color: #fff;
	border: none;
	border-radius: 2em;
	font-size: 0.98rem;
	font-weight: 600;
	padding: 0.55em 1.4em;
	cursor: pointer;
	transition: background 0.18s;
}
.pxr-close-btn { background: var(--pxr-primary); }
.pxr-print-btn:hover,
.pxr-close-btn:hover { background: #00796b; }

.pxr-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 4px 22px rgba(0, 85, 165, 0.10);
	padding: 2rem 1.8rem 1.5rem;
}
.pxr-card-head {
	text-align: center;
	border-bottom: 2px solid var(--pxr-head);
	padding-bottom: 1rem;
	margin-bottom: 1.4rem;
}
.pxr-card-head h1 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--pxr-primary);
}
.pxr-card-sub {
	margin: 0.35em 0 0;
	color: var(--pxr-muted);
	font-size: 0.95rem;
}

.pxr-student {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin-bottom: 1.4rem;
}
.pxr-k {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--pxr-muted);
}
.pxr-v { font-weight: 700; font-size: 1.05rem; }

.pxr-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.4rem;
}
.pxr-table th,
.pxr-table td {
	border: 1px solid var(--pxr-border);
	padding: 0.7em 0.8em;
	text-align: left;
}
.pxr-table th {
	background: var(--pxr-head);
	color: var(--pxr-primary);
	font-weight: 700;
}
.pxr-table tr:nth-child(even) td { background: #f8fafc; }

.pxr-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	background: var(--pxr-bg);
	border: 1px solid var(--pxr-border);
	border-radius: 0.7em;
	padding: 1rem 1.2rem;
}
.pxr-gpa, .pxr-status { font-size: 1.15rem; color: var(--pxr-primary); }

.pxr-card-foot {
	margin-top: 1.4rem;
	padding-top: 0.9rem;
	border-top: 1px dashed var(--pxr-border);
	text-align: center;
	color: var(--pxr-muted);
	font-size: 0.85rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
	.pxr-card { padding: 1.3rem 1rem 1.1rem; }
	.pxr-card-head h1 { font-size: 1.2rem; }
	.pxr-student { gap: 0.8rem 1.5rem; }

	.pxr-results table,
	.pxr-results thead,
	.pxr-results tbody,
	.pxr-results tr,
	.pxr-results th,
	.pxr-results td { display: block; }
	.pxr-results thead { display: none; }
	.pxr-results tr { margin-bottom: 0.8em; border: 1px solid var(--pxr-border); border-radius: 0.6em; overflow: hidden; }
	.pxr-results td { border: none; border-bottom: 1px solid var(--pxr-border); padding-left: 45%; position: relative; }
	.pxr-results td:before {
		content: attr(data-label);
		position: absolute;
		left: 0.8em;
		width: 38%;
		font-weight: 700;
		color: var(--pxr-primary);
	}
}

/* ---------- Print ---------- */

@media print {
	.pxr-view-body { background: #fff; }
	.pxr-card-btns { display: none !important; }
	.pxr-card { box-shadow: none; border: 1px solid #ccc; }
	.pxr-card-wrap { margin: 0 auto; max-width: 100%; }
}

/* ---------- Grouped results (by class) ---------- */

.pxr-results-group { margin-bottom: 2.2rem; }
.pxr-results-group:last-child { margin-bottom: 0; }

.pxr-class-heading {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 0.7rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--pxr-primary);
}
.pxr-class-tag {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--pxr-accent);
	background: var(--pxr-head);
	padding: 0.28em 0.7em;
	border-radius: 2em;
}
.pxr-class-count {
	margin-left: auto;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--pxr-muted);
	background: var(--pxr-bg);
	border: 1px solid var(--pxr-border);
	padding: 0.2em 0.7em;
	border-radius: 2em;
}
.pxr-empty {
	text-align: center;
	color: var(--pxr-muted);
	padding: 1.5em;
}

/* Highlight the search form when a lookup failed */
.pxr-search-form[data-pxr-error="1"] {
	border-color: #fca5a5;
}