/* pallette */
:root {
	--color-primary: #1B2A4A;
	--color-on-primary: #FFFFFF;
	--color-primary-hover: #142038;
	--color-primary-light: #2A3F6E;
	--color-on-primary-light: #FFFFFF;
	--color-primary-light-hover: #1E3157;
	--color-accent: #E8B518;
	--color-on-accent: #1B2A4A;
	--color-light-accent: #fff3cd;
	--color-on-light-accent: #1B2A4A;
	--color-accent-hover: #D4A415;
	--color-light: #C5D3E8;
	--color-on-light: #1B2A4A;
	--color-light-hover: #B0C4DE;
	--color-neutral-light: #F5F5F5;
	--color-neutral-mid: #E0E0E0;
	--color-neutral-dark: #4A4A4A;
	--color-danger: #C0392B;
	--color-on-danger: #FFFFFF;
	--color-danger-hover: #A93226;
}


/* price badge tokens */
:root {
	--badge-deal-bg: #C8622A;
	--badge-deal-fg: #ffffff;
	--badge-info-bg: #4A4A4A;
	--badge-info-fg: #ffffff;
	--badge-surcharge-bg: #1A7A8A;
	--badge-surcharge-fg: #ffffff;
}

/* pallette usage / semantic tokens */
:root {
	--surface-bg: #FFFFFF;
	--surface-muted: var(--color-neutral-light);
	--surface-border: var(--color-neutral-mid);
	--surface-fg: var(--color-neutral-dark);
	--btn-primary-bg: var(--color-accent);
	--btn-primary-fg: var(--color-on-accent);
	--btn-primary-hover-bg: var(--color-accent-hover);
	--btn-secondary-bg: var(--color-primary);
	--btn-secondary-fg: var(--color-on-primary);
	--btn-secondary-hover-bg: var(--color-primary-hover);
	--btn-outline-fg: var(--color-primary);
	--btn-outline-border: var(--color-primary);
	--btn-outline-hover-bg: var(--color-primary);
	--btn-outline-hover-fg: var(--color-on-primary);
	--btn-danger-bg: var(--color-danger);
	--btn-danger-fg: var(--color-on-danger);
	--btn-danger-hover-bg: var(--color-danger-hover);
	--link-fg: var(--color-primary);
	--link-hover-fg: var(--color-primary-hover);
	--input-change-bg: var(--color-light-accent);
	--input-change-border: var(--color-accent);
	--scrollbar-bg: var(--color-neutral-light);
	--scrollbar-thumb: var(--color-neutral-mid);
	--scrollbar-thumb-hover: var(--color-neutral-dark);
}

/* Bootstrap theming */
:root {
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: 27, 42, 74; /* update if color-primary changes */
	--bs-body-bg: var(--surface-bg);
	--bs-body-color: var(--surface-fg);
	--bs-border-color: var(--surface-border);
	--bs-link-color: var(--link-fg);
	--bs-link-hover-color: var(--link-hover-fg);
}


a.unstyled-link {
	text-decoration: none;
	color: inherit;
}

/* body */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--surface-bg);
	color: var(--surface-fg);
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

	main .sidebar-layout {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

		main .sidebar-layout > .row {
			flex: 1;
		}

.detail-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	row-gap: 0.25rem;
}

ol ol {
	list-style-type: lower-alpha;
}

/* button colors */
.btn-site-primary {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
	border: 1px solid var(--btn-primary-bg);
}

	.btn-site-primary:hover {
		background-color: var(--btn-primary-hover-bg);
		border-color: var(--btn-primary-hover-bg);
		color: var(--btn-primary-fg);
	}

.btn-site-secondary {
	background-color: var(--btn-secondary-bg);
	color: var(--btn-secondary-fg);
	border: 1px solid var(--btn-secondary-bg);
}

	.btn-site-secondary:hover {
		background-color: var(--btn-secondary-hover-bg);
		border-color: var(--btn-secondary-hover-bg);
		color: var(--btn-secondary-fg);
	}

.btn-site-outline {
	background-color: transparent;
	color: var(--btn-outline-fg);
	border: 1px solid var(--btn-outline-border);
}

	.btn-site-outline:hover {
		background-color: var(--btn-outline-hover-bg);
		color: var(--btn-outline-hover-fg);
		border-color: var(--btn-outline-hover-bg);
	}

