img { max-width : none !important }

#main-content{
  margin-top:56px;
}

html {
	overflow: -moz-scrollbars-vertical;
	-ms-overflow-y: scroll;
	overflow-y: scroll;
}

.validation-summary.error ul li,
.validation-summary.error ul li label{
	font-size:11px !important;
	color: #B94A48 !important;
}

.control-group .controls input.invalid{
	color: #B94A48;
	border-color: #B94A48;
}

#search-form{
	float:right;
}

#search-form button{
	margin-left:10px;
}

/* Flatten Btn style */
.btn, .btn-group {
	background-image: none;
    text-shadow: none;
    box-shadow: none;
	border-color: rgba(0, 0, 0, 0);
}

.btn.cancel {
	float: left;
	margin-right:3px;
}

.btn.btn-clear {
    background: none;
    border: none;
    box-shadow: none;
}

table.tablesorter thead tr .header.small{
	font-size:11px;
}

#pager input[type="text"],
#pager select{
	margin:0 5px;
	margin-bottom:22px;
}

.modal{
	color: #333 !important;
	text-shadow: none;
}

.modal form {
	margin-bottom: 0 !important;
}

.modal form .control-group{
	float: left;
	text-align: left;
	width:225px;
}

.modal .modal-footer label.checkbox{
	width:auto !important;
}

.modal .modal-footer #btn-delete{
	float:left;
	margin-right:15px;
}

article table tr.selected td,
table#orders-table tbody tr:hover td,
table#price-count tbody tr:hover td{
	background-color: #51A351 !important;
	color: #fff !important;
	cursor: pointer;
	text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
}

table#orders-table tbody tr:hover td a,
table#price-count tbody tr:hover td a {
	color:#fff;
}

table#price-count tbody tr td.stock-count.level2{
	background-color:#F89406;
	color:#fff;
}
table#price-count tbody tr td.stock-count.level1{
	background-color: #BD362F;
	color:#fff;
}
table#price-count tbody tr td.stock-count.add-info{
	background-color: #49AFCD;
	color:#fff;
}
table#price-count tbody tr.selected-row td{
	background-color: #BD362F;
	border-color: #EED3D7;
	color: #FFF;
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

}

th.header {
	position: relative;
	padding-right: 20px; /* leave space for arrow */
}

/* Sorting descending (↓) */
th.headerSortDown::after {
	content: "▼"; /* down arrow */
	position: absolute;
	right: 5px;
	font-size: 0.7em;
	color: #555;
}
  
/* Sorting ascending (↑) */
th.headerSortUp::after {
	content: "▲"; /* up arrow */
	position: absolute;
	right: 5px;
	font-size: 0.7em;
	color: #555;
}

.tablesorter thead th {
	position: sticky;
	cursor: pointer;
	top: -1px;
	background: #fff;   /* or table header background */
	z-index: 2;         /* make sure it stays above rows */
}

#stock-alerts p{
	font-size:11px;
}

#stock-alerts p span{
	text-transform:uppercase;
}

#stock-alerts table tr.group-name{
	text-transform:capitalize;
	font-weight:bold;
	cursor: pointer;
}

#rads2go-search-form select{
	margin-right:3px;
	margin-top: -4px;
}
#rads2go-search-form label {
	margin-right:15px;
}
#rads2go-search-form #reset-button{
	float: right;
}

#price-count tr#no-items-found { display: none;}

#price-count tr td{
	vertical-align: middle;
	text-align: center;
}
#price-count tr td:nth-child(1){
	text-align: left;
}
#price-count tr td.thumb{
	text-align: center;
	padding-top: 8px;
}

#current-date{
	float: right;
	position: relative;
	top: -30px;
	margin-right: 15px;
	color: #fff;
}

#logo {
	background-image: url('/workspace/graphics/logos/Castrads_Stacked_Wordmark_White_logo.png');
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 36px;
	margin: 2px 10px 2px 0;
	width: 160px;
}

.tab-content{
	overflow: visible !important;
}

.AnyTime-win{
	z-index: 99999 !important;
}

input[type="text"],select
{
	cursor: pointer;
}
.control-group .controls select {
	/*width: 100%;*/
}
span.loading{
	background-image: url('/workspace/images/loading.gif');
	background-repeat: no-repeat;
	bottom:0;
	display: inline-block;
	height:32px;
	margin-right:5px;
	position: absolute;
	width:32px;
}

td span.loading-data {
	background-image: url('/workspace/images/graphics/loading/ajax-loader.gif');
	background-repeat: no-repeat;
	display: block;
	height: 80px;
	margin: 0 auto;
	width: 80px;
}

div.alert{
	position: relative;
}

td div.btn-group{
	float:right;
}

#preview{
	background:#333;
	border:1px solid #ccc;
	color:#fff;
	display:none;
	padding:5px;
	position:absolute;
	width:200px;
}

/*ORDER EDITOR*/

/* Compact font size for orders list and order-editor item tables */
table#orders-table td,
table#orders-table th,
#order-editor table td,
#order-editor table th,
table#price-count td,
table#price-count th,
#radiator-orders-table table td,
#radiator-orders-table table th,
table#radiator-status-table td, 
table#radiator-status-table th,
#other-items table td, 
#other-items table th {
	font-size: 0.82rem;
}

td.clickable { cursor: pointer; }

#order-editor .order-items-table table tbody tr {
	cursor: default !important;
}

#order-editor table tbody tr {
	cursor: pointer;
}

#order-editor table tbody tr.selected td {
/*	background-color: #51A351 !important;
	color: #fff !important ;
	text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);	*/

	background-color: #DFF0D8 !important;
	color: #468847 !important;
}

#order-editor div.loading {
	background-image: url('/workspace/images/loading.gif');
	background-repeat: no-repeat;
	background-position: center center;
	height:32px;
	width: auto;
}
​
/*RADIATOR ORDERS*/

.storage-items-list {
	position: relative;
}

