/*
 * Sales workspace.
 *
 * This is the same design language as sales-returns.css, which is the
 * established look in this module -- same tokens, same header treatment, same
 * panel, table, badge and control specs. The first version of this file was
 * written against a Material palette (#00695c teal, #263238 ink, #ffb300
 * amber) with no custom properties at all, so the re-skinned pages did not
 * match the module they live in. Everything below is taken from
 * sales-returns.css so the two are indistinguishable side by side.
 *
 * sales-returns.css keeps the pieces unique to the returns flow (the journey
 * stepper, the reference lookup). If a shared stylesheet is ever pulled out,
 * this file is the general half and that one keeps its specialisations.
 */

.sales-page {
	--sales-ink: #24343a;
	--sales-muted: #647780;
	--sales-line: #d9e2e5;
	--sales-soft: #f4f7f7;
	--sales-primary: #087f76;
	--sales-primary-dark: #05655f;
	--sales-accent: #f2b84b;
	max-width: 1480px;
	margin: 0 auto;
	padding: 20px 0 40px;
	color: var(--sales-ink);
}

.sales-page *,
.sales-page *::before,
.sales-page *::after {
	box-sizing: border-box;
}

/* ---- Page header ------------------------------------------------------- */

.sales-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 16px;
	padding: 22px 24px;
	border-left: 5px solid var(--sales-primary);
	background: #fff;
	box-shadow: 0 2px 10px rgba(36, 52, 58, .08);
}

