@charset "utf-8";

h1, h2, h3 {
	text-align: center;
}

body {
	font-family: Georgia, serif;
	line-height: 2.0;
	margin: 0;
	padding: 0;
	background: #f9f9f9;
	color: #333;
}

header {
	background: #2c3e50;
	color: #fff;
	padding: 0.5rem 1rem;
	text-align: center;
}
header h1 {
	margin: 0;
	font-size: 2rem;
	line-height: 2.0;
}
header h4 {
	margin: 0.15rem 0 0;
	line-height: 2.0;
	font-weight: normal;
}
header p {
	margin: 0.15rem 0 0;
	line-height: 2.0;
	font-style: italic;
}

section {
	padding: 2rem 1rem;
	margin: auto;
}

/* ============================================================
   TAB STRIP
   ============================================================ */
.tab-strip {
	display: flex;
	justify-content: center;
	gap: 2px;
	background: #1a252f;
	padding: 0 1rem;
	border-bottom: 3px solid #e67e22;
}

.tab-btn {
	background: #5d7589;
	color: #e8edf0;
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	margin-bottom: -3px;   /* sits on top of strip border-bottom */
	padding: 0.75rem 1.5rem;
	font-family: Georgia, serif;
	font-size: 15px;
	cursor: pointer;
	width: auto;           /* override the global button width:100px */
	transition: color 0.15s, border-bottom-color 0.15s;
}

.tab-btn:hover {
	color: #fff;
	border-bottom-color: #e67e22;
}

.tab-btn.tab-active {
	color: #fff;
	font-weight: bold;
	border-bottom: 3px solid #e67e22;
	background: #7b93a7;
}

table {
	margin-left: auto;
	margin-right: auto;
}