.btn-site-danger {
	background-color: var(--btn-danger-bg);
	color: var(--btn-danger-fg);
	border: 1px solid var(--btn-danger-bg);
}

	.btn-site-danger:hover {
		background-color: var(--btn-danger-hover-bg);
		border-color: var(--btn-danger-hover-bg);
		color: var(--btn-danger-fg);
	}

/* checkbox*/
.form-check-input {
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.15em;
}
	.form-check-input:checked {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

/* Page specific */
.btn-site-header {
	padding: 0.5rem 1.5rem;
	font-size: 1.25rem;
}

/* header recolor */
.site-header {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	/* Re-theme tokens for chrome context */
	--btn-secondary-bg: var(--color-light);
	--btn-secondary-fg: var(--color-on-light);
	--btn-secondary-hover-fg: var(--color-on-light);
	--btn-secondary-hover-bg: var(--color-light-hover);
	--btn-outline-fg: var(--color-light);
	--btn-outline-border: var(--color-light);
	--btn-outline-hover-bg: var(--color-primary-light);
	--btn-outline-hover-fg: var(--color-on-primary-light);
}
	.site-header a {
		color: var(--color-on-primary);
		text-decoration: none;
	}
	.site-header .form-check-input {
		border-color: var(--color-light);
	}
	.site-header .form-check-input:checked {
		background-color: var(--color-accent);
		border-color: var(--color-accent);
	}
	.site-header .btn-site-primary {
		background-color: var(--btn-primary-bg);
		color: var(--btn-primary-fg);
		border: 1px solid var(--btn-primary-bg);
	}
	.site-header .btn-site-primary:hover {
		background-color: var(--btn-primary-hover-bg);
		border-color: var(--btn-primary-hover-bg);
		color: var(--btn-primary-fg);
	}
	.site-header .btn-site-secondary {
		background-color: var(--btn-secondary-bg);
		color: var(--btn-secondary-fg);
		border: 1px solid var(--btn-secondary-bg);
	}
	.btn-site-secondary:hover {
		background-color: var(--btn-secondary-hover-bg);
		border-color: var(--btn-secondary-hover-bg);
		color: var(--btn-secondary-fg);
	}

/* Tightened Soft Square Logo */
.site-header img {
	background-color: white;
	/* 4px top/bottom, 6px left/right (Tightened from 12px) */
	padding: 4px 10px;
	border-radius: 8px;
	border-bottom: 4px solid #E8B518;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* sidebar recolor */
.site-sidebar {
	flex-direction: column;
	background-color: var(--color-neutral-light);
	color: var(--color-on-light);
	--btn-primary-bg: var(--color-accent);
	--btn-primary-fg: var(--color-primary);
	--btn-primary-hover-bg: var(--color-accent-hover);
}

	.site-sidebar a {
		align-self: start;
		color: var(--link-fg);
		font-weight: 500;
		cursor: pointer;
		text-decoration: none;
		border-bottom: 2px solid transparent;
		transition: border-color 0.15s ease;
	}
		.site-sidebar a:hover {
			border-color: var(--link-fg);
		}
		}
	.site-sidebar .form-check-input {
		border-color: var(--color-light);
	}
	.site-sidebar .form-check-input:checked {
		background-color: var(--color-accent);
		border-color: var(--color-accent);
	}

.sidebar-toggle {
	color: var(--color-on-primary);
	font-size: 2.5rem;
}

/* footer recolor  */
.site-footer {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	padding: 1rem 0;
}

	.site-footer a {
		color: var(--color-accent);
	}
	.site-sidebar .form-check-input {
		border-color: var(--color-light);
	}
	.site-sidebar .form-check-input:checked {
		background-color: var(--color-accent);
		border-color: var(--color-accent);
	}

/* floating header */
.site-header {
	position: sticky;
	top: 0;
}


/* forms */
.form-control {
	border-color: var(--surface-border);
	color: var(--surface-fg);
}

	.form-control:focus {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
	}

.form-label {
	font-weight: 500;
	color: var(--surface-fg);
	margin-bottom: 0.25rem;
}

/* list group */
.list-group-item {
	font-size: 1.1rem;
}

	.list-group-item .bi {
		font-size: 1.5rem;
		vertical-align: middle;
	}
.list-group-expand {
	background: none;
	border: none;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	color: var(--color-primary);
	font-size: 0.85rem;
	transition: transform 0.2s ease;
}

	.list-group-expand[aria-expanded="true"] {
		transform: rotate(180deg);
	}

/* catalog sidebar */
.catalog-filter-panel {
	background-color: var(--surface-muted);
	border: 1px solid var(--surface-border);
	padding: 1rem;
}

#taxonomy-menu .form-check-input {
	width: 1.3rem;
	height: 1.3rem;
	cursor: pointer;
}
#taxonomy-menu label {
	font-size: 1.2rem !important;
	font-weight: 500;
	padding-left: 10px !important;
	color: var(--color-primary);
	cursor: pointer;
}

