/* ===============================
	Vars
=================================*/
:root{
	--page-w: 210mm;            /* A4 width */
	--accent: #008080;          /* footer line color */
	--text: #000;
	--bg: #fff;
	--table-border: #ccc;
	--table-zebra: #fafafa;
	--thead-bg: #f2f2f2;
	
	/* footer sizing */
	--footer-width: 200mm;      /* set 100% for full width */
	--footer-pad-top: 3mm;      /* space below the green line */
	--footer-pad-x: 14mm;
	--footer-pad-bot: 3.5mm;
}

/* ===============================
	Base (screen)
=================================*/
* { box-sizing: border-box; }
html, body { height: 100%; }

body{
	font-family: Arial, sans-serif;
	color: var(--text);
	background: var(--bg);
	width: var(--page-w);
	margin: 20px auto;              /* screen margins */
}

h2, h3 { margin: 20px 0 10px; }

/* ===============================
	Generic Table
=================================*/
table{
	border-collapse: collapse;
	width: auto;
	margin-bottom: 20px;
	font-size: 14px;
}
th, td{
	border: 1px solid var(--table-border);
	padding: 5px 20px;
	text-align: center;
}
th{ background: var(--thead-bg); }

/* Controls */
.controls{ margin-bottom: 20px; }
input[type="number"], button{ padding: 5px; font-size: 14px; }

/* ===============================
	Stage Results (compact)
=================================*/
.stage-results{
	border-collapse: collapse;
	table-layout: auto;
	width: auto;
	max-width: 100%;
	font-size: 9px;
	margin-bottom: 20px;
}
.stage-results th,
.stage-results td{
	border: 1px solid var(--table-border);
	padding: 4px 2px;
	text-align: center;
	white-space: nowrap;
}
.stage-results th{ background: var(--thead-bg); }
.stage-results tr:nth-child(even){ background: var(--table-zebra); }

/* ===============================
	Watermark (optional)
=================================*/
.watermark{
	display: block;
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) rotate(-30deg);
	width: 100%;
	text-align: center;
	font: 700 72px/1 Arial, sans-serif;
	color: rgba(0,0,0,0.08);
	z-index: 0;
	pointer-events: none;
}
.wm-img{
	display: block;
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	opacity: .10;
	width: 700px;
	z-index: 0;
	pointer-events: none;
	filter: grayscale(100%);
}

/* ===============================
	Graphs / iframes
=================================*/
.graphs-wrap{ max-width: 980px; margin: 0 auto; }
.graph-block{ margin: 20px 0 40px; }
.stage-title{ text-align: center; margin: 0 0 10px; font-size: 20px; }
.graph-frame{ width: 100%; height: 340px; border: 0; }
.map-frame{ width: 100%; height: 800px; border: 0; }

/* Try to keep graph blocks intact at page breaks */
.graph-block{ break-inside: avoid; page-break-inside: avoid; }
.graph-block .stage-title{ break-after: avoid; page-break-after: avoid; }
.graph-block .graph-frame{ display: block; break-before: avoid; page-break-before: avoid; }

/* ===============================
	Utilities
=================================*/
.page-break{ page-break-before: always; break-before: page; }
.no-print{}

/* ===============================
	Single footer at end (screen + print)
	Place this block once at the end of HTML.
	If wrapped in .last-page with a .spacer, it will hug the bottom
	of the last printed page when there is spare space.
=================================*/
.print-footer{
	width: var(--footer-width);
	margin: 12mm auto 0;   /* gap above + centered */
	padding: var(--footer-pad-top) var(--footer-pad-x) var(--footer-pad-bot);
	border-top: 3px solid var(--accent);
	background: #fff;
	
	display: flex;
	justify-content: space-between;   /* RACETIMING left / ΑΟΘ right */
	align-items: flex-start;
	font: 11px/1.25 Arial, sans-serif;
	
	break-inside: avoid;
	page-break-inside: avoid;
}
.print-footer .col{ max-width: 48%; }
.print-footer .col-left{ text-align: left; }
.print-footer .col-right{ text-align: right; }
.print-footer h4{ margin: 0 0 2mm; font-weight: 700; font-size: 11.5px; }
.print-footer p{ margin: 0; }
.print-footer a{ text-decoration: underline; color: #00f; }

/* ===============================
	Print adjustments
=================================*/
@media print{
	@page{
		size: A4;
		margin: 10mm 12mm 12mm 12mm;  /* normal margins; no reserved footer */
	}
	
	body{ margin: 0; padding: 0; }
	.no-print{ display: none !important; }
	.stage-results{ font-size: 11px; }
	.graph-frame{ height: 300px; min-height: 340px; }
	.map-frame{ height: 800px; min-height: 800px; }
	
	/* LAST PAGE WRAPPER:
		Wrap your final content + (optional) divider + .spacer + .print-footer
	inside .last-page so the footer can sit at the bottom if there’s space. */
	.last-page{
		display: flex;
		flex-direction: column;
		/* at least one printed page tall */
	}
	
	/* Important: prevent content from shrinking in flex */
	.last-page > *{ flex: 0 0 auto; }
	
	/* Only spacer may grow to push footer down */
	.last-page .spacer{ flex: 1 0 auto; }
	
	/* Ensure graphs inside last-page keep size */
	.last-page .graph-block,
	.last-page .graph-frame{ flex: 0 0 auto; }
	
	/* If space exists, footer is pushed to the bottom */
	.last-page .print-footer{ margin-top: auto; }
	
	
	
    /* Allow multiple graphs per page when printing */
	.graph-block{
		break-inside: auto !important;
		page-break-inside: auto !important;
	}
	
	.graph-block .stage-title{
		break-before: auto !important;
		page-break-before: auto !important;
		break-after: auto !important;
		page-break-after: auto !important;
	}
	
	.graph-block .graph-frame{
		break-before: auto !important;
		page-break-before: auto !important;
	}
}
@media print {
    .graph-block {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
        -moz-column-break-inside: avoid !important;
        display: block;
	}
}