/* ==========================================================================
   Student Portal + Certificate Verification styling
   Classes here match institute-core's [institute_student_dashboard] and
   institute-certificates' [institute_verify_certificate] shortcode output
   exactly - "required styling hooks" referenced in the plugin READMEs.
   ========================================================================== */

.institute-portal-login,
.institute-student-dashboard,
.institute-cert-verify {
	max-width: 480px;
	margin-inline: auto;
	padding-block: var(--space-4);
}

.institute-portal-login form p {
	margin-block-end: 10px;
}
.institute-portal-login input[type="text"],
.institute-portal-login input[type="password"] {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	box-sizing: border-box;
}
.institute-portal-login .institute-portal-note {
	font-size: 11px;
	color: var(--color-neutral-400);
	text-align: center;
	margin-block-start: 14px;
}

.institute-dashboard-program {
	background: var(--color-surface-alt);
	border-radius: var(--radius-card);
	padding: 16px;
	margin-block-end: 16px;
}
.institute-dashboard-program .label { font-size: 12px; color: var(--color-neutral-400); margin: 0; }
.institute-dashboard-program .value { font-size: 15px; font-weight: var(--font-weight-medium); color: var(--color-neutral-900); margin: 2px 0 8px; }

.status-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	background: var(--color-neutral-bg);
	color: var(--color-neutral-text);
}
.status-active   { background: var(--color-success-bg); color: var(--color-success-text); }
.status-completed{ background: var(--color-success-bg); color: var(--color-success-text); }
.status-withdrawn{ background: var(--color-danger-bg); color: var(--color-danger-text); }
.status-on_hold  { background: var(--color-warning-bg); color: var(--color-warning-text); }

.institute-dashboard-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-block-end: 16px;
}
.institute-dashboard-metrics .metric {
	background: var(--color-surface-alt);
	border-radius: 8px;
	padding: 12px;
}
.institute-dashboard-metrics .label { display: block; font-size: 11px; color: var(--color-neutral-400); }
.institute-dashboard-metrics .value { display: block; font-size: 17px; font-weight: var(--font-weight-medium); color: var(--color-neutral-900); }

.institute-dashboard-payments,
.institute-dashboard-exams {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: 14px 16px;
	margin-block-end: 10px;
}
.institute-dashboard-payments table,
.institute-dashboard-exams table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}
.institute-dashboard-payments td,
.institute-dashboard-exams td {
	padding: 6px 0;
	border-block-end: 1px solid var(--color-surface-alt);
	color: var(--color-neutral-600);
}

/* Certificate verification -------------------------------------------- */
.institute-cert-verify form {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-block-end: 16px;
}
.institute-cert-verify input[type="text"] {
	flex: 1;
	max-width: 260px;
	padding: 10px;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
}
.institute-cert-status-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	background: var(--color-neutral-bg);
	color: var(--color-neutral-text);
	margin-block-end: 8px;
}
.institute-cert-result--valid .institute-cert-status-pill     { background: var(--color-success-bg); color: var(--color-success-text); }
.institute-cert-result--suspended .institute-cert-status-pill { background: var(--color-warning-bg); color: var(--color-warning-text); }
.institute-cert-result--revoked .institute-cert-status-pill   { background: var(--color-danger-bg); color: var(--color-danger-text); }
.institute-cert-result--expired .institute-cert-status-pill   { background: var(--color-neutral-bg); color: var(--color-neutral-text); }

@media (max-width: 600px) {
	.institute-dashboard-metrics { grid-template-columns: 1fr 1fr; }
}