.storage-items-list ul {
	z-index: 9999;
	background-color: #F9F9F9;
	border: 1px solid #DDD;
	position: absolute;
	top:-4px;
	margin-left: 34px;
	padding: 5px 25px;
	width: 225px;
	box-shadow: 2px 4px 10px #DDD;
}

#radiator-orders tr.checked td {
	background-color: #DFF0D8;
	color: #468847;
}

#radiator-orders tr.current td {
	background-color: #D9EDF7;
	color: #3A87AD;
}

.popover-content form,
.popover-body form {
	margin: 0;
}

.popover-content form .control-group,
.popover-body form .control-group,
.popover-body form .mb-3 {
	margin: 0;
}

.popover-content form select,
.popover-body form select {
	width: 162px;
}

#radiator-status-table th {
	text-align: center;
}

#radiator-status-table th:first-child {
	text-align: left;
}

#radiator-status-table td{
	vertical-align: middle;
	text-align: center;
}

#radiator-status-table td span {
	color: grey;
	font-size: 11px;
}

#radiator-status-table td:first-child {
	text-align: left;
}

#radiator-status-table td a .icon {
	cursor: pointer;
}

#radiator-status-table td.cell-link:hover {
	background-color: #EDEDED;
}

#radiator-status-table td.selected-cell {
	background-color: #FCF8E3;
}

#radiator-status-table td.complete {
	text-align: center;
	background-color: #DFF0D8;
}

#radiator-status-table .loading,
#radiator-orders-table .loading {
	background-image: url('/workspace/images/loading.gif');
	background-repeat: no-repeat;
	background-position: center center;
	height:32px;
	width: auto;
}

#radiator-orders-table .loading span {
	text-align: center;
	display: block;
	padding-top: 35px;
	font-weight: bold;
}

/*Printed List*/

div.order {
	margin-bottom: 50px;
	page-break-inside: avoid;
    position: relative;
}

div.order .order-header table {
	width: 100% !important;
	border:1px solid #000;
    position: relative !important;
}

div.order .order-header table tr {
	color: #000;
	font-weight: bold;
}

div.order .order-header table tr th {
	padding:5px;
	text-align: left;
	font-weight: normal;
	font-size: 18px !important;
}

div.order .order-body table {
	font-size: 11px;
	width: 100%;
	border:1px solid #DDD;
	border-top:none;
}

div.order .order-body .note {
	margin-left: 55px;
	font-style: italic;
}

div.order .order-body table tr td{
	border-right: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-bottom: 1px dashed #DDD;
	padding: 5px;
}

/* Address label */

div#address-label {
	width:760px;
	font-size: 16pt;
	line-height: 1.3;
}

div.address-label {
	border: 1px solid black;
	float: left;
	padding: 20px;
	display: block;
	/*width: 100%;*/
	width: 330px;
	height: 220px;
	margin:1px;
}

div.address-label h1 { font-size: 24pt; }

/* Order to be prepared */

div#order-to-be-prepared {
	font-size: 14pt;
	line-height: 1.3;
}

div#order-to-be-prepared h2 {
	font-size: 20pt;
}

div#order-to-be-prepared table {
	width:100%;
}

div#order-to-be-prepared table tr td {
	border:1px solid black;
	padding:5px;
}

/* Packing list print */
div#packing-list {
	font-size: 14pt;
	line-height: 1.3;
}

div#packing-list h1 { font-size: 24pt; }

div#packing-list h2 { font-size: 20pt; }

div#packing-list table tr td{
	border:1px solid black;
	padding:5px;
}

div#packing-list p.underscore {
	border-bottom: 1px dotted black;
	height: 50px;
}

div#packing-list .packing-list .pl-header {
	text-align: right;
}

/*APPEND AUTOCOMPLETE LIST STYLE*/
.ui-autocomplete {
	max-height: 200px !important;
	max-width: 249px !important;
	overflow: auto !important;
}

.ui-autocomplete li {
	cursor: pointer;
}

.ui-autocomplete li a {
    font-size: 11px;
}

li.disabled.ui-menu-item {
	cursor: not-allowed;
}

li.disabled.ui-menu-item a {
	color: #888;
}
/* APPEND BOOTSTRAP HELP INLINE STYLE */
select ~ .help-inline,
select ~ .form-text {
	padding-left: 0;
	margin-top: 9px;
}

/* Valve configuration labels in radaitor form */
div[name="fields[valve-configuration]"] label { width: 70px; }

/* APPEND BOOTSTRAP INLINE FORM */

.form-inline input,
.form-inline select {
	margin-right: 3px !important;
}

/* APPEND MARGIN BETWEEN INPUTS */
.form-horizontal .control-group,
.form-horizontal .mb-3 {
	margin-bottom: 0.75rem !important;
}

/* INPUT TEXT INSIDE LIST */
ul li input[type="text"] {
	margin-bottom: 0 !important;
}

.control-group .controls span.text,
.mb-3 span.text {
	line-height: 29px !important;
}


.dialog label { width: auto !important; }
.dialog .controls { margin-left: 60px !important }
/* PRINT MARGINS */

@page
{
    size: auto;   /* auto is the initial value */

    /* this affects the margin in the printer settings */
    margin: 15mm 15mm 15mm 15mm;
}

/* Custom badge colour */
.bg-purple {
	background-color: #6f42c1 !important;
}

/* === Order Header Panel === */

.order-header-panel {
	border: 1px solid var(--bs-border-color);
	border-top: 3px solid var(--bs-secondary-color);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	background-color: var(--bs-body-bg);
}

/* Status-colored top accent */
.order-header-panel.ohp-primary  { border-top-color: var(--bs-primary); }
.order-header-panel.ohp-info     { border-top-color: var(--bs-info); }
.order-header-panel.ohp-secondary{ border-top-color: var(--bs-secondary); }
.order-header-panel.ohp-dark     { border-top-color: var(--bs-dark); }
.order-header-panel.ohp-purple   { border-top-color: #6f42c1; }
.order-header-panel.ohp-success  { border-top-color: var(--bs-success); }
.order-header-panel.ohp-danger   { border-top-color: var(--bs-danger); }

/* Section label above each column */
.order-header-col-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-secondary-color);
	margin-bottom: 0.35rem;
}

