/* ----- Global Link Styles ----- */
a {
    color: #0000EE; /* Vibrant blue */
    text-decoration: underline;
    cursor: pointer; /* Ensure pointer for all links */
    transition: color 0.15s ease-in-out; /* Smooth hover transition */
}

a:hover {
    color: #4C4CF3; /* Darker blue on hover */
}

/* ----- Basic Reset & Box Sizing ----- */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #f8f9fa; /* Set base page color here */
}

body {
	font-family: 'Roboto', sans-serif;
	line-height: 1.6;
	color: #343a40;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: 100vh;
	font-size: 16px;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/logos/FullLogo.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: 0.2;
	z-index: 0;
}

/* ----- Headings ----- */
h1,
h2,
h3 {
	margin-bottom: 0.75em;
	color: #1a237e; /* Dark Blue */
	font-weight: 700;
}
h1 {
	font-size: 1.8rem;
}
h2 {
	font-size: 1.5rem;
}
h3 {
	font-size: 1.2rem;
}
label {
	font-weight: 500;
	margin-bottom: .2rem;
	display: inline-block;
}

.page-container {
	display: flex;
	flex-wrap: wrap;
	height: calc(100vh - 55px);
	position: relative;
	z-index: 1;
}

.search-column {
	flex: 1 1 280px;
	padding: 20px;
	min-width: 280px;
	border-right: 1px solid #dee2e6;
	overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between sections */
}

.trade-info-column {
	flex: 2 1 620px;
	padding: 20px;
	min-width: 500px;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
    flex-grow: 4;
}

/* ----- NEW UI SECTION STYLES ----- */
.management-section,
.trade-options-section,
.original-item-search-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
}

.management-section h2,
.trade-options-section h2,
.original-item-search-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.management-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.trade-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.trade-option-btn {
    padding: 5px 10px;
    font-size: 0.9rem;
    background-color: #0000EE;
    border: 1px solid #0000EE;
    color: white;
}

.trade-option-btn:hover {
    background-color: #0b5ed7;
    border-color: #4C4CF3;
}

/* ----- Component Classes ----- */
.input-field {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 10px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background-color: #fff;
	color: #495057;
	font-family: inherit;
	font-size: 1rem;
	box-sizing: border-box;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input-field:focus {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.input-sm {
	padding: 5px 8px;
	font-size: 0.9rem;
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 3px;
	height: auto;
	line-height: normal;
}

.input-field.width-auto {
	width: auto;
	display: inline-block;
}

.btn {
	display: inline-block;
	padding: 10px 15px;
	border: 1px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	margin: 5px;
	transition: all 0.2s ease-in-out;
	line-height: 1.5;
	vertical-align: middle;
}
.btn-sm {
		padding: 5px 10px;
		font-size: 0.9rem;
}
.btn-primary {
	background-color: #0000EE;
	color: white;
	border-color: #0000EE;
}
.btn-primary:hover {
	background-color: #0b5ed7;
	border-color: #4C4CF3;
}
.btn-primary:disabled {
		background-color: #6ea8fe;
		border-color: #6ea8fe;
		cursor: not-allowed;
		opacity: 0.65;
}
.btn-secondary {
	background-color: #6c757d;
	color: white;
	border-color: #6c757d;
}
.btn-secondary:hover {
	background-color: #5c636a;
	border-color: #565e64;
}
.btn-success {
		background-color: #198754;
		color: white;
		border-color: #198754;
}
.btn-success:hover {
		background-color: #157347;
		border-color: #146c43;
}
.btn-danger {
		background-color: #dc3545;
		color: white;
		border-color: #dc3545;
}
.btn-danger:hover {
		background-color: #bb2d3b;
		border-color: #b02a37;
}
.btn-icon {
    background: none;
    border: none;
    padding: 0; /* Changed from "0 5px" to "0" */
    font-size: 1.6rem;
    color: #0000EE;
    cursor: pointer;
    vertical-align: middle;
}
.btn-icon:hover {
	color: #4C4CF3;
}
.btn-add {
	background-color: #0000EE;
	color: white;
	border: none;
	border-radius: 50%;
	font-weight: bold;
	font-size: 1rem;
	line-height: 1;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0 5px;
	vertical-align: middle;
	flex-shrink: 0;
}
.btn-add:hover {
	background-color: #0b5ed7;
}

#calculator-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 320px;
    background-color: #343a40;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 1100;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.calculator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #67ce25;
    color: white;
    padding: 2px 8px 2px 2px; /* Adjusted padding */
    cursor: move;
    border-bottom: 1px solid #57b31b;
}

.calculator-header span {
    font-weight: bold;
}

.calculator-header button {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    opacity: 0.9;
    line-height: 1;
}

.calculator-header button:hover {
    opacity: 1;
}

.calculator-header button svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

#calculator-body {
    padding: 15px;
    position: relative;
}

#calc-display-area {
    background-color: #e9ecef;
    border-radius: 5px;
    padding: 10px;
    text-align: right;
    margin-bottom: 15px;
}

#calc-preview {
    font-size: 0.9rem;
    color: #6c757d;
    height: 1.3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#calc-display {
    color: #212529;
    font-size: 2rem;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto;
    white-space: nowrap;
    height: 1.5em;
    line-height: 1.5em;
}

#calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.calc-btn {
    height: 50px;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #495057;
    transition: filter 0.1s ease-in-out;
}

.calc-btn:hover {
    filter: brightness(1.2);
}

.calc-btn:active {
    filter: brightness(0.9);
}

.calc-btn.number, .calc-btn[data-action="decimal"] {
    background-color: #f8f9fa;
    color: #212529;
}

.calc-btn.operator {
    background-color: #ffc107;
    color: #212529;
}

.calc-btn.operator.is-depressed {
    filter: brightness(0.8);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

.calc-btn.equals {
    background-color: #0d6efd;
    color: white;
    grid-row: span 2;
}

.calc-btn[data-action="clear"] {
    background-color: #dc3545;
    color: white;
}
.calc-btn[data-action="backspace"] {
    background-color: #6c757d;
    color: white;
}

#calc-history-panel {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    overflow-y: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 245px;
    z-index: 2;
}

.history-header {
    padding: 5px 10px;
    font-weight: bold;
    font-size: 0.85rem;
    color: #495057;
    background-color: #e9ecef;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#calc-clear-history-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

#calc-clear-history-btn:hover {
    color: #a71d2a;
}

#calc-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#calc-history-list li {
    padding: 5px 10px;
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
    text-align: right;
    color: #343a40;
}

#calc-history-list li .history-expression {
    display: block;
    font-size: 0.8em;
    color: #6c757d;
}

.checkbox-container label {
	margin-right: 15px;
	cursor: pointer;
	font-weight: normal;
}
.checkbox-container input[type="checkbox"] {
	margin-right: 5px;
	vertical-align: middle;
	cursor: pointer;
}

.header-logo {
	height: 30px;
	position: relative;
	z-index: 1;
}
.header-invoice {
	font-size: 1.1em;
	font-weight: bold;
	color: white;
}
#employeeInfo {
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
.header-employee-input {
	width: 200px !important;
	margin-bottom: 0 !important;
	background-color: rgba(255, 255, 255, 0.85);
	border-color: rgba(0, 0, 0, 0.2);
}
#employeeInfo .btn-primary {
}
.trade-info-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 15px;
	flex-shrink: 0;
}
.trade-info-header h1 {
		margin-bottom: 0;
}

.customer-details {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 15px;
	flex-shrink: 0;
}
.customer-details .input-field {
	flex: 1 1 250px;
	width: auto;
	margin-bottom: 0;
}

.totals-overview {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: baseline; /* Changed for better text alignment */
	gap: 10px 20px;
	margin-bottom: 10px;
	padding: 10px 15px;
	background-color: #f1f3f5;
	border-radius: 5px;
	flex-shrink: 0;
	border: 1px solid #dee2e6;
}

.totals-overview > div {
    display: flex;
    align-items: baseline;
}

.totals-overview label {
    font-size: 1em;
    font-weight: bold;
}

.totals-overview .total-value {
    font-size: 1.2em;
    font-weight: bold;
}
.main-total-display {
	font-size: 1.2em;
	font-weight: bold;
	margin-left: auto;
	padding-left: 20px;
	color: #343a40;
}
#runningTotal.total-value {
	font-size: 1.1em;
	color: #dc3545;
}

#tradeInfoTable td .percentage-input.input-with-percent-symbol {
	width: 75px;
	max-width: 75px;
	text-align: right !important;
	box-sizing: border-box;
}

.trade-actions {
	margin-bottom: 5px;
	flex-shrink: 0;
	text-align: right;
}
.trade-actions .btn {
	margin-left: 8px;
}

.trade-table-container {
	flex-grow: 1;
	overflow: auto;
	border: 1px solid #dee2e6;
	border-radius: 5px;
}
.trade-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* Force the specific trade table to fill its container */
#tradeInfoTable {
    width: 100% !important; /* Force 100% width */
}

.trade-table thead {
	position: sticky;
	top: 0;
	z-index: 10;
}

#tradeInfoTable td:nth-child(2),
#tradeInfoTable td:nth-child(4) {
	white-space: normal;
}

#tradeInfoTable td:nth-child(5),
#tradeInfoTable td:nth-child(7),
#tradeInfoTable td:nth-child(8),
#tradeInfoTable td:nth-child(9),
#tradeInfoTable td:nth-child(10) {
	padding-right: 8px;
 }	#tradeInfoTable td:nth-child(11),
#tradeInfoTable td:nth-child(12) {
	white-space: nowrap;
}

.trade-table th {
	background-color: #67ce25;
	color: white;
	font-weight: 600;
	border-bottom: 1px solid #57b31b;
	padding: 8px 10px;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
	position: sticky; top: 0; z-index: 10;
}

#tradeInfoTable tbody tr,
#catalogEditorTable tbody tr {
    background-color: rgba(255, 255, 255, 0.95);
}

#tradeInfoTable tbody tr:nth-child(even),
#catalogEditorTable tbody tr:nth-child(even) {
    background-color: rgba(242, 242, 242, 0.95);
}
/* --- New Catalog Editor Header & Filter Styles --- */
.catalog-header {
    background-color: #67ce25;
    color: white;
    padding: 10px 20px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.catalog-header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: white;
}

/* --- New Catalog Editor Header & Filter Styles --- */
.catalog-header {
    /* ... existing styles ... */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* This is needed to position the button */
}

#toggleCatalogFiltersBtn {
    position: absolute;
    right: 20px;
}

.catalog-controls-hidden {
    display: none !important;
}

.catalog-controls-container {
    padding: 15px;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.choices__list--dropdown {
    min-width: 350px !important;
    width: auto !important;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 15px;
}

.filter-row:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.filter-row .form-group {
    margin-bottom: 0;
}

#catalog-date-filter-group {
    display: flex;
    align-items: flex-end; /* Change this line back */
    gap: 15px;
}

#clearCatalogDateFilterButton {
    margin-bottom: 9px; /* Adjust this pixel value up or down to get the perfect alignment! */
}

.filter-row-actions {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 5px;
    margin-top: -20px;  /* Your previous change */
    margin-bottom: -20px; /* Add this to shrink the bottom */
}

.catalog-controls-container .choices {
    width: 400px; /* You can adjust this width as you see fit */
}

.trade-table td:nth-child(n+8):nth-child(-n+12) {
	text-align: right;
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
}

.trade-table td:nth-child(n+13):nth-child(-n+16) {
	 text-align: center;
	 white-space: nowrap;
 }

