/* =============================================================================
   ems-print.css — compact, consistent printing for every admin / portal screen
   -----------------------------------------------------------------------------
   Two problems this solves, app-wide, with no per-view edits:

   1. ORIENTATION WAS LOCKED. Ten report views hard-coded `@page { size: A4
      landscape }` so their wide grids would not be clipped. Chrome (and Edge)
      remove the Layout — Portrait / Landscape — control from the print dialog
      the moment a page declares `@page size`, and pin the paper size too. The
      client could no longer choose. The fix is not to drop the rule (portrait
      really does clip a 17-column grid) but to move the choice into the app:
      see ems-print.js, which writes a later `@page` rule from the user's pick.

   2. PRINTS WERE NOT COMPACT. Most screens have no print CSS at all, so they
      print with the sidebar, the navbar, the search form, the DataTables
      pager, card shadows, and a `.table-responsive` that CLIPS the right-hand
      columns off the paper entirely. Everything below is the compact baseline.

   Loaded on the admin, accountant, librarian, teacher, parent and student
   layouts. NOT loaded on `layout/blank`, which is where the designed one-page
   documents live (fee vouchers, result cards, certificates, admission forms) —
   those already have typography tuned to the page and must not be touched.

   Escape hatch: put `ems-print-raw` on <body> and ems-print.js disables this
   sheet for that screen.

   Deliberately NOT over-specified. Selectors stay at the same specificity a
   view's own `<style media="print">` block uses, and this file loads from
   <head> while view styles sit in <body> — so a view that has already tuned
   its own print layout still wins on any rule it sets.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Screen: the Print Options dialog (built by ems-print.js)
   Vanilla CSS + vanilla JS on purpose — this has to work identically on the
   Bootstrap 4 modern stack and the Bootstrap 3 AdminLTE legacy stack, so it
   cannot lean on either one's modal component.
   -------------------------------------------------------------------------- */

.emsp-backdrop {
	position: fixed;
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(15, 23, 42, .45);
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.emsp-dialog {
	background: #fff;
	color: #1e293b;
	width: 100%;
	max-width: 460px;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 10px;
	box-shadow: 0 20px 45px rgba(15, 23, 42, .28);
	font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.45;
}

.emsp-head {
	padding: 14px 18px 10px;
	border-bottom: 1px solid #e2e8f0;
}

.emsp-head h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #0f172a;
}

.emsp-head p {
	margin: 2px 0 0;
	font-size: 11.5px;
	color: #64748b;
}

.emsp-body {
	padding: 14px 18px 4px;
}

.emsp-row {
	margin-bottom: 14px;
}

.emsp-row > label {
	display: block;
	margin: 0 0 5px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #64748b;
}

/* Segmented control — one row of mutually exclusive choices. */
.emsp-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.emsp-seg button {
	flex: 1 1 0;
	min-width: 62px;
	padding: 7px 10px;
	font-size: 12px;
	font-weight: 500;
	color: #334155;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}

.emsp-seg button:hover {
	background: #f1f5f9;
}

.emsp-seg button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 1px;
}

.emsp-seg button.is-on {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.emsp-check {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #475569;
	margin: 0 0 4px;
	cursor: pointer;
}

.emsp-check input {
	margin: 0;
}

.emsp-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px 16px;
	border-top: 1px solid #e2e8f0;
	margin-top: 6px;
}

.emsp-foot button {
	padding: 8px 18px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid transparent;
}

.emsp-cancel {
	background: #fff;
	border-color: #cbd5e1 !important;
	color: #475569;
}

.emsp-cancel:hover {
	background: #f8fafc;
}

.emsp-ok {
	background: #2563eb;
	color: #fff;
}

.emsp-ok:hover {
	background: #1d4ed8;
}

/* Orientation toggle welded onto each print button. BOTH words are always visible —
   a single button showing only the current orientation was twice reported as "the
   portrait option is not showing", because when it already said Portrait there was
   nothing that looked like a choice. */
.emsp-orient {
	display: inline-flex;
	align-items: stretch;
	margin-left: 6px;
	vertical-align: middle;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.emsp-orient > button {
	border: 0;
	border-left: 1px solid #e2e8f0;
	background: #fff;
	color: #64748b;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 10px;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.emsp-orient > button:first-child {
	border-left: 0;
}

.emsp-orient > button:hover {
	background: #f1f5f9;
	color: #0f172a;
}

.emsp-orient .emsp-o.is-on {
	background: #2563eb;
	color: #fff;
}

.emsp-orient .emsp-o.is-on:hover {
	background: #1d4ed8;
	color: #fff;
}

.emsp-orient .emsp-more {
	padding: 6px 8px;
	color: #94a3b8;
}

.emsp-orient > button:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: -2px;
}


