.tutorhelper-student-dashboard {
	--tutorhelper-dashboard-ink: #07354d;
	--tutorhelper-dashboard-muted: #60727c;
	--tutorhelper-dashboard-cream: #fffaf1;
	--tutorhelper-dashboard-border: #eadfce;
	--tutorhelper-dashboard-pending: #b96820;
	--tutorhelper-dashboard-confirmed: #226746;

	width: 100%;
	padding: clamp(22px, 4vw, 42px);
	border: 1px solid var(--tutorhelper-dashboard-border);
	border-radius: 20px;
	background: var(--tutorhelper-dashboard-cream);
	color: var(--tutorhelper-dashboard-ink);
	box-shadow: 0 12px 34px rgba(7, 53, 77, 0.08);
}

.tutorhelper-student-dashboard__preview-notice {
	margin-bottom: 20px;
	padding: 12px 15px;
	border: 1px solid #e6c988;
	border-radius: 10px;
	background: #fff2ce;
	color: #71500d;
	font-weight: 600;
}

.tutorhelper-student-dashboard__header {
	margin-bottom: 28px;
}

.tutorhelper-student-dashboard__eyebrow {
	margin: 0 0 5px;
	color: #b96820;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tutorhelper-student-dashboard__heading {
	margin: 0;
	color: var(--tutorhelper-dashboard-ink);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.1;
}

.tutorhelper-student-dashboard__introduction {
	max-width: 680px;
	margin: 10px 0 0;
	color: var(--tutorhelper-dashboard-muted);
	font-size: 1rem;
	line-height: 1.6;
}

.tutorhelper-student-dashboard__sections {
	display: grid;
	gap: 24px;
}

.tutorhelper-student-dashboard__section {
	padding: clamp(17px, 3vw, 24px);
	border: 1px solid var(--tutorhelper-dashboard-border);
	border-radius: 16px;
	background: #ffffff;
}

.tutorhelper-student-dashboard__section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}

.tutorhelper-student-dashboard__section-header h3 {
	margin: 0;
	color: var(--tutorhelper-dashboard-ink);
	font-size: 1.2rem;
}

.tutorhelper-student-dashboard__section-header p {
	margin: 5px 0 0;
	color: var(--tutorhelper-dashboard-muted);
	font-size: 0.92rem;
}

.tutorhelper-student-dashboard__count {
	display: inline-grid;
	flex: 0 0 auto;
	min-width: 34px;
	min-height: 34px;
	place-items: center;
	border-radius: 999px;
	background: #edf3f6;
	color: var(--tutorhelper-dashboard-ink);
	font-weight: 800;
}

.tutorhelper-student-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.tutorhelper-student-dashboard__card {
	overflow: hidden;
	border: 1px solid #e4e9ec;
	border-radius: 13px;
	background: #ffffff;
	box-shadow: 0 5px 15px rgba(7, 53, 77, 0.06);
}

.tutorhelper-student-dashboard__card-header {
	padding: 15px 17px;
	border-top: 5px solid var(
		--tutorhelper-booking-type-colour,
		#328bb8
	);
	background:
		color-mix(
			in srgb,
			var(
				--tutorhelper-booking-type-colour,
				#328bb8
			) 12%,
			#ffffff
		);
}

.tutorhelper-student-dashboard__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.tutorhelper-student-dashboard__date {
	margin: 0 0 4px;
	color: var(--tutorhelper-dashboard-muted);
	font-size: 0.82rem;
	font-weight: 700;
}

.tutorhelper-student-dashboard__card h4 {
	margin: 0;
	color: var(--tutorhelper-dashboard-ink);
	font-size: 1.05rem;
}

.tutorhelper-student-dashboard__status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.2;
}

.tutorhelper-student-dashboard__status--unconfirmed {
	background: #fff0dd;
	color: var(--tutorhelper-dashboard-pending);
}

.tutorhelper-student-dashboard__status--confirmed {
	background: #dff4e8;
	color: var(--tutorhelper-dashboard-confirmed);
}

.tutorhelper-student-dashboard__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 15px 17px;
	border-top: 1px solid #edf0f1;
}

.tutorhelper-student-dashboard__details div {
	min-width: 0;
}