/* This new, more specific rule ensures the Qty column is always centered */
#tradeInfoTable td:nth-child(11) {
    text-align: center !important;
}

/* This rule centers the headers for PN, Cash, Cash%, Credit, Credit%, Retail, Qty, Print */
.trade-table th:nth-child(n+6):nth-child(-n+14) {
	text-align: center;
}

/* This rule adds padding ONLY to the number headers, not the icon headers */
.trade-table th:nth-child(n+7):nth-child(-n+12) {
	padding-left: 5px;
	padding-right: 5px;
}

/* This rule centers the remaining icon/action headers */
.trade-table th:nth-child(15),
.trade-table th:nth-child(16) {
	text-align: center;
}

/* --- Styles for 16-Column Trade Table Layout --- */
.trade-table th:nth-child(1), .trade-table td:nth-child(1) { width: 3%; text-align: center; } /* Select */
.trade-table th:nth-child(2), .trade-table td:nth-child(2) { width: 3%; } /* Var */
.trade-table th:nth-child(3), .trade-table td:nth-child(3) { width: auto; } /* Product Name */
.trade-table th:nth-child(4), .trade-table td:nth-child(4) { width: 14%; } /* System */
.trade-table th:nth-child(5), .trade-table td:nth-child(5) { width: 9%; }  /* Condition */
.trade-table th:nth-child(6), .trade-table td:nth-child(6) { width: 3%; text-align: center; } /* PN (NEW) */
.trade-table th:nth-child(7), .trade-table td:nth-child(7) { width: auto; } /* Notes */
.trade-table th:nth-child(8), .trade-table td:nth-child(8) { width: 7%; }  /* Cash */
.trade-table th:nth-child(9), .trade-table td:nth-child(9) { width: 6%; }  /* Cash % */
.trade-table th:nth-child(10), .trade-table td:nth-child(10) { width: 7%; }  /* Credit */
.trade-table th:nth-child(11), .trade-table td:nth-child(11) { width: 6%; } /* Credit % */
.trade-table th:nth-child(12), .trade-table td:nth-child(12) { width: 7%; } /* Retail */
.trade-table th:nth-child(13), .trade-table td:nth-child(13) { width: 4%; } /* Qty */
.trade-table th:nth-child(14), .trade-table td:nth-child(14) { width: 4%; } /* Print */
.trade-table th:nth-child(15), .trade-table td:nth-child(15) { width: 3%; } /* DB */
.trade-table th:nth-child(16), .trade-table td:nth-child(16) { width: 4%; } /* Delete */

.trade-table th:nth-child(15) {
    padding-right: 15px;
}

/* This new rule globally removes spinners from number inputs in the trade table, including quantity */
#tradeInfoTable td.editable-cell input[type="number"]::-webkit-outer-spin-button,
#tradeInfoTable td.editable-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#tradeInfoTable td.editable-cell input[type="number"] {
    -moz-appearance: textfield;
}

.input-with-currency-symbol {
	padding-left: 22px !important;
	text-align: left !important;
}

.input-with-percent-symbol {
	padding-right: 27px !important;
	text-align: right !important;
}

#tradeInfoTable td:nth-child(9) .input-symbol-wrapper {
	 width: 100%;
	 display: block;
}

#tradeInfoTable td.editable-cell .input-symbol-wrapper {
	width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	vertical-align: middle;
}

#tradeInfoTable td.editable-cell input {
	 width: 100%;
	 box-sizing: border-box;
}

.trade-table input[type="checkbox"] {
		vertical-align: middle;
		cursor: pointer;
}

.modal-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 990;
}

.modal {
	display: none;
	position: fixed;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	overflow: hidden;
	z-index: 1000;
}

#pinEntryModal,
#setChangePinModal,
#changePasswordModal,
#versionSelectionModal,
#descriptionModal,
#gameNamePopup,
#consoleNamePopup,
#productNamePopup {
    z-index: 1010;
}

#infoModal,
#processingModal {
    z-index: 1050;
}

.modal {
	max-width: 600px;
}
#gameModal {
	max-width: 650px;
}
#invoiceDetailModal {
	max-width: 1000px;
}
#addItemPopup {
	max-width: 750px;
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 25px;
	border-bottom: 1px solid #57b31b;
	background-color: #67ce25;
	color: white;
    gap: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0;
}

.modal-header h2 {
	margin: 0;
	font-size: 1.5rem;
	color: white;
	font-weight: 700;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-content {
		padding: 20px 25px;
		max-height: calc(85vh - 60px);
		overflow-y: auto;
}
.modal-footer {
    padding: 10px 25px;
    border-top: 1px solid #eee;
    background-color: #f8f9fa;
    text-align: right;
}

.modal-header .close-button {
	color: #f0f0f0;
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	opacity: 0.8;
	transition: opacity 0.2s ease, color 0.2s ease;
    margin-left: 10px;
}
.modal-header .close-button:hover,
.modal-header .close-button:focus {
	color: white;
	opacity: 1;
}
#invoiceDetailModal .modal-content {
	width: 100%;
	box-sizing: border-box;
}
.close-button {
	color: #6c757d;
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	opacity: 0.7;
	transition: opacity 0.2s ease, color 0.2s ease;
}
.close-button:hover,
.close-button:focus {
	color: #343a40;
	opacity: 1;
}
.modal-content label {
		display: block;
		margin-bottom: 10px;
}
.modal-content label > input,
.modal-content label > select,
.modal-content label > textarea {
		margin-top: 3px;
}

.pricing-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 15px;
	margin-bottom: 20px;
}
.pricing-card {
	border: 1px solid #dee2e6;
	padding: 15px;
	border-radius: 5px;
	background-color: #fdfdfd;
}
.pricing-card h3 {
	margin-top: 0;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	font-size: 1.1rem;
}
.pricing-card label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 10px;
	gap: 5px;
	font-size: 0.95rem;
	flex-wrap: nowrap;
}
.pricing-card label > span:first-child {
		width: 50px;
		flex-shrink: 0;
		text-align: right;
		margin-right: 5px;
		color: #495057;
}
.currency-symbol {
		margin-right: 3px;
		color: #6c757d;
		align-self: center;
}
.pricing-card input[type="number"] {
		width: 85px;
		padding: 4px 6px;
		font-size: 0.9rem;
		flex-shrink: 0;
		margin-bottom: 0;
}
.pricing-card .btn-add {
		flex-shrink: 0;
}

#userManagementTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#userManagementTable th,
#userManagementTable td {
    border: 1px solid #dee2e6;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}

#userManagementTable th {
    background-color: #67ce25;
    color: white;
    font-weight: 600;
		white-space: nowrap;
}

#userManagementTable input[type="text"],
#userManagementTable input[type="email"],
#userManagementTable select {
    width: 100%;
    padding: 4px 6px;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 3px;
    box-sizing: border-box;
}
#userManagementTable input[type="text"]:read-only,
#userManagementTable input[type="email"]:read-only {
    background-color: #e9ecef;
    cursor: not-allowed;
}


#userManagementTable input[type="checkbox"] {
    transform: scale(1.2);
    vertical-align: middle;
    cursor: pointer;
}

#userManagementTable .btn-sm {
    padding: 3px 8px;
    margin-left: 5px;
}

#addNewUserModal .form-group,
#changePasswordModal .form-group,
#genericClearanceModal .form-group {
    margin-bottom: 15px;
}
#addNewUserModal .form-group label,
#changePasswordModal .form-group label,
#genericClearanceModal .form-group label {
    display: block;
    margin-bottom: 5px;
}

#addNewUserModal .input-field,
#changePasswordModal .input-field,
#genericClearanceModal .input-field {
    margin-bottom: 0;
}

#changePasswordModal p {
    margin-bottom: 15px;
    font-size: 0.95rem;
}
#changePasswordModal p strong {
    color: #1a237e;
}

#changePasswordMessageArea {
    text-align: left;
    font-size: 0.9em;
}

.notes-section {
	margin-top: 15px;
}
.notes-section > span:first-child {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 0.9em;
	color: #343a40;
}
.notes-section textarea {
	width: 100%;
	display: block;
	font-family: inherit;
	font-size: 0.9em;
	padding: 5px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 5px;
	resize: vertical;
	min-height: 40px;
}
.notes-save-button {
	margin-top: 5px;
	display: block;
	width: fit-content;
	margin-left: auto;
}

#invoiceDetailTableContainer {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid #ccc;
	margin-top: 10px;
	margin-bottom: 10px;
}

#invoiceDetailTable th,
#invoiceDetailTable td {
	padding: 6px 8px;
	font-size: 0.9rem;
	border-bottom: 1px solid #dee2e6;
	text-align: left;
	vertical-align: middle;
}
#invoiceDetailTable th {
	padding: 6px 8px;
	font-size: 0.9rem;
	border-bottom: 1px solid #57b31b;
	text-align: left;
	vertical-align: middle;
	background-color: #67ce25;
	color: white;
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 1;
}

#invoiceDetailTable th:nth-child(1), #invoiceDetailTable td:nth-child(1) { width: 25%; } /* Product Name */
#invoiceDetailTable th:nth-child(2), #invoiceDetailTable td:nth-child(2) { width: 15%; } /* System */
#invoiceDetailTable th:nth-child(3), #invoiceDetailTable td:nth-child(3) { width: 10%; } /* Condition */
#invoiceDetailTable th:nth-child(4), #invoiceDetailTable td:nth-child(4) { width: 4%; text-align: center; } /* PN */
#invoiceDetailTable th:nth-child(5), #invoiceDetailTable td:nth-child(5) { width: 17%; white-space: normal; vertical-align: top;} /* Notes */
#invoiceDetailTable th:nth-child(6), #invoiceDetailTable td:nth-child(6) { width: 5%; } /* Qty */
#invoiceDetailTable th:nth-child(7), #invoiceDetailTable td:nth-child(7) { width: 9%; text-align: right; } /* Price Paid */
#invoiceDetailTable th:nth-child(8), #invoiceDetailTable td:nth-child(8) { width: 7%; text-align: right; } /* % */
#invoiceDetailTable th:nth-child(9), #invoiceDetailTable td:nth-child(9) { width: 8%; text-align: right; } /* Retail */

#invoiceDetailTable td:nth-child(6),
#invoiceDetailTable td:nth-child(7),
#invoiceDetailTable td:nth-child(8),
#invoiceDetailTable td:nth-child(9) {
text-align: right;
padding-right: 10px;
}
#invoiceDetailTable td:nth-child(5) {
	white-space: normal;
	vertical-align: top;
	font-size: 0.85em;
}

#CashCheckbox,
#CreditCheckbox,
.trade-table tbody td:nth-child(11) input[type="checkbox"],
.checkbox-container input[type="checkbox"]
	{
	transform: scale(1.4);
	margin: 0 6px;
	vertical-align: middle;
	cursor: pointer;
}

#editGameID,
#editConsoleID,
#editProductID {
	background-color: #e9ecef;
	color: #6c757d;
}
	#editGameID:focus,
	#editConsoleID:focus,
    #editProductID:focus {
	box-shadow: none;
	border-color: #ced4da;
}
input[readonly] {
	cursor: not-allowed;
}
.input-readonly-conditional {
		background-color: #e9ecef;
		color: #6c757d;
}
.input-readonly-conditional:focus {
		box-shadow: none;
		border-color: #ced4da;
}

#searchControlsContainer,
.checkbox-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 15px;
	margin-bottom: 15px;
}

.checkbox-container .btn {
	margin: 0 0 0 10px;
}

