/*
 * Shared layout for master entry pages: searchable list on the left (top on phones) + sectioned form.
 * First used by refby.php. Everything is scoped to .master-page, so it is safe to include on any page.
 *
 * Skeleton (place inside #detail):
 * <div class="master-page">
 *   <aside class="master-sidebar">                     add "is-collapsed" to start with the list folded on phones
 *     <div class="master-sidebar-head">
 *       <h6 class="master-sidebar-title">Title <span class="badge">count</span></h6>
 *       <div class="master-search"><i class="fa fa-search"></i><input type="search"></div>
 *     </div>
 *     <ul class="master-list">
 *       <li class="master-item" data-value="id">       "active" = selected, "is-match" = highlighted
 *         <span class="master-avatar">AB</span>
 *         <span class="master-item-text"><span class="master-item-name">Name</span><span class="master-item-meta">Detail</span></span>
 *       </li>
 *     </ul>
 *     <div class="master-empty" hidden>No match found</div>
 *   </aside>
 *   <main class="master-main">
 *     <div class="master-titlebar"><div><h5>Title</h5><div class="master-subtitle">Hint</div></div></div>
 *     <form class="master-form">
 *       <section class="card master-section"><div class="card-header"><i class="fa ..."></i> Section</div>
 *         <div class="card-body"><div class="row g-3"> Bootstrap columns with .form-label / .form-control </div></div></section>
 *       <div class="master-actions"> buttons; .erase-link is pushed to the right </div>
 *     </form>
 *   </main>
 * </div>
 * Extras: .master-req (red *), .master-hint, .master-label-tools (label + small link), .master-editor (TinyMCE), .master-photo.
 * The list behaviour (search, keyboard, collapse) lives in the page's own script; see progjs/refby.js.
 */