/* -----------------------------------------------------------------------------
   2. Print: the compact baseline
   -----------------------------------------------------------------------------
   Everything here is gated on `.ems-print-compact`, which ems-print.js puts on
   <body> ONLY when the view has no print CSS of its own. A view that has already
   tuned its printing — a result card, a fee voucher, a report with a hand-written
   print block — never gets the class and is left entirely alone.

   The gate is a body class rather than `link.disabled` because this same file
   also styles the Print Options dialog, which has to keep working on exactly
   those opted-out screens: they are the ones whose `@page` rule took the
   browser's own Layout control away in the first place.
   -------------------------------------------------------------------------- */

@media print {

	/* --- The dialog and its trigger are never paper. Unconditional. ------- */
	.emsp-backdrop, .emsp-orient {
		display: none !important;
	}

	/* --- Undo Bootstrap 4's print block. UNGATED, every page. -------------
	   Bootstrap ships `body { min-width: 992px !important }` and the same on
	   .container inside @media print, alongside the `@page { size: a3 }` that
	   ems-print.js strips. The min-width forces a desktop-width canvas onto the
	   sheet, so portrait output is squeezed to a third of its size and looks
	   "still landscape" even once the page size is free. It is !important, so
	   this has to be too. Nothing else in Bootstrap's print block is disturbed. */
	body, .container {
		min-width: 0 !important;
	}

	/* --- App chrome. -----------------------------------------------------
	   AdminLTE (.main-header/.main-sidebar/.main-footer), the modern stack
	   (.navbar/.page-header/.app-footer) and both breadcrumb bars. */
	.ems-print-compact .main-header,
	.ems-print-compact .main-sidebar,
	.ems-print-compact .left-side,
	.ems-print-compact .main-footer,
	.ems-print-compact .navbar,
	.ems-print-compact .navbar-top,
	.ems-print-compact .page-header,
	.ems-print-compact .app-footer,
	.ems-print-compact .footer,
	.ems-print-compact .breadcrumb,
	.ems-print-compact .breadcrumb-line,
	.ems-print-compact .sidebar,
	.ems-print-compact .sidebar-mobile-toggler,
	.ems-print-compact .control-sidebar,
	.ems-print-compact .control-sidebar-bg,
	.ems-print-compact .no-print,
	.ems-print-compact .d-print-none,
	.ems-print-compact .hidden-print {
		display: none !important;
	}

	/* AdminLTE offsets the content by the sidebar width; on paper that is
	   a 230px empty gutter down the left of every page. */
	.ems-print-compact .content-wrapper,
	.ems-print-compact .right-side,
	.ems-print-compact .main-content,
	.ems-print-compact .page-content,
	.ems-print-compact .content {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		min-height: 0 !important;
	}

	body.ems-print-compact {
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		font-size: 10px !important;
	}

	/* --- Controls that only make sense on screen. ------------------------ */
	.ems-print-compact .dt-buttons,
	.ems-print-compact .dataTables_filter,
	.ems-print-compact .dataTables_length,
	.ems-print-compact .dataTables_paginate,
	.ems-print-compact .dataTables_info,
	.ems-print-compact .dataTables_processing,
	.ems-print-compact .select2-container,
	.ems-print-compact .pagination,
	.ems-print-compact .pager,
	.ems-print-compact .btn,
	.ems-print-compact .btn-group,
	.ems-print-compact .buttons,
	.ems-print-compact .header-elements,
	.ems-print-compact .box-tools,
	.ems-print-compact .card-tools,
	.ems-print-compact .nav-tabs,
	.ems-print-compact .nav-pills,
	.ems-print-compact .ui-datepicker,
	.ems-print-compact .tooltip,
	.ems-print-compact .popover {
		display: none !important;
	}

	/* DataTables FixedHeader floats a position:fixed clone of the header
	   row; on paper it prints once per page ON TOP of the real content. */
	.ems-print-compact .dtfh-floatingparenthead,
	.ems-print-compact .dtfh-floatingparentfoot,
	.ems-print-compact .fixedHeader-floating,
	.ems-print-compact .fixedHeader-locked,
	.ems-print-compact .dataTables_scrollHead,
	.ems-print-compact .dataTables_scrollFoot {
		display: none !important;
	}

	/* --- The clipping fix. -----------------------------------------------
	   .table-responsive is `overflow:auto` — on screen you scroll sideways,
	   on paper the overflow is simply cut off and the right-hand columns
	   vanish with no indication anything is missing. */
	.ems-print-compact .table-responsive,
	.ems-print-compact .dataTables_wrapper,
	.ems-print-compact .dataTables_scroll,
	.ems-print-compact .dataTables_scrollBody,
	.ems-print-compact .card-body,
	.ems-print-compact .box-body,
	.ems-print-compact .panel-body,
	.ems-print-compact .tab-content,
	.ems-print-compact .tab-pane {
		overflow: visible !important;
		max-height: none !important;
		width: auto !important;
	}

	/* A tabbed report prints the tab the user is looking at, not all of them. */
	.ems-print-compact .tab-pane:not(.active) {
		display: none !important;
	}

	/* --- Containers lose their screen chrome. ---------------------------- */
	.ems-print-compact .card,
	.ems-print-compact .box,
	.ems-print-compact .panel,
	.ems-print-compact .card-body,
	.ems-print-compact .box-body,
	.ems-print-compact .panel-body,
	.ems-print-compact .card-header,
	.ems-print-compact .box-header,
	.ems-print-compact .panel-heading {
		border: 0 !important;
		box-shadow: none !important;
		background: #fff !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.ems-print-compact .card-title,
	.ems-print-compact .box-title,
	.ems-print-compact .panel-title {
		font-size: 12px !important;
		font-weight: 700 !important;
		margin: 0 0 3px !important;
	}

	/* --- Compact tables. -------------------------------------------------
	   Scoped to Bootstrap/DataTables grids so any bare <table> markup keeps
	   its own type scale. */
	.ems-print-compact table.table,
	.ems-print-compact table.dataTable {
		width: 100% !important;
		border-collapse: collapse !important;
		margin-bottom: 4px !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.ems-print-compact table.table > thead > tr > th,
	.ems-print-compact table.table > tbody > tr > td,
	.ems-print-compact table.table > tbody > tr > th,
	.ems-print-compact table.table > tfoot > tr > th,
	.ems-print-compact table.table > tfoot > tr > td,
	.ems-print-compact table.dataTable th,
	.ems-print-compact table.dataTable td {
		font-size: 8.5px !important;
		padding: 1px 3px !important;
		line-height: 1.2 !important;
		white-space: normal !important;
		word-break: break-word;
	}

	/* Grouped banner rows (class-wise / date-wise reports) stay readable. */
	.ems-print-compact table.table tr.group td,
	.ems-print-compact table.dataTable tr.group td {
		font-size: 9.5px !important;
		font-weight: 700 !important;
	}

	/* Repeat the real header on every sheet, and never split a row across
	   a page break — a half-row at the fold is unreadable on a fee report. */
	.ems-print-compact thead {
		display: table-header-group;
	}

	.ems-print-compact tfoot {
		display: table-footer-group;
	}

	.ems-print-compact tr,
	.ems-print-compact td,
	.ems-print-compact th {
		page-break-inside: avoid;
	}

	/* --- Letterheads. ----------------------------------------------------
	   `.print-only` is the shared print letterhead partial; force it visible
	   in case a late stylesheet resets it, and shrink it so it does not eat
	   a third of the first page. */
	.ems-print-compact .print-only {
		display: block !important;
	}

	.ems-print-compact .print-only h2,
	.ems-print-compact .print-only h3 {
		font-size: 14px !important;
		margin: 0 !important;
	}

	.ems-print-compact .print-only h4,
	.ems-print-compact .print-only h5 {
		font-size: 9.5px !important;
		margin: 1px 0 !important;
	}

	.ems-print-compact .print-only img {
		width: 58px !important;
		height: 58px !important;
	}

	/* --- Odds and ends. -------------------------------------------------- */

	/* Browsers append the raw URL after every link; a report full of
	   `/student/view/1234` suffixes is unreadable. */
	.ems-print-compact a[href]:after {
		content: none !important;
	}

	.ems-print-compact a {
		color: #000 !important;
		text-decoration: none !important;
	}

	/* Charts are canvases sized for the viewport; keep them on the sheet. */
	.ems-print-compact canvas,
	.ems-print-compact .echart,
	.ems-print-compact .chart-container,
	.ems-print-compact svg {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	.ems-print-compact img {
		max-width: 100% !important;
	}
}

/* Column chooser inside the Print Options dialog. A 31-column grid needs a
   scrollable list, not 31 stacked rows pushing the buttons off the screen. */
.emsp-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 10px;
	max-height: 190px;
	overflow-y: auto;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 8px 10px;
	background: #fcfdfe;
}

.emsp-cols label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 500;
	color: #334155;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.emsp-cols input {
	margin: 0;
	flex: none;
}

.emsp-colall {
	margin-top: 6px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #475569;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	cursor: pointer;
}

.emsp-colall:hover {
	background: #f1f5f9;
	color: #0f172a;
}