.checkbox-container label {
	margin-right: 0;
	cursor: pointer;
	font-weight: normal;
}
.checkbox-container input[type="checkbox"] {
	margin-right: 5px;
	vertical-align: middle;
	cursor: pointer;
}
#addItemButton {
	margin-left: 0;
	margin-right: 0;
}
#lookupInvoiceButton {
	margin-right: 5px;
}
.invoice-lookup-group {
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.invoice-lookup-group .btn {
	margin: 0;
}

#loginInfoModal {
    z-index: 1000;
}
#loginPageOverlay {
    z-index: 998;
}

#infoModal {
	max-width: 400px;
	display: none;
	z-index: 1050;
}

#infoModal .modal-header {
}

#infoModal .modal-content {
}

#infoModal .modal-footer {
}

.modal.disabled {
	pointer-events: none;
	filter: brightness(0.6);
}

#scannerContainer {
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center;
}

#invoiceDetailTotals {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	font-weight: bold;
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid #eee;
	width: fit-content;
	margin-left: auto;
	margin-right: 0;
	text-align: right;
}

#detailCashTotalContainer,
#detailCreditTotalContainer {
	margin-left: auto;
}

/* This new rule prevents long text in search results from stretching the modal */
.search-result-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#searchResults p {
    font-size: 0.95rem !important;
    padding: 10px 5px !important;
}
	#tradeNameInput,
	#tradePhoneInput {
		max-width: 410px;
		margin-left: 0;
		margin-right: 0;
		height: auto !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
	}

	.trade-table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
	.trade-table {
		width: auto;
		min-width: 750px;
	}
	.trade-table th,
	.trade-table td {
		padding: 5px 6px;
		font-size: 0.85rem;
		vertical-align: middle;
	}
	 #tradeInfoTable td:nth-child(2), #tradeInfoTable td:nth-child(3), #tradeInfoTable td:nth-child(5) { white-space: normal; }
	 #tradeInfoTable td:nth-child(n+6):nth-child(-n+13) { white-space: nowrap; }
	 #tradeInfoTable th { white-space: nowrap; }
	 #tradeInfoTable td:nth-child(11) input[type="number"].input-qty { appearance: revert !important; }

	.btn-add { width: 24px; height: 24px; font-size: 0.9rem; }
	#CashCheckbox, #CreditCheckbox, .trade-table tbody td:nth-child(11) input[type="checkbox"], .checkbox-container input[type="checkbox"] { transform: scale(1.2); margin: 0 4px; vertical-align: middle; cursor: pointer; }

	.modal { width: 95%; max-width: 95%; }
	#gameModal { max-width: 95%; }
	#invoiceDetailModal { max-width: 95%; width: 95%; }
	#addItemPopup { max-width: 95%; }
	#productNamePopup { max-width: 95%; }
	#cameraModal { max-width: 95%; }
	#processingModal { max-width: 80%; }
	#infoModal { max-width: 90%; }
	#scannerContainer.modal { max-width: 95%; }
	.modal-content { padding: 15px 20px; max-height: 75vh; }
	.modal-header { padding: 10px 20px; }
	.modal-header h2 { font-size: 1.3rem; }
	.modal-header .close-button { font-size: 28px; }
	.modal-footer { padding: 8px 20px; }

	.pricing-container { grid-template-columns: 1fr; gap: 15px; }
	.pricing-card { padding: 10px; }
	.pricing-card h3 { margin-bottom: 10px; padding-bottom: 5px; font-size: 1rem; }
	.pricing-card label { margin-bottom: 10px; font-size: 0.9rem; }
	.pricing-card label > span:first-child { width: 45px; margin-right: 3px; }
	.pricing-card input[type="number"], .pricing-card input[type="text"] { width: 80px !important; }
	.notes-section { margin-top: 10px; }
	.notes-save-button { margin-top: 3px; font-size: 0.85rem; padding: 4px 8px; }

	#invoiceDetailHeader { grid-template-columns: 1fr; gap: 5px; margin-bottom: 10px; padding-bottom: 8px; font-size: 0.9rem; }
	#invoiceDetailTotals { flex-direction: column; align-items: flex-end; gap: 5px; margin-top: 15px; margin-bottom: 15px; padding-bottom: 10px; font-size: 1em; }
	#invoiceDetailTable th, #invoiceDetailTable td { padding: 4px 6px; font-size: 0.85rem; }
	#invoiceDetailTable td:nth-child(4) { white-space: normal; }
	#cameraModal .modal-content video { max-height: 60vh; }

	#gameModal .modal-header {
        position: relative;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 45px;
        flex-wrap: wrap;
        height: auto;
    }

    #gameModal .modal-header-actions .close-button,
    #gameModal .modal-header > .close-button {
        position: absolute;
        top: 35px;
        right: 15px;
        z-index: 20;
        order: initial;
        margin: 0;
    }

    #gameModal .modal-header h2 {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #gameModal .modal-search-controls {
        width: 100%;
        order: 2;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
        max-width: none;
    }

    #gameModal .modal-header-actions {
        width: 100%;
        order: 3;
        justify-content: space-evenly;
        margin-top: 5px;
    }

	#gameModal .modal-header-actions .modal-header-icon-button .button-icon,
	#gameModal .modal-header-actions #modalTakePictureButton,
	#gameModal .modal-header-actions #modalScanBarcodeButton {
		font-size: 1.4rem;
	}
	#gameModal .modal-header-actions .modal-header-icon-button .button-text {
		font-size: 0.8em;
	}

}

.input-symbol-wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.input-symbol {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #6c757d;
	font-size: 0.9em;
	line-height: 1;
	pointer-events: none;
	z-index: 2;
}

.input-symbol.currency {
	left: 8px;
}

.input-symbol.percent {
	right: 8px;
}

.retro-value-label {
	width: 50px;
	text-align: right;
	font-size: 0.8em;
	flex-shrink: 0;
	margin-right: 5px;
	color: #495057;
	align-self: center;
	padding-top: 2px;
	display: inline-block;
}

#gameModal input[type=number],
#addItemPopup input[type=number],
#productNamePopup input[type=number] {
}

#gameModal input::-webkit-outer-spin-button,
#gameModal input::-webkit-inner-spin-button,
#addItemPopup input::-webkit-outer-spin-button,
#addItemPopup input::-webkit-inner-spin-button,
#productNamePopup input::-webkit-outer-spin-button,
#productNamePopup input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

#takePictureButton,
#scanBarcodeButton,
#modalTakePictureButton,
#modalScanBarcodeButton {
	padding: 5px 10px;
	flex-shrink: 0;
	vertical-align: middle;
	display: inline-block;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #67ce25;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
	margin-left: auto;
	margin-right: auto;
}

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

.modal-header-icon-button {
	background: none !important;
	border: none !important;
	color: #f0f0f0;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 2px 6px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
	margin: 0;
	vertical-align: middle;
}
.modal-header-icon-button:hover {
	color: white;
	background: none;
}

.modal-header-icon-button .button-icon {
	font-size: 1.6rem;
	margin-bottom: -1px;
}

.modal-header-icon-button .button-text {
	font-size: 1em;
	font-weight: normal;
	margin-top: 1px;
	line-height: 1.1;
}

#tradeInfoTable td .input-cash-perc.input-with-percent-symbol,
#tradeInfoTable td .input-credit-perc.input-with-percent-symbol {
	width: 85px; max-width: 85px;
	text-align: right;
}

#searchControlsContainer {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 15px;
}
#searchControlsContainer input#searchField {
	flex-grow: 1;
	margin-bottom: 0;
	vertical-align: middle;
	width: auto;
}
.search-button-group {
	display: flex;
	flex-shrink: 0;
	gap: 5px;
	vertical-align: middle;
	align-items: center;
}
.search-button-group .btn {
	 margin: 0;
	 vertical-align: middle;
}

#tradeInfoTable td.editable-condition select.input-sm {
    width: 100%;
    height: auto;
    cursor: pointer;
    margin: 0;
    padding: 4px 6px;
    line-height: normal;
}

.modal-search-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 150px;
    justify-content: center;
}
.modal-search-controls .input-field {
    margin-bottom: 0;
    flex-grow: 1;
}
.modal-search-controls .btn {
    margin: 0;
    flex-shrink: 0;
}
#modalSearchField {
    flex-grow: 1;
}

#modalSearchProductButton {
    flex-shrink: 0;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.clickable-link-text {
    color: #0000EE;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.clickable-link-text:hover {
    color: #4C4CF3;
}

.auth-page-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 55px);
    box-sizing: border-box;
}

.auth-form-container {
    background-color: rgba(255, 255, 255, 0.92);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.auth-form-container h1 {
    text-align: center;
}

.auth-form-container .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.auth-form-container .form-group label {
    display: block;
}

.auth-form-container .btn {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    font-size: 1.1rem;
}

.auth-form-container .form-link {
    margin-top: 20px;
    font-size: 0.9em;
    display: block;
    text-align: center;
}

.auth-form-container .error-message {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    min-height: 1.2em;
    font-size: 0.9em;
    text-align: left;
    display: none;
}
.auth-form-container .success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
    min-height: 1.2em;
    font-size: 0.9em;
    text-align: left;
    display: none;
}

.auth-box-header {
    background-color: #67ce25;
    color: white;
    padding: 18px 20px;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: -30px -40px 30px -40px;
}

.auth-box-header h2 {
    margin: 0;
    font-size: 1.6rem;
    color: white;
    font-weight: 700;
}

.auth-form-container {
    background-color: rgba(255, 255, 255, 0.92);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 420px;
    text-align: center;
    overflow: hidden;
}

.auth-form-container > h1 {
    display: none;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background-color: #67ce25;
    border-bottom: 1px solid #57b31b;
    height: auto;
    min-height: 55px;
    color: white;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.header-user-store-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex-shrink: 0;
}

.header-info-item {
    font-size: 1.0rem;
    line-height: 1.2;
    white-space: nowrap;
}

.header-info-item .info-label {
    font-weight: 700;
    margin-right: 5px;
}

.header-info-item .info-value {
    font-weight: 400;
}

.invoice-lookup-group {
    text-align: center;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0 10px;
}
.invoice-lookup-group .btn {
    margin-right: 8px;
}


.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.game-name-text-display.link-like {
    color: #0000EE;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.game-name-text-display.link-like:hover {
    color: #4C4CF3;
}

.game-name-text-display {
    display: inline-block;
    vertical-align: middle;
}

.trade-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
}
.trade-table th {
    vertical-align: middle;
}


.trade-table th:nth-child(1) {
    width: 45px;
    text-align: center;
    padding: 8px 5px;
    white-space: nowrap;
}
#tradeInfoTable td:nth-child(1) {
    width: 45px;
    text-align: center;
    vertical-align: middle;
    padding: 8px 5px;
}
.game-version-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background-color: #007bff;
    color: white;
    font-size: 0.9rem; /* MODIFIED */
    font-weight: bold;
    padding: 2px 5px; /* MODIFIED */
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    min-width: 22px; /* MODIFIED */
    height: 22px; /* MODIFIED */
    box-sizing: border-box;
}
.game-version-indicator:hover {
    background-color: #0056b3;
}


#versionSelectionModal .modal-content {
    padding-top: 15px;
}

.version-list-item {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.version-list-item:last-child {
    border-bottom: none;
}

.version-list-item:hover {
    background-color: #f0f8ff;
}

.version-list-item strong {
    display: block;
    margin-bottom: 3px;
    color: #0000EE;
}

.version-list-item .version-price-info {
    font-size: 0.85em;
    color: #555;
}

.disabled-by-permission {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.7;
}

#manageUsersModal {
	z-index: 1000;
    max-width: 1200px;
}

#userManagementTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
}

#userManagementTable th,
#userManagementTable td {
    border: 1px solid #dee2e6;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word;
}

#userManagementTable th {
    background-color: #67ce25;
    color: white;
    font-weight: 600;
		white-space: nowrap;
}

#userManagementTable th:nth-child(1),
#userManagementTable td:nth-child(1) {
    width: 20%;
}

#userManagementTable th:nth-child(2),
#userManagementTable td:nth-child(2) {
    width: 15%;
}

#userManagementTable th:nth-child(3),
#userManagementTable td:nth-child(3) {
    width: 25%;
}

#userManagementTable th:nth-child(4),
#userManagementTable td:nth-child(4) {
    width: 15%;
}

#userManagementTable th:nth-child(5),
#userManagementTable td:nth-child(5) {
    width: 10%;
    text-align: center;
}

#userManagementTable th:nth-child(6),
#userManagementTable td:nth-child(6) {
    width: 8%;
    text-align: center;
}

#userManagementTable th:nth-child(7),
#userManagementTable td:nth-child(7) {
    width: 7%;
    text-align: center;
}


#userManagementTable input[type="text"],
#userManagementTable input[type="email"],
#userManagementTable select {
    width: 100%;
    padding: 4px 6px;
    font-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 3px;
    box-sizing: border-box;
}
#userManagementTable input[type="text"]:read-only,
#userManagementTable input[type="email"]:read-only {
    background-color: #e9ecef;
    cursor: not-allowed;
}


#userManagementTable input[type="checkbox"] {
    transform: scale(1.2);
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
}

#userManagementTable .btn-sm {
    padding: 3px 8px;
    margin-left: 5px;
    white-space: nowrap;
}

#addNewUserModal .form-group,
#changePasswordModal .form-group,
#genericClearanceModal .form-group {
    margin-bottom: 15px;
}
#addNewUserModal .form-group label,
#changePasswordModal .form-group label,
#genericClearanceModal .form-group label {
    display: block;
    margin-bottom: 5px;
}

#addNewUserModal .input-field,
#changePasswordModal .input-field,
#genericClearanceModal .input-field {
    margin-bottom: 0;
}

#changePasswordModal p {
    margin-bottom: 15px;
    font-size: 0.95rem;
}
#changePasswordModal p strong {
    color: #1a237e;
}

#changePasswordMessageArea {
    text-align: left;
    font-size: 0.9em;
}
.trade-tabs-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 2px solid #67ce25;
    background-color: #f8f9fa;
    padding-left: 5px;
    position: relative;
}

.tabs-container {
    display: flex;
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

.tab-title-input {
    border: 1px solid #007bff;
    height: 24px;
    padding: 2px 6px;
}

.trade-tab:hover {
    background-color: #417A2A;
    color: white;
    border-color: #315C1F;
}

.tab-close-btn {
    display: inline-block;
    background-color: #dc3545;
    color: white;
    border: 1px solid #dc3545;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.75rem;
    line-height: 1.2;
    margin-left: 10px;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    font-weight: bold;
}

.tab-close-btn:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.add-tab-button {
    margin-left: 10px;
    flex-shrink: 0;
}

#tradeInfoTable tr.line-override-active {
    background-color: #ffdddd !important;
}
#tradeInfoTable tr.line-override-active:hover {
    background-color: #ffcccc !important;
}
#tradeInfoTable td.db-link-active {
    background-color: #ffdddd !important;
}

.app-header.app-header-override-active {
    background-color: #dc3545 !important;
}

/* *** NEW RULE FOR OVERRIDE BUTTON VISIBILITY *** */
.app-header.app-header-override-active .btn-danger,
.app-header.app-header-override-active .btn-primary {
    background-color: #f8f9fa; /* Light off-white */
    color: #dc3545; /* Red text for contrast */
    border-color: #f8f9fa; /* Matching border */
}
.app-header.app-header-override-active .btn-danger:hover,
.app-header.app-header-override-active .btn-primary:hover {
    background-color: #e2e6ea; /* Slightly darker hover */
    border-color: #e2e6ea;
}

/* --- Styles for Calculator Tabs --- */
.calc-tabs {
    display: flex;
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

.calc-tab {
    padding: 4px 10px;
    cursor: pointer;
    border: 1px solid #417A2A;
    border-bottom: none;
    background-color: #519435;
    color: #ffffff;
    margin-right: 2px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.calc-tab:hover {
    background-color: #417A2A;
}

.calc-tab.active {
    background-color: #343a40; /* Match calculator body */
    color: white;
    font-weight: bold;
    border-color: #495057 #495057 #343a40;
}

.calc-tab .tab-close-btn {
    padding: 0 4px;
    font-size: 0.7rem;
    margin-left: 6px;
}

#calc-add-tab-btn {
    flex-shrink: 0;
    margin: 0 5px;
    padding: 2px 6px;
    font-size: 0.9rem;
    background-color: #519435;
    color: white;
    border: 1px solid #417A2A;
}
#calc-add-tab-btn:hover {
    background-color: #417A2A;
}


.catalog-controls-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}

.alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.alphabet-filter a {
    padding: 5px 10px;
    text-decoration: none;
    color: #0d6efd;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: white;
    transition: all 0.2s ease-in-out;
}

.alphabet-filter a:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

.alphabet-filter a.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
    font-weight: bold;
}

.hidden-by-permission {
    display: none !important;
}

#catalogEditorTable {
    table-layout: fixed;
    width: 100%;
}

#catalogEditorTable th, #catalogEditorTable td {
    word-wrap: break-word;
}

#catalogEditorTable .col-select { width: 55px; }
#catalogEditorTable .col-game-name { width: 35%; }
#catalogEditorTable .col-console-name { width: 18%; }
#catalogEditorTable .col-condition { width: 12%; }
#catalogEditorTable .col-cash { width: 8%; }
#catalogEditorTable .col-credit { width: 8%; }
#catalogEditorTable .col-pc { width: 8%; }
#catalogEditorTable .col-price { width: 8%; }
#catalogEditorTable .col-print { width: 55px; }

.retail-price-orange {
    color: #FFA500 !important;
    font-weight: bold !important;
}

.retail-price-red {
    color: #FF0000 !important;
    font-weight: bold !important;
}

.catalog-controls-container .checkbox-container {
    width: 1
}

/* ----- NEW PRINTING STYLES ----- */
@page {
    size: 2in 1in;
    margin: 2mm;
}

@media print {
    body {
        /* On the main page, hide everything during print */
        visibility: hidden;
    }

    .print-iframe-container,
    .print-iframe-container * {
        /* Make the iframe and its contents visible */
        visibility: visible;
    }

    .print-iframe-container {
        /* Ensure the iframe is positioned correctly for printing */
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    /* Styles FOR THE CONTENT INSIDE the iframe */
    .label-container {
        width: 2in;
        height: 1in;
        padding: 2mm;
        box-sizing: border-box;
        overflow: hidden;
        page-break-after: always; /* Each label on a new page */
    }

    .label-container pre {
        font-family: 'Arial', sans-serif;
        font-size: 8pt;
        line-height: 1.2;
        color: #000;
        margin: 0;
        padding: 0;
        white-space: pre-wrap;
        word-break: break-all;
        width: 100%;
        height: 100%;
    }
	
	/* ADD these new rules for the barcode sliver */
    .barcode-sliver {
        width: 100%;
        height: 0.125in;
        overflow: hidden;
        position: absolute;
        bottom: 2mm;
        left: 0;
        padding-left: 2mm;
        padding-right: 2mm;
        box-sizing: border-box;
    }
    .barcode-sliver svg {
        width: 100%;
        height: 100%;
    }
}
}

/* Final, forceful override for Invoice button layout */
#printInvoiceSummaryButton {
    display: inline-flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#printInvoiceSummaryButton > .button-icon,
#printInvoiceSummaryButton > .button-text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Custom column widths for the Price History modal table */
#priceHistoryModal .trade-table {
    table-layout: fixed;
    width: 100%;
}

#priceHistoryModal .trade-table th:nth-child(1),
#priceHistoryModal .trade-table td:nth-child(1) {
    width: 35%; /* Date */
}

#priceHistoryModal .trade-table th:nth-child(2),
#priceHistoryModal .trade-table td:nth-child(2) {
    width: 20%; /* Changed By */
}

#priceHistoryModal .trade-table th:nth-child(3),
#priceHistoryModal .trade-table td:nth-child(3) {
    width: 15%; /* Condition */
}

#priceHistoryModal .trade-table th:nth-child(4),
#priceHistoryModal .trade-table td:nth-child(4) {
    width: 10%; /* Old Price */
}

#priceHistoryModal .trade-table th:nth-child(5),
#priceHistoryModal .trade-table td:nth-child(5) {
    width: 10%; /* New Price */
}

#priceHistoryModal .trade-table th:nth-child(6),
#priceHistoryModal .trade-table td:nth-child(6) {
    width: 10%; /* Actions */
}

/* Refinements for the Manage Users Modal */

/* 1. Increase the overall width of the modal */
#manageUsersModal {
    max-width: 1500px; /* Increased from 1400px */
}

/* 2. Rebalance the 8 columns of the user table */
#userManagementTable th:nth-child(1),
#userManagementTable td:nth-child(1) {
    width: 13%; /* First Name */
}
#userManagementTable th:nth-child(2),
#userManagementTable td:nth-child(2) {
    width: 13%; /* Last Name */
}
#userManagementTable th:nth-child(3),
#userManagementTable td:nth-child(3) {
    width: 10%; /* Username */
}
#userManagementTable th:nth-child(4),
#userManagementTable td:nth-child(4) {
    width: 21%; /* Email */
}
#userManagementTable th:nth-child(5),
#userManagementTable td:nth-child(5) {
    width: 12%; /* Role */
}
#userManagementTable th:nth-child(6),
#userManagementTable td:nth-child(6) {
    width: 6%;  /* Pin */
}
#userManagementTable th:nth-child(7),
#userManagementTable td:nth-child(7) {
    width: 6%;  /* Disabled */
}
#userManagementTable th:nth-child(8),
#userManagementTable td:nth-child(8) {
    width: 6%; /* Actions */
	text-align: center;
}

/* 3. Make the Delete button match the Save button's height */
#userManagementTable .btn-danger {
    padding: 5px 10px;
    font-size: 0.9rem;
}

/* Enforce uniform width and height, and remove conflicting margins */
.management-actions .btn {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    height: 38px; /* ADDED: Sets a fixed height for all buttons */
    display: flex; /* ADDED: Enables vertical alignment */
    align-items: center; /* ADDED: Vertically centers text */
    justify-content: center; /* ADDED: Horizontally centers text */
}

.trade-options-grid .btn {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the search section and its results can grow and scroll properly */
.original-item-search-section {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows this section to fill available space */
    min-height: 0; /* Important for flex-grow in a scrollable parent */
}

#searchResults {
    flex-grow: 1; /* Allows the results div to fill its container */
    overflow-y: auto; /* Makes the results list scrollable if it's too long */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 5px;
}

/* Force the searchable console dropdown to appear above all other content */
.catalog-controls-container .choices {
    position: relative;
    z-index: 1025; /* High value to ensure it's on top */
}

/* Increase font size for Cash and Credit totals to match Retail total */
.totals-overview .total-value {
    font-size: 1.3em; /* Matches the font size of the .main-total-display */
    font-weight: bold; /* Ensures all totals are bold */
}