.master-page {
	--master-border: #e3e7ee;
	--master-input-border: #8f99a8; /* about 3:1 against white: field outlines stay visible */
	--master-input-hover: #5f6b7a;
	--master-muted: #6b7280;
	--master-text: #1f2937;
	--master-field-text: #000;
	--master-field-font: Verdana, Geneva, "DejaVu Sans", sans-serif;
	/* the user's font-size setting (header.php loads page_ss/mm/ll/lx.css) overrides these four */
	--master-field-size: 14.4px;
	--master-label-size: 13px;
	--master-field-h: 34px;
	--master-field-focus: #BDFFFF;
	--master-bg: #f3f5f9;
	--master-accent: #0d6efd;
	display: flex;
	gap: 10px;
	height: 100%;
	padding: 8px;
	background: var(--master-bg);
	color: var(--master-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
}

/* ---------- List panel ---------- */
.master-sidebar {
	flex: 0 0 var(--master-sidebar-width, 290px);
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: #fff;
	border: 1px solid var(--master-border);
	border-radius: 10px;
	overflow: hidden;
}
.master-sidebar-head {
	padding: 8px 10px;
	border-bottom: 1px solid var(--master-border);
}
.master-sidebar-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}
.master-sidebar-title .fa { color: var(--master-accent); }
.master-search {
	position: relative;
	margin-top: 6px;
}
.master-search .fa {
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--master-muted);
	pointer-events: none;
}
.master-page .master-search input {
	width: 100%;
	height: 32px;
	padding: 4px 10px 4px 32px;
	border: 1px solid var(--master-input-border);
	border-radius: 8px;
	background: #f9fafb;
	font-family: inherit;
	font-size: 14px;
}
.master-page .master-search input:focus {
	outline: none;
	background: #fff;
	border-color: #86b7fe;
	box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
.master-list {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	overflow-y: auto;
}
.master-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 8px;
	cursor: pointer;
	outline: none;
}
.master-item:hover { background: #f1f5f9; }
.master-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .45); }
.master-item.is-match { background: #fff6dd; }
.master-item.active {
	background: #e8f0ff;
	box-shadow: inset 3px 0 0 var(--master-accent);
}
.master-avatar {
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	background: #e0e7ff;
	color: #3730a3;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}
.master-item.active .master-avatar { background: var(--master-accent); color: #fff; }
.master-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.master-item-name {
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.master-item-meta {
	font-size: 11.5px;
	color: var(--master-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.master-empty {
	padding: 18px 12px;
	text-align: center;
	color: var(--master-muted);
	font-size: 13px;
}

/* ---------- Form ---------- */
.master-main {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}
.master-titlebar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 0 2px 6px;
}
.master-titlebar h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.master-titlebar h5 a { color: var(--master-accent); text-decoration: none; }
.master-titlebar .btn { white-space: nowrap; }
.master-subtitle {
	font-size: 12.5px;
	color: var(--master-muted);
	margin-top: 2px;
}
.master-form { margin: 0; }
/* card pages that opt in: not edge to edge on a wide screen */
.master-main.master-capped > .master-titlebar,
.master-main.master-capped > .master-form { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
/* next to a list, the form stays beside it instead of floating in the middle (is-collapsed folds the list on phones only) */
.master-sidebar ~ .master-main.master-capped > .master-titlebar,
.master-sidebar ~ .master-main.master-capped > .master-form { margin-left: 0; }
.master-section {
	margin-bottom: 8px;
	border: 1px solid var(--master-border);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.master-section > .card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	background: #fff;
	border-bottom: 1px solid var(--master-border);
	font-size: 14px;
	font-weight: 600;
}
.master-section > .card-header .fa {
	width: 18px;
	text-align: center;
	color: var(--master-accent);
}
.master-section > .card-header small {
	margin-left: auto;
	font-weight: 400;
	color: var(--master-muted);
}
.master-section > .card-body { padding: 8px 12px 10px; }
/* tighter Bootstrap gutters inside forms */
.master-page .row.g-3 { --bs-gutter-x: .75rem; --bs-gutter-y: .5rem; }
.master-page .row.g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .4rem; }
.master-req { color: #dc3545; }
.master-hint {
	font-size: 12px;
	color: var(--master-muted);
	margin-top: 2px;
}
.master-label-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.master-label-tools a {
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.master-editor { overflow-x: auto; }
.master-photo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}
.master-photo iframe {
	width: 300px;
	max-width: 100%;
	height: 210px;
	border: 1px dashed var(--master-border);
	border-radius: 8px;
	background: #fafbfc;
}
.master-photo img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border: 1px solid var(--master-border);
	border-radius: 10px;
}
.master-photo-side { display: flex; flex-direction: column; gap: 8px; }

/* Save bar stays visible while scrolling the form */
.master-actions {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	padding: 6px 12px;
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--master-border);
	border-radius: 10px;
	box-shadow: 0 -4px 14px rgba(16, 24, 40, .07);
}
.master-actions .erase-link { margin-left: auto; }
.master-actions .dropdown-menu { min-width: 180px; }

/* ---------- Overrides of the global form styles (css/page_*.css) ---------- */
.master-page label,
.master-page .form-label {
	display: block;
	width: auto;
	margin-bottom: 2px;
	padding: 0;
	text-align: left;
	white-space: normal;
	color: #374151;
	font-family: inherit;
	font-size: var(--master-label-size);
	font-weight: 500;
}
.master-page .form-check-label,
.master-page .input-group-text label {
	display: inline;
	margin: 0;
	font-weight: 400;
}
.master-page .form-control,
.master-page .form-select,
.master-page .input-group-text {
	font-family: inherit;
	font-size: var(--master-field-size);
}
/* page_mm.css forces line-height:normal !important on inputs, which makes them shorter than buttons */
.master-page input.form-control,
.master-page select.form-select { min-height: var(--master-field-h); }
.master-page .form-control { padding: .25rem .6rem; }
.master-page .input-group-text { padding: .25rem .6rem; }
.master-page .master-form .btn:not(.btn-sm), .master-actions .btn:not(.btn-sm) { padding-top: .3rem; padding-bottom: .3rem; font-size: 14px; }
.master-page select.form-select {
	height: auto !important;
	line-height: 1.5;
	padding: .25rem 2rem .25rem .6rem !important;
}
.master-page .form-control:focus,
.master-page .form-select:focus {
	background-color: var(--master-field-focus);
}
.master-page input.form-check-input {
	width: 1.1em;
	height: 1.1em;
	margin: .2em .45em 0 0;
	/* page_mm.css has input:read-only{border:0}, and checkboxes always match :read-only */
	border-width: 1px;
	border-style: solid;
}
.master-page input.form-check-input:not(:checked) { border-color: var(--master-input-border); }
.master-page .form-check .form-check-input { margin-left: -1.55em; }
.master-page .form-switch .form-check-input {
	width: 2.1em;
	margin-left: -2.6em;
}
.master-page .input-group-text .form-check-input { margin: 0 6px 0 0; }
.master-page .form-control.text-uppercase::placeholder { text-transform: none; }

/* Select2 (departments) to match Bootstrap inputs */
.master-page .select2-container { width: 100% !important; }
.master-page .select2-container--default .select2-selection--multiple {
	min-height: 34px;
	padding: 1px 6px;
	border: 1px solid var(--master-input-border);
	border-radius: .375rem;
}
.master-page .select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: #86b7fe;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.master-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: #e8f0ff;
	border-color: #c7d7fe;
	border-radius: 6px;
	color: #1e3a8a;
}

/* ---------- Pages using the classic table form (list built by progjs/master.js) ---------- */
/* The page's <select id="curlist"> is only shown until master.js has built the list from it */
.master-sidebar > select#curlist {
	flex: 1 1 auto;
	min-height: 0;
	width: 100% !important;
	padding: 6px;
	border: 0;
	outline: none;
	background: #fff;
	font-size: 13.5px;
}
.master-sidebar.is-ready > select#curlist { display: none !important; }

.master-main .form-grids {
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: 0 0 8px;
	background: #fff;
	border: 1px solid var(--master-border);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.master-main .form-grids > * { /* undo Bootstrap .row > * */
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
.master-main .form-grids > .form-title {
	padding: 7px 12px;
	background: #fff;
	border-bottom: 1px solid var(--master-border);
	border-radius: 10px 10px 0 0;
}
.master-main .form-title h5 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--master-text);
}
.master-main .form-title h5 a { color: var(--master-accent); text-decoration: none; }
.master-main .form-grids > .form-body { padding: 8px 12px 10px; }
.master-main .form-body form > table.entrylbl { float: none; }
.master-main .form-body form > table { width: 100%; border-collapse: separate; border-spacing: 0; }
.master-main .form-body form > table > tbody > tr > td { padding: 3px 6px; vertical-align: middle; }
.master-main .form-body label { padding: 0 4px 0 0; }
.master-main .form-body form > table > tbody > tr > td > label { white-space: nowrap; }
.master-main .form-body :is(input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password],
	input[type=date], input[type=time], input[type=url], input[type=search], input:not([type]), select, textarea) {
	min-height: calc(var(--master-field-h) - 2px);
	max-width: 100%;
	padding: 4px 8px;
	border: 1px solid var(--master-input-border);
	border-radius: 6px;
	background-color: #fff;
	box-shadow: none;
	color: var(--master-text);
	font-family: inherit;
	font-size: var(--master-field-size);
	line-height: 1.4;
}
.master-main .form-body select {
	height: auto !important;
	padding: 4px 26px 4px 8px !important;
}
/* rebuilt card forms (Bootstrap fields): same height as chosen/select2 next to them */
.master-main .form-body input.form-control,
.master-main .form-body select.form-select { min-height: var(--master-field-h); }
.master-main .form-body textarea { width: 100%; }
.master-main .form-body :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--master-accent);
	background-color: var(--master-field-focus);
	box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
