/* Noor Academy — Parent Portal front-end styles */

.noor-portal {
	max-width: 960px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	color: #1d2327;
	line-height: 1.6;
}

.noor-portal * {
	box-sizing: border-box;
}

/* Header */
.noor-portal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	background: linear-gradient(135deg, #1d5c2e 0%, #2a7d3f 100%);
	color: #fff;
	padding: 28px 32px;
	border-radius: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.noor-portal__header h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
}

.noor-portal__welcome {
	margin: 4px 0 0;
	font-size: 14px;
	opacity: 0.9;
}

.noor-portal__balance {
	text-align: right;
	background: rgba(255, 255, 255, 0.15);
	padding: 12px 20px;
	border-radius: 8px;
	min-width: 200px;
}

.noor-portal__balance-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.9;
}

.noor-portal__balance-amount {
	display: block;
	font-size: 28px;
	font-weight: 700;
	margin-top: 2px;
}

.noor-portal__balance.is-paid .noor-portal__balance-amount {
	color: #b6f5c8;
}

.noor-portal__balance.is-due .noor-portal__balance-amount {
	color: #ffd966;
}

.noor-portal__credit-note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #b6f5c8;
}

.noor-portal__credit-summary {
	font-size: 15px;
	color: #1d5c2e;
	background: #f0f7f1;
	border: 1px solid #cde5d2;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0;
}

/* Pay bar */
.noor-portal__pay-bar {
	text-align: center;
	margin-bottom: 24px;
}

.noor-portal__pay-button {
	display: inline-block;
	background: #1d5c2e;
	color: #fff !important;
	padding: 12px 28px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
}

.noor-portal__pay-button:hover {
	background: #164623;
}

/* Sections */
.noor-portal__section {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.noor-portal__section h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 600;
	color: #1d5c2e;
	padding-bottom: 10px;
	border-bottom: 2px solid #f0f6f1;
}