/* product images */


.product-image-thumb img {
	max-width: 18rem;
	width: 100%;
	max-height: 18rem;
	height: auto;
	object-fit: contain;
	aspect-ratio: 1;
	background-color: var(--surface-muted);
	cursor: pointer;
	border: 1px solid var(--surface-border);
	border-radius: 0.25rem;
}

.product-image-gallery-main {
	width: 100%;
	max-width: 800px;
	aspect-ratio: 1;
	margin-inline: auto;
	background-color: var(--surface-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

	.product-image-gallery-main img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

.product-image-gallery-thumb img {
	width: 100%;
	height: auto;
	object-fit: contain;
	aspect-ratio: 1;
	background-color: var(--surface-muted);
	cursor: pointer;
	border: 1px solid var(--surface-border);
	border-radius: 0.25rem;
}

.product-image-gallery-thumb.active img {
	border-color: var(--color-primary);
	border-width: 2px;
}

.product-image-placeholder {
	width: 6rem;
	height: 6rem;
	background-color: var(--surface-muted);
	border: 1px solid var(--surface-border);
}

/* cards */
.site-card {
	font-size: 1.4rem;
	background-color: var(--surface-muted);
	color: var(--surface-fg);
	border: 1px solid var(--surface-border);
	border-radius: 2rem;
	padding: 1rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.site-card-title {
	margin-top: 0;
	margin-bottom: .25rem;
	color: var(--color-primary);
	font-size: 1.8rem;
	font-weight: bold;
}

.site-card-badge {
	padding: 0.5rem;
	background-color: var(--badge-color, var(--surface-muted));
	border-radius: 1rem;
}

.site-card .card-text {
	margin-bottom: 0.1rem;
}
/* product list body */
.site-list-item {
	background-color: var(--surface-muted);
	border: 1px solid var(--surface-border);
	border-radius: 0;
	padding: 0.5rem;
	font-size: 1.4rem;
}
	.site-list-item + .site-list-item {
		border-top: none;
	}
.site-list-item-grid {
	display: grid;
	grid-template-columns: 12rem 2fr 1fr 1fr auto;
	gap: 0.5rem;
	align-items: center;
}
	.site-list-item-grid a img {
		display: block;
		width: 100%;
		height: auto;
	}
/* product list sidebar*/
.sticky-sidebar {
	position: sticky;
	top: var(--header-height, 0);
	max-height: calc(var(--viewport-height) - var(--header-height) - var(--footer-height));
	overflow-y: auto;
	scrollbar-width: thin;
}
	.sticky-sidebar::-webkit-scrollbar {
		width: 4px;
	}
	.sticky-sidebar::-webkit-scrollbar-track {
		background: transparent;
	}

	.sticky-sidebar::-webkit-scrollbar-thumb {
		background-color: var(--color-neutral-mid);
		border-radius: 2px;
	}

.list-sidebar {
	background-color: var(--color-neutral-light);
	border-right: 1px solid var(--surface-border);
}

.list-sidebar a {
	align-self: start;
	color: var(--link-fg);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease;
}

	.list-sidebar a:hover {
		border-color: var(--link-fg);
	}

#taxonomy-menu label {
	font-size: 1.2rem !important;
	font-weight: 500;
	padding-left: 10px !important;
	color: var(--color-primary);
	cursor: pointer;
}

#taxonomy-menu .form-check-input {
	width: 1.3rem;
	height: 1.3rem;
	cursor: pointer;
}

#btn-taxonomy-category {
	display: inline-block !important;
	background-color: var(--surface-muted);
	color: var(--color-primary);
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid var(--btn-outline-border);
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
	#btn-taxonomy-category:hover {
		background-color: var(--btn-outline-hover-bg);
		color:var(--btn-outline-hover-fg);
		border-color: var(--btn-outline-hover-fg);
	}