#cashTotal,
#creditTotal {
    color: #198754; /* A standard success green color */
}

/* Definitive layout for the Price Audit modal table */
#priceAuditModal .trade-table {
    table-layout: fixed;
    width: 100%;
}

#priceAuditModal .trade-table th, 
#priceAuditModal .trade-table td {
    word-wrap: break-word;
    vertical-align: middle;
}

/* --- START: MODIFICATION --- */
/* This block is updated for 8 columns */
#priceAuditModal .trade-table th:nth-child(1),
#priceAuditModal .trade-table td:nth-child(1) {
    width: 14%; /* Date */
    text-align: left !important;
}

#priceAuditModal .trade-table th:nth-child(2),
#priceAuditModal .trade-table td:nth-child(2) {
    width: 32%; /* Product */
    text-align: left !important;
}

#priceAuditModal .trade-table th:nth-child(3),
#priceAuditModal .trade-table td:nth-child(3) {
    width: 10%; /* Changed By */
    text-align: left !important;
}

#priceAuditModal .trade-table th:nth-child(4),
#priceAuditModal .trade-table td:nth-child(4) {
    width: 10%; /* Type (NEW) */
    text-align: left !important;
}

#priceAuditModal .trade-table th:nth-child(5),
#priceAuditModal .trade-table td:nth-child(5) {
    width: 7.5%; /* Condition */
    text-align: center !important;
}

#priceAuditModal .trade-table th:nth-child(6),
#priceAuditModal .trade-table td:nth-child(6) {
    width: 7.5%; /* Invoice # */
    text-align: center !important;
}

#priceAuditModal .trade-table th:nth-child(7),
#priceAuditModal .trade-table td:nth-child(7) {
    width: 7.5%; /* Old Price */
    text-align: right !important;
}

#priceAuditModal .trade-table th:nth-child(8),
#priceAuditModal .trade-table td:nth-child(8) {
    width: 7.5%; /* New Price */
    text-align: right !important;
}
/* --- END: MODIFICATION --- */

/* Add horizontal padding to the Price Audit modal */
#priceAuditModal .modal-header,
#priceAuditModal .modal-content {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Adds consistent padding inside the Price Audit modal */
#priceAuditModal .modal-padding-wrapper {
    padding: 0 25px 20px 25px; /* Top, Right, Bottom, Left */
}

/* Ensure Invoice Details modal appears on top of other modals like Price Audit */
#invoiceDetailModal {
    z-index: 1010;
}

.pc-price-good {
    color: #198754; /* A vibrant success green */
    font-weight: bold;
}

.pc-price-bad {
    color: #FF0000 !important; /* Matches the vibrant retail red */
    font-weight: bold;
}

.manual-totals-container {
    display: none; /* Hidden by default */
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 10px 15px;
    background-color: #fffbe6; /* Light yellow to indicate a special state */
    border: 1px solid #ffeeba;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Styles for Click-to-Edit Totals */
.editable-total {
    cursor: pointer;
    border-bottom: 2px dashed #6c757d;
    padding-bottom: 2px;
    transition: border-bottom-color 0.2s ease-in-out;
}
.editable-total:hover {
    border-bottom-color: #0d6efd;
}

/* Container for the inline manual entry fields */
.form-group-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.form-group-inline label {
    margin-bottom: 0;
    font-weight: bold;
}
.form-group-inline .input-field {
    width: 120px;
    margin-bottom: 0;
}

/* Ensure all three checkboxes have the same larger size */
#CashCheckbox,
#CreditCheckbox,
#BothCheckbox {
	transform: scale(1.4);
	margin: 0 6px;
	vertical-align: middle;
	cursor: pointer;
}

/* --- Final Detailed Search Filter Layout --- */
.filter-controls-container {
    display: flex;
    /* align-items: flex-end; /* Change this line */
    align-items: baseline; /* To this line */
    gap: 13px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    /* align-items: flex-start; /* Remove or comment out this line */
    flex-direction: column; /* Add this line to stack label and control */
    gap: 2px; /* Optional: Add small gap between label and control */
}

/* This rule aligns the Auto group */
.filter-group-auto {
    /* margin-bottom: 4px; /* Remove this line */
}

.filter-group label {
    font-weight: bold;
    font-size: 1.0em;
    margin-bottom: 0;
    white-space: nowrap;
}

.filter-group select {
    width: auto;
    display: inline-block;
}

.filter-group input[type="checkbox"] {
    transform: scale(1.3);
    cursor: pointer;
}

.trade-type-manual {
    color: #dc3545 !important; /* Red color */
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Save Notification --- */
#saveNotification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    
    /* Animation properties */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
}

#saveNotification.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#saveNotification img {
    height: 40px;
    width: auto;
}

/* Style for incomplete generic item rows */
#tradeInfoTable tr.placeholder-row,
#tradeInfoTable tr.placeholder-row:nth-child(even) {
    background-color: #fffbe6 !important; /* Light yellow */
}

#tradeInfoTable tr.placeholder-row:hover {
    background-color: #fff9d4 !important; /* Lighter yellow on hover */
}

#tradeInfoTable td.editable-cell,
#catalogEditorTable td.editable-catalog-cell {
	cursor: pointer;
	/* This stacks two shadows to create a 1px border with 3px of inner padding */
	box-shadow: inset 0 0 0 3px #fff, 
	            inset 0 0 0 4px rgba(103, 206, 37, 0.7);
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#tradeInfoTable td.editable-cell:hover,
#catalogEditorTable td.editable-catalog-cell:hover {
	background-color: #f0f8ff; /* Background highlight */
	/* On hover, the inner padding matches the new background, and the outer ring becomes a solid 2px blue */
	box-shadow: inset 0 0 0 3px #f0f8ff, 
	            inset 0 0 0 5px #0000EE;
}

/* --- START: New Product Details Modal Styles --- */

/* Shrink the search bar inside the modal */
#gameModal .modal-search-controls {
    flex-grow: 0;
    min-width: 300px;
    width: 33%;
}

/* Main container for the new price display */
.details-price-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    margin-top: 15px;
}

/* Styling for each of the three condition columns */
.condition-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    flex: 1;
}

.condition-column .condition-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a237e;
    display: flex;
    align-items: center;
    gap: 5px;
}

.condition-column img {
    height: 32px;
    width: auto;
}

.condition-column .price-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: #343a40;
}

/* Styling for the history icon and Add button columns */
.details-action-column {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 25px; /* Aligns with the middle of the columns */
}

.details-action-column .btn-icon {
    font-size: 2rem; /* Make history icon bigger */
}

/* A new style for the green "Add" button */
.btn-add-trade {
    background-color: #198754;
    color: white;
    font-weight: 700;
    padding: 10px 25px;
}

.btn-add-trade:hover {
    background-color: #157347;
}

/* --- END: New Product Details Modal Styles --- */

/* Constrains the width of any input field that appears inside an editable catalog cell */
#catalogEditorTable td.editable-catalog-cell input {
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    width: 100%;           /* Explicitly set width to fill the cell */
}

#tradeInfoTable td:nth-child(5) { /* Target the Notes column specifically */
    white-space: nowrap;     /* Prevent the text from wrapping to a new line */
    overflow: hidden;          /* Hide any text that overflows the cell's boundary */
    text-overflow: ellipsis;   /* Add the "..." at the end of truncated text */
}

/* --- Styles for DB Link in Product Details Modal --- */

.details-db-link-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    /* padding-top has been removed to allow natural top alignment */
}

.details-db-link-column .db-link-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a237e;
    display: flex;
    align-items: center;
    gap: 5px;
}

.details-db-link-column input[type="checkbox"] {
    transform: scale(1.4);
    cursor: pointer;
}

/* Style for retro prices when they are live/editable */
.price-display.live-edit-active {
    cursor: text;
    background-color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    /* This is the same green inset border from the other editable fields */
    box-shadow: inset 0 0 0 2px rgba(103, 206, 37, 0.9);
}

/* Increase the size of the Select, Print, and DB checkboxes for better visibility */
#tradeInfoTable .trade-item-select-checkbox,
#tradeInfoTable .print-checkbox,
#tradeInfoTable .db-link-checkbox,
#tradeInfoTable .permanent-note-checkbox {
    transform: scale(1.4);
    vertical-align: middle;
}

/* Remove the up/down arrows from all number inputs in the totals section */
.totals-overview input[type="number"]::-webkit-outer-spin-button,
.totals-overview input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.totals-overview input[type="number"] {
    -moz-appearance: textfield;
}

/* Reduce the size of the DB checkbox to better match the radio buttons */
.details-db-link-column input[type="checkbox"] {
    transform: scale(1.2);
}

/* --- Active Trades Dashboard Styles --- */
#storeTabsContainer {
    padding-left: 0;
    margin-bottom: 0;
}

.trades-master-list {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden;
}

/* --- New Flexbox Layout for Trades Dashboard --- */

.trade-summary-item {
    display: flex;
    width: 100%;
    gap: 15px;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

/* This targets the content DIVs inside each summary item */
.trade-summary-item > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Define column widths for the ACTIVE tab (5 columns) */
.trade-summary-item.active-trade-summary > div:nth-child(1) { flex: 0 1 25%; } /* Tab/Employee */
.trade-summary-item.active-trade-summary > div:nth-child(2) { flex: 0 1 25%; } /* Customer */
.trade-summary-item.active-trade-summary > div:nth-child(3) { flex: 0 1 13%; } /* Items */
.trade-summary-item.active-trade-summary > div:nth-child(4) { flex: 0 1 15%; } /* Retail Value */
.trade-summary-item.active-trade-summary > div:nth-child(5) { /* Actions */
    margin-left: auto; /* This pushes the Actions column to the far right */
    flex-shrink: 0;
}

/* Define column widths for PENDING & RECYCLED tabs (6 columns) */
.trade-summary-item:not(.active-trade-summary) > div:nth-child(1) { flex: 0 1 22%; } /* Tab/Employee */
.trade-summary-item:not(.active-trade-summary) > div:nth-child(2) { flex: 0 1 22%; } /* Customer */
.trade-summary-item:not(.active-trade-summary) > div:nth-child(3) { flex: 0 1 10%; }  /* Items */
.trade-summary-item:not(.active-trade-summary) > div:nth-child(4) { flex: 0 1 15%; } /* Retail Value */
.trade-summary-item:not(.active-trade-summary) > div:nth-child(5) { flex: 0 1 10%; text-align: center; }  /* Notes */
.trade-summary-item:not(.active-trade-summary) > div:nth-child(6) { /* Actions */
    margin-left: auto; /* This pushes the Actions column to the far right */
    flex-shrink: 0;
}

.trade-summary-item:last-child {
    border-bottom: none;
}

.trade-summary-item:hover {
    background-color: #f8f9fa;
}

.trade-summary-item > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-summary-item .info-label {
    font-size: 0.8em;
    color: #6c757d;
    display: block;
}

.trade-summary-item .info-value {
    font-weight: 500;
}

.trade-detail-view {
    padding: 15px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background-color: #fdfdfd;
}

/* --- Fix for Trade Detail View Table Layout --- */
.trade-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.trade-detail-header h3 {
    margin: 0;
}

.trade-detail-view .trade-table-container {
    max-height: 45vh;
}

/* Make inputs in read-only view look disabled */
.trade-detail-view input[type="text"],
.trade-detail-view input[type="tel"] {
    background-color: #e9ecef;
    cursor: default;
}

/* Style for reassignment dropdown */
#reassignUserSelect {
    min-width: 200px;
    margin-left: 10px;
}