.tutorhelper-student-dashboard__details dt {
	margin: 0 0 3px;
	color: var(--tutorhelper-dashboard-muted);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tutorhelper-student-dashboard__details dd {
	margin: 0;
	color: var(--tutorhelper-dashboard-ink);
	font-size: 0.9rem;
	font-weight: 700;
}

.tutorhelper-student-dashboard__empty {
	padding: 22px;
	border: 1px dashed #d8dfe2;
	border-radius: 12px;
	background: #fafcfc;
	text-align: center;
}

.tutorhelper-student-dashboard__empty p {
	margin: 0;
	color: var(--tutorhelper-dashboard-muted);
}

.tutorhelper-student-dashboard-notice {
	padding: 14px 17px;
	border: 1px solid #d8dfe2;
	border-radius: 10px;
	background: #f6f8f9;
}

.tutorhelper-student-dashboard-notice--warning {
	border-color: #e6c988;
	background: #fff2ce;
	color: #71500d;
}

@media (max-width: 760px) {
	.tutorhelper-student-dashboard__cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.tutorhelper-student-dashboard {
		padding: 18px;
		border-radius: 14px;
	}

	.tutorhelper-student-dashboard__cancel-toggle,
	.tutorhelper-student-dashboard__cancel-confirm,
	.tutorhelper-student-dashboard-notice__action {
		width: 100%;
		justify-content: center;
	}

	.tutorhelper-student-dashboard__section-header,
	.tutorhelper-student-dashboard__card-top {
		align-items: flex-start;
		flex-direction: column;
	}

	.tutorhelper-student-dashboard__details {
		grid-template-columns: 1fr;
	}
}

.tutorhelper-student-dashboard__joining-details {
	margin: 0 17px 17px;
	padding: 13px 15px;
	border: 1px solid #dbe7ec;
	border-radius: 10px;
	background: #f5fafc;
}

.tutorhelper-student-dashboard__joining-details h5 {
	margin: 0 0 6px;
	color: var(--tutorhelper-dashboard-ink);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tutorhelper-student-dashboard__joining-details p {
	margin: 0 0 8px;
	color: var(--tutorhelper-dashboard-muted);
	line-height: 1.55;
}

.tutorhelper-student-dashboard__joining-details p:last-child {
	margin-bottom: 0;
}

.tutorhelper-student-dashboard__joining-details a {
	color: var(--tutorhelper-dashboard-ink);
	font-weight: 700;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tutorhelper-student-dashboard__joining-details a:hover {
	text-decoration-thickness: 2px;
}

.tutorhelper-student-dashboard__section--past {
	background: #fbfcfc;
}

.tutorhelper-student-dashboard__card--past {
	box-shadow: none;
}

.tutorhelper-student-dashboard__card--past
.tutorhelper-student-dashboard__card-header {
	background:
		color-mix(
			in srgb,
			var(
				--tutorhelper-booking-type-colour,
				#328bb8
			) 7%,
			#ffffff
		);
}

.tutorhelper-student-dashboard__card--past
.tutorhelper-student-dashboard__date {
	color: #75858d;
}

.tutorhelper-student-dashboard__cancel-panel {
	margin: 0;
}

.tutorhelper-student-dashboard__cancel-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 8px 13px;
	border: 1px solid #b84d4d;
	border-radius: 8px;
	background: #ffffff;
	color: #9c3434;
	font: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.tutorhelper-student-dashboard__cancel-toggle::-webkit-details-marker {
	display: none;
}

.tutorhelper-student-dashboard__cancel-toggle::marker {
	display: none;
}

.tutorhelper-student-dashboard__cancel-toggle:hover,
.tutorhelper-student-dashboard__cancel-toggle:focus-visible {
	background: #fff3f3;
	border-color: #963737;
	color: #842b2b;
}

.tutorhelper-student-dashboard__cancel-panel[open]
.tutorhelper-student-dashboard__cancel-toggle {
	margin-bottom: 14px;
}

.tutorhelper-student-dashboard__cancellation-form {
	display: grid;
	gap: 8px;
}

.tutorhelper-student-dashboard__cancellation-form label {
	font-weight: 700;
}

.tutorhelper-student-dashboard__cancellation-help {
	margin: 0;
	font-size: 0.84rem;
	color: var(--tutorhelper-dashboard-muted);
}

.tutorhelper-student-dashboard__cancellation-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 76px;
	padding: 9px 10px;
	border: 1px solid #c8d0d4;
	border-radius: 8px;
	font: inherit;
	resize: vertical;
}

.tutorhelper-student-dashboard__cancel-confirm {
	margin-top: 2px;
	padding: 8px 13px;
	border: 1px solid #b84d4d;
	border-radius: 8px;
	background: #ffffff;
	color: #9c3434;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.tutorhelper-student-dashboard__cancel-confirm:hover,
.tutorhelper-student-dashboard__cancel-confirm:focus-visible {
	background: #fff3f3;
	border-color: #963737;
	color: #842b2b;
}

.tutorhelper-student-dashboard__card-actions {
	padding: 0 17px 17px;
}

.tutorhelper-student-dashboard__action-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	padding: 9px 15px;
	border: 1px solid
		var(
			--tutorhelper-dashboard-ink
		);
	border-radius: 8px;
	background:
		var(
			--tutorhelper-dashboard-ink
		);
	color: #ffffff;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.tutorhelper-student-dashboard__action-link:hover,
.tutorhelper-student-dashboard__action-link:focus-visible {
	background: #0d4b68;
	border-color: #0d4b68;
	color: #ffffff;
	text-decoration: none;
}


.tutorhelper-student-dashboard__status--cancelled {
	background: #f1f1f1;
	color: #626a6e;
}

.tutorhelper-student-dashboard__card-status--cancelled {
	opacity: 0.82;
}

.tutorhelper-student-dashboard__cancellation-reason {
	margin: 0 17px 17px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f5f6f6;
}

.tutorhelper-student-dashboard__cancellation-reason h5 {
	margin: 0 0 5px;
}

.tutorhelper-student-dashboard__cancellation-reason p {
	margin: 0;
	overflow-wrap: anywhere;
}

.tutorhelper-student-dashboard__details dd,
.tutorhelper-student-dashboard__cancellation-reason {
	overflow-wrap: anywhere;
}

.tutorhelper-student-dashboard-notice__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #133949;
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.tutorhelper-student-dashboard-notice__action:hover,
.tutorhelper-student-dashboard-notice__action:focus {
	color: #ffffff;
	text-decoration: none;
	opacity: 0.9;
}