/* Order number status badge */
.order-status-badge {
	font-size: 0.8rem;
	padding: 0.4em 0.8em;
}

/* Copy order number button */
.btn-copy-order {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--bs-secondary-color);
	padding: 0 0.2rem;
	font-size: 0.8rem;
	vertical-align: middle;
	line-height: 1;
}
.btn-copy-order:hover {
	color: var(--bs-body-color);
}

input[name="origin_order_number"] {
	cursor: pointer;
}

/* Order header top bar separator */
.order-header-topbar {
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--bs-border-color);
}

/* Order Summary Panel (PaymentsView) */
.order-summary-panel {
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	background-color: var(--bs-body-bg);
	height: 100%;
	box-sizing: border-box;
}

/* Large total in Order Summary */
.order-total-amount {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--bs-body-color);
}

/* Date row: Placed / Due */
.order-dates-row {
	display: flex;
	gap: 1.25rem;
	margin: 0.5rem 0 0.75rem;
}

.order-date-item {
	display: flex;
	flex-direction: column;
}

.order-date-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-secondary-color);
}

/* Change of pagination element wide */

.pagination a,
.page-link {
	padding: 0.375rem 0.75rem !important;
}

/* Order details panel — stretch to match header height */
#order-details-view {
	align-self: stretch;
}

/* Compact delivery address form */
#delivery-address .control-group {
	margin-bottom: 0.35rem;
}
#delivery-address .control-label {
	font-size: 0.8rem;
	margin-bottom: 0.1rem;
}
#delivery-address .controls input,
#delivery-address .controls select {
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
}

/* Narrow requested delivery date input */
input[name="requested_delivery_date"] {
	max-width: 130px;
}

/* Larger checkboxes in order tables */
.addToStorage.form-check-input {
	width: 1.25em;
	height: 1.25em;
	cursor: pointer;
}

/* Datetime picker */
.bootstrap-datetimepicker-widget {
	z-index: 99999 !important;
}

/* Bootstrap calendar */
#cal-slide-content {
	background-image: none !important;
	background-color: #000 !important;
}

#cal-slide-content:hover {
	background-color: #000 !important;
}

.cal-cell .new-event-trigger {
	margin: 15px 10px 0;
	padding-top: 1px;
}

.cal-cell:hover .new-event-trigger {
	display: inline-block;
}

.autocomplete-loader {
    position: absolute;
    background-image: url('/workspace/images/loading.gif');
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 27px;
}

/* Comment Eitor Fixes */
.note-editor .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.note-editor .btn-group {
    display: inline-block;
}

.note-editor .modal {
    display: none;
}

/* Hide Summernote popovers (incompatible with BS5, renders at page bottom) */
.note-popover {
    display: none !important;
}


/* Notifications */
#notifications-menu {
    overflow-x: scroll;
    max-height: 200px;
}

#notifications-menu li:last-child {
    padding-right: 10px;
}

#notifications-menu li a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 250px;
}

/* notifier link button styles now handled by Notifier.custom.css */

.pac-container {
	width: 500px !important;
}

/* === Order edit link in details panel === */
.edit-link a {
	transition: color 0.15s ease-in-out;
}
.edit-link a:hover {
	color: var(--bs-primary) !important;
}

/* === Tab content spacing === */
.nav-tabs + .tab-content,
.nav-tabs + form .tab-content {
	padding-top: 1rem;
}

/* === Tabs === */
.nav-tabs {
	--bs-nav-tabs-link-active-bg:            var(--bs-body-bg);
	--bs-nav-tabs-link-active-border-color:  var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

/* Smaller font on all tab links */
.nav-tabs .nav-link,
.nav-tabs > li > a {
	font-size: 0.82rem;
}

/* BS5 active tab: bottom border matches body background, visually "opens" into content */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	border-bottom-color: var(--bs-body-bg);
}

/* Bootstrap 2-style markup (deliveries main nav: <li class="active"><a>) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background-color: transparent;
	border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
	color: var(--bs-body-color);
}

/* =============================================
   UI CLEANUP — BS5 Visual Structure Improvements
   ============================================= */

/* === Edit form — compact inputs and alerts === */
#edit-form input[type="text"],
#edit-form input[type="number"],
#edit-form select,
#edit-form .form-control,
#edit-form .input-append input {
	font-size: 0.8125rem;
	padding: 0.25rem 0.5rem;
}
#edit-form label {
	font-size: 0.8125rem;
}
#edit-form .alert,
.trade-price-alert .alert {
	font-size: 0.8125rem;
	padding: 0.5rem 0.75rem;
}