/* --- Active Trades Dashboard Refinements --- */
.trade-detail-view .customer-details-labeled-group {
    flex: 1 1 250px;
}

.trade-detail-view .customer-details-labeled-group label {
    font-weight: 500;
    margin-bottom: .2rem;
    display: block;
}

/* --- Final Layout for Trade Detail View Table --- */

/* 1. Base table settings */
.trade-detail-view .trade-table {
    table-layout: fixed;
    width: 100%;
}

/* 2. Default alignment and padding for all cells */
.trade-detail-view .trade-table th,
.trade-detail-view .trade-table td {
    text-align: left;
    vertical-align: middle;
    padding: 8px 7px; /* Adds consistent padding to all cells */
    word-wrap: break-word;
}

/* 3. Column Widths (Your "Control Panel") */
.trade-detail-view .trade-table th:nth-child(1), .trade-detail-view .trade-table td:nth-child(1) { width: 35%; } /* Product Name */
.trade-detail-view .trade-table th:nth-child(2), .trade-detail-view .trade-table td:nth-child(2) { width: 15%; } /* System */
.trade-detail-view .trade-table th:nth-child(3), .trade-detail-view .trade-table td:nth-child(3) { width: 10%; } /* Condition */
.trade-detail-view .trade-table th:nth-child(4), .trade-detail-view .trade-table td:nth-child(4) { width: auto; } /* Notes (This will fill the remaining space) */
.trade-detail-view .trade-table th:nth-child(5), .trade-detail-view .trade-table td:nth-child(5) { width: 10%; } /* Retail */
.trade-detail-view .trade-table th:nth-child(6), .trade-detail-view .trade-table td:nth-child(6) { width: 6%; }  /* Qty */

/* 4. Overrides for the right-aligned Qty column */
.trade-detail-view .trade-table th:nth-child(6),
.trade-detail-view .trade-table td:nth-child(6) {
    text-align: right;
    padding-right: 25px;
}

/* --- START: New Console Filter Styles --- */
#console-filter-container {
    align-items: flex-end; /* Aligns items to the bottom */
}

.filter-group-console {
    display: flex;
    flex-direction: column; /* Stacks label on top of dropdown */
    flex-grow: 1; /* Allows the group to take up available space */
    max-width: calc(100% - 97px); /* Prevents it from taking ALL space, leaving room for the reset button */
}

.filter-group-console label {
    font-weight: bold;
    font-size: 1.0em;
    margin-bottom: 2px;
}

#resetSearchFiltersButton {
    margin-bottom: 3px; /* Aligns the icon vertically with the dropdown */
    margin-left: 5px;
}

/* Make the Choices.js dropdown full width within its container */
.filter-group-console .choices {
    width: 100%;
    margin-bottom: 0;
}
/* --- END: New Console Filter Styles --- */

/* --- START: Console Filter Height Adjustment --- */
#console-filter-container .choices__inner {
    min-height: unset; /* Override the default minimum height */
    height: auto;
    padding: 3px 8px; /* Reduce vertical padding to match other dropdowns */
    font-size: 0.9rem; /* Match the font size of the .input-sm class */
}

#console-filter-container .choices__input--cloned {
    font-size: 0.9rem; /* Ensure the text inside the input matches */
    padding: 0;
    margin: 0;
    background-color: transparent;
}
/* --- END: Console Filter Height Adjustment --- */

/* --- START: Console Filter Height Adjustment (Catalog Editor) --- */
#catalog-controls .choices__inner {
    min-height: unset; /* Override the default minimum height */
    height: auto;
    padding: 3px 8px; /* Reduce vertical padding to match other dropdowns */
    font-size: 0.9rem; /* Match the font size of the .input-sm class */
}

#catalog-controls .choices__input--cloned {
    font-size: 0.9rem; /* Ensure the text inside the input matches */
    padding: 0;
    margin: 0;
    background-color: transparent;
}
/* --- END: Console Filter Height Adjustment (Catalog Editor) --- */

/* --- Schedule Audit Modal Styles --- */
#auditResultsContainer {
    max-height: 60vh;
}

#auditResultsTable th, #auditResultsTable td {
    white-space: nowrap;
}

#auditDetailContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#auditDetailContent h4 {
    grid-column: 1 / -1; /* Span both columns */
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

#auditDetailContent .detail-block {
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
}

#auditDetailContent .detail-block p {
    margin: 0 0 8px 0;
    font-size: 0.9em;
}

#auditDetailContent .detail-block strong {
    display: inline-block;
    width: 100px;
    color: #495057;
}

.audit-change-highlight {
    background-color: #fffbe6; /* Light yellow for changed values */
    font-weight: bold;
}

.management-setting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}
.management-setting-toggle label {
    font-weight: 500;
    margin-bottom: 0;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* NEW: Style for header icon buttons */
.btn-icon-link {
    font-size: 1.2rem;
    padding: 2px 8px;
    line-height: 1.2;
}

/* --- COSMETIC FIXES --- */

/* 1. Add a hover effect for yellow "warning" buttons */
.btn-warning:hover {
    background-color: #ffb700;
    border-color: #ffaa00;
}

/* 2. Ensure link-styled buttons keep their text white on hover */
a.btn-secondary:hover, a.btn-warning:hover, a.btn-danger:hover {
    color: white;
}

/* 3. Increase column widths in the Schedule History modal table */
#auditResultsTable th:nth-child(1),
#auditResultsTable td:nth-child(1) {
    width: 20%; /* Timestamp */
}
#auditResultsTable th:nth-child(2),
#auditResultsTable td:nth-child(2) {
    width: 20%; /* Changed By */
}

/* 4. Fix the layering (z-index) of the "View Details" sub-modal */
#auditDetailModal {
    z-index: 1020;
}

/* --- COSMETIC FIXES --- */

/* 1. Add a hover effect for yellow "warning" buttons */
.btn-warning:hover {
    background-color: #ffb700;
    border-color: #ffaa00;
}

/* 2. Ensure link-styled buttons keep their text white on hover */
a.btn-secondary:hover, a.btn-warning:hover, a.btn-danger:hover {
    color: white !important; /* Use !important to override default link styles */
}

/* MODIFIED: Increase column widths in the Schedule History modal table */
#auditResultsTable th:nth-child(1),
#auditResultsTable td:nth-child(1) {
    width: 25%; /* Timestamp */
}
#auditResultsTable th:nth-child(2),
#auditResultsTable td:nth-child(2) {
    width: 20%; /* Changed By */
}
#auditResultsTable th:nth-child(3),
#auditResultsTable td:nth-child(3) {
    width: 20%; /* Affected Employee */
}
#auditResultsTable th:nth-child(4),
#auditResultsTable td:nth-child(4) {
    width: 15%; /* Action */
}
#auditResultsTable th:nth-child(5),
#auditResultsTable td:nth-child(5) {
    width: 15%; /* Details */
}

#auditDetailModal {
    z-index: 1050 !important; /* Force a very high stacking order */
    visibility: visible !important; /* Ensure it is always visible when display is not 'none' */
    opacity: 1 !important;
}

/* NEW: Add a visibility class to forcefully show modals */
.modal.is-visible {
    display: block !important;
}

/* NEW: Style for plain icon links in the main header */
.header-icon-link {
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease-in-out;
}
.header-icon-link:hover {
    opacity: 1;
    color: white;
}

#scheduleAuditModal {
    max-width: 960px;
}

/* NEW: Add a visibility class to forcefully show modals */
.modal.is-visible {
    display: block !important;
}

/* Styles for the new centered content in the main app header */
.header-center-content {
    flex-grow: 1;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.header-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Tab Styles for Modals --- */
.modal-tabs {
    display: flex;
    border-bottom: 2px solid #67ce25; /* The green line is on the container */
    margin-bottom: 15px;
}

.modal-tab.active {
    background-color: #fff; /* White background */
    border-color: #67ce25 #67ce25 transparent; /* Green top/side borders, transparent bottom */
    font-weight: 700; /* Make text bold */
    color: #343a40; /* Darker text */
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* --- Time Off History Table Styles --- */
#timeoffHistoryResultsTable .status-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    text-align: center;
}
#timeoffHistoryResultsTable .status-Approved { background-color: #198754; }
#timeoffHistoryResultsTable .status-Denied { background-color: #dc3545; }
#timeoffHistoryResultsTable .status-Pending { background-color: #ffc107; color: #343a40;}

/* --- Time Off History Table Column Widths --- */
#timeoffHistoryResultsTable {
    table-layout: fixed;
    width: 100%;
}

#timeoffHistoryResultsTable th, 
#timeoffHistoryResultsTable td {
    word-wrap: break-word;
}

#timeoffHistoryResultsTable th:nth-child(1),
#timeoffHistoryResultsTable td:nth-child(1) { width: 15%; } /* Date Requested */

#timeoffHistoryResultsTable th:nth-child(2),
#timeoffHistoryResultsTable td:nth-child(2) { width: 20%; } /* Employee */

#timeoffHistoryResultsTable th:nth-child(3),
#timeoffHistoryResultsTable td:nth-child(3) { width: 15%; } /* Dates */

#timeoffHistoryResultsTable th:nth-child(4),
#timeoffHistoryResultsTable td:nth-child(4) { width: 25%; } /* Reason */

#timeoffHistoryResultsTable th:nth-child(5),
#timeoffHistoryResultsTable td:nth-child(5) { width: 15%; text-align: center; } /* Status */

#timeoffHistoryResultsTable th:nth-child(6),
#timeoffHistoryResultsTable td:nth-child(6) { 
    width: 20%; 
    text-align: center; /* This line was added */
} /* Reviewed By */

/* --- Rapid Entry Modal Styles --- */
.modal-padding-wrapper {
    padding: 15px 25px 20px 25px;
}

.search-results-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #0000EE;
}
.search-results-list a:hover {
    background-color: #f0f8ff;
}

#visualSearchResultsTable td {
    vertical-align: middle;
}

#visualSearchResultsTable input, #visualSearchResultsTable select {
    margin-bottom: 0;
}

#visualSearchResultsTable .btn-icon {
    font-size: 1.3rem;
    color: #dc3545;
}
#visualSearchResultsTable .btn-icon:hover {
    color: #a71d2a;
}

#priceEntryModal .form-row {
    display: flex;
    gap: 15px;
}

/* --- Styles for Sortable Table Headers --- */
.sortable-header {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.sortable-header:hover {
    background-color: #57b31b; /* Darker green on hover */
}

.sort-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
}

/* Prevents text selection during checkbox drag-and-drop */
body.is-drag-selecting {
    user-select: none;
    -webkit-user-select: none; /* For Safari compatibility */
}

/* --- Unified History Modal Styles --- */
#historyModal .trade-table-container {
    margin-top: 15px;
}

/* 1. Fixes the filter layout to be horizontal */
.history-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.history-filters .form-group {
    margin-bottom: 0;
}

/* --- Modal Stacking Fix --- */
#gameModal {
    z-index: 1020;
}

/* --- Utility Icon Alignment & Sizing --- */
.utility-buttons {
    display: flex;
    align-items: center;
}
.utility-buttons .btn-icon {
    font-size: 1.5rem;
    line-height: 1;
    color: #343a40;
}
/* This rule adds a margin to every icon EXCEPT the first one */
.utility-buttons .btn-icon + .btn-icon {
    margin-left: 4px;
}
.utility-buttons .btn-icon:hover {
    color: #0d6efd;
}
/* --- Updated Cover Art Button Styles --- */
.btn-icon-cover-art {
    color: #6f42c1 !important; /* Purple */
    font-size: 1.6rem;
    /* margin-right removed to fix double spacing */
}

