/**
 * SMRC Finance (Accountant module) styles - v15.4.0.
 * Additive only: uses the existing portal theme variables so the finance
 * screens inherit light/dark themes without touching any existing CSS.
 */

.smrc-fin-body { display: flex; flex-direction: column; gap: 16px; }

.smrc-fin-readonly {
	background: var(--smrc-warn-bg, #fef9c3);
	color: var(--smrc-warn-fg, #713f12);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
}

.smrc-fin-ledger-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.smrc-fin-ledger-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--smrc-card, #fff);
	border: 1px solid var(--smrc-border, #e5e7eb);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	border-left: 5px solid var(--smrc-primary, #00A1DE);
}
.smrc-fin-ledger-card[data-ledger="fees_feeding"] { border-left-color: #10b981; }
.smrc-fin-ledger-card[data-ledger="capitation"]   { border-left-color: #3b82f6; }

.smrc-fin-ledger-name { font-weight: 700; font-size: 14px; }
.smrc-fin-figure { font-size: 12.5px; color: var(--smrc-muted, #6b7280); }
.smrc-fin-figure.in  { color: #059669; }
.smrc-fin-figure.out { color: #dc2626; }
.smrc-fin-balance { margin-top: 4px; font-weight: 700; font-size: 15px; }

.smrc-fin-filters { flex-wrap: wrap; gap: 8px; align-items: center; }
.smrc-fin-filters select,
.smrc-fin-filters input { min-width: 150px; }

#pay-quick-search-row { position: relative; }
#pay-quick-search { min-width: 100%; font-weight: 600; }
.smrc-fin-quicksearch-results {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
	background: var(--smrc-card, #fff); border: 1px solid var(--smrc-border, #e5e7eb);
	border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
	max-height: 260px; overflow-y: auto; z-index: 20;
}
.smrc-fin-quicksearch-item {
	padding: 9px 14px; cursor: pointer; font-size: 13.5px;
	border-bottom: 1px solid var(--smrc-border, #e5e7eb);
}
.smrc-fin-quicksearch-item:last-child { border-bottom: none; }
.smrc-fin-quicksearch-item:hover { background: var(--smrc-hover, #f3f4f6); }
.smrc-fin-quicksearch-empty { padding: 10px 14px; font-size: 13px; color: var(--smrc-muted, #6b7280); }

.smrc-fin-amount-line { font-size: 14px; font-weight: 700; margin: 2px 0 12px; }
.smrc-fin-mini-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
	margin-bottom: 4px;
}
.smrc-fin-mini-stat {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
	padding: 10px 8px; border-radius: 10px; background: var(--smrc-hover, #f9fafb);
	border: 1px solid var(--smrc-border, #e5e7eb);
}
.smrc-fin-mini-stat span:first-child { font-size: 17px; }
.smrc-fin-mini-stat strong { font-size: 17px; font-weight: 800; }
.smrc-fin-mini-stat.ok strong   { color: #059669; }
.smrc-fin-mini-stat.warn strong { color: #b45309; }
.smrc-fin-mini-stat.bad strong  { color: #dc2626; }
.smrc-fin-perclass-wrap { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.smrc-fin-perclass { min-width: 640px; }

.smrc-fin-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.smrc-fin-tab {
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--smrc-border, #e5e7eb);
	background: var(--smrc-card, #fff);
	color: inherit;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.smrc-fin-tab.active {
	background: var(--smrc-primary, #00A1DE);
	border-color: var(--smrc-primary, #00A1DE);
	color: #fff;
}

.smrc-fin-table { width: 100%; font-size: 13px; }
.smrc-fin-table th.num, .smrc-fin-table td.num { text-align: right; white-space: nowrap; }
.smrc-fin-table tr.smrc-fin-total td { font-weight: 700; border-top: 2px solid var(--smrc-border, #e5e7eb); }
.smrc-fin-table .smrc-fin-amount { width: 108px; text-align: right; }

.smrc-fin-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: capitalize;
	background: #e5e7eb;
	color: #374151;
}
.smrc-fin-tag.income  { background: #d1fae5; color: #065f46; }
.smrc-fin-tag.expense { background: #fee2e2; color: #991b1b; }
.smrc-fin-tag.paid    { background: #d1fae5; color: #065f46; }
.smrc-fin-tag.partial { background: #fef3c7; color: #92400e; }
.smrc-fin-tag.unpaid  { background: #fee2e2; color: #991b1b; }

.smrc-fin-pay-row > td { background: var(--smrc-muted-bg, #f9fafb); }
.smrc-fin-pay-row .smrc-inline-form { flex-wrap: wrap; gap: 8px; align-items: center; }
.smrc-fin-pay-row input, .smrc-fin-pay-row select { min-width: 120px; }

.smrc-fin-pending-row > td { background: #fffaf0; }
.smrc-fin-pay-modal .smrc-modal-box { width: min(420px, 94vw); }
.smrc-fin-pay-modal form { display: flex; flex-direction: column; gap: 12px; }
.smrc-fin-pay-modal input, .smrc-fin-pay-modal select { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; }
.smrc-fin-pay-modal .smrc-modal-actions { display: flex; gap: 10px; }
.smrc-fin-pay-modal .smrc-modal-actions .smrc-btn { flex: 1; }

/*
 * Finance modals (Record Payment, Receipt, and any Cancel/Void form built
 * on the same shared markup) - use the portal's own navy/teal palette
 * instead of the site-wide plain-white .smrc-modal-box, so a modal
 * floating over the Finance module still reads as part of the portal and
 * every field/button keeps clear contrast. Scoped to .smrc-fin-modal only
 * - the rest of the portal's modals are untouched.
 */
body.smrc-app-page .smrc-fin-modal .smrc-modal-box {
	background: linear-gradient(165deg, #eef3fb 0%, #dce7f5 100%);
	border: 1px solid rgba(14, 26, 58, .22);
	border-top: 4px solid #0d9488;
	color: #0b1220;
	width: min(440px, 94vw);
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
body.smrc-app-page .smrc-fin-modal h3 { color: #16265c; margin-top: 0; }
body.smrc-app-page .smrc-fin-modal label { display: block; margin: 10px 0 4px; color: #24324f; font-weight: 650; font-size: 13px; }
body.smrc-app-page .smrc-fin-modal label .req { color: #b91c1c; }
body.smrc-app-page .smrc-fin-modal .smrc-muted { color: #4a5872; }
.smrc-fin-modal form { display: flex; flex-direction: column; }
.smrc-fin-modal input, .smrc-fin-modal select {
	width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px;
	border: 1px solid rgba(14, 26, 58, .25); border-radius: 8px; background: #ffffff; color: #0b1220;
}
.smrc-fin-modal .smrc-fin-refnote { font-size: 12px; margin: 10px 0 0; }
.smrc-fin-modal .smrc-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.smrc-fin-modal .smrc-modal-actions .smrc-btn { flex: 1; }

/* ---------------------------------------------------------------------
 * Professional invoice-style receipt (v16.31.0). Scoped to .smrc-invoice
 * so it renders identically in the on-screen modal, the print window and
 * (as the reference layout for jsPDF) the downloaded PDF. Purely visual:
 * card-based sections with bold colour-coded headers/labels, in the
 * spirit of a formal official receipt document.
 * ------------------------------------------------------------------- */
.smrc-invoice-modal .smrc-modal-box { width: min(640px, 96vw); padding: 0; overflow: hidden; background: #eef4fb; }
.smrc-invoice {
	font-family: Arial, Helvetica, sans-serif; color: #1f2937; background: #eef4fb;
	border: 1px solid #dbe7f3; border-radius: 12px; overflow: hidden;
}
.smrc-invoice-head {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
	padding: 24px 26px 26px; color: #fff;
	background: linear-gradient(120deg, var(--smrc-primary, #00A1DE) 0%, #0d3f8f 100%);
}
.smrc-invoice-school { display: flex; gap: 14px; align-items: center; }
.smrc-invoice-badge {
	width: 54px; height: 54px; border-radius: 50%; background: #fff;
	display: flex; align-items: center; justify-content: center; flex: none;
	box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}
.smrc-invoice-badge svg { width: 28px; height: 28px; }
.smrc-invoice-school h4 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: .3px; }
.smrc-invoice-school p { margin: 3px 0 0; font-size: 11.5px; opacity: .92; }
.smrc-invoice-tag { text-align: right; }
.smrc-invoice-tag .kind { font-size: 11px; letter-spacing: 1.8px; opacity: .9; text-transform: uppercase; font-weight: 600; }
.smrc-invoice-tag .no { font-size: 19px; font-weight: 800; margin-top: 3px; letter-spacing: .3px; }
.smrc-invoice-status {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 4px 12px 4px 8px;
	border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
	background: #16a34a; color: #fff;
}
.smrc-invoice-status .dot {
	width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.28);
	display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.smrc-invoice-status .dot svg { width: 9px; height: 9px; }
.smrc-invoice-status.voided { background: #dc2626; }
.smrc-invoice-body { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 16px; }
.smrc-invoice-card {
	background: #fff; border: 1px solid #d7e5f4; border-radius: 10px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 42, 82, .05);
}
.smrc-invoice-cardhead {
	display: flex; align-items: center; gap: 10px; padding: 10px 16px;
	background: linear-gradient(90deg, var(--smrc-primary, #00A1DE) 0%, #0284c7 100%);
	color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.smrc-invoice-cardhead .ic {
	width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.25);
	display: flex; align-items: center; justify-content: center; flex: none;
}
.smrc-invoice-cardhead .ic svg { width: 13px; height: 13px; }
.smrc-invoice-cardbody { padding: 14px 16px 16px; }
.smrc-invoice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.smrc-invoice-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.smrc-invoice-field .lbl {
	display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
	color: #0284c7; font-weight: 800; margin-bottom: 3px;
}
.smrc-invoice-field .val { display: block; font-size: 15px; font-weight: 800; color: #16233c; }
.smrc-invoice-amounts { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.smrc-invoice-amounts th {
	background: #e3effb; color: #16233c; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
	text-align: left; padding: 9px 12px; font-weight: 800;
}
.smrc-invoice-amounts th:last-child { text-align: right; }
.smrc-invoice-amounts td { padding: 10px 12px; border-top: 1px solid #eef1f5; color: #1f2937; }
.smrc-invoice-amounts td:last-child { text-align: right; font-weight: 700; }
.smrc-invoice-amounts tr.row-alt td { background: #f7fafd; }
.smrc-invoice-amounts tr.paid-now td { background: #e9f9f0; color: #059669; font-weight: 800; }
.smrc-invoice-amounts tr.total td { background: #e3effb; padding-top: 12px; padding-bottom: 12px; font-size: 16px; font-weight: 800; color: #0284c7; }
.smrc-invoice-stampline { display: flex; justify-content: flex-end; margin: 14px 0 0; }
.smrc-invoice-stampimg { max-height: 74px; max-width: 150px; object-fit: contain; }
.smrc-invoice-foot {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
	padding: 4px 20px 22px;
}
.smrc-invoice-foot .meta { text-align: right; }
.smrc-invoice-foot .meta .sigline { width: 150px; height: 1px; background: #c7d4e3; margin: 0 0 6px auto; }
.smrc-invoice-foot .meta p { margin: 1px 0; font-size: 11.5px; color: #5b6b85; }
.smrc-invoice-foot .meta p b { color: #16233c; font-weight: 700; }
.smrc-invoice-stamp {
	display: inline-flex; align-items: center; gap: 7px;
	border: 2.5px solid #16a34a; color: #16a34a; font-weight: 800; font-size: 13px;
	padding: 8px 16px; border-radius: 999px; letter-spacing: .5px; white-space: nowrap; background: #fff;
}
.smrc-invoice-stamp .dot {
	width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff;
	display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.smrc-invoice-stamp .dot svg { width: 10px; height: 10px; }
.smrc-invoice-stamp.voided { border-color: #dc2626; color: #dc2626; }
.smrc-invoice-stamp.voided .dot { background: #dc2626; }
@media print {
	.smrc-invoice-body { gap: 14px; }
}
/* Receipt language picker - lets the Accountant choose EN/FR/RW for this
   receipt before printing/downloading, independent of the app's own UI
   language. Overrides the generic block-label / full-width-select modal
   rules above so it reads as one compact row. */
.smrc-invoice-langpick {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 14px 26px 0; background: #fff;
}
body.smrc-app-page .smrc-invoice-langpick label {
	display: inline-block; margin: 0; font-size: 12.5px; font-weight: 700; color: #4a5872;
}
.smrc-invoice-langpick select {
	width: auto; padding: 6px 10px; font-size: 13px; border-radius: 7px;
	border: 1px solid rgba(14, 26, 58, .25); background: #fff; color: #0b1220;
}
.smrc-fin-receipt-toolbar select#rcpt-lang-bulk {
	width: auto; padding: 6px 10px; font-size: 13px; border-radius: 7px;
	border: 1px solid rgba(14, 26, 58, .25); background: #fff; color: #0b1220;
}

/* Bulk "Download Class Receipts" toolbar above the learner list */
.smrc-fin-receipt-toolbar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: var(--smrc-card, #fff); border: 1px solid var(--smrc-border, #e5e7eb);
	border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.smrc-fin-receipt-toolbar .smrc-muted { font-size: 12.5px; }
.smrc-fin-receipt-toolbar .spacer { flex: 1; }
.smrc-fin-bulk-modal .smrc-modal-box { width: min(420px, 94vw); }
.smrc-fin-bulk-modal label { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13.5px; cursor: pointer; }
.smrc-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.smrc-fin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.smrc-fin-statement { border: 2px solid var(--smrc-primary, #00A1DE); }

@media (max-width: 720px) {
	.smrc-fin-table { display: block; overflow-x: auto; }
	.smrc-fin-filters select, .smrc-fin-filters input { min-width: 100%; }
}

/* =====================================================================
 * v16.41.0 - Accountant dashboard LAYOUT polish (CSS only, no logic).
 *
 * 1. Record Payment pop-up on desktop. .smrc-portal-body has a
 *    backdrop-filter, and any ancestor with a backdrop-filter becomes the
 *    containing block for position:fixed children. The pop-up therefore
 *    centred itself in the (tall) page body instead of the screen, so the
 *    Accountant had to scroll down to find it. Phones already switched the
 *    filter off (smrc-rwanda-theme.css); now desktop does too, so the
 *    overlay is always anchored to the visible screen.
 * 2. Learner search / filter dropdown no longer hides behind the cards
 *    below it (the cards create their own stacking layers).
 * 3. Filters sit on compact rows and the learner list scrolls inside its
 *    own panel with a sticky header, so a desktop screen shows more rows
 *    without scrolling the whole page.
 * ===================================================================== */

/* (1) pop-ups always anchor to the screen */
body.smrc-app-page .smrc-portal-body,
body.smrc-app-page .smrc-portal-main {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transform: none;
	filter: none;
}
body.smrc-app-page .smrc-modal.smrc-fin-modal {
	position: fixed; inset: 0; z-index: 10000;
	align-items: center; justify-content: center;
	padding: 12px; overflow-y: auto;
}
body.smrc-app-page .smrc-fin-modal .smrc-modal-box {
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
}

/* (2) search dropdown floats above every card */
#pay-quick-search-row { position: relative; z-index: 40; }
.smrc-fin-quicksearch-results { z-index: 60; }
.smrc-fin-wizard { position: relative; z-index: 30; }
#pay-search-row { position: relative; z-index: 20; }
/* Dropdown must not be clipped by the scrolling main area */
body.smrc-app-page .smrc-portal-main { overflow-y: visible; }

/* (3) compact filters + roomier results on desktop */
@media (min-width: 783px) {
	#pay-quick-search-row,
	.smrc-fin-wizard,
	#pay-search-row { margin-bottom: 10px; padding: 12px 16px; }
	.smrc-fin-wizard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
	.smrc-fin-wizard select { min-width: 0; width: 100%; }
	#pay-search-row { display: flex; }
	#pay-search-row input { flex: 1 1 auto; min-width: 0; }
	body.smrc-app-page .smrc-portal-main { padding-top: 18px; padding-bottom: 18px; }

	#pay-learner-area {
		max-height: calc(100vh - 340px);
		min-height: 260px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 10px;
	}
	#pay-learner-area .smrc-fin-table { display: table; }
	#pay-learner-area .smrc-fin-table th {
		position: sticky; top: 0; z-index: 2;
		background: #e8eef8;
	}
	#pay-learner-area .smrc-fin-receipt-toolbar {
		position: sticky; top: 0; z-index: 3;
	}
}

/* Phones: tidy stacked filters, same layering, table scrolls sideways */
@media (max-width: 782px) {
	#pay-quick-search-row,
	.smrc-fin-wizard,
	#pay-search-row { margin-bottom: 10px; padding: 12px; }
	.smrc-fin-wizard { display: flex; flex-direction: column; gap: 8px; }
	#pay-learner-area { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* v16.43.0: receipt already downloaded badge */
.smrc-fin-rcpt-done { background: #e8eefc; color: #2b4a9a; margin-left: 6px; font-size: 11px; }

/*
 * Quick-search "Record Payment" pop-up. Its Record Payment form is a
 * position:fixed modal nested inside this box. A backdrop-filter/transform on
 * an ancestor makes the browser treat that ancestor as the fixed element's
 * container, so the form was clipped to this box instead of the screen.
 * Removing the filter here (the app-page box background is already solid, so
 * the blur is not visible) lets the nested form centre on the screen like it
 * does when recording from the class filter. Scoped to this one box only.
 */
body.smrc-app-page .smrc-fin-modal .smrc-modal-box.smrc-fin-quickpay-box {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transform: none;
	filter: none;
}

/*
 * Quick-search pop-up, step 1 ("Activities - <learner>"). Two problems on
 * desktop:
 *  1. It inherited the 440px width meant for the small Record Payment form,
 *     so the 7-column activities table was squeezed, spilled out of its card
 *     and cut off the Status and Record Payment columns.
 *  2. The box is content-box sized, so its max-height ignored its own
 *     padding and it ended up taller than the screen (top / bottom cut off).
 * Fix: give THIS pop-up room, size it border-box so it always fits the
 * screen, and tighten row spacing so a typical learner needs no scrolling.
 * Colours (portal gradient, teal top border) come from existing rules and
 * are not touched. Desktop widths only; phones keep their current layout.
 * Scoped to .smrc-fin-quickpay-box - the payment form and every other
 * pop-up keep their own sizing.
 */
@media (min-width: 769px) {
	body.smrc-app-page .smrc-fin-modal .smrc-modal-box.smrc-fin-quickpay-box {
		box-sizing: border-box;
		width: min(980px, 96vw);
		padding: 14px 22px;
	}
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-table th,
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-table td { padding: 6px 12px; }
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-table td .smrc-row-actions { flex-wrap: nowrap; }
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-table .smrc-btn,
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-tag { white-space: nowrap; }
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-statement { padding: 14px 18px; }
	body.smrc-app-page .smrc-fin-quickpay-popup .smrc-fin-statement h4 { margin: 8px 0 6px !important; }
}