/* Student cards */
.noor-portal__students {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.noor-portal__student-card {
	background: #f8faf9;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}

.noor-portal__student-name {
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
}

.noor-portal__student-id {
	font-size: 12px;
	color: #646970;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.3px;
	margin-top: 2px;
}

.noor-portal__student-grade {
	font-size: 13px;
	color: #646970;
	margin-top: 2px;
}

.noor-portal__student-status {
	display: inline-block;
	margin-top: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	background: #f0f6f1;
	color: #1d5c2e;
}

.noor-portal__student-status--inactive,
.noor-portal__student-status--withdrawn {
	background: #fdecec;
	color: #b32d2e;
}

.noor-portal__student-balance {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 700;
}

.noor-portal__student-balance.is-paid { color: #1d5c2e; }
.noor-portal__student-balance.is-due { color: #b32d2e; }

/* Tables */
.noor-portal__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.noor-portal__table th {
	text-align: left;
	padding: 10px 12px;
	background: #f8faf9;
	border-bottom: 2px solid #e2e4e7;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #646970;
}

.noor-portal__table td {
	padding: 12px;
	border-bottom: 1px solid #f0f0f1;
}

.noor-portal__table tr:hover td {
	background: #fafbfc;
}

.noor-portal__table .is-due { color: #b32d2e; font-weight: 600; }
.noor-portal__table .is-paid { color: #1d5c2e; font-weight: 600; }

.noor-portal__status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.noor-portal__status--noor-draft { background: #f0f0f1; color: #646970; }
.noor-portal__status--noor-sent { background: #e8f0fe; color: #1e4fd6; }
.noor-portal__status--noor-partial { background: #fef8e8; color: #b26a00; }
.noor-portal__status--noor-paid { background: #f0f6f1; color: #1d5c2e; }
.noor-portal__status--noor-overdue { background: #fdecec; color: #b32d2e; }
.noor-portal__status--noor-void { background: #f0f0f1; color: #646970; }

.noor-portal__link {
	color: #1d5c2e;
	text-decoration: none;
	font-weight: 500;
}

.noor-portal__link:hover {
	text-decoration: underline;
}

.noor-portal__empty {
	color: #646970;
	font-style: italic;
}

.noor-portal__footer {
	text-align: center;
	margin-top: 24px;
	padding: 16px;
}

.noor-portal__footer a {
	color: #646970;
	font-size: 13px;
}

/* Login screen */
.noor-portal--login {
	max-width: 420px;
	margin: 60px auto;
}

.noor-portal__card {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 32px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.noor-portal__card h2 {
	margin: 0 0 12px;
	color: #1d5c2e;
}

.noor-portal__card .login-username label,
.noor-portal__card .login-password label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.noor-portal__card .login-username input,
.noor-portal__card .login-password input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #e2e4e7;
	border-radius: 4px;
	margin-bottom: 12px;
}

.noor-portal__card .button-primary {
	width: 100%;
	background: #1d5c2e;
	border-color: #1d5c2e;
	padding: 8px;
	font-weight: 600;
}

/* Invoice view */
.noor-invoice-view__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.noor-invoice {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 40px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.noor-invoice__header {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 3px solid #1d5c2e;
	padding-bottom: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.noor-invoice__school h2 {
	margin: 0;
	color: #1d5c2e;
	font-size: 22px;
}

.noor-invoice__school p {
	margin: 2px 0;
	font-size: 13px;
	color: #646970;
}

.noor-invoice__logo {
	margin-bottom: 8px;
}

.noor-invoice__logo img {
	max-height: 60px;
	width: auto;
}

.noor-invoice__title {
	text-align: right;
}

.noor-invoice__title h1 {
	margin: 0;
	font-size: 32px;
	color: #1d2327;
	letter-spacing: 2px;
}

.noor-invoice__number {
	margin: 4px 0;
	font-size: 16px;
	font-weight: 600;
	color: #1d5c2e;
}

.noor-invoice__meta {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.noor-invoice__meta strong {
	color: #1d2327;
}

.noor-invoice__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.noor-invoice__table th {
	text-align: left;
	padding: 10px 12px;
	background: #f8faf9;
	border-bottom: 2px solid #1d5c2e;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #646970;
}

.noor-invoice__table td {
	padding: 12px;
	border-bottom: 1px solid #f0f0f1;
	font-size: 14px;
	vertical-align: top;
}

.noor-invoice__table small {
	color: #646970;
}

.noor-invoice__totals {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 24px;
}

.noor-invoice__totals table {
	width: 280px;
}

.noor-invoice__totals td {
	padding: 6px 12px;
	font-size: 14px;
}

.noor-invoice__totals td:last-child {
	text-align: right;
	font-weight: 600;
}

.noor-invoice__grand-total td {
	border-top: 2px solid #1d2327;
	font-size: 16px;
	font-weight: 700;
	padding-top: 10px;
}

.noor-invoice__balance td {
	font-size: 16px;
}

.noor-invoice__balance.is-due td:last-child { color: #b32d2e; }
.noor-invoice__balance.is-paid td:last-child { color: #1d5c2e; }

.noor-invoice__pay {
	text-align: center;
	margin: 24px 0;
}

.noor-invoice__bank,
.noor-invoice__notes,
.noor-invoice__terms {
	margin-top: 16px;
	padding: 12px 16px;
	background: #f8faf9;
	border-radius: 6px;
	font-size: 13px;
	color: #3c434a;
}

.noor-invoice__terms {
	font-size: 12px;
	color: #646970;
}

/* Receipt */
.noor-receipt {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 40px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.noor-receipt__header {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 3px solid #1d5c2e;
	padding-bottom: 20px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.noor-receipt__school h2 {
	margin: 0;
	color: #1d5c2e;
}

.noor-receipt__school p {
	margin: 2px 0;
	font-size: 13px;
	color: #646970;
}

.noor-receipt__logo img {
	max-height: 60px;
	width: auto;
}

.noor-receipt__title {
	text-align: right;
}

.noor-receipt__title h1 {
	margin: 0;
	font-size: 24px;
	color: #1d2327;
	letter-spacing: 1px;
}

.noor-receipt__number {
	font-size: 14px;
	font-weight: 600;
	color: #1d5c2e;
}

.noor-receipt__meta {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.noor-receipt__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.noor-receipt__table th {
	text-align: left;
	padding: 10px 12px;
	background: #f8faf9;
	border-bottom: 2px solid #1d5c2e;
	font-size: 12px;
	text-transform: uppercase;
	color: #646970;
}

.noor-receipt__table td {
	padding: 10px 12px;
	border-bottom: 1px solid #f0f0f1;
	font-size: 14px;
}

.noor-receipt__table tfoot td {
	font-weight: 600;
	border-top: 2px solid #1d2327;
}

.noor-receipt__footer {
	text-align: center;
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #e2e4e7;
}

.noor-receipt__footer p {
	margin: 4px 0;
}

.noor-receipt__generated {
	font-size: 12px;
	color: #646970;
}

/* Responsive */
@media (max-width: 640px) {
	.noor-portal__header {
		flex-direction: column;
		text-align: center;
	}
	.noor-portal__balance {
		text-align: center;
	}
	.noor-invoice__header,
	.noor-invoice__meta,
	.noor-receipt__header,
	.noor-receipt__meta {
		flex-direction: column;
	}
	.noor-invoice__title,
	.noor-receipt__title {
		text-align: left;
	}
	.noor-portal__table {
		font-size: 12px;
	}
	.noor-portal__table th,
	.noor-portal__table td {
		padding: 6px 4px;
	}
}

/* Print styles */
@media print {
	body.noor-print-invoice,
	body.noor-print-receipt {
		background: #fff;
	}

	.noor-invoice-view__toolbar,
	.noor-portal__pay-bar,
	.noor-portal__footer,
	.noor-invoice__pay {
		display: none !important;
	}
	.noor-invoice,
	.noor-receipt {
		border: none;
		box-shadow: none;
		padding: 0;
	}
	.noor-portal__section {
		page-break-inside: avoid;
	}

	/*
	 * Print only the invoice (or receipt), never the whole page.
	 *
	 * The portal adds a noor-print-invoice / noor-print-receipt body
	 * class on the single invoice / receipt views.
	 *
	 * Modern engines (support :has()):
	 *   1. Every element that is not the document itself, is not inside
	 *      it and does not contain it (theme navbar, page hero, footer,
	 *      toolbar, pay button) is removed from the layout.
	 *   2. The remaining ancestors of the document are stripped of
	 *      their padding/margins/backgrounds so the document starts at
	 *      the top-left corner of the first page and flows naturally
	 *      across pages.
	 *
	 * Older engines (no :has()):
	 *   Everything is hidden via visibility and the document is
	 *   overlaid at the top of the first page.
	 */
	@supports selector(:has(*)) {
		body.noor-print-invoice *:not(:has(.noor-invoice)):not(.noor-invoice):not(.noor-invoice *),
		body.noor-print-receipt *:not(:has(.noor-receipt)):not(.noor-receipt):not(.noor-receipt *) {
			display: none !important;
		}

		body.noor-print-invoice *:has(.noor-invoice),
		body.noor-print-receipt *:has(.noor-receipt) {
			padding: 0 !important;
			margin: 0 !important;
			border: none !important;
			background: none !important;
			box-shadow: none !important;
			max-width: none !important;
			width: auto !important;
		}
	}

	@supports not selector(:has(*)) {
		body.noor-print-invoice *,
		body.noor-print-receipt * {
			visibility: hidden;
		}

		body.noor-print-invoice .noor-invoice,
		body.noor-print-invoice .noor-invoice *,
		body.noor-print-receipt .noor-receipt,
		body.noor-print-receipt .noor-receipt * {
			visibility: visible;
		}

		body.noor-print-invoice .noor-invoice,
		body.noor-print-receipt .noor-receipt {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}
	}

	body.noor-print-invoice .noor-invoice,
	body.noor-print-receipt .noor-receipt {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}