/* Root font size + per-person text size (styling plan §6; library/userPreferences.php).
   A percentage, not px, so the browser's own font setting is respected: 81.25% of
   the 16px browser default is the 13px Evolution has always used. index.php renders
   data-text-size on <html> from the person's preference. Everything sized in rem
   follows; px font sizes don't (the phase 2 sweep converts them). */
html {	
	height:100%; 
	font-size:81.25%;
}
html[data-text-size="standard"] { font-size: 89.375%; }	/* 14.3px, +10% */
html[data-text-size="large"]    { font-size: 97.5%; }	/* 15.6px, +20% */
html[data-text-size="xlarge"]   { font-size: 109.375%; }	/* 17.5px, +35% */

/* Account menu (header account icon): Manage profile + Text size. */
.acct-menu { min-width: 19rem; padding: .35rem 0 .6rem; }
.acct-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.acct-menu-label { padding: .25rem 1rem .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; }
.acct-textsize { display: flex; margin: 0 1rem; }
.acct-textsize .btn { flex: 1 1 auto; white-space: nowrap; }
.acct-textsize .btn[aria-checked="true"] { background: var(--main-highlight-color, var(--bs-primary)); border-color: var(--main-highlight-color, var(--bs-primary)); color: #fff; }
.acct-menu-note { padding: .45rem 1rem 0; font-size: .8rem; color: #6c757d; }

body {
	margin:0;
	height:100%;
	height:auto;
	color:var(--main-text-color);
	text-align:left;
	line-height:normal;
}

.dot {
	height: 15px;
	width: 15px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}

/* Register colour key (styling.inc 3.1 zone 3): sits on the pager line, pushed
   left by margin-right:auto so the Showing text + pager stay right-aligned.
   Wraps above the pager on narrow screens. */
.regLegend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1rem;
	margin: 0 auto 0 0;
	padding: 0;
	list-style: none;
	font-size: .8rem;
	color: #6c757d;
}
.regLegend li {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	white-space: nowrap;
}
.regLegend .dot {
	height: 10px;
	width: 10px;
	flex: none;
}

/* Status pills + flags (styling.inc 1.13). Rendered ONLY by Status::pill()/flag()
   (library/Status.php) and statusPill()/statusFlag() (global.js) - never hand-rolled.
   Pill = the record's lifecycle state, soft tone by meaning. Flag = an exceptional
   condition beside it, solid. Red is a flag colour only, never a state. */
.statusPill,
.flag {
	display: inline-block;
	padding: .15em .55em;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.35;
	border: 1px solid transparent;
	border-radius: .35rem;
	white-space: nowrap;
	vertical-align: middle;
}
.statusPill-lg { font-size: 1rem; padding: .2em .65em; }
.status-draft { background: #eef0f2; color: #495057; border-color: #dee2e6; }
.status-open  { background: #e7f1ff; color: #084298; border-color: #b6d4fe; }
.status-wait  { background: #fff3cd; color: #664d03; border-color: #ffe69c; }
.status-done  { background: #d1e7dd; color: #0a3622; border-color: #a3cfbb; }
.status-void  { background: #fff;    color: #6c757d; border-color: #ced4da; }
.flag { font-size: .75em; margin-left: .25rem; }
.flag-lg { font-size: .85em; }
.flag-danger  { background: #dc3545; color: #fff; }
.flag-caution { background: #ffc107; color: #212529; }
.flag-info    { background: #eef0f2; color: #495057; border-color: #dee2e6; font-weight: 500; }

.form-group {
	margin-bottom:10px;
}

.bg-theme {
	/* @extend .bg-info; */
	background-color: var(--main-highlight-color);
}

.bg-highlight {
	background-color: var(--default-highlight-color);
}

.border-2 {
	border-width:2px !important;
}

.hidden { 
	display:none;
}

.hover-enable:hover { 
	background-color: var(--default-highlight-color);
}

.overlay {
	position: fixed;
	z-index: 999;
	height: 100%;
	width: 100%;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color:rgba(41,41,61,0.75);
}

.loader {
	position: absolute;
	top: calc(50% - 50px);
	top: -webkit-calc(50% - 100px);
	left: calc(50% - 200px);
	left: -webkit-calc(50% - 200px);
	width: 120px;
	height: 120px;
	border-radius: 50%;	
	border: 16px solid #f3f3f3;
	border-top: 16px solid var(--main-highlight-color);
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*
BELOW CLASS EXTEND BOOTSTRAP
*/
.table {
	text-align:left;
}
.table-viewport {
	max-height:72vh !important;
	min-height:450px;
	border-bottom:1px solid lightgray
	/*padding-bottom:20px;*/
}

.table .thead-dark th {
color: #ffffff;
background-color: var(--main-highlight-color-opaque);
border-color: #32383e;
text-transform: uppercase;
font-weight:400;
padding-left:10px;
padding-bottom: 0.75rem;
}

.table .thead-dark tr:first-child th:first-child  {
	border-top-left-radius:4px;
}

.table .thead-dark tr:first-child th:last-child  {
	border-top-right-radius:4px;
}

.table tr td > a {
	display:inline-block;
	width:100%;
	/*height:100%;*/
}

h1,.h1 {
	font-size: 30px;
	color: var(--main-text-color);
}

h2,.h2 {
	font-size: 25px;
	color: var(--main-text-color);
}

h3,.h3 {
	font-size: 20px;
	color: var(--main-text-color);
}

h4,.h4 {
	font-size: 16px;
	color: var(--main-text-color);
}

.display-6 {
	font-size:2.1rem;
}

.boldText1 {
	vertical-align:middle;
	font-size: 18px !important;
	font-weight: bold !important;
	text-transform:uppercase;
}

.boldText2 {
	vertical-align:middle;
	font-size: 16px !important;
	font-weight: bold !important;
}

a, i {
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-weight:400;*/
	color:black;
	vertical-align:middle;
	/*line-height:24px;*/
}

a {
	text-decoration: underline;
	text-decoration-color: var(--main-link-underline-color);
	color:var(--main-link-color);
}

a:hover {
	color:var(--main-link-color);
}

.pointer {
	cursor:pointer;
}

/* Register rows open their record from anywhere on the row - the click is
   handled by the delegated listener in global.js (styling.inc 3.1). */
tr[data-href] {
	cursor:pointer;
}

div {
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-size: 14px;*/
	line-height:20px;
}

#header {
	/*overflow:hidden;*/
	box-shadow:0px 1px 1px #666;
	position:relative;
	z-index:100;
	background-color:white;
	min-height:45px;
	vertical-align:bottom;
}
.main_site_container {
	min-height:calc(100vh - 100px);
	/*
	position:relative;
	margin:0px;
	padding:0px;
	width:100%;
	min-height:100vh;
	*/
}

.page_content {
	display:inline-block;
	text-align:center;
	margin-bottom:40px;
	min-height:750px;
	padding-left:25px;
	width: calc(100% - 60px) !important;
}

.site_heading {
	background-image: linear-gradient(to right,var(--main-highlight-color),#FFFFFF);
	min-height:50px;
	padding-top:15px;
	color:white;
	vertical-align:bottom;
	font-weight:600;
	font-size:35px;
	letter-spacing: 5px;
	text-transform:lowercase;
}

.site_heading > em {
	text-transform:none;
	text-decoration:underline; 

}




.dashboardContainer {
	width:100%;
	min-height:300px;
	padding:5px;
	box-sizing:border-box;
}

.dashboardContainer > div {
	box-sizing:border-box;
}

.dashboardColumn {
	margin:10px;
	border-radius: 12px;
	background-color:rgba(255,255,255,0.75);
	min-height:400px;
	box-sizing:border-box;
	min-height:500px;
	min-width:370px;
	width:31%;
	text-align:left;
}

.dashboardItemSmall {
	box-sizing:border-box;
	width:31%;
	min-height:100px;
	background-color:rgba(255,255,255,0.25);
	border:1px solid grey;
	display:inline-block;
	margin:2px;
	border-radius: 5px;
	padding:10px;
	vertical-align:top;
}


.dashboardItemTwoThirds {
	min-height:100px;
	box-sizing:border-box;
	width:62%;
	background-color:rgba(255,255,255,0.25);
	border:1px solid grey;
	display:inline-block;
	margin:2px;
	border-radius: 5px;
	padding:10px 10px 50px 10px;
	vertical-align:top;
}
.dashboardItemMedium {
	min-height:100px;
	box-sizing:border-box;
	width:48%;
	background-color:rgba(255,255,255,0.25);
	border:1px solid grey;
	display:inline-block;
	margin:10px 0px 10px 0px;
	border-radius: 5px;
	padding:10px;
	vertical-align:top;
}

.dashboardItemLarge {
	min-height:170px;
	background-color:rgba(255,255,255,0.25);
	border-bottom:2px solid grey;
	margin-bottom:25px;
}
.dashboardItemLarge > .pageheader {
	border-radius:0px 0px 0px 0px;
	color:white;
}

.dbItem > .card-header {
	border-radius: 5px 5px 0px 0px;
}

.dbItem {
	border:1px solid lightgrey !important;
}

.dbItem > .card-body{
	height:450px;
	overflow:auto;
	
}

.formListDiv {
	min-height:30px;
	box-sizing:border-box;
	width:95%;
	background-color:rgba(158,183,156,0.25);
	border:1px solid grey;
	display:block;
	margin:5px;
	border-radius: 5px;
	padding:8px;
	/*vertical-align:top;*/
}

.divright {
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 14px;*/
	font-style: normal;
	font-weight: normal;
	float:right;
	display:inline;
}

.divleft {
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 14px;*/
	font-style: normal;
	font-weight: normal;
	float:left;
	display:inline;
	line-height:25px;
	padding:5px 20px 5px 20px;
}

a[type="button"], .button, input[type="button"], input[type="submit"] {
	border:1px solid rgb(85, 85, 85);
	border-radius:3px;
	padding: 0px 20px;
	height:30px;
	background-color: var(--main-highlight-color);
	color: #FFFFFF;
	font-size:16px;
	font-weight: 500;
	text-transform:uppercase;
	cursor: pointer;
}

textarea {
	font-family: Arial, Helvetica, sans-serif;
	border:1px solid var(--border-color1);
	/* font-size: 14px; */
	border-radius:4px;
	padding-left:2px;
	line-height:22px;
}

.schedule_content{
	overflow-x:auto;
	margin:0px 0px 0px 0px;
	width:100%;
	min-width:250px;
	/* flex-wrap: nowrap !important; */
}

.schedule_header {
	border-top:1px solid grey;
	min-width:1500px;
	margin:10px 15px 0px 18px ;
}

.schedule_container {
	overflow-y:auto;
	overflow-x:hidden;
	max-height:60vh;
	box-sizing: border-box;
	margin:10px 0px 0px 18px ;
	border-right:1px solid grey;
	border-top:1px solid grey;
	min-width:1500px;
	margin-top:10px;
}

.schedule_column {
	padding:0px;
	margin:0px;
	float:left;
	min-width:250px !important;
	box-sizing: border-box;
	border-right:1px solid grey;
}
.schedule_body {
		padding:2px;
		height:auto;
		min-height:800px;
}

.schedule_header > .schedule_column {
	border:0px;
}

.card {
		border:1px solid black;
		margin-bottom:10px;
}

.pagetab {
	display:none;
	width:100%;
}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


.material-symbols-rounded {
/*font-size:40px !important;*/
color:var(--main-text-color);
font-variation-settings:
'FILL' 1,
'wght' 200,
'GRAD' 0,
'opsz' 40
}

.material-symbols-rounded.nofill {
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 40 !important;
}

.title-row > .material-symbols-rounded {
	color:white;
}

.pageheader  * > .material-symbols-rounded {
	font-variation-settings:
	'FILL' 1,
	'wght' 300,
	'GRAD' 0,
	'opsz' 40
}
/* BADGES INVERT THE TEXT COLOR BASED ON THE BACKGROUND COLOR */
.invert-text {
    /* This value is the OPPOSITE color of our background */
	/* <div class='my_background'><span class='invert-text'>My Text</span></div>*/
    mix-blend-mode: difference;
}


/* ### USED FOR AUTO EXPANDING TEXT BOXES EG QUOTE EDIT DESCRIPTONS */
.expandingArea {
position: relative;
border: 1px solid #FFF;
background: #fff;
margin-top:1px;
}

.expandingArea > textarea,
.expandingArea > pre {
padding: 2px;
background: transparent;
font: 400 13px/16px helvetica, arial, sans-serif;
/* Make the text soft-wrap */
white-space: pre-wrap;
word-wrap: break-word;
min-height:20px;
}

.expandingArea > textarea {
/* The border-box box model is used to allow
	padding whilst still keeping the overall width
	at exactly that of the containing element.  */
	
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	width: 100%;
	/* This height is used when JS is disabled */
	border:none;
}

.expandingArea.active > textarea {
/* Hide any scrollbars */
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
/* Remove WebKit user-resize widget */
resize: none;
}
.expandingArea > pre {
display: none;
}
.expandingArea.active > pre {
display: block;
/* Hide the text; just using it for sizing */
visibility: hidden;
}
/* END OF EXPANDIN TEXTBOX CSS */

.table-fixed thead th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
.table-fixed tbody td {
z-index:-1;
background: white;
}

input.checkbox, input[type='checkbox']{
	min-height:16px;
	min-width:16px;
}

div.filtered_list {
	position:relative;
	width:100%;
	padding:0px;
}

select.filtered_list{
	background-color:rgba(250, 250, 250, 1);
	z-index:40;
	min-width:100%;
	float:left;
	position:absolute;
	left:0px;
	top:10px;
	display:none;
	overflow: overlay !important;
	height:300px;

}

select.filtered_list option:hover {
	background-color:lightgrey;
}
/*
This works, not sure its needed
.modal select.filtered_list {
	z-index:1095;
}
*/
/*
select.filtered_list option {
	padding:4px;
}
*/


select.filtered-list {
	height:300px;
	display:none;
}
.locked-select {
        pointer-events: none;
        /* Optional visual cues */
        opacity: 0.7;
        background-color: #f0f0f0;
}
img { 
	border: 0;
	margin: 0px 0px; 
	margin-bottom:0px;
} 

table.gridtable {
	border-collapse:collapse;
	width:95%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

table.gridtable.tr {
	height:50px;
	align:left;
	vertical-align:middle;
	background:#CCC;
}

table.gridtable td {
	align:left;
	border-color: #CCCCCC;
	border-bottom:1px solid lightgrey;
	padding:5px 20px;
	/*font-size:14px;*/
}

table.gridtable tr:hover td {
	background:#CCC;
}
table.filter {
	@extends gridtable;
}
table.filter tr:hover td {
	background:none;
}


table.gridtable th {
	color:white;
	background-color: var(--main-highlight-color);
	border-color: #CCCCCC;
	border-bottom:1px solid lightgrey;
}

.titlerow {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	border:1px solid #cccccc;
	color:#FFFFFF;
	border-radius:8px;
	height:30px;
	box-align:left;
	font-weight:500;
	vertical-align:middle;
	background-color:var(--main-highlight-color);
	padding:5px 20px;
}

.titlerow > th, .titlerow .material-symbols-rounded {
	color:#FFFFFF !important;
	font-weight:500;
	vertical-align:middle;
	background-color:var(--main-highlight-color);
	padding:5px 5px;
}

table.datatable {
	border-collapse:collapse;
	width:100%;
	align:center;
}

.datatabletitle {
	font-family: Arial, Helvetica, sans-serif;
	border:1px solid #cccccc;
	border-radius:8px;
	height:30px;
	color:#FFF;
	align:left;
	font-weight:bold;
	vertical-align:middle;
	background-color:var(--main-highlight-color);
	padding:5px 20px;
}

table.datatable td {
	font-family: Arial, Helvetica, sans-serif;
	border-style: solid;
	border-width: 1px;
	border-color: #CCCCCC;
	align:left;
	padding:2px;
	margin:0px;
	/*font-size:14px;*/ 
}

table.datatable tr:hover {
	background:#DDD;
}

td.currency, td.currency>input {
	background-color:var(--main-special-color);
}

tr.formRow {
	height:50px;
	align:left;
	vertical-align:middle;
	border-bottom:5px solid var(--main-highlight-color);
}

tr.formRow:hover td {
	@extend datatable;
	background-color:#FFF;
}
.datainput {
	height:25px;
	width:98%;
	border:none;
	box-sizing: border-box;
	margin:0px;
}

.floating {
	border:1px solid var(--main-highlight-color);
	border-radius:12px;
	border-color:grey;
	margin:15px;
	background-color:#ffffff;
	padding:20px;
}

p.pagebreak {
	page-break-after: always;
}

.menu_container {
	background-color:#FFFFFF;
	position:relative;
	/*top:-30px;*/
	display:inline-block;
	width:60px;
	overflow:hidden;
	z-index: 50;
	min-height:100vh;
	height:100%;
	/*padding-bottom:10px;*/
	float:left;
	background-color: white;
	box-shadow:3px -4px 4px #666;
	border-right:1px solid #696969;
	transition:visibility 0ms, background 0ms, width 150ms;
}

.menu-last-active {
	/* background-color:var(--main-highlight-color); */
}


.menu_container_full{
width:260px;
/* transition:visibility 0ms, background 0ms, width 200ms; */
}

/* HOME BUTTON HAS NO COLLAPSE TARGET — HIDE THE ACCORDION CHEVRON */
.menu-main .accordion-button.no-toggle-arrow::after {
	content:none;
	background-image:none;
}

/* PIN MENU TOGGLE: SHARES THE HOME ROW, JUSTIFIED TO THE FAR RIGHT */
.menu-main .accordion-button.no-toggle-arrow {
	display:flex;
	align-items:center;
}
.menu-pin-toggle {
	display:none;
	margin-left:auto;
	font-size:16px;
	color:#adb5bd;
	transform:rotate(-45deg);
	transition:transform 150ms ease, color 150ms ease;
}
.menu_container_full .menu-pin-toggle,
.menu-pinned .menu-pin-toggle {
	display:inline-block;
}
.menu-pin-toggle:hover {
	color:var(--main-highlight-color);
}
.menu-pin-toggle.menu-pinned-active {
	color:var(--main-highlight-color);
	font-variation-settings:'FILL' 1;
	transform:rotate(0deg);
}

/* EXPANDED MENU SECTIONS: MUTED GREY + BOLD (OVERRIDE BOOTSTRAP'S BLUE ACTIVE STATE) */
.menu-main .accordion-button:not(.collapsed) {
	background-color:#e9ecef;
	color:var(--main-text-color);
	font-weight:700;
	box-shadow:none;
}
.menu-main .accordion-button:focus {
	box-shadow:none;
	border-color:transparent;
}

/* PINNED MENU: RESERVE REAL ESTATE INSTEAD OF OVERLAYING CONTENT */
.menu-pinned #menu_container {
	width:250px !important;
}
.menu-pinned #navdiv {
	box-shadow:none;
}
.menu-pinned .page_content {
	width: calc(100% - 250px) !important;
}

/* CURRENTLY SELECTED PAGE IN THE MENU */
.main_menu > a.menu-active-link {
	font-weight:650;
	color:var(--main-highlight-color) !important;
}

.menu-main > .accordion-item > .accordion-header > .accordion-button > .material-symbols-rounded:not(.menu-pin-toggle) {
	font-size:30px;
	margin-right:20px;
	color:var(--main-text-color);
}

.menu-main > .accordion-item > .accordion-header > .accordion-button > a > .material-symbols-rounded {
	font-size:30px;
	margin-right:20px;
	color:var(--main-text-color);
}

/*.main-menu > .accordian-item > .accordian-collapse > .accordian-body > .list-group > .list-group-item > a {*/
.main_menu > a {
	text-decoration:none !important;
	display:inline-block;
	width:100%;
	height:100%;
}

.menu_icon {
	vertical-align:middle;
}

.submenu{
	margin:8px 0px 10px 15px;
	box-sizing:border-box;
	color:#000000;
	background-color:#FFFFFF;
	width:95%;
	padding-left:45px;
	text-align:left;
}

.submenu > a { 
	padding:0px;
	height:30px;
	text-decoration:none;
}

.menu_item {
	border-left:1px solid grey;
	list-style-type:none;
	margin-left:0px;
	height:30px;
	line-height:30px;
	width:90%;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:10px;
	padding-right:10px;
	font-size:12px;
	text-transform:uppercase;
}

.su_menu_item, .developer, .coming_soon {
	display:none;
}
/* ==================================================================
   .page-nav-menu - the detail-page section tab strip (addressbookedit,
   clientedit, branchedit, invoiceadd, purchaseadd, settings,
   customerSegmentEdit...). Modernized 02-10-2026 (docs-dev/styling 6):
   underline tabs on the strip's own border-bottom baseline - the same
   "you are here" gesture as the evo-subrail above it, one weight
   lighter. The old look (flat gray active box, white 1px-bordered
   tabs, square corners) predates the house standard - don't copy it
   back per-screen.
   The active state must cover .nav-link.active AND the <li> variants:
   some tab bars (opportunityedit.menu) toggle .active on the
   <li class="nav-item"> itself rather than on the inner link.
   ================================================================== */
.page-nav-menu {
	margin-bottom: 25px;
	/* The strip owns its baseline. !important on purpose: the screens wrap
	   the nav in varying Bootstrap utilities (border-bottom, border-secondary,
	   with/without pb-0), which made the baseline render at different weights
	   and colours per page. These win every such tie, so the 1px line and the
	   fused 3px active underline are identical everywhere. */
	padding-bottom: 0 !important;
	border-bottom: 1px solid #e3e6ea !important;
}
/* Strips built as Bootstrap .nav-tabs (purchaseadd, invedithist): the
   framework's own bordered-box tab look must not resurface over the
   house underline. */
.page-nav-menu.nav-tabs {
	--bs-nav-tabs-border-width: 0;
	--bs-nav-tabs-link-active-bg: transparent;
	--bs-nav-tabs-link-hover-border-color: transparent;
	--bs-nav-tabs-link-active-border-color: transparent;
}
/* Both selectors on purpose: the 3-class one outguns Bootstrap's
   .navbar-light .navbar-nav .nav-link colour; the 2-class one still
   covers a strip built without .navbar-nav. */
.page-nav-menu .nav-link,
.page-nav-menu .navbar-nav .nav-link {
	background-color: transparent;
	color: #5c6673;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;             /* underline sits ON the baseline */
	border-radius: 6px 6px 0 0;
	padding: 8px 14px !important;
	font-size: 10pt;
	letter-spacing: .02em;
	text-transform: uppercase;
	transition: background-color .12s, color .12s, border-color .12s;
	/* !important on purpose: legacy showdivs() copies marked the active
	   tab with element.style.textDecoration="underline", which doubles
	   up with the border underline. The copies are being cleaned, but
	   this guards any straggler - the text itself is never underlined
	   in this strip. */
	text-decoration: none !important;
}
.page-nav-menu .nav-link:hover:not(.active),
.page-nav-menu .navbar-nav .nav-link:hover:not(.active) {
	color: var(--main-text-color, #1f2733);
	background-color: rgba(17, 24, 39, .05);
}
.page-nav-menu .nav-link.active,
.page-nav-menu .navbar-nav .nav-link.active,
.page-nav-menu .nav-item.active .nav-link,
.page-nav-menu .nav-item .active {
	color: var(--main-text-color, #111827) !important;
	font-weight: bold;
	background-color: transparent;
	border-bottom: 3px solid var(--main-highlight-color, #293b3d);
	border-radius: 6px 6px 0 0;
}

.page-nav-menu  .nav-item {
	background-color: transparent;
	color: grey;
	border: 0px;
	padding: 0px !important;
	margin:0px;
	font-size: 10pt;
	border-radius: 0px;
	text-transform: uppercase;

}

/* Counts ride inside tab labels ("History (2)") - as a .tab-count pill
   they stop shouting at label weight. Plain "(n)" text still works. */
.page-nav-menu .nav-link .tab-count {
	font-weight: normal;
	font-size: .72em;
	line-height: 1;
	background: rgba(17, 24, 39, .08);
	border-radius: 10px;
	padding: 3px 7px;
	margin-left: 4px;
	vertical-align: middle;
}
.page-nav-menu .nav-link.active .tab-count,
.page-nav-menu .nav-item.active .nav-link .tab-count {
	background: var(--main-highlight-color, #293b3d);
	color: #fff;
}

.page-nav-menu .optabs > div {
	margin-top: -1px;
	padding: 1rem;
	xborder: solid 1px gray;
}
.page-nav-menu .nav-link a {
	text-decoration: none !important;
}

.pageheader {
	/*overflow:hidden;*/
	width: 100%;
	position:relative;
	box-sizing:border-box;
	height:45px;
	vertical-align:baseline;
	white-space:nowrap;
	text-align:center;
	background-color:var(--main-highlight-color);
	padding-right:20px;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:0px 0px 0px 4px;
	margin-top:0px;
	margin-bottom:10px;
	margin-right:-7px;
	margin-left:auto;
	box-shadow:2px 3px 2px #c4c3c3;
}

.subcontainer{
	overflow:hidden;
	width:95%;
	white-space:nowrap;
	padding-right:10px;
	padding-left:10px;
	padding-top:4px;
	padding-bottom:4px;
	border-radius:8px;
	border-color:grey;
	margin-bottom:4px;
	margin-left:auto;
	margin-right:auto;
}

.subMenuButton{
	border-bottom:1px solid black;
	border-radius:0px;
	border-color:grey;
	font-size:15px;
	font-weight:bold;
	height:35px;
	line-height:27px;
	text-transform:uppercase;
	text-decoration:none;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:10px;
	padding-right:20px;
	float:left;
	display:inline;
	margin-left:0px;
	cursor:pointer;
}

.pagetitle {
	margin:10px 15px 15px;
	font-size:18px;
	font-weight:400;
	color: #FFF;
	float:left;
	text-transform:uppercase;
	text-shadow:0px 1px 1px #949090;
	padding-left:10px;
	max-width:50%;
	display:inline;
}

.pagetitle  > a, .pagetitle > i   {
	margin:10px 15px 15px;
	color: rgba(255, 255, 255, 1);
	font-size:18px;
	font-weight:400;
	vertical-align: baseline;
	display:inline;
	/*font-weight:500;*/
}

.pagebutton{
	background-color:var(--main-highlight-color);
	color:#FFF;
	height:35px;
	line-height:27px;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:5px;
	padding-right:5px;
	float:left;
	display:inline;
	margin-left:5px;
	margin-right:5px;
	text-transform: uppercase;
}

.pagebutton > a {
	font-size:28px;
}
.pagebutton i {
	text-shadow:0px 2px 2px #333;
	color: rgba(255, 255, 255, 1);
	font-size: 28px;
	margin-left:10px;
}
.pageheader > .pagebutton {
	float:right;
	margin-left:10px;
}

.divEffect{
	background-color:#eee;
	background: -moz-linear-gradient(top, var(--main-highlight-color), #FFFFFF);
	background: -webkit-gradient(linear, left top, left bottom, from(var(--main-highlight-color)), to(#FFFFFF));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eee, endColorstr=#999, GradientType=1)";
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#CBC8CF', EndColorStr='#FFFFFF', GradientType=0);
	height:90px;
	margin:0px;
	margin-top:20px;
	z-index:-2;
	position:absolute;
	width:100%;
	top:0px;
	left:0px;
}

.divEffectDark {
	z-index:-1;
	width:25px;
	height:280px;
	position:absolute;
	top:0px;
	left:0px;
	background: -moz-linear-gradient(top, var(--main-highlight-color), #FFFFFF);
	background: -webkit-gradient(linear, left top, left bottom, from(var(--main-highlight-color)), to(#FFFFFF));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--main-highlight-color), endColorstr=#FFFFFF, GradientType=1)";
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='var(--main-highlight-color)', EndColorStr='#FFFFFF', GradientType=0);
}

.footer {
	font-family: Arial, Helvetica, sans-serif;
	padding-top:20px;
	color:#000000;
	bottom:0;
	width:100%;
	height:40px;
	text-align:center;
	font-weight:bold;
	background-color: rgb(160, 160, 160);
	
}

.scrollingDiv {
	width:100%;
	max-height:550px;
	overflow-y: auto;
	overflow-x: hidden;
	padding:0px;
	margin:0px;
}


.alertDiv {
	position:fixed;
	visibility:hidden;
	bottom:80px;
	right:20px;
	background: rgba(205,97,85,1);
	color:white;
	width:450px;
	min-height:75px;
	z-index:30;
	padding:5px 5px 30px 20px;
	transition:visibility 600ms, width 500ms;
}

.searchDiv {
	position:fixed;
	top:20px;
	margin:10px !important;
	right:50px;
	background: white;
	min-height:75px;
	min-width:400px;
	border:1px solid black;
}

.alertDiv > .text-right > .material-symbols-rounded {
	color:white;
}
.title-row > .material-icons {
	color:white;
}

.alertDivFade {
	visibility:hidden;
}
.noticeDiv {
	color:black;
	background: rgba(217, 232, 204,1);
}

.popupDiv {
	position:fixed;
	visibility:hidden;
	/*display:none;*/
	top:0px;
	right:0;
	background-color: rgb(255, 255, 255);
	border-left:1px solid black;
	width:50px;
	height:100vh;
	z-index:20;
	padding:65px 5px 30px 20px;
	overflow:auto;
	transition:visibility 0ms, background-color 250ms, width 200ms;
	/*transition:display 0ms, background-color 250ms, width 250ms;*/
}

.popupDivCollapse {
	position:fixed;
	/*visibility:hidden;*/
	/*display:none;*/
	top:0px;
	right:0;
	background-color: rgb(255, 255, 255);
	border-left:1px solid black;
	width:440px;
	height:100vh;
	min-height:100vh;
	z-index:20;
	padding:65px 5px 30px 20px;*/
	overflow:auto;
	/*display:inline-block;*/
	/*transition:visibility 0ms, background-color 250ms, width 250ms;*/
	/*transition:display 0ms, background-color 250ms, width 250ms;*/
}

.popupDivFade {
	/*padding:15px;*/
	width:440px;
	position:fixed;
	/*display:inline-block;*/
	visibility:visible;
	background: rgba(255,255,255,1);
}


.popupDivLarge {
	position:fixed;
	width:800px;
	visibility:visible;
	display:inline-block;
	background: rgba(255,255,255,1);
}

.popupDivHeader {
	position:relative;
	margin:18px 0px 18px 0px;
	/*border:1px solid black;*/
}

.popupDivHeader > .left {
	font-size:24px;
	font-weight:550;
	text-align:left;
	float:left;
}
.popupDivHeader > .right {
	font-size:30px;
	font-weight:650;
	text-align:left;
	float:right;
}


/*# START TOGGLE SWITCH */
.cmn-toggle {
position: absolute;
visibility: hidden;
display: none;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}

input.cmn-toggle-round-flat + label {
padding: 2px;
width: 70px;
height: 30px;
background-color: #dddddd;
border-radius: 30px;
transition: background 0.3s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 30px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 30px;
background-color: #dddddd;
border-radius: 30px;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 35px;
background-color: #8ce196;
}
/*# END TOGGLE */

.clock {
	font-size: 90px;
	width: 80%;
	/*margin: 200px;*/
	text-align: center;
	/*border: 2px solid black;*/
	border-radius: 20px;
}

.combo {position:relative;width:190px;text-align:left;padding:0;margin:0;}
.combo * {padding:0;margin:0;}
.combo label {display:block;float:left;width:92px;text-align:right;}
.combo input {width:92px; background-color:#cfc;height:1.5em;z-index:0;}
.combo ul {padding:1px;border:2px solid #ccc;width: 89px;background-color:#cfc;position:absolute;right:3px;top:1.5em;display:none;z-index:1;}
.combo li {display:block; width: 100%;}
/* days option */
.days_option ul { list-style: none; }
.days_option ul li {
	width: 100px;
	float: left;
	height: 35px; 
} 
.days_option ul li input[type="checkbox"] { height: 8px; width: 8px;display: inline;}
.days_option_container { height:70px;}
.send_fensa_btn { margin-top:20px;text-align: center; }
.send_fensa_btn a { padding: 6px 30px; text-decoration: none;text-align: center;}
.quoteregistertable th:after { content:none !important;}
.abbrev_name {width: 24px;height: 24px;background: #999999;color: #fff;text-align: center;vertical-align: middle;border-radius: 50%;line-height: 24px;}

.modal-header > div {
	text-transform: uppercase !important;
	font-weight: bold !important;
	font-size: 18px !important;
}

.error {
	border: solid 1px red !important;
}

.error:focus {
	border: solid 1px red !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25) !important;
}

.sbpri {
	transform: scale(1.1);
	background: rgba(var(--bs-info-rgb),var(--bs-bg-opacity)) !important;
}

.sbselfilotherbins,
.sbselfilquicklist,
.sbselfilreceivelist,
.sbselfiljoblist,
.sbselfilsep {
	margin: 5px 0px;
	text-transform: uppercase;
	font-size: 1.15rem !important;
}

.sbselfilotherbins > option,
.sbselfilquicklist > option,
.sbselfilreceivelist > option,
.sbselfiljoblist > option,
.sbselfilsep > option {
	text-transform: initial;
	font-size: 1.05rem !important;
	padding-left: 2.5rem !important;
}

.sbselfilquicklist {
	color: darkorange !important;
	font-weight: bold;
}

.sbselfilreceivelist {
	color: darkgreen !important;
	font-weight: bold;
}

.sbselfiljoblist {
	color: darkcyan !important;
	font-weight: bold;
}

.sbselfilquicklist .sbselfilsep {
	background: darkorange !important;
}

.sbselfilreceivelist .sbselfilsep {
	background: darkgreen !important;
}

.sbselfiljoblist .sbselfilsep {
	background: darkcyan !important;
}

.filtered_list option {
	padding: 5px 5px 0px 5px;
}

.breadcrumb-chevron .breadcrumb-item { display: flex;gap: inherit;align-items: center;padding-left: 0;line-height: 1; }
.breadcrumb-chevron .breadcrumb-item::before { gap: inherit;float: none;width: 1rem;height: 1rem;}
.breadcrumb-custom .breadcrumb-item { position: relative;flex-grow: 1;padding: .75rem 3rem;}
.breadcrumb-custom .breadcrumb-item::before {display: none;}
.breadcrumb-custom .breadcrumb-item::after { position: absolute;top: 50%;right: -25px;z-index: 1;display: inline-block;width: 50px;height: 50px;margin-top: -25px;content: "";background-color: inherit;border-top-right-radius: .5rem;box-shadow: 1px -1px currentcolor;transform: scale(.707) rotate(45deg); }
.breadcrumb-custom .breadcrumb-item:first-child { padding-left: 1.5rem; }
.breadcrumb-custom .breadcrumb-item:last-child { padding-right: 1.5rem; }
.breadcrumb-custom .breadcrumb-item:last-child::after {display: none;}

.table-fixed tfoot tr {
	position: sticky;
	bottom: 0;
}

.table-fixed tfoot td {
	background: white;
}

/* ===================================================================
 * PIPELINE SUB-RAIL
 * -------------------------------------------------------------------
 * The slim bar fused to the bottom of a .pageheader, rendered by
 * pipelineRail() in functions.php. It re-skins the Bootstrap breadcrumb
 * that displayPipeline() already emits - that function is untouched, so
 * any caller still on displayPipeline() keeps the legacy chevron look
 * (opportunityedit.inc, jobeditgen.inc).
 *
 * There is deliberately NO wrapper element. The header is styled via
 * :has(+ .evo-subrail), which keeps each page's change to a single word
 * (displayPipeline -> pipelineRail) with no markup restructuring. :has()
 * is already load-bearing in this codebase (registrysortcol.inc).
 *
 * Colours are all custom properties, so a palette is one token block.
 * Dark is the default; light is the opt-in, chosen per user and stored
 * account-wide (PipelineContext::theme()).
 * =================================================================== */

/* --- Palettes ----------------------------------------------------- */
.evo-subrail--dark {
	--rail-bg:var(--main-highlight-color);
	--rail-wash:rgba(0,0,0,.26);
	--rail-top-edge:rgba(0,0,0,.35);
	--rail-bottom-edge:transparent;
	--rail-fg:rgba(255,255,255,.85);        /* steps already passed */
	--rail-fg-ahead:rgba(255,255,255,.52);  /* steps still to come  */
	--rail-fg-current:#fff;
	--rail-current-bg:rgba(255,255,255,.1);
	--rail-hover:rgba(255,255,255,.1);
	--rail-seam:rgba(255,255,255,.13);
	--rail-accent:#ffc21f;
	--rail-line-done:rgba(245,176,26,.45);
	--rail-line-ahead:rgba(255,255,255,.16);
	--rail-glow:0 0 10px rgba(255,194,31,.55);
	--rail-icon:rgba(255,255,255,.85);
	--rail-icon-hover:#fff;
}
.evo-subrail--light {
	/* Pulled toward the header colour so the strip reads as part of the
	   header block rather than as the top of the page content. */
	--rail-bg:#dbdde1;                  /* static fallback, see @supports */
	--rail-wash:transparent;
	--rail-top-edge:rgba(0,0,0,.28);
	--rail-bottom-edge:rgba(17,24,39,.14);
	--rail-fg:#4c5470;
	--rail-fg-ahead:#828a9c;
	--rail-fg-current:#111827;
	--rail-current-bg:#fff;             /* the darker strip lifts this */
	--rail-hover:rgba(17,24,39,.07);
	--rail-seam:rgba(17,24,39,.13);
	--rail-accent:#e39a05;
	--rail-line-done:rgba(227,154,5,.6);
	--rail-line-ahead:rgba(17,24,39,.17);
	--rail-glow:none;                   /* a glow smudges on a light fill */
	--rail-icon:#5d6472;
	--rail-icon-hover:#111827;
}
/* Where color-mix() is available, derive the light fill from the live
   theme so the strip keeps the same relationship to the header colour on
   every theme instead of being pinned to one slate. Guarded, because an
   unsupported color-mix() would make --rail-bg invalid and blank the fill. */
@supports (background:color-mix(in srgb, red 10%, blue)) {
	.evo-subrail--light {
		--rail-bg:color-mix(in srgb, var(--main-highlight-color) 12%, #f1f3f6);
	}
}

/* --- Header fusion ------------------------------------------------ */
/* Close the gap and hand the rounded corner + drop shadow down to the
   strip, so header and strip read as one block. */
.pageheader:has(+ .evo-subrail) {
	margin-bottom:0; box-shadow:none; border-radius:0;
}
/* Dismissed: the strip collapses, so the header takes its own corner and
   shadow back - otherwise it is left on a square edge with a stray 1px
   border where the strip used to be. */
.pageheader:has(+ .evo-subrail.evo-rail-off) {
	margin-bottom:10px; box-shadow:2px 3px 2px #c4c3c3; border-radius:0 0 0 4px;
}
.evo-subrail.evo-rail-off { display:none; }

/* --- The strip ---------------------------------------------------- */
/* NOT display:flex. A flex container is a block formatting context, and a
   BFC may not overlap floats - the header's .pagebutton icons float and
   overflow its fixed 45px height, so a flex strip gets pushed ~5px clear
   of them and the page background shows through as a white seam. */
.evo-subrail {
	display:block;
	width:100%; margin:0 -7px 10px auto;   /* mirrors .pageheader's geometry */
	background-color:var(--rail-bg);
	background-image:linear-gradient(var(--rail-wash),var(--rail-wash));
	border-top:1px solid var(--rail-top-edge);
	border-bottom:1px solid var(--rail-bottom-edge);
	border-radius:0 0 0 4px;
	box-shadow:2px 3px 2px #c4c3c3;
}
.evo-subrail > nav { display:block; height:auto; margin:0 !important; }

/* Full bleed - no track, no padding, no rounding. */
.evo-subrail ol.breadcrumb {
	display:flex; align-items:stretch; flex-wrap:nowrap;
	width:100%; margin:0; padding:0;
	background:transparent !important;
	border:0 !important; border-radius:0 !important;
	overflow:visible !important;
}

/* Each step takes an equal share of the width. .text-bg-* sets colour AND
   background with !important, so both have to be forced back here. */
.evo-subrail ol.breadcrumb li.breadcrumb-item {
	position:relative; flex:1 1 0; min-width:0;
	display:flex; align-items:center; justify-content:center;
	margin:0; padding:.62rem .7rem .68rem;
	background-color:transparent !important;
	color:var(--rail-fg) !important;
	font-size:11px; font-weight:700; letter-spacing:.09em; line-height:1;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	transition:color .12s ease, background-color .12s ease;
}
.evo-subrail ol.breadcrumb li.breadcrumb-item.text-bg-secondary:hover {
	color:var(--rail-fg-current) !important;
	background-color:var(--rail-hover) !important;
}

/* The progress line. This is the legacy skin's rotated-square chevron
   pseudo-element, reset and repurposed - hence all the geometry undos. */
.evo-subrail ol.breadcrumb li.breadcrumb-item::after {
	content:"" !important; display:block !important;
	position:absolute; left:0; right:0; bottom:0; top:auto;
	width:auto; height:2px; margin:0;
	transform:none; box-shadow:none; border-radius:0;
	background-color:var(--rail-line-done);
}

/* Steps still ahead: dimmer label, unfilled line. CSS has no previous-
   sibling selector, so this works the other way round - everything
   FOLLOWING the current step is "not done yet". Relies on the current step
   carrying .text-bg-warning, which is what displayPipeline() applies when
   a step has no explicit bgclass. */
.evo-subrail ol.breadcrumb li.text-bg-warning ~ li.breadcrumb-item:not([style]) {
	color:var(--rail-fg-ahead) !important;
}
.evo-subrail ol.breadcrumb li.text-bg-warning ~ li.breadcrumb-item:not([style])::after {
	background-color:var(--rail-line-ahead);
}

/* Current step, raised out of the strip like a tab. */
.evo-subrail ol.breadcrumb li.breadcrumb-item:not(.text-bg-secondary):not([style]) {
	color:var(--rail-fg-current) !important;
	background-color:var(--rail-current-bg) !important;
	font-weight:800;
}
.evo-subrail ol.breadcrumb li.breadcrumb-item:not(.text-bg-secondary):not([style])::after {
	height:3px; background-color:var(--rail-accent); box-shadow:var(--rail-glow);
}

/* Seam between two steps. A hairline, not a chevron - the progress line
   below already carries the direction, and a glyph sitting on a 1px seam
   just reads as grit. */
.evo-subrail ol.breadcrumb li.breadcrumb-item + li.breadcrumb-item:not([style])::before {
	content:""; display:block; float:none; margin:0; padding:0;
	position:absolute; left:0; top:22%; bottom:22%; width:1px;
	background-color:var(--rail-seam);
}

/* Dismiss sits flush at the right end, no progress line under it. */
.evo-subrail ol.breadcrumb li.breadcrumb-item[style] {
	flex:0 0 auto; align-self:stretch; max-width:none !important;
	display:flex; align-items:center; justify-content:center;
	padding:0 15px; font-size:0;
}
.evo-subrail ol.breadcrumb li.breadcrumb-item[style]::after { display:none !important; }
.evo-subrail ol.breadcrumb li.breadcrumb-item[style]:hover {
	background-color:var(--rail-hover) !important;
}

/* Appearance trigger. Rendered after the rail, then moved into the list
   just before the dismiss cell on load. It only becomes visible once it IS
   in the list, so a half-placed trigger can never render adrift under the
   strip. Everything it does needs JS anyway. */
.evo-subrail .evo-rail-cog {
	display:none;
	align-items:center; justify-content:center;
	border:0; background:transparent; padding:0 13px; margin:0; position:relative;
}
.evo-subrail ol.breadcrumb .evo-rail-cog {
	display:flex; flex:0 0 auto; align-self:stretch;
}
.evo-subrail ol.breadcrumb .evo-rail-cog:hover { background-color:var(--rail-hover); }
.evo-subrail ol.breadcrumb .evo-rail-cog::before {
	content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px;
	background-color:var(--rail-seam);
}

/* Icons do NOT inherit the cell's colour - .material-symbols-rounded
   carries its own dark grey, invisible on a dark strip. Set the colour on
   the glyph, and give it weight to hold up at this size. */
.evo-subrail ol.breadcrumb li.breadcrumb-item[style] .material-symbols-rounded,
.evo-subrail ol.breadcrumb .evo-rail-cog .material-symbols-rounded {
	font-size:18px; line-height:1; margin:0;
	color:var(--rail-icon);
	font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
	transition:color .12s ease;
}
.evo-subrail ol.breadcrumb li.breadcrumb-item[style]:hover .material-symbols-rounded,
.evo-subrail ol.breadcrumb .evo-rail-cog:hover .material-symbols-rounded {
	color:var(--rail-icon-hover);
}

@media (max-width:1100px) {
	.evo-subrail ol.breadcrumb li.breadcrumb-item {
		padding-left:.35rem; padding-right:.35rem;
		font-size:10px; letter-spacing:.05em;
	}
}

/* Billing address mode picker on the Edit Site screen. Three radio cards replace an
   empty form plus the hint "Leave above fields Blank to use billing address on
   Customer" -- which gave no indication of which mode was actually in effect. */
.billingChoice {
	transition: background-color .12s ease, border-color .12s ease;
}
.billingChoice:hover {
	background-color: #f5f5f5;
}
.billingChoice.active {
	border-color: #6c757d !important;
	background-color: #f0f0f0;
}
.billingChoice .material-symbols-rounded {
	font-size: 18px;
}

/* Brief confirmation flash after the Regenerate button rewrites a delivery/post
   label, so the change is visible without an alert. */
.labelJustRebuilt {
	background-color: #fff6d8 !important;
	transition: background-color .25s ease;
}
.labelStaleBadge .material-symbols-rounded {
	font-size: 15px;
}

/* Site summary tiles (Edit Site, top of the General tab).
   Bare stat tiles: label, value, and a status line only where there is a genuine
   state to report. Values use the font's default proportional figures -- tabular
   figures give every digit the width of a 0, which reads loose at this size and is
   only worth it for columns that must align vertically. */
.siteSummaryTile {
	background-color: #fff;
	transition: background-color .12s ease, border-color .12s ease;
}
.siteSummaryTile.pointer:hover {
	background-color: #f5f5f5;
	border-color: #6c757d !important;
}
.siteSummaryLabel {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.siteSummaryLabel .material-symbols-rounded {
	font-size: 15px;
}
.siteSummaryValue {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}
/* Seven tiles wrap to two rows on narrow screens rather than shrinking to
   unreadable slivers. */
@media (max-width: 1400px) {
	.siteSummaryRow > .col { flex: 0 0 auto; width: 25%; }
}
@media (max-width: 768px) {
	.siteSummaryRow > .col { width: 50%; }
}

/* ===========================================================================
   GOOGLE PLACES ADDRESS SEARCH  (.evo-places)
   ---------------------------------------------------------------------------
   The address quick-search that sits above the address fields on siteedit,
   siteadd, opportunityadd, leadadd and clientadd. It was a grey `alert
   alert-secondary` box wrapping a bootstrap input-group, labelled
   "SHORTCUT: Address Quick Search (use Google to find and populate the fields
   below)" -- a sentence of instructions doing the job of a label.

   Two parts, and the second is the one that matters most: Google renders its own
   suggestion dropdown (.pac-container) outside our markup, and nothing in the app
   had ever styled it. Six files carry an inline `.pac-container { z-index }` patch
   and nothing else, so every screen showed Google's stock 2012 dropdown against a
   Bootstrap 5 page. Styling it here reaches every screen at once.

   NOTE: .pac-container::after carries the "Powered by Google" mark. Google's terms
   require that attribution whenever predictions are shown outside a Google map --
   it must not be hidden.
   =========================================================================== */

.evo-places {
	position: relative;
	margin-bottom: 1rem;
}
.evo-places-input.form-control {
	padding-left: 46px;
	padding-right: 34px;
	height: 42px;
	border-radius: 6px;
	background-color: #fbfbfb;
	transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.evo-places-input.form-control::placeholder {
	color: #9a9a9a;
}
.evo-places-input.form-control:focus {
	background-color: #fff;
	border-color: #6c757d;
	box-shadow: 0 0 0 .18rem rgba(108, 117, 125, .15);
}
/* A fixed, flex-centred tile rather than a bare glyph nudged with translateY.
   The icon font sets its own line-height and baseline, so absolute-positioning the
   glyph itself left it visibly off-centre; centring it inside a box of known size
   removes the guesswork. It also gives the field a deliberate leading adornment
   instead of a symbol floating in whitespace.
   Note the base .material-symbols-rounded rule is FILL 1 / wght 200 -- outline-ish
   icons such as location_searching render as a near-solid blob at that weight,
   which is what the first attempt looked like. pin_drop reads correctly filled. */
.evo-places-icon {
	position: absolute;
	left: 6px;
	top: 6px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background-color: #eceff1;
	color: #546069;
	font-size: 18px;
	line-height: 1;
	pointer-events: none;
	transition: background-color .12s ease, color .12s ease;
}
.evo-places-input.form-control:focus ~ .evo-places-icon {
	background-color: #dde3e7;
	color: #212529;
}
/* Only offered once there is something to clear. */
.evo-places-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8a8a8a;
	line-height: 1;
}
.evo-places-clear:hover {
	background: #ececec;
	color: #212529;
}
.evo-places-clear .material-symbols-rounded { font-size: 17px; }
.evo-places.has-value .evo-places-clear { display: flex; }
.evo-places-hint {
	margin-top: 4px;
	font-size: 11.5px;
	color: #8a8a8a;
}

/* --- Google's own suggestion dropdown ------------------------------------- */
.pac-container {
	/* Above modals: several screens mount this inside one. */
	z-index: 100000 !important;
	margin-top: 4px;
	border: 1px solid #dcdcdc;
	border-top: 1px solid #dcdcdc;   /* Google ships border-top:1px solid #d9d9d9 */
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	background-color: #fff;
	font-family: inherit;
	overflow: hidden;
	padding-bottom: 2px;
}
.pac-item {
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.35;
	color: #6c757d;
	border-top: 1px solid #f1f1f1;
	cursor: pointer;
}
.pac-item:first-child { border-top: 0; }
.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover {
	background-color: #f2f4f5;
}
/* The main line of each suggestion -- the place or street name. */
.pac-item-query {
	font-size: 13.5px;
	color: #212529;
	padding-right: 4px;
}
.pac-matched {
	font-weight: 700;
	color: #212529;
}
/* Google's sprite pin. Kept (it marks the row as a Places result) but toned down
   so it does not out-shout the text. */
.pac-icon {
	margin-top: 2px;
	opacity: .55;
}

/* ############################################################
   Site history panels (siteedit.inc "History" tab)

   Each linked cell holds a real <a href>. The row used to ALSO carry
   onmouseup="window.location=...", which fired on every mouse button, so a right
   click navigated as the context menu opened and middle / ctrl+click hijacked the
   new tab. That handler is gone; stretching the anchor over the cell's padding box
   is what keeps the whole row clickable without it.

   The linked cell hands its padding to the anchor rather than the anchor trying to
   cancel it with negative margins -- a block anchor's width:auto inside a table cell
   does not expand back over negative side margins, so that approach left the anchor
   6.5px short of the cell (measured, root font is 13px so .25rem = 3.25px). Zeroing
   the cell and padding the anchor is exact by construction.

   Only cells that actually carry a link get .sh-cell, so unlinked rows and the
   Loading / empty / error rows keep normal .table-sm padding. Colour and underline
   are left to the global `a` rule so the tab looks unchanged.
   ############################################################ */
.sh-body td.sh-cell {
	padding: 0;
}
.sh-body td.sh-cell > a.sh-link {
	display: block;
	padding: .25rem;
}

/* ############################################################
   Tables in modals (docs-dev/styling.inc §7.2, ruled 05-10-2026)

   Opt-in: nothing here touches a table until it carries one of these
   classes, so existing modals are unchanged until they are migrated.
   Pick the shape by the data, not by habit:
     .evo-facts             facts about one thing (dl, label / value)
     table.evo-mtable       rows to read
       + .evo-mtable-pick     rows to tick (checkbox column first)
       + .evo-mtable-edit     rows to edit (-sm controls in cells)
       + .evo-mtable-stack    rows become cards on a phone (td[data-label])
     .evo-picklist          groups that open into editable children
   Wrap a table in .evo-mtable-wrap when it can grow past a screen; inside
   a long scrolling modal body (opportunityadd) the wrap is optional.
   State is classes only (.is-link, .is-picked, .is-off, .is-error,
   .is-open, .is-invalid): never inline style, so validateForm()'s inline
   red border still wins and nothing needs !important.
   ############################################################ */
.evo-mtable-wrap {
	max-height: min(60vh, 28rem);
	overflow: auto;
	border: 1px solid #dee2e6;
	border-radius: .5rem;
	background: #fff;
}
.evo-mtable {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
}
.evo-mtable > thead > tr > th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f8f9fa;
	color: #5c6673;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-align: left;
	vertical-align: bottom;
	white-space: nowrap;
	padding: .45rem .6rem;
	border-bottom: 1px solid #dee2e6;
}
.evo-mtable > tbody > tr > td {
	padding: .45rem .6rem;
	vertical-align: middle;
	background: #fff;
	border-bottom: 1px solid #eef0f2;
}
.evo-mtable > tbody > tr:last-child > td { border-bottom: 0; }
.evo-mtable > tfoot > tr > td,
.evo-mtable > tfoot > tr > th {
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: #f8f9fa;
	font-weight: 600;
	padding: .45rem .6rem;
	border-top: 1px solid #dee2e6;
}
.evo-mtable .num,
.evo-mtable > thead > tr > th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Hover only where the row does something. */
.evo-mtable > tbody > tr.is-link,
.evo-mtable-pick > tbody > tr { cursor: pointer; }
.evo-mtable > tbody > tr.is-link:hover > td,
.evo-mtable-pick > tbody > tr:hover > td { background: #f4f7fb; }
.evo-mtable > tbody > tr.is-link a { color: inherit; text-decoration: none; display: inline; width: auto; }
.evo-mtable > tbody > tr.is-link:hover a { text-decoration: underline; }
.evo-mtable-pick .evo-mtable-check { width: 2.5rem; }
.evo-mtable-pick .evo-mtable-check .form-check-input { margin: 0; }
/* §1.8 row states: selected (green) and a problem on the row. */
.evo-mtable > tbody > tr.is-picked > td { background: rgba(25,135,84,.06); }
.evo-mtable > tbody > tr.is-picked > td:first-child { box-shadow: inset 4px 0 0 #198754; }
.evo-mtable > tbody > tr.is-error > td { background: rgba(220,53,69,.06); }
.evo-mtable > tbody > tr.is-off > td { opacity: .45; }
/* Empty / no-match / loading / error: one muted row across the table. */
.evo-mtable > tbody > tr.evo-mtable-state > td {
	color: #6c757d;
	text-align: center;
	padding: 1.1rem .6rem;
	background: #fff;
}
.evo-mtable-edit > tbody > tr > td { padding: .3rem .4rem; }
.evo-mtable-edit .form-control,
.evo-mtable-edit .form-select { width: 100%; min-width: 0; }
@media (max-width: 767.98px) {
	.evo-mtable-stack > thead { display: none; }
	.evo-mtable-stack,
	.evo-mtable-stack > tbody,
	.evo-mtable-stack > tbody > tr,
	.evo-mtable-stack > tbody > tr > td { display: block; width: 100%; }
	.evo-mtable-stack > tbody > tr { padding: .4rem .6rem; border-bottom: 1px solid #dee2e6; }
	.evo-mtable-stack > tbody > tr:last-child { border-bottom: 0; }
	.evo-mtable-stack > tbody > tr > td { border: 0; padding: .1rem 0; text-align: left; }
	.evo-mtable-stack > tbody > tr > td[data-label]::before {
		content: attr(data-label);
		display: inline-block;
		min-width: 7.5rem;
		color: #6c757d;
		font-size: .75rem;
		text-transform: uppercase;
	}
	.evo-mtable-stack.evo-mtable-edit > tbody > tr > td[data-label]::before { display: block; margin-bottom: .1rem; }
	.evo-mtable-stack .num { text-align: left; }
	.evo-mtable-stack > tbody > tr.evo-mtable-state > td { text-align: center; }
}

/* Facts about one thing: label / value pairs instead of a 2-column table. */
.evo-facts {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
	gap: .3rem 1rem;
	margin: 0;
}
.evo-facts > dt {
	color: #5c6673;
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding-top: .1rem;
}
.evo-facts > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
	.evo-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.evo-facts > dd { margin-bottom: .45rem; }
}

/* Detailed log modal (#detailedLogModal, library/logDetail.php): the entry's facts in a
   grey panel, then its data by shape - Changes, facts, Lines - then the raw text. */
.ld { text-align: left; }
.ld .ld-head { background: #f8f9fa; border: 1px solid #e3e6ea; border-radius: .5rem; padding: .7rem .9rem; margin-bottom: .9rem; }
.ld .ld-h { color: #5c6673; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 1rem 0 .4rem; }
.ld .ld-body > .ld-h:first-child { margin-top: 0; }
.ld .ld-hmeta { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a939c; margin-left: .35rem; }
.ld .evo-mtable-wrap { margin-bottom: .25rem; }
.ld .ld-facts { padding: 0 .1rem; }
.ld .ld-val { white-space: pre-wrap; overflow-wrap: anywhere; }
/* A wide snapshot scrolls sideways inside its wrap instead of crushing narrow columns. */
.ld .ld-rows { width: max-content; min-width: 100%; }
.ld .ld-rows > tbody > tr > td { max-width: 22rem; }
.ld .ld-rows .ld-val { white-space: normal; }
.ld .ld-json { font-size: .78rem; color: #495057; white-space: pre-wrap; overflow-wrap: anywhere; }
.ld .ld-diff > tbody > tr > td.ld-from { background: rgba(220,53,69,.05); }
.ld .ld-diff > tbody > tr > td.ld-to { background: rgba(25,135,84,.06); }
.ld .ld-diff > tbody > tr.ld-same > td { background: #fff; color: #6c757d; }
.ld .ld-text { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem; padding: .6rem .8rem; max-height: min(50vh, 24rem); overflow: auto; }
.ld .ld-cut { display: flex; align-items: center; gap: .5rem; background: #fff8e1; border: 1px solid #f3d98b; color: #6b5200; border-radius: .5rem; padding: .45rem .75rem; margin-bottom: .9rem; font-size: .88rem; }
.ld .ld-cut .material-symbols-rounded { font-size: 1.1rem; }
.ld .ld-raw { margin-top: 1rem; border-top: 1px solid #eef0f2; padding-top: .6rem; }
.ld .ld-raw > summary { cursor: pointer; color: #5c6673; font-size: .85rem; }
.ld .ld-raw > pre { margin: .5rem 0 0; max-height: min(45vh, 22rem); overflow: auto; background: #f8f9fa; border: 1px solid #e3e6ea; border-radius: .5rem; padding: .6rem .8rem; font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Pick-and-edit list: a group row that ticks, and opens into its children
   (Predefined tasks: template -> its tasks). Children lay out on a grid,
   labels above fields, so nothing sits in a .row/.col inside a cell. */
.evo-picklist {
	border: 1px solid #dee2e6;
	border-radius: .5rem;
	background: #fff;
	text-align: left;
}
.evo-picklist-tools {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .5rem .75rem;
	border-bottom: 1px solid #eef0f2;
	background: #f8f9fa;
	border-radius: .5rem .5rem 0 0;
}
.evo-picklist-tools .form-control { max-width: 18rem; }
.evo-picklist-tools .evo-picklist-count { margin-left: auto; color: #6c757d; font-size: .82rem; white-space: nowrap; }
.evo-pick { border-bottom: 1px solid #eef0f2; }
.evo-pick:last-child { border-bottom: 0; }
.evo-pick-head {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	padding: .55rem .75rem;
	cursor: pointer;
}
.evo-pick-head:hover { background: #f4f7fb; }
.evo-pick-head .form-check-input { margin: 0; flex: 0 0 auto; cursor: pointer; }
.evo-pick-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #212529; overflow-wrap: anywhere; }
.evo-pick-meta { color: #6c757d; font-size: .82rem; white-space: nowrap; }
.evo-pick-chev { color: #6c757d; font-size: 1.35rem; transition: transform .15s; }
.evo-pick.is-open > .evo-pick-head { background: rgba(25,135,84,.06); box-shadow: inset 4px 0 0 #198754; }
.evo-pick.is-open .evo-pick-chev { transform: rotate(180deg); }
.evo-pick-body {
	display: none;
	background: #f8f9fa;
	border-top: 1px solid #eef0f2;
	padding: .2rem .75rem .35rem 2.35rem;
}
.evo-pick.is-open > .evo-pick-body { display: block; }
.evo-pick-item {
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 2fr) minmax(0, 1.5fr) minmax(7.5rem, 1fr);
	gap: .3rem .65rem;
	align-items: start;
	padding: .6rem 0;
	border-bottom: 1px solid #e3e6ea;
}
.evo-pick-item:last-child { border-bottom: 0; }
.evo-pick-tick { grid-row: 1 / span 2; padding-top: 1.45rem; }
.evo-pick-tick .form-check-input { margin: 0; cursor: pointer; }
.evo-pick-wide { grid-column: 2 / -1; }
.evo-pick-field .form-label { font-size: .82rem; color: #495057; margin-bottom: .15rem; }
.evo-pick-field textarea { resize: none; min-height: 2.6rem; overflow: hidden; }
.evo-pick-item.is-off > :not(.evo-pick-tick) { opacity: .4; }
.evo-pick-field.is-invalid .form-control,
.evo-pick-field.is-invalid .input-group-text,
.evo-pick-field.is-invalid .multiSelectInput { border-color: var(--bs-danger); }
.evo-picklist-state { padding: 1rem .75rem; color: #6c757d; text-align: center; }
@media (max-width: 767.98px) {
	.evo-pick-body { padding-left: .75rem; }
	.evo-pick-item { grid-template-columns: 1.4rem minmax(0, 1fr); }
	.evo-pick-tick { grid-row: 1 / span 4; }
	.evo-pick-item > .evo-pick-field,
	.evo-pick-wide { grid-column: 2; }
	.evo-picklist-tools .form-control { max-width: none; }
}

/* ############################################################
   Forms in modals as section cards (docs-dev/styling.inc §7.3, 05-10-2026)

   The New opportunity look (.oa-sec in opportunityadd.inc), shared so other
   modal forms can use it: a grey body, white cards with a small uppercase
   heading, left-aligned labels above fields, and a sticky footer holding
   the primary button. Pilot: taskadd.inc / taskedit.inc.
     <div class="evo-mform">
       <section class="evo-msec"><h6>Task</h6><div class="evo-msec-body">…</div></section>
       <div class="evo-mform-foot"><span class="evo-mform-note">…</span><button class="btn btn-primary">…</button></div>
     </div>
   ############################################################ */
.modal-body:has(> .evo-mform) { background: #f5f6f8; }
/* the form carries its own footer, so the template's empty one is just a white strip under it */
.modal-content:has(> .modal-body > .evo-mform .evo-mform-foot) > .modal-footer { display: none; }
.evo-mform { text-align: left; }
.evo-msec { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; margin-bottom: .75rem; }
.evo-msec > h6 {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #495057;
	margin: 0;
	padding: .65rem .9rem .1rem;
	display: flex;
	align-items: center;
	gap: .45rem;
}
.evo-msec > h6 .material-symbols-rounded { font-size: 1.05rem; color: #6c757d; }
.evo-msec-hint { font-size: .82rem; color: #6c757d; margin: 0; padding: 0 .9rem .3rem; }
.evo-msec-body { padding: .35rem .9rem .75rem; }
.evo-mform .form-label { font-size: .85rem; color: #495057; margin-bottom: .2rem; }
.evo-mform .evo-req::after { content: " *"; color: var(--bs-danger); }
.evo-mform .form-group { margin-bottom: .6rem; }
.evo-mform .form-group:last-child { margin-bottom: 0; }
.evo-mform-foot {
	position: sticky;
	bottom: -1rem;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 -1rem -1rem;
	padding: .65rem 1rem;
	background: #f5f6f8;
	border-top: 1px solid #dee2e6;
}
.evo-mform-note { font-size: .82rem; color: #6c757d; margin-right: auto; }
.evo-mform-foot .btn { width: auto; }

/* ############################################################
   Staff picker (assets/js/staffPicker.js, docs-dev/styling.inc §7.3)

   Pick several people: chips for who is picked, then a search box over an
   inline checkbox list (about 8 rows, scrolls). Replaces multiSelector for
   "additional staff": customers found the dropdown slow to work with.
   The <select multiple> it enhances stays in the form and is what posts.
   ############################################################ */
.evo-staffpick { border: 1px solid #dee2e6; border-radius: .4rem; background: #fff; }
.evo-staffpick-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	padding: .45rem .5rem;
	min-height: 2.4rem;
	align-items: center;
	border-bottom: 1px solid #eef0f2;
}
.evo-staffpick-none { font-size: .85rem; color: #6c757d; padding: 0 .2rem; }
.evo-staffpick-chip {
	display: inline-flex;
	align-items: center;
	gap: .15rem;
	padding: .1rem .2rem .1rem .55rem;
	border-radius: 1rem;
	background: #e7f1ec;
	color: #14532d;
	font-size: .85rem;
	line-height: 1.5;
}
.evo-staffpick-chip button {
	border: 0;
	background: transparent;
	color: inherit;
	width: 1.3rem;
	height: 1.3rem;
	padding: 0;
	border-radius: 50%;
	line-height: 1;
	font-size: 1rem;
	cursor: pointer;
}
.evo-staffpick-chip button:hover,
.evo-staffpick-chip button:focus-visible { background: rgba(20,83,45,.15); outline: none; }
.evo-staffpick-search { position: relative; padding: .4rem .5rem; border-bottom: 1px solid #eef0f2; }
.evo-staffpick-search .material-symbols-rounded {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.1rem;
	color: #6c757d;
	pointer-events: none;
}
.evo-staffpick-search .form-control { padding-left: 2rem; }
.evo-staffpick-list { max-height: 15.5rem; overflow-y: auto; padding: .2rem 0; }
.evo-staffpick-opt {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	padding: .3rem .75rem;
	cursor: pointer;
	font-size: .9rem;
}
.evo-staffpick-opt:hover { background: #f4f7fb; }
.evo-staffpick-opt:focus-within { background: #eef3fa; }
.evo-staffpick-opt .form-check-input { margin: 0; flex: none; cursor: pointer; }
.evo-staffpick-opt.is-picked { font-weight: 600; }
.evo-staffpick-empty { padding: .6rem .75rem; font-size: .85rem; color: #6c757d; }
.evo-staffpick-count { margin-left: auto; font-size: .78rem; color: #6c757d; padding-right: .2rem; }