.sales-eyebrow {
	display: block;
	margin-bottom: 5px;
	color: var(--sales-primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sales-page-header h1 {
	margin: 0;
	color: var(--sales-ink);
	font-size: 29px;
	font-weight: 700;
	line-height: 1.2;
}

.sales-page-header p {
	margin: 6px 0 0;
	color: var(--sales-muted);
	line-height: 1.5;
}

/* ---- Buttons and header actions ---------------------------------------- */

.sales-header-action,
.sales-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid #b8c6ca;
	border-radius: 5px;
	color: #3b4c53;
	background: #fff;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.sales-header-action:hover,
.sales-button:hover {
	border-color: var(--sales-primary);
	color: var(--sales-primary-dark);
	background: #edf8f6;
}

.sales-button.is-primary {
	border-color: var(--sales-primary);
	color: #fff;
	background: var(--sales-primary);
}

.sales-button.is-primary:hover {
	color: #fff;
	background: var(--sales-primary-dark);
}

/*
 * The re-skinned views use .sales-button for their submit control and
 * .is-secondary for the quieter one beside it. Primary is the filled
 * treatment, so a bare .sales-button that submits a form reads filled.
 */
.sales-page button.sales-button[type="submit"] {
	border-color: var(--sales-primary);
	color: #fff;
	background: var(--sales-primary);
}

.sales-page button.sales-button[type="submit"]:hover {
	color: #fff;
	background: var(--sales-primary-dark);
}

.sales-button.is-secondary {
	border-color: #b8c6ca;
	color: #3b4c53;
	background: #fff;
}

.sales-button.is-secondary:hover {
	border-color: var(--sales-primary);
	color: var(--sales-primary-dark);
	background: #edf8f6;
}

.sales-button.is-danger {
	border-color: #d6a7a7;
	color: #9f2d2d;
}

.sales-button:disabled {
	cursor: not-allowed;
	opacity: .48;
}

/* ---- Panels ------------------------------------------------------------ */

.sales-panel {
	margin-bottom: 16px;
	padding: 22px;
	border: 1px solid var(--sales-line);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(36, 52, 58, .05);
}

.sales-panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 13px;
	margin-bottom: 17px;
}

.sales-panel-heading > div {
	display: flex;
	align-items: center;
	gap: 13px;
}

.sales-panel-heading h2 {
	margin: 0;
	color: var(--sales-ink);
	font-size: 19px;
	font-weight: 700;
}

.sales-section-icon {
	display: grid;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 7px;
	color: #fff;
	background: var(--sales-primary);
	font-size: 21px;
}

.sales-panel-note {
	color: var(--sales-muted);
	font-size: 12px;
}

/* ---- Summary strip ----------------------------------------------------- */

/* The 1px gap over a line-coloured background is what draws the hairlines. */
.sales-summary {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-bottom: 16px;
	border: 1px solid var(--sales-line);
	border-radius: 6px;
	overflow: hidden;
	background: var(--sales-line);
}

.sales-summary-item {
	min-width: 0;
	padding: 13px 15px;
	background: #fff;
}

.sales-summary-label {
	display: block;
	margin-bottom: 4px;
	color: var(--sales-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.sales-summary-value {
	display: block;
	overflow-wrap: anywhere;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sales-summary-item.is-due .sales-summary-value {
	color: #9f2d2d;
}

.sales-summary-item.is-settled .sales-summary-value {
	color: var(--sales-primary-dark);
}

/* ---- Tables ------------------------------------------------------------ */

.sales-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--sales-line);
	border-radius: 5px;
}

.sales-page .sales-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.sales-page .sales-table th,
.sales-page .sales-table td {
	padding: 11px 12px;
	border: 0;
	border-bottom: 1px solid #e4eaec;
	text-align: left;
	vertical-align: middle;
}

.sales-page .sales-table th {
	color: #485c64;
	background: #eef3f4;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.sales-page .sales-table tbody tr:hover {
	background: #f2faf8;
}

.sales-page .sales-table tfoot th {
	background: var(--sales-soft);
	color: var(--sales-ink);
	font-size: 12px;
}

/* Money and quantity columns: right aligned, figures that line up. */
.sales-page .sales-table .sales-money {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sales-empty-state {
	padding: 22px 12px !important;
	color: var(--sales-muted);
	text-align: center !important;
}

/* ---- Status badges ----------------------------------------------------- */

.sales-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px;
	border-radius: 4px;
	color: #50636a;
	background: #e9eef0;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}

.sales-status.is-settled {
	color: #17663d;
	background: #e5f5eb;
}

.sales-status.is-due {
	color: #805b0e;
	background: #fff1cf;
}

/* ---- Inline actions inside tables --------------------------------------- */

.sales-action-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 2px 5px 2px 0;
	padding: 6px 8px;
	border: 1px solid #bac7ca;
	border-radius: 4px;
	color: #41545b;
	background: #fff;
	font-size: 11px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.sales-action-link:hover {
	border-color: var(--sales-primary);
	color: var(--sales-primary-dark);
	background: #edf8f6;
}

.sales-action-link.is-selected {
	border-color: var(--sales-primary);
	color: #fff;
	background: var(--sales-primary);
}

.sales-action-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* ---- Form fields ------------------------------------------------------- */

.sales-field {
	display: block;
	margin-bottom: 7px;
	color: #3c4f57;
	font-size: 13px;
	font-weight: 700;
}

.sales-field-hint {
	display: block;
	margin-top: 3px;
	color: #75878e;
	font-size: 11px;
	font-weight: 400;
}

.sales-page .w3-input,
.sales-page .w3-select,
.sales-page select,
.sales-page input[type="text"],
.sales-page input[type="number"],
.sales-page input[type="date"] {
	width: 100%;
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid #b6c4c8 !important;
	border-radius: 4px;
	color: var(--sales-ink);
	background: #fff;
}

.sales-page .w3-input:focus,
.sales-page .w3-select:focus,
.sales-page select:focus,
.sales-page input:focus {
	border-color: var(--sales-primary) !important;
	box-shadow: 0 0 0 3px rgba(8, 127, 118, .13);
	outline: none;
}

/* ---- Change due -------------------------------------------------------- */

.sales-change {
	margin-top: 14px;
	padding: 12px 16px;
	border: 1px solid var(--sales-line);
	border-left: 4px solid var(--sales-accent);
	border-radius: 5px;
	background: #fffaf0;
	color: var(--sales-ink);
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

/* ---- Modal header ------------------------------------------------------ */

.sales-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--sales-line);
	border-left: 5px solid var(--sales-primary);
	background: #fff;
}

.sales-modal-head h3 {
	margin: 0;
	color: var(--sales-ink);
	font-size: 19px;
	font-weight: 700;
}

/* ---- Confirmation -------------------------------------------------------
 *
 * The state a screen lands in once work has been committed: it affirms what
 * was saved and offers what to do next. Distinct from .sales-panel, which
 * presents data, and from .sales-status, which labels a row.
 */

.sales-confirm {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 16px;
	padding: 22px 24px;
	border-left: 5px solid var(--sales-primary);
	background: #fff;
	box-shadow: 0 2px 10px rgba(36, 52, 58, .08);
}

.sales-confirm-mark {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	background: var(--sales-primary);
	font-size: 20px;
}

.sales-confirm-body {
	flex: 1 1 auto;
	min-width: 0;
}

.sales-confirm-body h2 {
	margin: 0;
	color: var(--sales-ink);
	font-size: 21px;
	font-weight: 700;
}

.sales-confirm-body p {
	margin: 4px 0 0;
	color: var(--sales-muted);
	line-height: 1.5;
}

/* The order number is the one thing an operator reads back aloud. */
.sales-confirm-ref {
	display: inline-block;
	margin-top: 10px;
	padding: 5px 10px;
	border: 1px dashed var(--sales-line);
	border-radius: 4px;
	background: var(--sales-soft);
	font-family: Consolas, "Courier New", monospace;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* Next steps sit beside the affirmation, not buried under the data. */
.sales-confirm-actions {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 8px;
	min-width: 210px;
}

.sales-confirm-actions .sales-button {
	width: 100%;
}

/* ---- Narrow screens ---------------------------------------------------- */

@media (max-width: 1100px) {
	.sales-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.sales-page {
		padding: 12px 0 28px;
	}

	.sales-page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.sales-page-header h1 {
		font-size: 23px;
	}

	.sales-summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.sales-panel {
		padding: 16px;
	}

	.sales-confirm {
		flex-direction: column;
		padding: 18px;
	}

	.sales-confirm-actions {
		width: 100%;
		min-width: 0;
	}
}