.master-main .form-body :is(input, select, textarea):disabled { background-color: #f3f4f6; }
.master-main .form-body .prefix input,
.master-main .form-body .select2-container input {
	min-height: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}
.master-main .form-body td.mend {
	padding-left: 4px;
	color: #dc3545;
	font-family: inherit;
	font-weight: 600;
	text-align: left;
}
.master-main .form-body hr {
	margin: 4px 0;
	border: 0;
	border-top: 1px solid var(--master-border);
	opacity: 1;
}
.master-main .form-body input[type=submit],
.master-main .form-body input.loginbtn {
	height: auto;
	min-height: 34px;
	padding: 5px 24px;
	border: 1px solid var(--master-accent);
	border-radius: 6px;
	background: var(--master-accent);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.master-main .form-body input[type=submit]:hover,
.master-main .form-body input.loginbtn:hover { background: #0b5ed7; }
.master-main .form-body input[type=submit]:disabled,
.master-main .form-body input.loginbtn:disabled { opacity: .65; cursor: default; }

/* ---------- Report criteria pages (*_criteria.php): one centred card ---------- */
.master-criteria-page .form-grids { max-width: 780px; margin: 12px 5px 8px; }
.master-criteria-page #submitbtn { min-width: 130px; }
.master-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.master-preset {
	padding: 2px 10px;
	border: 1px solid var(--master-border);
	border-radius: 999px;
	background: #fff;
	color: var(--master-text);
	font-size: 12.5px;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}
.master-preset:hover { border-color: #86b7fe; color: var(--master-accent); }
.master-preset.active { background: #e8f0ff; border-color: #86b7fe; color: #1e3a8a; font-weight: 500; }
.master-main .erase-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #dc3545;
	border-radius: 6px;
	color: #dc3545;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}
.master-main .erase-link a:hover { background: #dc3545; color: #fff; }
.master-page .select2-container--default .select2-selection--single {
	height: var(--master-field-h);
	border: 1px solid var(--master-input-border);
	border-radius: 6px;
}
.master-page .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(var(--master-field-h) - 2px); }
.master-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--master-field-h) - 2px); }

/* ---------- Extras for rebuilt forms (brand.php, product.php) ---------- */
/* Title-bar buttons; the page's fullscreen / close-popup icon (.popout_img, handled in qsoft.js) sits here too */
.master-title-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.master-titlebar .popout_img,
.master-titlebar .popout_img1,
.master-title-actions .popout_img,
.master-title-actions .popout_img1 {
	position: static;
	float: none;
	width: auto;
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	border: 1px solid var(--master-border);
	border-radius: 6px;
	background: #fff;
	color: var(--master-muted);
	cursor: pointer;
}
.master-titlebar .popout_img:hover,
.master-titlebar .popout_img1:hover,
.master-title-actions .popout_img:hover,
.master-title-actions .popout_img1:hover { color: var(--master-accent); }

/* Picked items (rows that page scripts append to a table) shown as removable chips */
.master-chips {
	min-height: 34px;
	padding: 4px;
	border: 1px dashed #cfd6e1;
	border-radius: 8px;
	background: #fafbfc;
}
.master-chips:not(:has(tr))::before {
	content: attr(data-empty);
	display: block;
	padding: 3px 4px;
	color: var(--master-muted);
	font-size: 12.5px;
}
.master-chips table,
.master-chips tbody { display: block; width: 100%; border: 0; }
.master-chips tbody { display: flex; flex-wrap: wrap; gap: 6px; }
.master-chips tr {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 1px 5px 1px 9px;
	background: #e8f0ff;
	border: 1px solid #c7d7fe;
	border-radius: 999px;
	color: #1e3a8a;
	font-size: 13px;
}
.master-chips td {
	display: inline;
	width: auto !important;
	padding: 0;
	border: 0 !important;
}
.master-chips td + td:not(:last-child)::before { content: "\00b7"; margin-right: 6px; color: #64748b; }
.master-chips .fa-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	color: #64748b;
	cursor: pointer;
}
.master-chips .fa-close:hover { background: #dc3545; color: #fff; }

/* chosen.js dropdowns sized like the other inputs */
.master-page .chosen-container { width: 100% !important; font-size: var(--master-field-size); }
.master-page .chosen-container-single .chosen-single {
	height: var(--master-field-h);
	line-height: calc(var(--master-field-h) - 2px);
	padding-left: 10px;
	border: 1px solid var(--master-input-border);
	border-radius: .375rem;
	background: #fff;
	box-shadow: none;
	color: var(--master-text);
}
.master-page .chosen-container-single .chosen-single span { line-height: calc(var(--master-field-h) - 2px); }
.master-page .chosen-container-single .chosen-single div { right: 6px; } /* keep the 18px sprite window */
.master-page .chosen-container-single .chosen-single div b { background-position: 0 calc((var(--master-field-h) - 20px) / 2); }
.master-page .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px calc((var(--master-field-h) - 20px) / 2); }
.master-page .chosen-container-active .chosen-single {
	border-color: #86b7fe;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.master-page .chosen-container .chosen-drop { border-color: #86b7fe; border-radius: 0 0 .375rem .375rem; }

/* keyboard shortcut pills (.shortcut from styles.css) */
.master-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.master-page .shortcut {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 3px 8px;
	border: 1px solid var(--master-border);
	border-radius: 6px;
	background: #fff;
	font-size: 12.5px;
}
.master-page .shortcut:hover { background: #f1f5f9; }
.master-page .shortcut .keyname {
	margin: 0;
	padding: 0 5px;
	border: 0;
	border-radius: 4px;
	background: #eef2ff;
	color: #3730a3;
	font-size: 11px;
}
.master-page .shortcut .keyaction { color: var(--master-text); }
/* save result message written by the page script */
.master-status { color: #15803d; font-size: 13px; font-weight: 500; }

/* Fields wrapped in a Spry validation span (<span id="sprytextfieldN">): keep the input full width
   and show Spry's "*" message inside the field instead of below it */
.master-page [id^="sprytextfield"] { display: block; position: relative; }
.master-page [id^="sprytextfield"] .textfieldRequiredMsg,
.master-page [id^="sprytextfield"] .textfieldInvalidFormatMsg {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-weight: 600;
}
/* small square icon buttons next to a field (shown / hidden by page scripts) */
.master-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--master-border);
	border-radius: 6px;
	background: #fff;
	color: var(--master-accent);
	cursor: pointer;
}
.master-icon-btn:hover { background: #eef2ff; }

/* small heading above a group of switches */
.master-switch-group {
	margin-bottom: 4px;
	color: var(--master-muted);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}
/* compact warning text inside a section */
.master-note {
	padding: 6px 10px;
	border: 1px solid #fde68a;
	border-radius: 6px;
	background: #fffbeb;
	color: #92400e;
	font-size: 12.5px;
	line-height: 1.4;
}
.master-note .fa { margin-right: 4px; }
/* table of rows added with a picker (product / service lines) */
.master-items {
	max-height: 210px;
	overflow: auto;
	border: 1px solid var(--master-border);
	border-radius: 8px;
	background: #fff;
}
.master-items table { margin: 0; font-size: 13px; }
.master-items thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f8fafc;
	color: #374151;
	font-weight: 600;
	white-space: nowrap;
}
.master-items tbody:empty::after {
	content: "Nothing added";
	display: block;
	padding: 8px 10px;
	color: var(--master-muted);
	font-size: 12.5px;
}
.master-items .fa-close { cursor: pointer; color: #64748b; }
.master-items .fa-close:hover { color: #dc3545; }
.master-items .feeorder_td { cursor: text; }
.master-items input.form-control-sm { min-height: 0; height: 26px; padding: 1px 6px; }

/* ---------- List / report pages (prodlist.php): filter bar + tablesorter grid + pager ---------- */
.master-list-page .master-main { overflow: hidden; }
.master-list-page .master-titlebar { align-items: center; padding-bottom: 6px; }
.master-list-page .master-titlebar h5 { display: flex; align-items: center; gap: 6px; }
.master-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 0 0 8px;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--master-border);
	border-radius: 8px;
}
.master-filter-field { flex: 1 1 200px; min-width: 0; }
.master-filter-field.is-wide { flex: 2 1 260px; }
.master-filter .btn { white-space: nowrap; padding-top: .3rem; padding-bottom: .3rem; font-size: 14px; }
.master-page .report_div { /* undo the absolute positioning from styles.css */
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--master-border);
	border-radius: 8px;
}
.master-page table.tablesorter-green { width: 100%; border: 0; border-collapse: separate; border-spacing: 0; }
.master-page table.tablesorter-green th,
.master-page table.tablesorter-green td {
	padding: 5px 8px;
	border: 0;
	border-bottom: 1px solid #edf0f4;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.35;
}
.master-page table.tablesorter-green thead tr .tablesorter-header {
	background: #f8fafc;
	color: #374151;
	font-weight: 600;
	border-bottom: 1px solid var(--master-border);
}
.master-page table.tablesorter-green .tablesorter-header-inner { padding-left: 16px; background-position: 0 center; }
.master-page table.tablesorter-green tr.odd td { background-color: #fbfcfe; }
.master-page table.tablesorter-green tr.even td { background-color: #fff; }
.master-page table.tablesorter-green tbody > tr:hover > td,
.master-page table.tablesorter-green tbody > tr.odd:hover > td,
.master-page table.tablesorter-green tbody > tr.even:hover > td { background: #eef4ff; }
.master-page table.tablesorter-green tr.odd td.primary,
.master-page table.tablesorter-green tr.even td.primary { background-color: #f2f7ff; }
.master-page table.tablesorter-green tr.odd td.secondary,
.master-page table.tablesorter-green tr.even td.secondary,
.master-page table.tablesorter-green tr.odd td.tertiary,
.master-page table.tablesorter-green tr.even td.tertiary { background-color: #f7faff; }
.master-page .tablesorter-green .tablesorter-filter-row td { padding: 4px 6px; background: #fff; }
.master-page .tablesorter-green .tablesorter-filter {
	width: 100%;
	height: 26px;
	padding: 2px 6px;
	border: 1px solid var(--master-input-border);
	border-radius: 5px;
	font-size: 12px;
}
.master-page .tablesorter-green td a.master-link { color: var(--master-accent); font-weight: 500; text-decoration: none; }
.master-page .tablesorter-green td a.master-link:hover { text-decoration: underline; }
.master-row-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
}
.master-row-btn:hover, .show > .master-row-btn { background: #eef2ff; color: var(--master-accent); }
.master-clip { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* column picker (tablesorter columnSelector widget) */
.master-page .columnSelectorWrapper {
	position: relative;
	display: inline-block;
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 6;
}
.master-page .columnSelectorWrapper input.hidden,
.master-page .columnSelectorWrapper #colSelect1 {
	display: none !important;
}
.master-page .columnSelectorButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	padding: 4px 9px;
	border: 1px solid #6c757d;
	border-radius: .25rem;
	background: #fff;
	color: #6c757d;
	font-size: .875rem;
	cursor: pointer;
	line-height: 1.5;
	height: 31px;
	box-sizing: border-box;
}
.master-page .columnSelectorButton:hover {
	background: #f8fafc;
	color: #334155;
}
.master-page #colSelect1:checked + .columnSelectorButton {
	background: #6c757d;
	color: #fff;
}
.master-page .columnSelector {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	width: 220px;
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	padding: 8px 12px !important;
	border: 1px solid var(--master-border);
	border-radius: 6px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	z-index: 1050;
}
.master-page #colSelect1:checked ~ .columnSelector,
.master-page input:checked ~ .columnSelector {
	display: block !important;
}
.master-page .columnSelector, .master-page .columnSelector * {
	font-size: 12.5px !important;
}
.master-page .columnSelector label {
	display: flex !important;
	align-items: center;
	gap: 6px;
	padding: 3px 0 !important;
	margin: 0 !important;
	cursor: pointer;
	color: #334155;
	font-weight: 500;
	text-align: left;
}
.master-page .columnSelector label:first-child {
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 5px !important;
	margin-bottom: 5px !important;
	font-weight: 600;
}
.master-page .columnSelector input {
	margin: 0 4px 0 0 !important;
}
/* pager */
.master-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 2px 0;
	font-size: 13px;
	color: var(--master-muted);
}
.master-page #pager { float: none; display: flex; align-items: center; gap: 4px; height: auto; margin: 0; background: none; }
.master-page #pager section,
.master-page #pager select { float: none; display: block; margin: 0 !important; font-family: inherit; font-size: 13px; font-weight: 500; }
.master-page #pager > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 28px;
	height: 28px;
	margin: 0;
	border: 1px solid var(--master-border);
	border-radius: 6px;
	background: #fff;
	color: var(--master-text);
	text-decoration: none;
}
.master-page #pager > a:not(.disabled):hover { background: #eef2ff; color: var(--master-accent); }
.master-page #pager select {
	height: 28px !important;
	padding: 0 22px 0 8px !important;
	border: 1px solid var(--master-input-border);
	border-radius: 6px;
}
.master-title-actions .exportlink,
.master-title-actions a.exportlink {
	font-size: .875rem !important;
	padding: 4px 9px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	line-height: 1.5 !important;
	height: 31px !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	border-radius: .25rem;
}

/* ---------- Field borders: clearly visible outline, darker on hover, blue on focus ---------- */
.master-page .form-control,
.master-page .form-select,
.master-page .input-group-text { border-color: var(--master-input-border); }
.master-page .input-group-text { background-color: #eef1f5; }
.master-page .form-control:hover:not(:focus):not(:disabled),
.master-page .form-select:hover:not(:focus):not(:disabled),
.master-main .form-body :is(input[type=text], input[type=number], input[type=email], input[type=tel], input[type=password],
	input[type=date], input[type=time], input[type=url], input[type=search], input:not([type]), select, textarea):hover:not(:focus):not(:disabled),
.master-page .select2-container--default .select2-selection:hover,
.master-page .chosen-container-single .chosen-single:hover { border-color: var(--master-input-hover); }
.master-page .form-control:focus,
.master-page .form-select:focus { border-color: var(--master-accent); }
.master-page .select2-container--default.select2-container--focus .select2-selection--multiple,
.master-page .select2-container--default.select2-container--open .select2-selection { border-color: var(--master-accent); }
.master-page .chosen-container-active .chosen-single { border-color: var(--master-accent); }

/* ---------- Field text: Verdana in black, as the old forms had (page_mm.css); easier to read than the UI font ---------- */
.master-page .form-control,
.master-page .form-select,
.master-page :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]), select, textarea),
.master-page .chosen-container .chosen-single span,
.master-page .chosen-container .chosen-search input,
.master-page .chosen-container .chosen-results li,
.master-page .select2-container .select2-selection__rendered,
.master-page .select2-container .select2-search__field {
	color: var(--master-field-text);
	font-family: var(--master-field-font);
}
.master-page .chosen-container .chosen-default span { color: #6c757d; } /* placeholder, not a value */
.master-page .select2-container .select2-selection__rendered { font-size: var(--master-field-size); }
/* focused field gets the theme's highlight colour (#BDFFFF in page_*.css), searchable dropdowns included */
.master-page .chosen-container-active .chosen-single,
.master-page .select2-container--default.select2-container--focus .select2-selection,
.master-page .select2-container--default.select2-container--open .select2-selection { background: var(--master-field-focus); }

/* ---------- Phones and narrow pop-up frames ---------- */
@media (max-width: 767.98px) {
	/* Classic forms: one field per line, label above the input */
	.master-main .form-body form > table,
	.master-main .form-body form > table > tbody,
	.master-main .form-body form > table > tbody > tr,
	.master-main .form-body form > table > tbody > tr > td {
		display: block;
		width: 100% !important;
	}
	.master-main .form-body form > table > tbody > tr > td {
		padding: 3px 0;
		text-align: left !important;
	}
	.master-main .form-body form > table > tbody > tr > td:empty { display: none; }
	.master-main .form-body label { text-align: left; }
	.master-main .form-body td.mend { padding-left: 0; }
	.master-main .form-body td.master-req-cell { display: none; } /* lone "*": the field already shows it is required */
	/* hints_login.css tooltips would cover the next fields: show them as helper text under the focused field */
	.master-main .form_hint {
		position: static !important;
		display: none;
		margin: 4px 0 0;
		padding: 0;
		border-radius: 0;
		background: none !important;
		color: var(--master-muted) !important;
		font-size: 12px;
		text-align: left;
	}
	.master-main .form_hint::before { display: none; }
	.master-main .genform :is(input, select):focus + .form_hint { display: block; }
	.master-main .form-grids > .form-title,
	.master-main .form-grids > .form-body { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 991.98px) {
	.master-page {
		flex-direction: column;
		height: auto;
		min-height: 100%;
		gap: 6px;
		padding: 6px;
	}
	.master-sidebar { flex: none; }
	.master-list { max-height: 45vh; }
	.master-sidebar.is-collapsed .master-list,
	.master-sidebar.is-collapsed .master-empty { display: none !important; }
	.master-main { overflow: visible; }
	.master-titlebar { padding-bottom: 4px; }
	.master-titlebar h5 { font-size: 15px; }
	.master-subtitle { display: none; }
	.master-section { margin-bottom: 6px; }
	.master-section > .card-body { padding: 8px 10px; }
	.master-actions {
		margin: 0 -6px -6px;
		padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
		border-radius: 0;
		border-width: 1px 0 0;
	}
	.master-actions [type=submit] { flex: 1 1 90px; }
	.master-list-page .report_div { flex: none; max-height: 72vh; }
	.master-filter { padding: 6px 8px; }
}
@media print {
	.master-sidebar, .master-actions { display: none !important; }
}