.btn-icon-cover-art:hover {
    color: #563d7c !important;
    transform: scale(1.1);
}
.utility-buttons .btn-icon img {
    height: 1.5rem;
    vertical-align: middle;
}

/* --- Attachment Manager Styles --- */
#uploadAttachmentBtn {
    position: relative; /* Needed for badge positioning */
}

.attachment-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #0d6efd; /* Blue */
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    display: none; /* Hidden by default */
}

#currentAttachmentsList {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    background-color: #f8f9fa;
}

.attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
}
.attachment-item:last-child {
    border-bottom: none;
}

.remove-attachment-btn {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.remove-attachment-btn:hover {
    color: #a71d2a;
}

/* --- Modal Stacking Fix for Attachments --- */
#attachmentsModal {
    z-index: 1020;
}

/* --- Final History Modal Layout & Table Styles --- */

/* General rule for all history tables */
#tc_historyResultsTable,
#sa_resultsTable,
#to_resultsTable,
#ph_resultsTable {
    table-layout: fixed;
    width: 100%;
}
#tc_historyResultsTable th, #tc_historyResultsTable td,
#sa_resultsTable th, #sa_resultsTable td,
#to_resultsTable th, #to_resultsTable td,
#ph_resultsTable th, #ph_resultsTable td {
    text-align: left;
    vertical-align: middle;
}

/* Time Clock History */
#tc_historyResultsTable th:nth-child(1), #tc_historyResultsTable td:nth-child(1) { width: 25%; } /* Employee */
#tc_historyResultsTable th:nth-child(2), #tc_historyResultsTable td:nth-child(2) { width: 15%; } /* Date */
#tc_historyResultsTable th:nth-child(3), #tc_historyResultsTable td:nth-child(3) { width: 15%; } /* Store */
#tc_historyResultsTable th:nth-child(4), #tc_historyResultsTable td:nth-child(4) { width: 10%; text-align: center; } /* Clock In */
#tc_historyResultsTable th:nth-child(5), #tc_historyResultsTable td:nth-child(5) { width: 10%; text-align: center; } /* Clock Out */
#tc_historyResultsTable th:nth-child(6), #tc_historyResultsTable td:nth-child(6) { width: 10%; text-align: right; } /* Lunch */
#tc_historyResultsTable th:nth-child(7), #tc_historyResultsTable td:nth-child(7) { width: 15%; text-align: right; } /* Total Hours */

/* Shift Audit History */
#sa_resultsTable th:nth-child(1), #sa_resultsTable td:nth-child(1) { width: 25%; } /* Timestamp */
#sa_resultsTable th:nth-child(2), #sa_resultsTable td:nth-child(2) { width: 20%; } /* Changed By */
#sa_resultsTable th:nth-child(3), #sa_resultsTable td:nth-child(3) { width: 20%; } /* Affected Employee */
#sa_resultsTable th:nth-child(4), #sa_resultsTable td:nth-child(4) { width: 15%; text-align: center; } /* Action */
#sa_resultsTable th:nth-child(5), #sa_resultsTable td:nth-child(5) { width: 20%; text-align: center; } /* Details */

/* Time Off History */
#to_resultsTable th:nth-child(1), #to_resultsTable td:nth-child(1) { width: 15%; } /* Date Requested */
#to_resultsTable th:nth-child(2), #to_resultsTable td:nth-child(2) { width: 20%; } /* Employee */
#to_resultsTable th:nth-child(3), #to_resultsTable td:nth-child(3) { width: 15%; text-align: center; } /* Dates */
#to_resultsTable th:nth-child(4), #to_resultsTable td:nth-child(4) { width: 25%; } /* Reason */
#to_resultsTable th:nth-child(5), #to_resultsTable td:nth-child(5) { width: 10%; text-align: center; } /* Status */
#to_resultsTable th:nth-child(6), #to_resultsTable td:nth-child(6) { width: 15%; } /* Reviewed By */

/* Pricing History */
#ph_resultsTable th:nth-child(1), #ph_resultsTable td:nth-child(1) { width: 20%; } /* Date */
#ph_resultsTable th:nth-child(2), #ph_resultsTable td:nth-child(2) { width: 35%; } /* Product */
#ph_resultsTable th:nth-child(3), #ph_resultsTable td:nth-child(3) { width: 15%; } /* Changed By */
#ph_resultsTable th:nth-child(4), #ph_resultsTable td:nth-child(4) { width: 8%; text-align: center; } /* Condition */
#ph_resultsTable th:nth-child(5), #ph_resultsTable td:nth-child(5) { width: 8%; text-align: center; } /* Invoice # */
#ph_resultsTable th:nth-child(6), #ph_resultsTable td:nth-child(6) { width: 7%; text-align: right; } /* Old Price */
#ph_resultsTable th:nth-child(7), #ph_resultsTable td:nth-child(7) { width: 7%; text-align: right; } /* New Price */

/* This new rule targets all search result lists */
.search-result-link {
    display: block; /* This forces each link onto its own line safely */
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #0000EE;
}

.search-result-link:hover {
    background-color: #f0f8ff;
    color: #4C4CF3;
}

/* This new rule prevents long text from stretching the modal */
.search-result-link span,
#rapidEntrySearchResults a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* This new rule targets all search result lists */
.search-result-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px; /* This removes the vertical spacing */
    border-bottom: none;
    text-decoration: none;
    color: #0000EE;
}

.search-result-link:hover {
    background-color: #f0f8ff;
    color: #4C4CF3;
}

/* This new rule prevents long text in search results from stretching the modal */
.search-result-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Definitive Modal Stacking Order --- */
#invoiceDetailModal,
#gameModal {
    z-index: 1010;
}

#attachmentsModal,
#productNamePopup,
#priceHistoryModal,
#versionSelectionModal,
#auditDetailModal {
    z-index: 1020;
}

/* --- Style for Global Percentage Highlights --- */
.global-percent-change {
    background-color: #d4edda !important; /* Mild success green */
    transition: background-color 0.3s ease-in-out;
}

/* --- START: Final Master Fix Block v3 --- */

/* 1. Definitive Desktop Override for the Product Details (#gameModal) header */
@media (min-width: 601px) {
    #gameModal .modal-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: static !important;
        padding: 15px 25px !important;
        height: auto !important;
    }
    #gameModal .modal-header h2 {
        width: auto !important;
        text-align: left !important;
        margin: 0 !important;
        order: 0 !important;
    }
    #gameModal .modal-search-controls {
        order: 0 !important;
        width: auto !important;
        max-width: 450px !important;
        flex-grow: 1 !important;
        margin: 0 !important;
    }
    #gameModal .modal-header-actions {
        order: 0 !important;
        width: auto !important;
        justify-content: flex-end !important;
    }
    #gameModal .modal-header .close-button {
        position: static !important;
    }
}

/* 2. Corrects the width/max-width for all other modals */
#invoiceLookupModal { max-width: 900px; }
#addItemPopup { max-width: 750px; }
#manageUsersModal { max-width: 1500px; }
#invoiceDetailModal { max-width: 1000px; }
#productNamePopup, #attachmentsModal { max-width: 600px; }
#gameModal { max-width: 650px; }

/* 3. Fixes the layout for the Custom Label (#genericLabelModal) */
#genericLabelModal {
    width: 550px;
}
#genericLabelModal .modal-content {
    box-sizing: border-box;
}

/* 4. Fixes the out-of-place dollar signs */
#clearanceItemModal .input-symbol-wrapper,
#genericLabelModal .input-symbol-wrapper {
    position: relative;
}

#catalogEditorTable .col-stock {
    width: 55px;
    text-align: center;
}

.stock-level-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: 0.9rem;
    color: #495057;
}

.stock-quantity {
    font-weight: bold;
    font-size: 1.1rem;
    color: #0000EE;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 30px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.stock-quantity:hover {
    background-color: #e9ecef;
}

.stock-quantity input {
    width: 60px; /* Wide enough for 3 digits */
    text-align: center;
    padding: 2px;
    -moz-appearance: textfield; /* Firefox */
}
.stock-quantity input::-webkit-outer-spin-button,
.stock-quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 5. Fixes the alignment of the Invoice Details totals */
#invoiceDetailTotals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    font-weight: bold;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

/* --- END: Final Master Fix Block v3 --- */

/* Widen the Stock column to fit the larger input */
#catalogEditorTable .col-stock {
    width: 65px;
}

/* Widen the input field inside an editable catalog cell and remove number spinners */
#catalogEditorTable td.editable-catalog-cell input[type="number"] {
    width: 60px;
    -moz-appearance: textfield; /* Firefox */
}
#catalogEditorTable td.editable-catalog-cell input[type="number"]::-webkit-outer-spin-button,
#catalogEditorTable td.editable-catalog-cell input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Styles for Collapsible Sections --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.section-header h2 {
    margin: 0;
    padding: 0;
    border-bottom: none; /* Ensure no double-border */
}

.section-toggle-btn {
    font-size: 1.2rem;
    color: #6c757d;
}

.section-content-hidden {
    display: none !important;
}

#toggleCatalogFiltersBtn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: white;
    opacity: 0.9;
}

#toggleCatalogFiltersBtn:hover {
    opacity: 1;
}

/* --- Fix for Modals Not Appearing --- */
.modal.is-visible {
    display: block !important;
}

/* --- Adjust size of delete buttons in trade tables --- */
#tradeInfoTable .btn-danger {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Active Trades Modal UI Tweaks --- */

/* 1. Make the hover effect on the trade list more obvious */
.trade-summary-item:hover {
    background-color: #e6f2ff; /* A more noticeable light blue */
    border-left: 3px solid #0d6efd;
    padding-left: 12px;
}

/* --- Styles for Signature Pad --- */
.signature-pad-container {
    position: relative;
    width: 100%;
    height: 160px; /* SHRUNK: Was 200px, now 20% smaller */
    border: 2px dashed #ced4da;
    border-radius: 5px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.signature-pad-container canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* --- Style for Scrolling Item List in Signature Modal --- */
#signature-item-list {
    max-height: 25vh;
    overflow-y: auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 15px 0;
    padding: 10px 0;
}

/* --- Style for Scrolling Item List in Signature Modal --- */
#signature-item-list {
    max-height: 25vh; /* Adjust this value to control the list height */
    overflow-y: auto;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 15px 0;
    padding: 10px 0;
}

/* --- Signature Modal Layout Tweaks --- */
#signatureModal .modal-content {
    max-height: 90vh; /* Increase overall modal content height */
}
#signatureModal h3 {
    margin-top: 15px;
    margin-bottom: 5px; /* Reduce space below "Items" header */
}

/* --- START: Fix for Modal Layout Consistency --- */

#clearanceItemModal .form-row,
#genericItemModal .form-row {
    display: flex;
    gap: 15px;
}

/* --- END: Fix for Modal Layout Consistency --- */

.trade-actions {
    display: none !important;
}

/* --- Unified Tab Styles --- */
.trade-tab,
.modal-tab {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid #417A2A;
    border-bottom: none;
    background-color: #519435; /* Darker Green for Inactive */
    color: #ffffff;
    margin-right: 3px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 1rem;
    white-space: nowrap;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.trade-tab:hover,
.modal-tab:hover {
    background-color: #417A2A;
}

.trade-tab.active,
.modal-tab.active {
    background-color: #67ce25; /* Lighter Site Green for Active */
    color: white;
    font-weight: bold;
    border-color: #67ce25 #67ce25 transparent;
    position: relative;
    bottom: -2px;
    z-index: 2;
    margin-bottom: -2px;
}

/* Specific overrides for different backgrounds */
.trade-tab.active {
    border-bottom-color: #f8f9fa; /* Background of trade tabs bar */
}

#activeTradesModal .modal-tab.active,
#historyModal .modal-tab.active {
    border-bottom-color: #fff; /* Background of modal content */
}