/* === Autocomplete combobox === */
.input-append input {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.input-append .btn {
	background-color: #fff !important;
	border-color: #dee2e6;
	color: #212529;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	margin-left: -1px;
}
.input-append .btn:hover {
	background-color: #f8f9fa !important;
}

/* === Fieldsets as Cards === */
fieldset:not(.card) {
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
	background-color: #fff;
}

fieldset:not(.card) legend {
	float: none;
	width: auto;
	padding: 0.25rem 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #495057;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
	line-height: 1.5;
}

/* === Page Header === */
.page-header {
	padding: 1rem 0 0.75rem;
	margin: 0 0 1.5rem;
	border-bottom: 2px solid #dee2e6;
}

.page-header h1 {
	font-size: 1.75rem;
	font-weight: 600;
	color: #212529;
	margin-bottom: 0;
}

/* === Well as Card === */
.well {
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* === Blockquote Styling === */
blockquote:not(.note-editor blockquote) {
	border-left: 4px solid #0d6efd;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	background-color: #f8f9fa;
	border-radius: 0 0.25rem 0.25rem 0;
}

blockquote.alert:not(.note-editor blockquote) {
	background-color: #fef9e5;
	border-left-color: #f2c20a;
}

blockquote:not(.note-editor blockquote) p {
	margin-bottom: 0.25rem;
}

blockquote:not(.note-editor blockquote) small {
	display: block;
	font-size: 0.8rem;
	color: #6c757d;
	margin-top: 0.25rem;
}

/* === HR Styling === */
hr {
	margin: 1rem 0;
	border: 0;
	border-top: 1px solid #dee2e6;
	opacity: 0.5;
}

/* === Button Toolbar === */
.btn-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* === Interactive Table Hover === */
#order-editor table tbody tr:hover td,
#radiator-orders table tbody tr:not(.checked):not(.current):hover td {
	background-color: rgba(0, 0, 0, 0.035);
	transition: background-color 0.15s ease-in-out;
}

/* === Print Safety === */
@media print {
	fieldset:not(.card) {
		border: none;
		padding: 0;
		margin-bottom: 0.5rem;
	}
	fieldset:not(.card) legend {
		background: none;
		border: none;
		padding: 0;
	}
	.well {
		box-shadow: none;
		border: 1px solid #ccc;
	}
}

/* === Utility Classes === */

/* Keyboard navigation guide */
.keyboard-nav-guide {
	font-size: 0.75rem;
}

/* Compact datepicker inputs */
input.datepicker,
input.datepicker2 {
	width: 80px;
}

/* Heat source custom form */
.heat-source-form {
	text-align: center;
}

.heat-source-form .form-wrapper {
	max-width: 560px;
	margin: 1.5rem 0 0;
	text-align: left;
}

.heat-source-form .control-group {
	margin-bottom: 1.5rem;
}

.heat-source-form .control-label {
	display: inline-block;
	width: 260px;
	text-align: left;
	padding-right: 15px;
}

.heat-source-form .controls {
	margin-left: 0;
	display: inline-block;
}

/* Pipe centres filter */
.pipe-centres-filter {
	width: 175px;
}

/* Stripe payment form */
.stripe-payment-form {
	width: 300px;
}

/* Drive files table vertical align */
.tab-pane table td {
	vertical-align: middle;
}

/* White caret in primary buttons */
.btn-primary .caret {
	border-top-color: #fff;
	border-bottom-color: #fff;
}

/* Item status dropdown */
.item-status-dropdown {
	width: auto;
	max-width: 90px;
	font-size: 11px;
}

/* Bulk status dropdown */
.bulk-status-dropdown {
	width: auto;
	max-width: 150px;
	font-size: 11px;
}

/* === Deliveries Page === */
address {
	line-break: anywhere;
}

/* Deliveries list table: Bootstrap 5 has no tr.info / tr.warning rules.
   Define brand-aligned tints here so rows and legend always match. */
tr.info > td,    tr.info > th    { background-color: #e5f1fa; }
tr.warning > td, tr.warning > th { background-color: #fdf5d0; }

/* Legend labels — colours must match the table rows above */
span.label-today    { background-color: #e5f1fa; color: var(--c-deep-green); }
span.label-earlier  { background-color: #fdf5d0; color: #6b5100; }
span.label-later    { background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
span.label-empty    { background-color: #fdecea; color: #8b2a24; }
span.label-selected { background-color: var(--c-teal-light); color: var(--c-deep-green); }

#lists-active tbody tr.today td { background-color: #D9EDF7; }
#lists-active tbody tr.earlier td { background-color: #FCF8E3; }
#lists-active tbody tr.empty td { background-color: #F2DEDE !important; }

#tag-list {
	display: none;
	position: absolute;
	background: white;
	border: 1px solid #ccc;
	max-height: 150px;
	overflow-y: auto;
	z-index: 1000;
}

#tag-list div {
	padding: 8px;
	cursor: pointer;
}

#tag-list div:hover {
	background: #eee;
}

/* === Login Page === */
.login-page {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - 120px);
}

.login-card {
	width: 100%;
	max-width: 400px;
	padding: 2.5rem;
	background-color: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

.login-header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.login-logo {
	max-width: 100%;
	width: 200px;
	height: auto;
}

/* === Dark Mode Overrides === */

/* Dark mode toggle button */
#dark-mode-toggle {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.15rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.75);
}
#dark-mode-toggle:hover {
	color: #fff;
}

/* Fieldsets */
[data-bs-theme=dark] fieldset:not(.card) {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

[data-bs-theme=dark] fieldset:not(.card) legend {
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

/* Page header */
[data-bs-theme=dark] .page-header {
	border-bottom-color: var(--bs-border-color);
}

[data-bs-theme=dark] .page-header h1 {
	color: var(--bs-body-color);
}

/* Well */
[data-bs-theme=dark] .well {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

/* Blockquote */
[data-bs-theme=dark] blockquote:not(.note-editor blockquote) {
	background-color: var(--bs-tertiary-bg);
	border-left-color: #4dabf7;
}

/* Table sorter sticky header */
[data-bs-theme=dark] .tablesorter thead th {
	background: var(--bs-body-bg);
}

/* Login card */
[data-bs-theme=dark] .login-card {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

/* Login logo invert for dark bg */
[data-bs-theme=dark] .login-logo {
	filter: invert(1);
}

/* Order table selected row */
[data-bs-theme=dark] #order-editor table tbody tr.selected td {
	background-color: #1a4731 !important;
	color: #75b798 !important;
}

[data-bs-theme=dark] article table tr.selected td,
[data-bs-theme=dark] table#orders-table tbody tr:hover td,
[data-bs-theme=dark] table#price-count tbody tr:hover td {
	background-color: #1a4731 !important;
	color: #75b798 !important;
}

/* Autocomplete combobox */
[data-bs-theme=dark] .input-append .btn {
	background-color: var(--bs-body-bg) !important;
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .input-append .btn:hover {
	background-color: var(--bs-tertiary-bg) !important;
}

/* Radiator orders */
[data-bs-theme=dark] #radiator-orders tr.checked td {
	background-color: #1a4731;
	color: #75b798;
}

[data-bs-theme=dark] #radiator-orders tr.current td {
	background-color: #153d5e;
	color: #6ea8d7;
}

[data-bs-theme=dark] #radiator-status-table td.selected-cell {
	background-color: #332701;
}

[data-bs-theme=dark] #radiator-status-table td.complete {
	background-color: #1a4731;
}

/* Modal */
[data-bs-theme=dark] .modal {
	color: var(--bs-body-color) !important;
}

/* jQuery UI autocomplete */
[data-bs-theme=dark] .ui-autocomplete {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .ui-autocomplete li a {
	color: var(--bs-body-color);
}

/* Pagination */
[data-bs-theme=dark] .pagination > li > a,
[data-bs-theme=dark] .pagination > li > span,
[data-bs-theme=dark] .pagination ul > li > a,
[data-bs-theme=dark] .pagination ul > li > span {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .pagination > li > a:hover,
[data-bs-theme=dark] .pagination ul > li > a:hover {
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .pagination > .disabled > a,
[data-bs-theme=dark] .pagination > .disabled > span,
[data-bs-theme=dark] .pagination ul > .disabled > a,
[data-bs-theme=dark] .pagination ul > .disabled > span {
	background-color: var(--bs-secondary-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-secondary-color);
}

/* Summernote editor */
[data-bs-theme=dark] .note-editor.note-frame {
	border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .note-editor .note-toolbar {
	background-color: var(--bs-tertiary-bg);
	border-bottom-color: var(--bs-border-color);
}

[data-bs-theme=dark] .note-editor .note-btn {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .note-editor .note-btn:hover {
	background-color: var(--bs-secondary-bg);
}

[data-bs-theme=dark] .note-editor .panel-heading {
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .note-editor .note-editing-area .note-editable,
[data-bs-theme=dark] .note-editor .panel-body {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .note-editor .note-editing-area .note-codable {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .note-editor .note-statusbar {
	background-color: var(--bs-tertiary-bg);
	border-top-color: var(--bs-border-color);
}

[data-bs-theme=dark] .note-editor .dropdown-menu {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
}

[data-bs-theme=dark] .note-editor .dropdown-menu a {
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .note-editor .note-color-reset {
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

[data-bs-theme=dark] .note-editor .note-palette-title {
	color: var(--bs-body-color);
}

/* Popover */
[data-bs-theme=dark] .popover-content form,
[data-bs-theme=dark] .popover-body form {
	color: var(--bs-body-color);
}

/* ==============================================
   CASTRADS BRAND GUIDELINES
   Core: Grey #49464A · Bronze #726D5F · Deep Green #203E3C · Off White #F3F1ED
   Accent: Sunflower #F2C20A · Citrine #909513 · Teal #59787A · Sky Blue #B3D1F0 · Coral #F17267
   Headlines: Kazimir Text (serif fallback: Georgia)
   Body: Neue Haas Grotesk 55 Roman (sans fallback: Helvetica Neue)
   ============================================== */

:root {
	/* Brand colour tokens */
	--c-grey:        #49464A;
	--c-bronze:      #726D5F;
	--c-deep-green:  #203E3C;
	--c-off-white:   #F3F1ED;
	--c-sunflower:   #F2C20A;
	--c-citrine:     #909513;
	--c-teal:        #59787A;
	--c-sky-blue:    #B3D1F0;
	--c-coral:       #F17267;

	/* Derived tints used in the UI */
	--c-deep-green-hover:  #2d5654;
	--c-deep-green-active: #172d2b;
	--c-teal-light:        #dce8e8;
	--c-off-white-border:  #dedad5;
	--c-off-white-muted:   #f7f5f1;

	/* Typography */
	--font-headline: 'kazimirtext', Georgia, 'Times New Roman', serif;
	--font-body:     system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

	/* Bootstrap 5 global overrides */
	--bs-body-font-family: var(--font-body);
	--bs-body-bg:          var(--c-off-white);
	--bs-body-color:       var(--c-grey);
	--bs-primary:          var(--c-deep-green);
	--bs-primary-rgb:      32, 62, 60;
	--bs-link-color:       var(--c-deep-green);
	--bs-link-hover-color: var(--c-deep-green-hover);
	--bs-border-color:     var(--c-off-white-border);
}

/* === Navbar === */
#main-navbar {
	background-color: var(--c-deep-green) !important;
}

body[data-region="US"] #main-navbar {
	background: linear-gradient(to right, #3A1C22, #6B3232) !important;
}

/* === Typography — headings === */
h1, h2, h3, h4, h5, h6,
.page-header h1,
fieldset:not(.card) legend {
	font-family: var(--font-headline);
}

/* Keep legend weight/size unchanged, just font */
fieldset:not(.card) legend {
	font-family: var(--font-headline);
}

/* === Text colour utilities — brand palette === */
.text-info    { color: var(--c-teal)       !important; } /* sky-blue too light for text */
.text-warning { color: #a07800             !important; } /* dark amber, derived from Sunflower */
.text-success { color: var(--c-deep-green) !important; }
.text-danger  { color: var(--c-coral)      !important; }
.text-primary { color: var(--c-deep-green) !important; }

/* === Links === */
a {
	color: var(--c-deep-green);
}
a:hover {
	color: var(--c-deep-green-hover);
}

/* === Primary buttons === */
.btn-primary {
	background-color: var(--c-deep-green);
	border-color: var(--c-deep-green);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--c-deep-green-hover);
	border-color: var(--c-deep-green-hover);
	color: #fff;
}
.btn-primary:active {
	background-color: var(--c-deep-green-active) !important;
	border-color: var(--c-deep-green-active) !important;
}

/* === Table selected / hover rows — replace Bootstrap green with brand teal === */
article table tr.selected td,
table#orders-table tbody tr:hover td,
table#price-count tbody tr:hover td {
	background-color: var(--c-teal-light) !important;
	color: var(--c-deep-green) !important;
	text-shadow: none;
	cursor: pointer;
}

table#orders-table tbody tr:hover td a,
table#price-count tbody tr:hover td a {
	color: var(--c-deep-green);
}

#order-editor table tbody tr.selected td {
	background-color: var(--c-teal-light) !important;
	color: var(--c-deep-green) !important;
}

#radiator-orders tr.checked td {
	background-color: var(--c-teal-light);
	color: var(--c-deep-green);
	text-shadow: none;
}

#radiator-orders tr.current td {
	background-color: #dce8eb;
	color: var(--c-teal);
	text-shadow: none;
}

#radiator-status-table td.complete {
	background-color: var(--c-teal-light);
}

/* === Fieldset / well borders — warm off-white === */
fieldset:not(.card) {
	border-color: var(--c-off-white-border);
	background-color: #fff;
}

fieldset:not(.card) legend {
	background-color: var(--c-off-white-muted);
	border-color: var(--c-off-white-border);
	color: var(--c-grey);
}

.well {
	border-color: var(--c-off-white-border);
}

/* === Blockquote — teal left border === */
blockquote:not(.note-editor blockquote) {
	border-left-color: var(--c-teal);
	background-color: var(--c-off-white-muted);
}

/* === Tablesorter sticky header background === */
.tablesorter thead th {
	background: var(--c-off-white);
}

/* === Dropdowns === */
.dropdown-item:active,
.dropdown-item.active {
	background-color: var(--c-deep-green);
	color: #fff;
}

/* === Pagination === */
.page-link {
	color: var(--c-deep-green);
}
.page-link:hover {
	color: var(--c-deep-green-hover);
}
.page-item.active .page-link {
	background-color: var(--c-deep-green);
	border-color: var(--c-deep-green);
}

/* === Login card === */
.login-card {
	border-color: var(--c-off-white-border);
}

/* === Buttons — brand colour palette === */
.btn-success {
	--bs-btn-bg:                 var(--c-teal);
	--bs-btn-border-color:       var(--c-teal);
	--bs-btn-color:              #fff;
	--bs-btn-hover-bg:           #4a6768;
	--bs-btn-hover-border-color: #4a6768;
	--bs-btn-hover-color:        #fff;
	--bs-btn-active-bg:          #3b5253;
	--bs-btn-active-border-color:#3b5253;
}
.btn-warning {
	--bs-btn-bg:                 var(--c-sunflower);
	--bs-btn-border-color:       var(--c-sunflower);
	--bs-btn-color:              var(--c-grey);
	--bs-btn-hover-bg:           #d4a800;
	--bs-btn-hover-border-color: #d4a800;
	--bs-btn-hover-color:        var(--c-grey);
	--bs-btn-active-bg:          #b89200;
	--bs-btn-active-border-color:#b89200;
}
.btn-danger {
	--bs-btn-bg:                 var(--c-coral);
	--bs-btn-border-color:       var(--c-coral);
	--bs-btn-color:              #fff;
	--bs-btn-hover-bg:           #d85e53;
	--bs-btn-hover-border-color: #d85e53;
	--bs-btn-hover-color:        #fff;
	--bs-btn-active-bg:          #bf5249;
	--bs-btn-active-border-color:#bf5249;
}
.btn-info {
	--bs-btn-bg:                 var(--c-sky-blue);
	--bs-btn-border-color:       var(--c-sky-blue);
	--bs-btn-color:              var(--c-deep-green);
	--bs-btn-hover-bg:           #9abce0;
	--bs-btn-hover-border-color: #9abce0;
	--bs-btn-hover-color:        var(--c-deep-green);
	--bs-btn-active-bg:          #80a7d0;
	--bs-btn-active-border-color:#80a7d0;
}
.btn-secondary {
	--bs-btn-bg:                 var(--c-bronze);
	--bs-btn-border-color:       var(--c-bronze);
	--bs-btn-color:              #fff;
	--bs-btn-hover-bg:           #5e5950;
	--bs-btn-hover-border-color: #5e5950;
	--bs-btn-hover-color:        #fff;
	--bs-btn-active-bg:          #504d46;
	--bs-btn-active-border-color:#504d46;
}

/* Outline variants */
.btn-outline-secondary {
	--bs-btn-color:              var(--c-bronze);
	--bs-btn-border-color:       var(--c-bronze);
	--bs-btn-hover-bg:           var(--c-bronze);
	--bs-btn-hover-border-color: var(--c-bronze);
	--bs-btn-hover-color:        #fff;
	--bs-btn-active-bg:          var(--c-bronze);
	--bs-btn-active-color:       #fff;
}
.btn-outline-danger {
	--bs-btn-color:              var(--c-coral);
	--bs-btn-border-color:       var(--c-coral);
	--bs-btn-hover-bg:           var(--c-coral);
	--bs-btn-hover-border-color: var(--c-coral);
	--bs-btn-hover-color:        #fff;
	--bs-btn-active-bg:          var(--c-coral);
	--bs-btn-active-color:       #fff;
}
.btn-outline-primary {
	--bs-btn-color:              var(--c-deep-green);
	--bs-btn-border-color:       var(--c-deep-green);
	--bs-btn-hover-bg:           var(--c-deep-green);
	--bs-btn-hover-border-color: var(--c-deep-green);
	--bs-btn-hover-color:        #fff;
	--bs-btn-active-bg:          var(--c-deep-green);
	--bs-btn-active-color:       #fff;
}

/* === Badges / bg utilities === */
.bg-success, .badge.bg-success  { background-color: var(--c-teal)       !important; color: #fff                  !important; }
.bg-warning, .badge.bg-warning  { background-color: var(--c-sunflower)  !important; color: var(--c-grey)         !important; }
.bg-danger,  .badge.bg-danger   { background-color: var(--c-coral)      !important; color: #fff                  !important; }
.bg-info,    .badge.bg-info     { background-color: var(--c-sky-blue)   !important; color: var(--c-deep-green)   !important; }
.bg-secondary,.badge.bg-secondary{ background-color: var(--c-bronze)    !important; color: #fff                  !important; }
.bg-primary, .badge.bg-primary  { background-color: var(--c-deep-green) !important; color: #fff                  !important; }

/* === Alerts === */
.alert-warning {
	--bs-alert-bg:           #fef9e5;
	--bs-alert-border-color: rgba(242, 194, 10, 0.3);
	--bs-alert-color:        #7a5e00;
}
.alert-info {
	--bs-alert-bg:           #eaf3fd;
	--bs-alert-border-color: rgba(179, 209, 240, 0.5);
	--bs-alert-color:        var(--c-deep-green);
}
.alert-danger {
	--bs-alert-bg:           #fdecea;
	--bs-alert-border-color: rgba(241, 114, 103, 0.3);
	--bs-alert-color:        #8b2a24;
}

/* === Status colours mapped to brand accent palette === */

/* Stock level colours — keep using brand-adjacent tones */
table#price-count tbody tr td.stock-count.level2 {
	background-color: var(--c-sunflower);
	color: #fff;
}
table#price-count tbody tr td.stock-count.level1 {
	background-color: var(--c-coral);
	color: #fff;
}
table#price-count tbody tr td.stock-count.add-info {
	background-color: var(--c-sky-blue);
	color: var(--c-grey);
}

/* === Dark mode brand overrides === */

/* ROOT VARIABLE FIX — `:root` and `[data-bs-theme=dark]` have identical specificity (0,1,0).
   Because staff.css loads after bootstrap.min.css, our :root block above wins the cascade and
   permanently locks Bootstrap's dark-mode variable values. Re-declare them here so that THIS
   later rule (also in staff.css) wins, restoring proper dark-mode colours. */
[data-bs-theme=dark] {
	--bs-body-bg:          #212529;
	--bs-body-color:       #dee2e6;
	--bs-border-color:     #495057;
	--bs-link-color:       #8bbab8;
	--bs-link-hover-color: #a0c8c6;
}

/* Text colour utilities — lighter variants for dark backgrounds */
[data-bs-theme=dark] .text-info    { color: #8bbab8 !important; }
[data-bs-theme=dark] .text-warning { color: #e8b84a !important; } /* lighter amber for dark bg */
[data-bs-theme=dark] .text-success { color: #8bbab8 !important; }
[data-bs-theme=dark] .text-danger  { color: #f4a59f !important; }
[data-bs-theme=dark] .text-primary { color: #8bbab8 !important; }

/* Links — our a{} rule bypasses Bootstrap's CSS-variable link system, so re-set in dark mode */
[data-bs-theme=dark] a           { color: #8bbab8; }
[data-bs-theme=dark] a:hover     { color: #a0c8c6; }
/* Keep nav links / btn links / dropdown items neutral so BS5 handles them */
[data-bs-theme=dark] .nav-link,
[data-bs-theme=dark] .dropdown-item,
[data-bs-theme=dark] .btn-link   { color: inherit; }

/* bg utilities — our !important overrides block Bootstrap's dark-mode changes, so restore them */
[data-bs-theme=dark] .bg-success,  [data-bs-theme=dark] .badge.bg-success   { background-color: #2d5454 !important; color: #8bbab8  !important; }
[data-bs-theme=dark] .bg-warning,  [data-bs-theme=dark] .badge.bg-warning   { background-color: #5a4800 !important; color: #f2e07a  !important; }
[data-bs-theme=dark] .bg-danger,   [data-bs-theme=dark] .badge.bg-danger    { background-color: #6b2a24 !important; color: #f4a59f  !important; }
[data-bs-theme=dark] .bg-info,     [data-bs-theme=dark] .badge.bg-info      { background-color: #1d3d5c !important; color: #b3d1f0  !important; }
[data-bs-theme=dark] .bg-secondary,[data-bs-theme=dark] .badge.bg-secondary { background-color: #3d3830 !important; color: #c4b9a8  !important; }
[data-bs-theme=dark] .bg-primary,  [data-bs-theme=dark] .badge.bg-primary   { background-color: #172d2b !important; color: #8bbab8  !important; }

[data-bs-theme=dark] #main-navbar {
	background-color: var(--c-deep-green-active) !important;
}

[data-bs-theme=dark] body[data-region="US"] #main-navbar,
body[data-region="US"][data-bs-theme=dark] #main-navbar {
	background: linear-gradient(to right, #2a1218, #4d2222) !important;
}

[data-bs-theme=dark] article table tr.selected td,
[data-bs-theme=dark] table#orders-table tbody tr:hover td,
[data-bs-theme=dark] table#price-count tbody tr:hover td,
[data-bs-theme=dark] #order-editor table tbody tr.selected td {
	background-color: #1a3230 !important;
	color: #8bbab8 !important;
}

[data-bs-theme=dark] #radiator-orders tr.checked td {
	background-color: #1a3230;
	color: #8bbab8;
}

/* Deliveries list rows + legend — dark mode */
[data-bs-theme=dark] tr.info > td,    [data-bs-theme=dark] tr.info > th    { background-color: #1d3d5c; color: #b3d1f0; }
[data-bs-theme=dark] tr.warning > td, [data-bs-theme=dark] tr.warning > th { background-color: #3d3200; color: #f2e07a; }
[data-bs-theme=dark] span.label-today    { background-color: #1d3d5c; color: #b3d1f0; }
[data-bs-theme=dark] span.label-earlier  { background-color: #3d3200; color: #f2e07a; }
[data-bs-theme=dark] span.label-later    { border-color: var(--bs-border-color); }
[data-bs-theme=dark] span.label-empty    { background-color: #6b2a24; color: #f4a59f; }
[data-bs-theme=dark] span.label-selected { background-color: #1a3230; color: #8bbab8; }

[data-bs-theme=dark] #radiator-orders tr.current td {
	background-color: #1a2e31;
	color: #8bbab8;
}

/* ==============================================
   RESPONSIVE — TABLET & PHONE
   Navbar collapses at < 992 px (navbar-expand-lg).
   Bootstrap breakpoints: lg < 992 | md < 768 | sm < 576
   ============================================== */

/* --- Below lg (< 992px): navbar is hamburger, sidebar narrowing --- */
@media (max-width: 991.98px) {
	/* Horizontally-scrollable data tables */
	#orders-list,
	#order-editor .order-items-table,
	#radiator-orders,
	#radiator-orders-table,
	#price-count {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Page header: remove the offset that pushes the action button to the right */
	.page-header .row > [class*="offset-md"] {
		margin-left: 0;
		text-align: left !important;
	}

	/* Filters: spacing between stacked items */
	#filter-order-type,
	#filter-taken-by,
	#filter-select {
		margin-top: 0.4rem;
	}

	/* Customer details form — collapse the outer col-md-8 / col-md-4 split so both
	   go full-width on tablets. The inner col-md-6 fieldsets then each get ~50% of
	   the full container, which is wide enough for side-by-side invoice/delivery. */
	form.form-horizontal > .row > .col-md-8,
	form.form-horizontal > .row > .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* form-horizontal: unstick the side-by-side label+input layout at tablet widths.
	   Without this, labels (160px wide) leave only ~76px for inputs inside a col-md-6
	   that lives inside col-md-8. */
	.form-horizontal .control-label {
		float: none;
		width: auto;
		text-align: left;
		padding-top: 0;
		margin-bottom: 0.2rem;
	}
	.form-horizontal .controls {
		margin-left: 0;
	}
	.form-horizontal input[class*="span"],
	.form-horizontal select[class*="span"],
	.form-horizontal textarea[class*="span"] {
		width: 100%;
	}
}

/* --- Below md (< 768px): phones and small tablets --- */
@media (max-width: 767.98px) {
	#main-content {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	/* Order details panel: go full-width under the list on narrow screens */
	#order-details-view {
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	/* Tab bar: scroll horizontally instead of wrapping */
	.nav-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 1px;
	}
	.nav-tabs .nav-link {
		white-space: nowrap;
	}

	/* Login card: comfortable edge-to-edge with a small margin */
	.login-card {
		margin: 1rem;
	}

	/* Fieldsets: tighter padding on mobile */
	fieldset:not(.card) {
		padding: 0.75rem;
	}

	/* Smaller table font on phones */
	table#orders-table td,
	table#orders-table th,
	#order-editor table td,
	#order-editor table th,
	table#price-count td,
	table#price-count th {
		font-size: 0.76rem;
	}

}


/* - Customer details form: keep the columns side by side on half-screen windows
     rather than collapsing to one full-width field per row.

     The BS2 compat shim pins .control-label to a fixed 160px and .controls to a
     fixed 180px margin, so as the window narrows the label keeps its width and the
     input is what gets squeezed out. Here the label column and font are fluid
     instead, and the input takes whatever is left - the old system's density.
     >= 992px and < 576px are unchanged. - */
@media (min-width: 576px) and (max-width: 991.98px) {
	/* Invoice / delivery fieldsets stay two-up below the md breakpoint */
	#customer-tab .col-md-8 > .row > .col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	#customer-tab .control-group {
		display: grid;
		grid-template-columns: minmax(4rem, 36%) minmax(0, 1fr);
		column-gap: 0.5rem;
		align-items: center;
		margin-bottom: 0.4rem;
	}

	#customer-tab .control-group > label:first-child {
		float: none;
		width: auto;
		padding-top: 0;
		margin-bottom: 0;
		text-align: right;
		font-size: clamp(0.7rem, 1.2vw, 0.8rem);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Every label in these two fieldsets starts with the same redundant word
	   ("Invoice ..." / "Delivery ..."), and what distinguishes them is at the end
	   ("Tel Number 1" vs "Tel Number 2"). Clip the start rather than the end so the
	   useful half survives. Not applied to Others, where labels carry symbols
	   ("Discount (£)") that bidi would reorder. */
	#customer-tab fieldset.invoice .control-group > label:first-child,
	#customer-tab fieldset.delivery .control-group > label:first-child {
		direction: rtl;
	}

	/* Inputs, hints and any other children share the second column */
	#customer-tab .control-group > *:not(label:first-child) {
		grid-column: 2;
		margin-left: 0;
	}

	#customer-tab .control-group input[class*="span"],
	#customer-tab .control-group select[class*="span"],
	#customer-tab .control-group textarea[class*="span"],
	#customer-tab .control-group > input {
		width: 100%;
	}

	#customer-tab .control-group > p {
		margin-bottom: 0;
		font-size: 0.75rem;
		text-align: left;
	}

	#customer-tab fieldset:not(.card) {
		padding: 0.75rem;
	}

	#customer-tab legend {
		font-size: 1rem;
	}
}

/* - With the label column fluid, all three columns (invoice, delivery, others) fit
     from the md breakpoint up, as in the old system. Below md there is only room
     for invoice/delivery two-up. - */
@media (min-width: 768px) and (max-width: 991.98px) {
	#customer-tab > form > .row > .col-md-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	#customer-tab > form > .row > .col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}


/* --- Phone (xs, < 576px) --- */
@media (max-width: 575.98px) {
	/* Hide the date column in the orders list — saves ~65px */
	table#orders-table th:nth-child(3),
	table#orders-table td:nth-child(3) {
		display: none;
	}

	/* Search bar: wrap input onto its own line */
	#symphony-search-index {
		flex-wrap: wrap;
		gap: 0.4rem;
	}
	#symphony-search-index .form-control {
		flex: 1 1 100%;
	}
}