[aria-expanded="true"].btn-catalog-collapse {
	transform: rotate(-90deg);
}

/* flex table */
.site-table {
	max-width: var(--table-max-width, 100%);
}

.site-table-header,
.site-table-row {
	display: grid;
	grid-template-columns: var(--table-columns);
}

.site-table-header {
	font-weight: 600;
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	padding: 0.5rem 0;
	border-radius: .5rem .5rem 0 0;
}

.site-table-row {
	border-bottom: 1px solid var(--surface-border);
	padding: 0.5rem 0;
}

	.site-table-header > div,
	.site-table-row > div {
		padding: 0.25rem 0.5rem;
	}
.site-table-row-footer {
	border-top: 2px solid var(--color-primary);
}

.site-table-divider {
	grid-column: 1 / -1;
	background-color: var(--surface-muted);
	color: var(--color-secondary);
	padding: 0.25rem 0.5rem;
	font-weight: 600;
}
/* requires variable set by JS */
.site-table-sticky {
	position: sticky;
	top: var(--header-height);
}

@media (max-width: 767.98px) {

	.site-table-collapse-md .site-table-row, 
	.site-table-collapse-md .site-table-header {
		grid-template-columns: var(--table-columns-collapse);
		grid-template-rows: var(--table-rows-collapse);
	}

		.site-table-collapse-md .site-table-row > div,
		.site-table-collapse-md .site-table-header > div {
			grid-row: var(--collapse-row, auto) / span var(--collapse-row-span, 1);
			grid-column: var(--collapse-col, auto) / span var(--collapse-col-span, 1);
		}

	.site-table-collapse-md .collapse-hide {
		display: none;
	}
}

@media (max-width: 991.98px) {

	.site-table-collapse-lg .site-table-row, 
	.site-table-collapse-lg .site-table-header {
		grid-template-columns: var(--table-columns-collapse);
		grid-template-rows: var(--table-rows-collapse);
	}

		.site-table-collapse-lg .site-table-row > div,
		.site-table-collapse-lg .site-table-header > div {
			grid-row: var(--collapse-row, auto) / span var(--collapse-row-span, 1);
			grid-column: var(--collapse-col, auto) / span var(--collapse-col-span, 1);
		}

	.site-table-collapse-lg .collapse-hide {
		display: none;
	}
}

@media (max-width: 1199.98px) {

	.site-table-collapse-xl .site-table-row, 
	.site-table-collapse-xl .site-table-header {
		grid-template-columns: var(--table-columns-collapse);
		grid-template-rows: var(--table-rows-collapse);
	}

		.site-table-collapse-xl .site-table-row > div,
		.site-table-collapse-xl .site-table-header > div {
			grid-row: var(--collapse-row, auto) / span var(--collapse-row-span, 1);
			grid-column: var(--collapse-col, auto) / span var(--collapse-col-span, 1);
		}

	.site-table-collapse-xl .collapse-hide {
		display: none;
	}
}

/* modal pop up */
#site-confirm-modal .modal-content {
	background-color: var(--surface-muted);
	color: var(--surface-fg);
	border: 1px solid var(--surface-border);
	border-radius: 0.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#site-confirm-modal .modal-title {
	color: var(--color-primary);
}
#site-confirm-modal .modal-header,
#site-confirm-modal .modal-footer {
	border-color: var(--surface-border);
}

/* printable order page */
/* confirmation table */
.confirmation-table {
    width: 100%;
    border-collapse: collapse;
}

.confirmation-table th {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    font-weight: 600;
}

.confirmation-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--surface-border);
}

.confirmation-table tfoot td {
    border-top: 2px solid var(--color-primary);
    border-bottom: none;
}

/* print */
@media print {
    .site-header,
    .site-footer,
    .site-sidebar,
	.list-sidebar,
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .site-card {
        box-shadow: none;
        border: none;
        padding: 0;
        background: none;
    }

    .confirmation-table th {
        border-bottom-color: black;
		font-weight: 400;
		font-size: 80%;
    }

    .confirmation-table tfoot td {
        border-top-color: black;
    }
	.confirmation-table td {
		font-weight: 400;
		font-size: 70%;
	}
	.confirmation-header {
		font-weight: 500;
		font-size: 70%;
	}
	.site-card-title {
		color: black;
	}
}
/* invoice */
/* shared */
body {
	font-family: Arial, sans-serif;
	font-size: 14px;
}