/* --- Trades Dashboard Layout Fix --- */
#activeTradesModal {
    width: fit-content; /* This makes the modal shrink to fit its content */
    min-width: 900px;   /* This prevents it from becoming too narrow */
    max-width: 95%;     /* This ensures it doesn't get too wide on large screens */
}

#tradesDashboardContent {
    height: 60vh; /* Set a fixed height for the content area */
    overflow-y: auto; /* Add a scrollbar if the content inside overflows */
}

/* Style for retro prices when they are live/editable */
.price-display.live-edit-active {
    cursor: text;
    background-color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    /* This is the same green inset border from the other editable fields */
    box-shadow: inset 0 0 0 2px rgba(103, 206, 37, 0.9);
}

/* Style for retro prices that are persistently editable after an override */
.price-display.price-editable {
    background-color: #e6ffed; /* Light green */
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); /* Subtle border */
}

.price-display.price-editable:hover {
    background-color: #d1ffd7; /* Slightly darker green on hover */
    box-shadow: inset 0 0 0 2px #007bff; /* Blue border on hover to indicate action */
}

/* --- Styles for Sortable Table Headers --- */
.sortable-header {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.sortable-header:hover {
    background-color: #57b31b; /* Darker green on hover */
}

.sort-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
}

/* --- START: Definitive Fix for History Modal Layout --- */
#historyModal .modal-content {
    height: 85vh;
    max-height: 78vh; /* ADDED: This overrides the general modal max-height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent the outer container from ever scrolling */
}

#historyTabContentContainer {
    flex-grow: 1;
    display: flex;
    min-height: 0; /* Important for nested flex scrolling */
}

#historyTabContentContainer > .tab-content {
    display: none; /* Hide inactive tabs */
}

#historyTabContentContainer > .tab-content.active {
    display: flex; /* Show the active tab */
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* This rule targets the table containers in ALL tabs */
#historyModal .trade-table-container {
    flex-grow: 1; /* Make the table container the flexible element that takes up space */
    min-height: 0; /* Allow it to shrink smaller than its content */
    overflow-y: auto; /* Ensure it's the element that gets the scrollbar */
    margin-top: 15px;
}

/* These rules ensure the other elements do not shrink */
#historyModal .history-filters,
#historyModal #ph_pagination {
    flex-shrink: 0;
}

#historyModal #ph_pagination {
    padding-top: 10px; /* Add some space above the pagination buttons */
}
/* --- END: Definitive Fix for History Modal Layout --- */

/* --- START: Fix for Price Entry Modal Layout --- */
#priceEntryModal .form-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

#priceEntryModal .form-row .form-group {
    flex: 1 1 50%;
    min-width: 0;
}
/* --- END: Fix for Price Entry Modal Layout --- */

/* Center the checkboxes in the Select and Print columns of the catalog table */
#catalogEditorTable tbody td:first-child,
#catalogEditorTable tbody td:last-child {
    text-align: center;
}

/* --- START: Manage Users Threshold Column Fixes --- */

/* 1. Rebalance all 9 columns to make room for the Threshold */
#userManagementTable th:nth-child(1), #userManagementTable td:nth-child(1) { width: 12%; } /* First Name */
#userManagementTable th:nth-child(2), #userManagementTable td:nth-child(2) { width: 12%; } /* Last Name */
#userManagementTable th:nth-child(3), #userManagementTable td:nth-child(3) { width: 10%; } /* Username */
#userManagementTable th:nth-child(4), #userManagementTable td:nth-child(4) { width: 22%; } /* Email */
#userManagementTable th:nth-child(5), #userManagementTable td:nth-child(5) { width: 12%; } /* Role */
#userManagementTable th:nth-child(6), #userManagementTable td:nth-child(6) { width: 8%; }  /* Threshold */
#userManagementTable th:nth-child(7), #userManagementTable td:nth-child(7) { width: 6%; }  /* Disabled */
#userManagementTable th:nth-child(8), #userManagementTable td:nth-child(8) { width: 6%; }  /* Pin */
#userManagementTable th:nth-child(9), #userManagementTable td:nth-child(9) { width: 7%; }  /* Actions */

/* 2. Style the Threshold input like a currency field and remove spinners */
#userManagementTable input[data-field="TradeThreshold"] {
    -moz-appearance: textfield; /* Firefox */
    padding-left: 18px !important;
    text-align: right;
}
#userManagementTable input[data-field="TradeThreshold"]::-webkit-outer-spin-button,
#userManagementTable input[data-field="TradeThreshold"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 3. Ensure the wrapper for the dollar sign works correctly */
#userManagementTable .input-symbol-wrapper {
    position: relative;
    display: block;
}
#userManagementTable .input-symbol-wrapper .input-symbol {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

/* This new rule constrains the width of the threshold input */
#userManagementTable input[data-field="TradeThreshold"] {
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't add to the width */
}

/* --- END: Manage Users Threshold Column Fixes --- */

/* --- Styles for Tab Notes Icon --- */
.tab-notes-btn {
    font-size: 1rem;
    color: white;
    opacity: 0.8;
    margin-right: 8px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.tab-notes-btn:hover {
    opacity: 1;
}

/* --- Final Header Checkbox Alignment Fix --- */

/* 1. Make the specific header cells positioning anchors */
.trade-table th.col-select,
.trade-table th.col-print {
    position: relative;
}

/* 2. Absolutely position the checkboxes within those cells */
.trade-table th.col-select input[type="checkbox"],
.trade-table th.col-print input[type="checkbox"] {
    position: absolute;
    bottom: 0px;  /* Position from the bottom edge of the header */
    left: 50%;    /* Center horizontally */
    transform: translateX(-50%); /* Fine-tune horizontal centering */
    margin: 0;
}

/* --- Styles for Colored Totals --- */
.total-items-color {
    color: #0000EE; /* Blue for item counts */
}

.total-money-color {
    color: #198754; /* Green for cash/credit values */
}

/* This new rule specifically targets the 'Total Items' number */
#totalItemsDisplay {
    font-size: 1.1em; /* You can change this value to make it larger or smaller */
}

/* --- START: Invoice Lookup Modal Height Control --- */
#invoiceLookupModal .modal-content {
    max-height: 75vh; /* ADJUST THIS VALUE: 70vh is 70% of the screen height. You can also use pixels, like 800px. */
    display: flex;
    flex-direction: column;
}

#invoiceLookupModal #invoiceLookupResults {
    flex-grow: 1; /* This makes the results list expand to fill the space */
    min-height: 200px; /* This ensures the list has a minimum height even if empty */
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 5px;
}
/* --- END: Invoice Lookup Modal Height Control --- */

#invoiceLookupModal #lookupInvoiceSearchButton {
    align-self: flex-start; /* Prevents the button from stretching to full width */
}

/* --- Add Product Modal Height Control --- */
#addItemPopup .modal-content {
    max-height: 80vh; /* ADJUST THIS VALUE: 80vh is 80% of the screen height. You can also use pixels, like 750px. */
}

/* --- START: Definitive Fix for Misplaced Input Symbols --- */
.modal .form-group .input-symbol-wrapper {
    position: relative;
}
/* --- END: Definitive Fix for Misplaced Input Symbols --- */

/* --- START: History & Audits Modal Layout Fixes --- */

/* 1. Increases the overall height of the modal to prevent pagination cutoff */
#historyModal .modal-content {
    max-height: 85vh; /* You can adjust this value as needed */
}

/* 2. Aligns the 'Reset' buttons on all History tabs */
#historyModal #ph_clearButton,
#historyModal #sa_clearButton,
#historyModal #to_clearButton {
    margin-bottom: 9px;
}
/* --- END: History & Audits Modal Layout Fixes --- */

.filter-group-misc {
    align-items: center;
}

.quick-add-btn {
    margin: 0 5px !important;
}

.results-list {
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}

.results-list .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #0000EE;
    cursor: pointer;
}

.results-list .result-item:last-child {
    border-bottom: none;
}

.results-list .result-item:hover {
    background-color: #f0f8ff;
}

.results-list .result-item.selected {
    background-color: #0d6efd;
    color: white;
}
.results-list .result-item.selected .game-version-indicator {
    background-color: white;
    color: #0d6efd;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Styles for Input Field with Static Prefix --- */
.input-prefix-wrapper {
    position: relative;
}

.input-prefix-wrapper::before {
    content: 'SN: ';
    position: absolute;
    left: 12px; /* Standard input padding */
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d; /* Muted text color */
    font-weight: bold;
    pointer-events: none; /* Allows clicks to go through to the input */
}

#serialPromptInput {
    padding-left: 45px !important; /* Push user text to the right of the prefix */
}

.search-result-console {
    font-size: 0.8em;
    color: #6c757d;
    margin-left: 1px;
}

/* --- Invoice Totals Modal Final Layout Fix --- */

/* 1. General modal and section styling */
#invoiceTotalsModal .modal-content {
    overflow-y: visible;
}
#invoiceTotalsModal .report-section {
    margin-bottom: 25px;
}

/* 2. Apply scrolling to the TOP table container */
#invoiceTotalsModal #topItemsContent {
    max-height: 250px;
    overflow-y: auto;
}

/* 3. FORCE scrolling on the BOTTOM table container */
#invoiceTotalsModal #employeeVolumeContent {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* 4. Set table layout for both tables */
#invoiceTotalsModal .trade-table {
    table-layout: fixed;
    width: 100%;
}

/* --- TOP TABLE ("Top Traded Items") Column Styles --- */
#topItemsContent th:nth-child(1),
#topItemsContent td:nth-child(1) {
    width: 55% !important;
    text-align: left !important;
}
#topItemsContent th:nth-child(2),
#topItemsContent td:nth-child(2) {
    width: 200px !important;
    text-align: center !important;
}
#topItemsContent th:nth-child(3),
#topItemsContent td:nth-child(3) {
    text-align: right !important;
    padding-right: 25px !important;
}

/* --- BOTTOM TABLE ("Volume by Employee") Column Styles --- */
#employeeVolumeContent th:nth-child(1),
#employeeVolumeContent td:nth-child(1) {
    width: 75% !important;
    text-align: left !important;
}
#employeeVolumeContent th:nth-child(2),
#employeeVolumeContent td:nth-child(2) {
    width: 200px !important;
    text-align: center !important;
}
#employeeVolumeContent th:nth-child(3),
#employeeVolumeContent td:nth-child(3) {
    text-align: right !important;
    padding-right: 15px !important;
}

/* --- DEFINITIVE FIX FOR EMPLOYEE VOLUME SCROLLBAR --- */
#employeeVolumeContent.trade-table-container {
    max-height: 250px !important;
    overflow-y: auto !important;
}

/* --- Quick Store Switch --- */
#storeSelectorLink:hover .info-value {
    text-decoration: underline;
    color: #4C4CF3; /* Global link hover blue */
}

#quickStoreSwitchList .result-item {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 12px 10px;
}

/* --- Makes the store selector link blue --- */
#storeSelectorLink .info-value {
    color: #0000EE; /* User-requested button blue */
    text-decoration: underline;
}