/* FIX: Added .worksheet class to make Worksheet A/B/C half-width and centered */
.worksheet {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

th {
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	border-width: 1;
	font-size: 18px;
	text-align: left;
	line-height: 1.1;
	padding-top: 1px;
	padding-bottom: 1px;
}

td {
	font-family: "Times New Roman", Times, serif;
	font-weight: normal;
	border-width: 0;
	font-size: 18px;
	text-align: right;
	line-height: 1.1;
	padding-top: 1px;
	padding-bottom: 1px;
}

select, input[type=text] {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	text-align: right;
	font-weight: bold;
}

input[type=checkbox] {
	font-size: 12px;
	text-align: left;
	font-weight: bold;
}

button, input[type=button] {
	border-radius: 6px;
}

button {
	width: 100px;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	text-align: center;
}

.RadioButtons {
	font-family: "Times New Roman", Times, serif;
	text-align: left;
	font-weight: bold;
	padding: 3px;
}

.FatherMotherStyle {
	font-family: "Times New Roman", Times, serif;
	text-align: right;
	font-weight: bold;
	text-decoration: underline;
}

/* FIX: was using position:relative and inset:0px 500px 0px which pushed the
   table 500px right and broke layout on screens narrower than ~1000px.
   Replaced with margin:auto for proper centering. */
.PaymentsTable {
	font-family: "Times New Roman", Times, serif;
	margin-left: auto;
    margin-right: auto;
}

.PaymentsHeaders {
	font-family: "Times New Roman", Times, serif;
	text-decoration: underline;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
}

.PaymentsLabels {
	font-family: "Times New Roman", Times, serif;
	font-size: 17px;
	text-align: right;
	padding: 0px;
}

.PaymentsBoxes {
	text-align: center;
	font-size: 17px;
}

.Overnights {
	font-size: 10px;
	text-align: center;
	font-weight: normal;
	width: 50px;
}

.center {
	margin: auto;
	width: 100%;
	border: 2px solid;
	padding: 10px;
}

footer {
	text-align: center;
	background: #2c3e50;
	color: white;
	padding: 1rem;
	font-size: 0.9rem;
}

@media print {
	/* FIX: was ".NonPrintable h1, h2, h3" which scoped h1 inside .NonPrintable
	   but left h2 and h3 as global selectors, hiding ALL headings when printing.
	   Corrected to comma-separated list so each selector is independent. */
	.NonPrintable, h1, h2, h3, button, input[type=button] { display: none; }
	@page { margin: 0; } /* eliminates browser-added headers and footers */
	body  { margin: 1.6cm; } /* adds margins back */
	#tbodyC { font-size: 5px; }
}

/* ============================================================
   MOBILE / NARROW SCREENS (≤ 768px)
   Restructures the Input tab so labels, Father input, and Mother
   input stack for readability. Worksheet tabs get horizontal
   scroll since their table-based print layout doesn't reflow.
   ============================================================ */
@media (max-width: 768px) {

	/* Global: roomier tap targets, no accidental horizontal scroll on body */
	body { line-height: 1.5; }
	section { padding: 1rem 0.5rem; }

	/* Header */
	header h1 { font-size: 1.4rem; line-height: 1.3; }
	header h4 { font-size: 0.95rem; line-height: 1.3; }

	/* Tab strip: allow horizontal scroll if too many tabs to fit */
	.tab-strip {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		padding: 0;
	}
	.tab-btn {
		padding: 0.6rem 0.9rem;
		font-size: 14px;
		flex: 0 0 auto;
	}

	/* --- INPUT TAB LAYOUT --- */
	/* The Father/Mother column header row is no longer useful when cells
	   stack — hide it on mobile (we add per-cell Father/Mother labels
	   via data-lbl attributes further down). */
	#Input > tbody > tr:nth-child(2) { display: none; }

	/* Turn each row into a flex container that wraps.
	   NOTE: !important is required because openTab() / showElement() in
	   OnlineCSCalculatorFunctions.js sets inline style="display:table" on
	   #Input whenever the tab is shown (including after every Calculate).
	   Without !important, that inline style would silently override the
	   mobile stacked layout and make the form disappear on narrow screens. */
	#Input, #Input > tbody, #Input > tbody > tr {
		display: block !important;
		width: 100%;
	}
	#Input > tbody > tr {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		padding: 6px 4px;
		border-bottom: 1px solid #ddd;
	}
	#Input > tbody > tr:last-child { border-bottom: none; }

	/* Cells: the label (<th scope="row">) takes full width as a heading;
	   remaining tds flow in a row below it. */
	#Input > tbody > tr > th,
	#Input > tbody > tr > td {
		display: block;
		text-align: left;
		padding: 2px 4px;
		border: none;
	}
	#Input > tbody > tr > th[scope="row"] {
		flex: 1 1 100%;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 4px;
	}
	#Input > tbody > tr > td {
		flex: 0 1 auto;
	}

	/* Input fields: make them finger-friendly and fit the narrow column */
	#Input input[type="text"],
	#Input select {
		font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
		width: 5.5em;
		padding: 6px 8px;
		box-sizing: border-box;
	}

	/* Case Name row (full-width input) */
	#Input #txtCaseName {
		width: 100%;
		font-size: 14px;
	}

	/* Father and Mother inputs: show a tiny "F:" / "M:" hint above each one.
	   This replaces the column header row we hid above. */
	#Input > tbody > tr > td:has(input[id^="txtF"]):not(:has([type=hidden]))::before,
	#Input > tbody > tr > td:has(select[id^="txtF"])::before {
		content: "Father";
		display: block;
		font-size: 11px;
		color: #666;
		font-weight: bold;
		margin-bottom: 2px;
	}
	#Input > tbody > tr > td:has(input[id^="txtM"]):not(:has([type=hidden]))::before,
	#Input > tbody > tr > td:has(select[id^="txtM"])::before {
		content: "Mother";
		display: block;
		font-size: 11px;
		color: #666;
		font-weight: bold;
		margin-bottom: 2px;
		margin-left: 8px;
	}

	/* Hide purely-decorative empty <td>&nbsp;</td> filler cells */
	#Input > tbody > tr > td:empty { display: none; }

	/* Space Father / Mother inputs horizontally */
	#Input > tbody > tr > td + td { margin-left: 8px; }

	/* Buttons: un-stack from their per-cell positions and make them
	   flow as a horizontal centered strip inside each row that contains
	   a button. */
	#Input button,
	#Input input[type="button"] {
		min-height: 44px;
		padding: 10px 14px;
		font-size: 14px;
	}
	/* Calculate button: override its desktop 80px-tall rowspan styling */
	#Input #btnCalculate {
		height: auto !important;
		width: 100% !important;
	}
	#Input #btnPrintAll,
	#Input #btnOpen,
	#Input #btnSave,
	#Input #btnClear {
		height: auto !important;
		width: 100% !important;
	}

	/* Result line: shrink so it fits on one line where possible */
	#result {
		font-size: 18px !important;
		padding: 6px 0 !important;
	}
	.PaymentsHeaders, .PaymentsLabels, .PaymentsBoxes { font-size: 14px !important; }

	/* Prepared By row: let it wrap nicely */
	#txtPreparedBy { width: 100% !important; }

	/* --- WORKSHEET TABS: horizontal scroll wrapper --- */
	/* Worksheet A/B/C are print-style tables; let them scroll sideways
	   rather than squishing them illegibly on a phone. */
	#WorksheetA, #WorksheetB, #WorksheetC {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Shrink the worksheet font a touch on mobile so more fits per page */
	#WorksheetA th, #WorksheetA td,
	#WorksheetB th, #WorksheetB td,
	#WorksheetC th, #WorksheetC td {
		font-size: 14px;
	}

	/* Footer */
	footer { font-size: 0.8rem; padding: 0.6rem; }
}