#invoice-body .site-table-header {
	background-color: var(--bs-secondary-bg, #e0e0e0);
	color: var(--color-neutral-dark);
}
#invoice-body .site-table-header,
#invoice-body .site-table-row {
	padding: 0;
}

	#invoice-body .site-table-header > div,
	#invoice-body .site-table-row > div {
		border-right: 2px solid var(--color-neutral-dark);
		box-sizing: border-box;
		overflow: hidden;
	}
		#invoice-body .site-table-header  > div:last-child,
		#invoice-body .site-table-row > div:last-child {
			border-right: none;
		}

#invoice-body {
	border: 2px solid var(--color-neutral-dark);
}

	#invoice-body .site-table-row {
		border-bottom: none;
	}


/* screen */
@media screen {
	.print-only {
		display: none;
	}
}

/* print */
@media print {
	.screen-only {
		display: none;
	}

	body {
		font-size: 10pt;
		margin: 0;
	}

	@page {
		size: letter;
		margin-top: .75in;
		margin-bottom: 0.75in;
		margin-left: 0.75in;
		margin-right: 0.75in;

		@bottom-right {
			content: "Page " counter(page) " of " counter(pages);
			font-family: Arial, sans-serif;
			font-size: 9pt;
		}
	}

	.inv-print {
		table-layout: fixed;
		width: 100%;
		border-collapse: collapse;
		font-size: 9pt;
	}

		.inv-print td {
			border: none;
			border-right: 2px solid #444;
			padding: 0.05in 0.1in;
			text-align: left;
		}

			.inv-print td:first-child {
				border-left: 2px solid #444;
			}

	.inv-print-grey {
		font-weight: bold;
		background: #ddd;
		print-color-adjust: exact;
	}
	.inv-print-head {
		text-align: center;
	}
	.inv-print-foot td {
		page-break-inside: avoid;
		border: none;
		border-top: 2px solid #444
	}
	.inv-print-foot td:first-child {
		border-left: none;
	}
}

/* input box */
.qty-unsaved{
	background-color: var(--input-change-bg);
	border-color: var(--input-change-border);
}
	.qty-unsaved:focus {
		background-color: var(--input-change-bg);
		border-color: var(--input-change-border);
		box-shadow: 0 0 0 0.2rem rgba(232, 181, 24, 0.25);
	}

/* price badges */
.site-price-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.5rem;
	border-radius: 1rem;
	font-size: 0.75em;
	font-weight: 600;
}

.site-price-badge--deal {
	background-color: var(--badge-deal-bg);
	color: var(--badge-deal-fg);
}

.site-price-badge--info {
	background-color: var(--badge-info-bg);
	color: var(--badge-info-fg);
}

.site-price-badge--surcharge {
	background-color: var(--badge-surcharge-bg);
	color: var(--badge-surcharge-fg);
}

/* dashboard scrollbox */
.dashboard-scrollbox {
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}

@media (min-width: 768px) {
	.dashboard-scrollbox-md {
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
		max-height: var(--scrollbox-max-height, none);
	}
}
@media (min-width: 992px) {
	.dashboard-scrollbox-lg {
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
		max-height: var(--scrollbox-max-height, none);
	}
}
@media (min-width: 1200px) {
	.dashboard-scrollbox-xl {
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
		max-height: var(--scrollbox-max-height, none);
	}
	.dashboard-scrollbox-xl .site-table-header {
		position: sticky;
		top: 0;
	}
}
.dashboard-scrollbox::-webkit-scrollbar {
	width: 12px;
}

.dashboard-scrollbox::-webkit-scrollbar-track {
	background: var(--scrollbar-bg);
	border-radius: 0 4px 4px 0;
}

.dashboard-scrollbox::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb);
	border-radius: 6px;
	border: 2px solid var(--scrollbar-bg);
}

	.dashboard-scrollbox::-webkit-scrollbar-thumb:hover {
		background-color: var(--scrollbar-thumb-hover);
	}