@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap");

.card {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	font-weight: 500;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
	box-shadow: var(--shadow-md);
}

/* Dashboard layout helpers */
.grid {
	display: grid;
	gap: 20px;
}

.grid.cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

	.grid.cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.grid.cols-4,
	.grid.cols-3,
	.grid.cols-2 {
		grid-template-columns: 1fr;
	}
}

.dash-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px 24px;
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(255, 255, 255, 0.95));
	border: 1px solid rgba(79, 70, 229, 0.1);
	border-radius: calc(var(--radius) + 4px);
	box-shadow: var(--shadow-md);
}

.dash-title {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dash-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
}

.dash-hero h2 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text);
}

.dash-meta {
	font-size: 14px;
}

.dash-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

button.btn-primary {
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: #fff;
	border-color: transparent;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.4);
	transition: transform 0.1s, box-shadow 0.1s;
}

button.btn-primary:active {
	transform: scale(0.98);
}

.dash-section {
	margin-top: 24px;
}

.dash-section .section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 16px;
}

.dash-section .section-head h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.section-meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dash-kpis .card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-top: 4px solid var(--kpi-accent, var(--primary));
	padding: 20px;
}

.dash-kpis .card::after {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 140px;
	height: 140px;
	background: radial-gradient(circle, color-mix(in srgb, var(--kpi-accent, var(--primary)) 15%, transparent), transparent 70%);
	opacity: 0.6;
}

.dash-kpis .value {
	font-size: 28px;
	font-weight: 800;
	color: var(--text);
}

.dash-kpis .label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.dash-card {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(148, 163, 184, 0.24);
	box-shadow: var(--shadow-sm);
}

.sales-dash-hero {
	padding: 24px 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 10% 10%, rgba(15, 23, 42, 0.05), transparent 42%),
		radial-gradient(circle at 90% 0%, rgba(14, 165, 233, 0.14), transparent 46%),
		linear-gradient(125deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.94));
}

.sales-dash-hero::before {
	content: "";
	position: absolute;
	width: 280px;
	height: 280px;
	right: -130px;
	top: -150px;
	background: radial-gradient(circle, rgba(15, 23, 42, 0.12), transparent 70%);
	opacity: 0.7;
}

.sales-dash-hero-main {
	position: relative;
	z-index: 1;
}

.sales-dash-eyebrow {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #0f172a;
	margin-bottom: 6px;
}

.sales-dash-title {
	margin: 0;
	font-size: clamp(25px, 2.2vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-family: "Fraunces", "Times New Roman", serif;
	color: #0f172a;
}

.sales-dash-hero-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.sales-dash-hero-actions .btn-primary,
.sales-dash-hero-actions .btn-soft {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sales-cmd-kpis {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

.sales-cmd-kpi {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96));
	border: 1px solid color-mix(in srgb, var(--kpi-accent) 35%, #cbd5e1);
	border-radius: 12px;
	padding: 12px 13px;
	box-shadow: var(--shadow-sm);
	animation: sales-card-rise 260ms ease;
}

.sales-cmd-kpi::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--kpi-accent) 10%, transparent), transparent 60%);
	pointer-events: none;
}

.sales-cmd-kpi-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: color-mix(in srgb, var(--text) 70%, transparent);
	position: relative;
	z-index: 1;
}

.sales-cmd-kpi-value {
	margin-top: 6px;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 900;
	line-height: 1.1;
	color: #0f172a;
	position: relative;
	z-index: 1;
}

.sales-cmd-kpi-note {
	margin-top: 5px;
	font-size: 12px;
	color: var(--muted);
	position: relative;
	z-index: 1;
}

.sales-cmd-grid {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sales-cmd-card {
	padding: 16px;
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(148, 163, 184, 0.26);
}

.sales-cmd-card-wide {
	grid-column: 1 / -1;
}

.sales-cmd-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.sales-cmd-head h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.sales-cmd-stages {
	display: grid;
	gap: 10px;
	margin-bottom: 10px;
}

.sales-cmd-stage {
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--bg-main) 55%, #fff);
}

.sales-cmd-stage-top {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 6px;
}

.sales-cmd-stage-bar {
	height: 7px;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}

.sales-cmd-stage-bar > i {
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width 260ms ease;
}

.sales-cmd-subtitle {
	margin: 10px 0 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--muted);
}

.sales-cmd-list {
	display: grid;
	gap: 8px;
}

.sales-cmd-list-row,
.sales-cmd-table-row {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) auto auto auto;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #fff;
	font-size: 13px;
	text-decoration: none;
	color: inherit;
}

.sales-cmd-list-row {
	grid-template-columns: minmax(0, 1fr) auto;
}

.sales-cmd-list-row:hover {
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
	background: color-mix(in srgb, var(--primary) 4%, #fff);
}

.sales-cmd-table-row:hover {
	border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
	background: color-mix(in srgb, var(--primary) 4%, #fff);
}

.sales-cmd-list-title {
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sales-cmd-list-sub {
	font-size: 12px;
	color: var(--muted);
}

.sales-cmd-list-value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sales-cmd-action-list {
	display: grid;
	gap: 8px;
}

.sales-cmd-action {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 13px;
	background: #fff;
}

.sales-cmd-action strong {
	font-size: 20px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sales-cmd-action-row {
	text-decoration: none;
	color: inherit;
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.sales-cmd-action-row:hover {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
	box-shadow: var(--shadow-sm);
}

.sales-cmd-action[data-tone="danger"] {
	border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
	background: color-mix(in srgb, var(--danger) 7%, #fff);
}

.sales-cmd-action[data-tone="warn"] {
	border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
	background: color-mix(in srgb, var(--warning) 10%, #fff);
}

.sales-cmd-action[data-tone="ok"] {
	border-color: color-mix(in srgb, var(--success) 36%, var(--border));
	background: color-mix(in srgb, var(--success) 9%, #fff);
}

.sales-cmd-links {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sales-cmd-links a {
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: var(--primary);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
	background: color-mix(in srgb, var(--primary) 8%, #fff);
}

.sales-cmd-table {
	display: grid;
	gap: 8px;
	max-height: 420px;
	overflow: auto;
}

.sales-cmd-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--bg-main) 70%, #fff);
}

.sales-cmd-pill[data-tone="danger"] {
	border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
	background: color-mix(in srgb, var(--danger) 12%, #fff);
	color: #991b1b;
}

.sales-cmd-pill[data-tone="warn"] {
	border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
	background: color-mix(in srgb, var(--warning) 13%, #fff);
	color: #92400e;
}

.sales-cmd-pill[data-tone="ok"] {
	border-color: color-mix(in srgb, var(--success) 40%, var(--border));
	background: color-mix(in srgb, var(--success) 12%, #fff);
	color: #065f46;
}

.sales-cmd-empty {
	padding: 16px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	text-align: center;
	font-size: 13px;
	color: var(--muted);
	background: color-mix(in srgb, var(--bg-main) 66%, #fff);
}

@keyframes sales-card-rise {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1400px) {
	.sales-cmd-kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) {
	.sales-cmd-grid {
		grid-template-columns: 1fr;
	}

	.sales-cmd-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sales-cmd-card-wide {
		grid-column: auto;
	}

	.sales-cmd-table-row {
		grid-template-columns: minmax(0, 1.1fr) auto auto;
	}

	.sales-cmd-table-row > :nth-child(3) {
		justify-self: end;
	}

	.sales-cmd-table-row > :nth-child(4) {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

@media (max-width: 700px) {
	.sales-cmd-kpis {
		grid-template-columns: 1fr;
	}

	.sales-dash-hero {
		padding: 16px;
	}

	.sales-cmd-list-row,
	.sales-cmd-table-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.sales-cmd-list-value {
		justify-self: start;
	}
}

.financials-grid-header {
	box-shadow: 0 6px 10px -10px rgba(15, 23, 42, 0.6);
}

.chart.dash-chart {
	min-height: 340px;
	height: auto;
	padding: 14px;
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.06), rgba(255, 255, 255, 0.96));
	border: 1px solid rgba(37, 99, 235, 0.16);
	box-shadow: var(--shadow-sm);
}

.chart.dash-chart svg {
	overflow: visible;
	width: 100%;
	height: 360px;
	display: block;
}

.perf-controls {
	gap: 8px;
}

.perf-controls input {
	max-width: 170px;
}

.perf-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.perf-table-card {
	padding: 12px 16px;
	margin-bottom: 16px;
}

.perf-table-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 2px 12px;
}

.perf-table-title {
	font-weight: 700;
	font-size: 14px;
}

.perf-table-wrap {
	overflow-x: auto;
}

.perf-table th,
.perf-table td {
	white-space: nowrap;
}

.perf-total-row td {
	font-weight: 800;
	background: #f8fafc;
}

/* Supplier PO pager layout */
.po-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.po-pager-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

@media (max-width: 640px) {
	.po-pager-controls {
		flex-wrap: wrap;
	}
}

/* Supplier PO unified filters */
.po-filter-card {
	padding: 18px 20px;
}

.po-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.po-filter-title {
	font-weight: 800;
	letter-spacing: 0.01em;
}


.po-filter-grid {
	margin-top: 10px;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.po-line-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.po-filter-actions {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.po-action-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.po-action-group .muted {
	font-weight: 700;
}

.po-filter-divider {
	margin: 14px 0;
	border-top: 1px dashed var(--border);
}

@media (max-width: 1100px) {
	.po-filter-grid,
	.po-line-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.po-filter-grid,
	.po-line-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {
	.po-filter-grid,
	.po-line-grid {
		grid-template-columns: 1fr;
	}
}

.perf-toggle .btn-soft.active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.perf-list {
	display: flex;
	flex-direction: column;
}

.perf-row {
	width: 100%;
	border: none;
	background: transparent;
	text-align: left;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}

.perf-row:last-child {
	border-bottom: none;
}

.perf-row:hover {
	background: rgba(37, 99, 235, 0.06);
}

.perf-row.active {
	background: rgba(37, 99, 235, 0.12);
}

.perf-row-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	font-size: 13px;
}

.perf-revenue {
	font-variant-numeric: tabular-nums;
}

.perf-row-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--muted);
	font-size: 12px;
}

.perf-meta {
	padding-top: 10px;
}

.perf-meta-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.perf-title {
	font-weight: 700;
	font-size: 14px;
}

.perf-subtitle {
	color: var(--muted);
	font-size: 12px;
}

.perf-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.perf-metric {
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px;
}

.perf-metric .label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
	font-weight: 700;
}

.perf-metric .value {
	font-size: 16px;
	font-weight: 700;
	margin-top: 6px;
}

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

@media (max-width: 640px) {
	.perf-meta-grid {
		grid-template-columns: 1fr;
	}
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.70);
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Status pills (color-coded status labels) */
.status-pill {
	--pill: var(--muted);
	text-transform: none;
	letter-spacing: 0.01em;
	font-weight: 700;
	font-size: 12px;
	padding: 5px 10px;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.status-pill {
		color: var(--pill);
		border-color: color-mix(in srgb, var(--pill) 30%, var(--border));
		background: color-mix(in srgb, var(--pill) 12%, transparent);
	}
}

.status-pill[data-status="active"],
.status-pill[data-status="approved"],
.status-pill[data-status="completed"],
.status-pill[data-status="converted"],
.status-pill[data-status="delivered"],
.status-pill[data-status="paid"],
.status-pill[data-status="verified_ok"] {
	--pill: var(--success);
}

.status-pill[data-status="inactive"],
.status-pill[data-status="failed"],
.status-pill[data-status="cancelled"],
.status-pill[data-status="canceled"],
.status-pill[data-status="lost"],
.status-pill[data-status="rejected"],
.status-pill[data-status="void"],
.status-pill[data-status="overdue"] {
	--pill: var(--danger);
}

.status-pill[data-status="pending"],
.status-pill[data-status="partially_completed"],
.status-pill[data-status="unpaid"],
.status-pill[data-status="verified"] {
	--pill: var(--warning);
}

.status-pill[data-status="in_progress"],
.status-pill[data-status="in_progress"],
.status-pill[data-status="quotation_sent"],
.status-pill[data-status="qualified"],
.status-pill[data-status="contacted"],
.status-pill[data-status="open"] {
	--pill: var(--primary);
}

.status-pill[data-status="draft"],
.status-pill[data-status="new"] {
	--pill: var(--muted);
}

/* Status selects: keep native select UI, but color the border/text via data-status */
.status-select {
	font-weight: 700;
}

.kpi {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kpi .label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muted);
}

.kpi .value {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.quote-detail-page {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.quote-detail-page .card {
	padding: 16px;
}

.quote-detail-page .top {
	margin: 0 0 8px;
}

.quote-summary-box {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.quote-summary-item {
	padding: 4px 2px;
}

.quote-summary-item:not(:last-child) {
	border-right: 1px solid var(--border);
	padding-right: 12px;
}

.quote-detail-meta-grid {
	gap: 12px;
}

.quote-detail-info-card {
	min-height: 0;
}

.quote-detail-info-card .muted {
	line-height: 1.45;
}

.quote-terms-content {
	position: relative;
	overflow: hidden;
}

.quote-terms-content.is-collapsed {
	max-height: 150px;
	padding-bottom: 6px;
}

.quote-terms-content.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 34px;
	background: linear-gradient(to bottom, transparent, var(--card));
	pointer-events: none;
}

.quote-terms-toggle {
	margin-top: 8px;
	padding: 6px 10px;
	font-size: 12px;
}

.quote-detail-section {
	margin-top: 0;
}

.quote-detail-lines-table {
	margin-bottom: 10px;
}

.quote-detail-lines-table th,
.quote-detail-lines-table td {
	padding: 9px 10px;
}

@media (max-width: 960px) {
	.quote-summary-box {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.quote-summary-item:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding-right: 2px;
		padding-bottom: 8px;
	}
}

.muted {
	color: var(--muted);
}

#formError,
.form-error {
	color: var(--danger);
	font-weight: 600;
}

.app-alert-error {
	color: var(--danger);
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--danger) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
	white-space: pre-wrap;
}

form.bms-form-attempted :is(input, select, textarea):invalid {
	border-color: color-mix(in srgb, var(--danger) 60%, #b91c1c);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
	background: color-mix(in srgb, var(--danger) 8%, var(--card));
}

.bms-invalid-pulse {
	animation: bms-invalid-pulse 1.2s ease-in-out 1;
}

@keyframes bms-invalid-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 28%, transparent);
	}
	50% {
		box-shadow: 0 0 0 7px color-mix(in srgb, var(--danger) 16%, transparent);
	}
	100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent);
	}
}

.chart {
	width: 100%;
	height: 180px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 10px;
}

.chart svg {
	width: 100%;
	height: 100%;
	display: block;
}

.progress {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--border);
	overflow: hidden;
}

.progress > div {
	height: 100%;
	background: var(--primary);
}

.card .actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 10px;
}

.card .actions button {
	background: var(--card);
	color: var(--text);
}

.card.compact {
	padding: 14px;
}

/* Toolbar (used in many pages as .top) */
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 12px;
}

.top h2 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Ledger page */
.ledger-topbar {
	margin-bottom: 10px;
}

.ledger-topbar h2 {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ledger-page {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ledger-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ledger-panel {
	background: color-mix(in srgb, var(--card) 94%, var(--bg-main));
	border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
	box-shadow: var(--shadow-sm);
	border-radius: calc(var(--radius) + 2px);
	padding: 18px;
}

.ledger-panel-head,
.ledger-details-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.ledger-panel-title {
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.ledger-panel-subtitle {
	font-weight: 600;
	margin-top: 2px;
	font-size: var(--bms-font-sm);
}

.ledger-top-actions,
.ledger-detail-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ledger-supplier-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.ledger-supplier-lists {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 10px;
}

.ledger-field {
	margin-top: 8px;
}

.ledger-list-title {
	font-weight: 700;
	margin-bottom: 6px;
}

.ledger-list-wrap {
	max-height: 260px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--bg) 70%, var(--card));
}

.ledger-recent-list {
	max-height: 160px;
}

.ledger-list-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 7px 10px;
	border: 0;
	border-bottom: 1px solid var(--border);
	background: transparent;
	color: var(--text);
	cursor: pointer;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	font-size: var(--bms-font-sm);
	line-height: 1.3;
}

.ledger-list-item:hover {
	background: color-mix(in srgb, var(--primary) 7%, var(--card));
	transform: none;
	box-shadow: none;
	border-color: var(--border);
}

.ledger-list-item.active {
	background: color-mix(in srgb, var(--primary) 12%, var(--card));
	font-weight: 700;
}

.ledger-empty {
	margin-top: 6px;
}

.ledger-recent-name {
	font-weight: 700;
}

.ledger-recent-meta {
	font-size: var(--bms-font-xs);
	margin-top: 2px;
}

.ledger-tip {
	margin-top: 10px;
	font-size: var(--bms-font-sm);
}

.ledger-filters {
	margin-top: 12px;
	gap: 10px;
}

.ledger-message {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border: 1px dashed var(--border);
	background: color-mix(in srgb, var(--bg-main) 65%, var(--card));
}

.ledger-message-error {
	border-style: solid;
	background: color-mix(in srgb, var(--danger) 8%, var(--card));
}

.ledger-kpis {
	margin-top: 12px;
	gap: 10px;
}

.ledger-stat-card {
	background: color-mix(in srgb, var(--bg-main) 60%, var(--card));
	border: 1px solid var(--border);
	padding: 14px;
	box-shadow: none;
}

.ledger-stat-value {
	margin-top: 4px;
	font-weight: 900;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.ledger-table-wrap {
	margin-top: 12px;
	overflow-x: auto;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	background: var(--card);
}

.ledger-table {
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 980px;
}

.ledger-table thead,
.ledger-table th {
	background: color-mix(in srgb, var(--bg-main) 75%, var(--card));
	position: sticky;
	top: 0;
	z-index: 1;
}

.ledger-voucher-link {
	text-decoration: underline;
	font-weight: 700;
}

.ledger-col-debit,
.ledger-col-credit,
.ledger-col-balance {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ledger-col-balance {
	font-weight: 900;
}

/* Remittance page */
.remittance-topbar {
	margin-bottom: 12px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 12px;
	border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
	border-radius: calc(var(--radius) + 4px);
	background:
		radial-gradient(circle at right top, color-mix(in srgb, var(--primary) 16%, transparent), transparent 50%),
		linear-gradient(140deg, color-mix(in srgb, var(--bg-main) 72%, var(--card)), color-mix(in srgb, var(--card) 86%, white));
	position: sticky;
	top: 8px;
	z-index: 26;
}

.remittance-topbar-main {
	min-width: 200px;
}

.remittance-topbar h2 {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 2px;
}

.remittance-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.remittance-controls-row {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) 130px auto;
	gap: 8px;
	align-items: end;
	flex: 1 1 100%;
}

.remittance-filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.remittance-filter > span {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: color-mix(in srgb, var(--text) 72%, transparent);
}

.remittance-search-input,
.remittance-page-size {
	height: 32px;
	border-radius: var(--radius-sm);
	border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
	background: color-mix(in srgb, var(--card) 90%, white);
	padding: 5px 8px;
	font-size: 13px;
}

.remittance-actions-inline {
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: nowrap;
}

.remittance-actions-inline > button {
	height: 32px;
	padding-top: 0;
	padding-bottom: 0;
}

.remittance-search-input:focus,
.remittance-page-size:focus {
	outline: 2px solid color-mix(in srgb, var(--primary) 32%, transparent);
	outline-offset: 0;
}

.remittance-page {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.remittance-sheet-card {
	padding: 16px;
	border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
	box-shadow: var(--shadow-md);
}

.remittance-sheet-card-today {
	background: linear-gradient(165deg, color-mix(in srgb, var(--card) 85%, white), color-mix(in srgb, var(--bg-main) 78%, var(--card)));
}

.remittance-sheet-card-history {
	background: linear-gradient(175deg, color-mix(in srgb, var(--bg-main) 72%, var(--card)), color-mix(in srgb, var(--card) 92%, white));
}

.remittance-sheet-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.remittance-sheet-date-wrap {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.remittance-sheet-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.remittance-sheet-title-wrap h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.remittance-sheet-toolbar-copy {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.remittance-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: color-mix(in srgb, var(--primary) 12%, var(--card));
	border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}

.remittance-chip-active {
	background: color-mix(in srgb, #22c55e 16%, var(--card));
	border-color: color-mix(in srgb, #22c55e 45%, transparent);
}

.remittance-chip-date {
	background: color-mix(in srgb, #0ea5e9 12%, var(--card));
	border-color: color-mix(in srgb, #0ea5e9 32%, transparent);
}

.remittance-sheet-wrap {
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: var(--shadow-sm);
	max-height: calc(100vh - 280px);
}

.remittance-sheet-wrap-today {
	max-height: min(56vh, 620px);
}

.remittance-sheet-wrap-history {
	max-height: min(46vh, 520px);
}

.remittance-sheet {
	margin: 0;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	min-width: 1480px;
	font-size: 13px;
}

.remittance-sheet-history {
	min-width: 1560px;
}

.remittance-sheet th {
	position: sticky;
	top: 0;
	z-index: 8;
	background: color-mix(in srgb, var(--bg-main) 80%, var(--card));
	white-space: nowrap;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 12px;
}

.remittance-sheet td {
	padding: 0;
	background: var(--card);
	min-width: 120px;
	border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
	vertical-align: middle;
}

.remittance-sheet-history td {
	padding: 8px 10px;
	white-space: nowrap;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.remittance-history-sr {
	font-weight: 700;
	color: color-mix(in srgb, var(--text) 82%, transparent);
	min-width: 60px;
}

.remittance-history-empty {
	text-align: center;
	padding: 16px;
	color: color-mix(in srgb, var(--text) 68%, transparent);
}

.remittance-history-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.remittance-history-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.remittance-history-title-wrap h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

.remittance-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.remittance-page-indicator {
	font-size: 12px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
	background: color-mix(in srgb, var(--bg-main) 72%, var(--card));
}

.remit-cell-input {
	width: 100%;
	min-width: 100%;
	height: 34px;
	padding: 7px 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.remit-cell-input:focus {
	outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
	outline-offset: -2px;
	background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.remit-cell-saving {
	background: color-mix(in srgb, var(--primary) 8%, var(--card));
}

.remit-row-error td {
	background: color-mix(in srgb, var(--danger) 7%, var(--card));
}

.remittance-message {
	margin-bottom: 10px;
	padding: 9px 10px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--bg-main) 65%, var(--card));
}

.remittance-message-error {
	border-style: solid;
	background: color-mix(in srgb, var(--danger) 8%, var(--card));
}

@media (max-width: 1200px) {
	.ledger-panel {
		padding: 14px;
	}

	.ledger-supplier-lists {
		grid-template-columns: 1fr;
	}

	.remittance-sheet-toolbar-copy {
		flex-direction: column;
		gap: 6px;
	}

	.remittance-filters {
		grid-template-columns: 1fr;
	}

	.remittance-controls-row {
		grid-template-columns: 1fr;
	}

	.remittance-actions-inline {
		justify-content: flex-start;
	}

	.remittance-sheet-date-wrap {
		margin-left: 0;
	}
}

@media (max-width: 760px) {
	.ledger-topbar h2 {
		font-size: 20px;
	}

	.ledger-supplier-controls {
		grid-template-columns: 1fr;
	}

	.ledger-details-head,
	.ledger-panel-head {
		flex-direction: column;
		align-items: stretch;
	}

	.ledger-detail-actions > button,
	.ledger-top-actions > button {
		width: 100%;
	}

	.remittance-topbar h2 {
		font-size: 20px;
	}

	.remittance-topbar {
		align-items: stretch;
		flex-direction: column;
		padding: 10px;
		top: 0;
	}

	.remittance-actions {
		width: 100%;
	}

	.remittance-actions > button {
		width: 100%;
	}

	.remittance-history-head {
		align-items: stretch;
	}

	.remittance-pagination {
		width: 100%;
	}

	.remittance-pagination > button {
		flex: 1 1 0;
	}

	.remittance-page-indicator {
		text-align: center;
		width: 100%;
	}

	.remittance-filter-search,
	.remittance-filter-size {
		width: 100%;
	}

	.remittance-controls-row {
		grid-template-columns: 1fr;
	}
}

/* Archive page */
.archive-page {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-family: "Source Sans 3", "Segoe UI", sans-serif;
}

.archive-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
	gap: 18px;
	padding: 26px;
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.05), rgba(255, 255, 255, 0.92) 50%, rgba(79, 70, 229, 0.08));
	border: 1px solid rgba(79, 70, 229, 0.18);
	border-radius: calc(var(--radius) + 8px);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}

.archive-hero::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	right: -120px;
	top: -140px;
	background: radial-gradient(circle, rgba(79, 70, 229, 0.18), transparent 70%);
	opacity: 0.8;
}

.archive-hero-main {
	position: relative;
	z-index: 1;
}

.archive-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary);
}

.archive-title {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-top: 6px;
	line-height: 1.25;
	padding-bottom: 2px;
	font-family: "Fraunces", "Georgia", serif;
}

.archive-lead {
	margin-top: 8px;
	max-width: none;
	color: var(--muted);
	white-space: nowrap;
}

.archive-meta-grid {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.archive-meta-card {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 10px 12px;
	box-shadow: var(--shadow-sm);
	font-size: 13px;
}

.archive-meta-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}

.archive-meta-value {
	font-weight: 600;
}

.archive-hero-panel {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: var(--shadow-sm);
}

.archive-panel-title {
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-bottom: 8px;
}

.archive-panel-list {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
	line-height: 1.6;
}

.archive-panel-footer {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.archive-pill {
	background: rgba(79, 70, 229, 0.08);
	color: var(--primary-2);
	border: 1px solid rgba(79, 70, 229, 0.18);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.archive-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.archive-section-head h3 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.archive-grid {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.archive-card {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: var(--shadow-sm);
	min-height: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.archive-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1f2937;
	background: linear-gradient(135deg, rgba(148, 163, 184, 0.3), rgba(203, 213, 225, 0.6));
	border: 1px solid rgba(148, 163, 184, 0.45);
	box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.archive-card-title {
	font-weight: 700;
	font-size: 16px;
}

.archive-card-desc {
	color: var(--muted);
	font-size: 13px;
}

.archive-card-actions {
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.archive-card-note {
	font-size: 12px;
	color: var(--muted);
	font-weight: 600;
}

.archive-guidelines {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
}

.archive-guidelines-title {
	font-weight: 800;
	font-size: 16px;
	margin-bottom: 6px;
	font-family: "Fraunces", "Georgia", serif;
}

.archive-guidelines-body {
	color: var(--muted);
}

.archive-reveal {
	animation: archiveFadeUp 420ms ease both;
	animation-delay: var(--delay, 0ms);
}

@keyframes archiveFadeUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1100px) {
	.archive-hero {
		grid-template-columns: 1fr;
	}

	.archive-meta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.archive-lead {
		white-space: normal;
	}

	.archive-meta-grid {
		grid-template-columns: 1fr;
	}

	.archive-grid {
		grid-template-columns: 1fr;
	}
}

/* Export data page */
.export-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.export-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 22px 24px;
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(14, 165, 233, 0.12) 55%, rgba(79, 70, 229, 0.14));
	border: 1px solid rgba(79, 70, 229, 0.18);
	border-radius: calc(var(--radius) + 6px);
	box-shadow: var(--shadow-md);
	flex-wrap: wrap;
}

.export-hero h2 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.export-lead {
	max-width: 520px;
}

.export-meta {
	margin-top: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.export-meta-item {
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.export-meta-item .label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}

.export-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.export-btn-ghost {
	background: rgba(255, 255, 255, 0.85);
	color: var(--text);
	border-color: var(--border);
}

.export-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.export-check {
	display: flex;
	gap: 12px;
	align-items: center;
	position: relative;
}

.export-check-title {
	font-weight: 700;
}

.export-check-sub {
	font-size: 13px;
}

.export-count {
	text-align: right;
	background: rgba(255, 255, 255, 0.7);
	border: 1px dashed rgba(79, 70, 229, 0.3);
	border-radius: 12px;
	padding: 10px 14px;
}

.export-count-value {
	font-size: 20px;
	font-weight: 800;
}

.export-count-label {
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.export-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.export-card-head h3 {
	font-size: 18px;
	font-weight: 700;
}

.export-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.export-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}


.export-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: var(--shadow-sm);
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
	cursor: pointer;
	min-height: 72px;
	position: relative;
}

.export-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: rgba(79, 70, 229, 0.35);
}

.export-toggle {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.export-box {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 2px solid rgba(79, 70, 229, 0.2);
	background: rgba(255, 255, 255, 0.95);
	box-shadow: inset 0 0 0 2px rgba(79, 70, 229, 0.05);
	position: relative;
	flex: 0 0 auto;
	transition: all 0.15s ease-in-out;
}

.export-box::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 5px;
	width: 9px;
	height: 16px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) scale(0.7);
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.export-toggle:checked + .export-box {
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	border-color: rgba(79, 70, 229, 0.6);
	box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.7);
}

.export-toggle:checked + .export-box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.export-toggle:focus-visible + .export-box {
	outline: 3px solid rgba(79, 70, 229, 0.25);
	outline-offset: 2px;
}

.export-item-title {
	font-weight: 700;
	margin-bottom: 4px;
}

.export-item-meta {
	font-size: 12px;
	color: var(--muted);
}

.export-actions button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Buttons */
button {
	appearance: none;
	border: 1px solid var(--border);
	background: #ffffff;
	color: var(--text);
	border-radius: var(--bms-control-radius);
	padding: var(--bms-control-py) var(--bms-control-px);
	font-size: var(--bms-font-sm);
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: all 0.15s ease-in-out;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px; /* Consistent height */
}

button:hover {
	border-color: rgba(79, 70, 229, 0.4);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

button:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* Base button for actions is slightly muted/white; primary is blue */
/* Standardize primary buttons across the entire app */
button.btn-primary, 
.top button, 
#saveBtn, 
.modal-foot button:last-child {
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

button.btn-primary:hover,
.top button:hover,
#saveBtn:hover,
.modal-foot button:last-child:hover {
	box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
	transform: translateY(-1px);
	filter: brightness(1.05);
}

/* Secondary/soft buttons (for Cancellations or secondary actions) */
button.btn-soft, 
button.modal-close,
.modal-foot button:first-child:not(#saveBtn) {
	background: var(--card);
	color: var(--muted);
	border-color: var(--border);
	box-shadow: var(--shadow-sm);
}

button.btn-soft:hover,
.modal-foot button:first-child:not(#saveBtn):hover {
	color: var(--text);
	border-color: var(--muted);
}

/* Inputs, Selects, Textareas */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	width: 100%;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--bms-control-radius);
	padding: var(--bms-control-py) var(--bms-control-px);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

input::placeholder,
textarea::placeholder {
	color: #94a3b8;
}

/* Ensure consistent height for inputs to match buttons */
input:not([type="checkbox"]):not([type="radio"]),
select {
	height: 40px;
}

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	padding: 0;
	box-shadow: none;
	accent-color: var(--primary);
	vertical-align: middle;
	cursor: pointer;
}

label {
	display: block;
	margin: 16px 0 6px;
	font-size: var(--bms-font-xs);
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Tables - Polished Enterprise Look */
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin-bottom: 24px;
}

thead, th {
	background: #f8fafc; /* Subtle grey header background */
	color: var(--muted);
	font-weight: 700;
	font-size: var(--bms-font-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: var(--bms-font-sm);
	vertical-align: middle;
}

tr:last-child td {
	border-bottom: none;
}

/* Zebra striping for better readability */
tbody tr:nth-child(even) {
	background-color: #fcfcfc;
}

@media (hover: hover) and (pointer: fine) {
	tbody tr:hover {
		background-color: #f1f5f9; /* Light slate hover */
	}
}

/* Action links inside tables (often view/edit/delete) */
td a, td button {
	font-size: var(--bms-font-xs);
}

/* PI list: keep the actions column content-sized and flush-right. */
.pi-list-table th:last-child,
.pi-list-table td:last-child {
	width: 1%;
	white-space: nowrap;
}

.pi-list-actions-cell {
	text-align: right;
}

.pi-list-actions {
	display: inline-flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: nowrap;
	align-items: center;
}

.pi-list-actions > button {
	white-space: nowrap;
}

/* Sticky headers need the table to not clip overflow (common with rounded borders). */
.ops-table,
.modal-box table {
	overflow: visible;
}

/* Monitoring sheet: keep wide tables usable without making headers sticky */
.monTableWrap {
	width: 100%;
	height: calc(100vh - 220px);
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Sticky headers can break if the table itself clips overflow (common with rounded borders).
   Keep clipping on the wrapper, but allow the table to overflow visibly. */
.monTableWrap table {
	width: max-content;
	min-width: 100%;
	overflow: visible;
}

.monTableWrap thead th {
	position: sticky;
	top: 0;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	z-index: 5;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* Keep monitoring rows compact in both full and compact views. */
.monTableWrap th,
.monTableWrap td {
	padding-top: 6px;
	padding-bottom: 6px;
	line-height: 1.25;
	vertical-align: middle;
}

/* Cap cell content at two lines to prevent very tall rows. */
.monTableWrap tbody td {
	white-space: normal;
	overflow: hidden;
	word-break: normal;
	overflow-wrap: break-word;
}

.monTableWrap tbody tr.monRowSupplierMissing > td {
	background-color: rgba(239, 68, 68, 0.07);
}

.monTableWrap tbody tr.monRowSupplierPartial > td {
	background-color: rgba(245, 158, 11, 0.09);
}

.monTableWrap tbody tr.monRowSupplierMissing:hover > td {
	background-color: rgba(239, 68, 68, 0.1);
}

.monTableWrap tbody tr.monRowSupplierPartial:hover > td {
	background-color: rgba(245, 158, 11, 0.12);
}

.monTableWrap tbody td > :where(a, span, div, p, small, strong, b, em) {
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	line-height: 1.25;
	max-width: 100%;
}

/* Badges should stay on one line and remain legible. */
.monTableWrap tbody td .status-pill {
	display: inline-flex;
	white-space: nowrap;
}

.monToolbar {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	min-width: 0;
}

/* Monitoring toolbar: don't let the search field stretch and push controls to a new row */
#monSearch {
	width: clamp(220px, 26vw, 360px);
	max-width: 420px;
	flex: 0 1 auto;
}

.monToolbar > * {
	flex: 0 0 auto;
}

@media (max-width: 900px) {
	.monToolbar {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	#monSearch {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}
}

.monPager {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.monPagerBottom {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 12px;
	width: 100%;
}

.monPagerBottom .monPager {
	flex-wrap: wrap;
	justify-content: center;
}

.monPages {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.monPageBtn {
	appearance: none;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.85);
	color: var(--text);
	border-radius: 10px;
	padding: 7px 10px;
	min-width: 38px;
	line-height: 1;
	cursor: pointer;
}

.monPageBtn:hover {
	filter: brightness(0.97);
}

.monPageBtn.active,
.monPageBtn:disabled {
	background: rgba(37, 99, 235, 0.10);
	border-color: rgba(37, 99, 235, 0.35);
	cursor: default;
}

.monPageEllipsis {
	color: var(--muted);
	padding: 0 4px;
}

.monCompact {
	overflow-x: hidden;
}

.monCompact table {
	table-layout: fixed;
}

.monCompact th,
.monCompact td {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Balanced default widths in full view for readability. */
.monTableWrap th.monColDate,
.monTableWrap td.monColDate {
	width: 128px;
	max-width: 128px;
	white-space: nowrap;
}

.monTableWrap th.monColOps,
.monTableWrap td.monColOps {
	width: 72px;
	max-width: 72px;
}

.monTableWrap th.monColPo,
.monTableWrap td.monColPo {
	width: 110px;
	max-width: 110px;
}

.monTableWrap th.monColCustomer,
.monTableWrap td.monColCustomer {
	width: 170px;
	max-width: 170px;
}

.monTableWrap th.monColItem,
.monTableWrap td.monColItem {
	width: 150px;
	max-width: 150px;
}

.monTableWrap th.monColQty,
.monTableWrap td.monColQty {
	width: 92px;
	max-width: 92px;
}

.monTableWrap th.monColUnitPrice,
.monTableWrap td.monColUnitPrice,
.monTableWrap th.monColTotal,
.monTableWrap td.monColTotal {
	width: 110px;
	max-width: 110px;
}

.monTableWrap th.monColReqDate,
.monTableWrap td.monColReqDate,
.monTableWrap th.monColShippedOn,
.monTableWrap td.monColShippedOn {
	width: 128px;
	max-width: 128px;
}

.monTableWrap th.monColAcknowledge,
.monTableWrap td.monColAcknowledge {
	width: 140px;
	max-width: 140px;
}

.monTableWrap th.monColSupplier,
.monTableWrap td.monColSupplier,
.monTableWrap th.monColPartNumber,
.monTableWrap td.monColPartNumber {
	width: 150px;
	max-width: 150px;
}

.monTableWrap th.monColSupplierPrice,
.monTableWrap td.monColSupplierPrice {
	width: 128px;
	max-width: 128px;
}

.monTableWrap th.monColEta,
.monTableWrap td.monColEta {
	width: 100px;
	max-width: 100px;
}

.monTableWrap th.monColRemarks,
.monTableWrap td.monColRemarks {
	width: 190px;
	max-width: 190px;
}

/* Keep key columns tighter in compact view so more fields stay visible. */
.monCompact th.monColDate,
.monCompact td.monColDate {
	width: 116px;
	max-width: 116px;
	white-space: nowrap;
}

.monCompact th.monColOps,
.monCompact td.monColOps {
	width: 62px;
	max-width: 62px;
}

.monCompact th.monColPo,
.monCompact td.monColPo {
	width: 92px;
	max-width: 92px;
}

.monCompact th.monColCustomer,
.monCompact td.monColCustomer {
	width: 156px;
	max-width: 156px;
}

.monCompact th.monColItem,
.monCompact td.monColItem {
	width: 132px;
	max-width: 132px;
}

.monCompact th.monColQty,
.monCompact td.monColQty {
	width: 84px;
	max-width: 84px;
}

.monCompact th.monColUnitPrice,
.monCompact td.monColUnitPrice,
.monCompact th.monColTotal,
.monCompact td.monColTotal {
	width: 98px;
	max-width: 98px;
}

.monCompact th.monColReqDate,
.monCompact td.monColReqDate,
.monCompact th.monColShippedOn,
.monCompact td.monColShippedOn {
	width: 116px;
	max-width: 116px;
}

.monCompact th.monColAcknowledge,
.monCompact td.monColAcknowledge {
	width: 120px;
	max-width: 120px;
}

.monCompact th.monColSupplier,
.monCompact td.monColSupplier {
	width: 124px;
	max-width: 124px;
}

.monCompact th.monColPartNumber,
.monCompact td.monColPartNumber {
	width: 128px;
	max-width: 128px;
}

.monCompact th.monColSupplierPrice,
.monCompact td.monColSupplierPrice {
	width: 114px;
	max-width: 114px;
}

.monCompact th.monColEta,
.monCompact td.monColEta {
	width: 96px;
	max-width: 96px;
}

.monCompact th.monColRemarks,
.monCompact td.monColRemarks {
	width: 170px;
	max-width: 170px;
}

.monRemarksCell {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Let long remarks expand fully on hover without resizing the row. */
.monTableWrap td.monColRemarks {
	position: relative;
	overflow: visible;
}

.monTableWrap td.monColRemarks .monRemarksCell:hover {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
	max-width: min(560px, 70vw);
	white-space: normal;
	overflow: visible;
	overflow-wrap: anywhere;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--card);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

@media (max-width: 760px) {
	/* Make wide tables usable on phones without breaking the layout */
	table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Chat/price-query side panel should never force horizontal scrolling */
	.pq-side {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	body.pq-chat-floating .pq-side.pq-widget-open {
		right: 12px;
		bottom: 78px;
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
	}

	.pq-inbox {
		height: min(640px, calc(100vh - 160px));
	}

	.pq-inbox-body {
		flex-direction: column;
	}

	.pq-inbox-list {
		width: 100%;
		min-width: 0;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}

	/* Reduce padding a bit on smaller screens */
	.card {
		padding: 14px;
	}

	th,
	td {
		padding: 10px 10px;
	}
}

@media (max-width: 640px) {
	/* Toolbars should stack nicely on mobile */
	.top {
		flex-direction: column;
		align-items: stretch;
	}

	.top h2 {
		width: 100%;
	}

	.top button {
		width: 100%;
	}
}

@media print {
	/* Undo mobile table scrolling for print */
	table {
		display: table;
		overflow: visible;
	}
}

.pq-customer-col,
.pq-customer-cell,
.pq-item-col,
.pq-item-cell {
	width: 160px;
	max-width: 160px;
}

.pq-customer-text {
	display: inline-block;
	min-width: 0;
	max-width: 145px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.pq-item-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	flex-wrap: nowrap;
	overflow: hidden;
}

.pq-item-text {
	display: inline-block;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
	vertical-align: middle;
}

.pq-item-cell {
	white-space: nowrap;
	overflow: hidden;
}

.pq-item-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	vertical-align: middle;
}

.pq-item-wrap .pqItemsMore {
	flex: 0 0 auto;
	white-space: nowrap;
}

.pq-inline-remarks {
	display: inline-block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.pq-item-hover-preview {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: min(360px, 80vw);
}

.pq-item-hover-pop {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	width: 280px;
	max-width: min(72vw, 320px);
	min-height: 150px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card);
	box-shadow: var(--shadow-sm);
	z-index: 110;
	display: none;
	align-items: center;
	justify-content: center;
}

.pq-item-hover-preview:hover .pq-item-hover-pop,
.pq-item-hover-preview.is-open .pq-item-hover-pop {
	display: flex;
}

.pq-item-hover-pop img {
	width: 100%;
	height: 100%;
	max-height: 240px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}

.pq-list-table-wrap {
	position: relative;
	overflow: auto;
	min-height: 0;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}

.pq-list-table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: visible;
	margin-bottom: 0;
}

.pq-list-table thead {
	position: sticky;
	top: 0;
	z-index: 59;
}

.pq-list-table thead th,
.pq-list-table th {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--card);
	box-shadow: inset 0 -1px 0 var(--border), 0 8px 12px -12px rgba(15, 23, 42, 0.7);
}

.pq-list-table-wrap .pq-list-table thead th {
	position: sticky !important;
	top: 0;
	z-index: 61;
}

.pq-list-table tbody tr.pq-row-openable td {
	transition: background-color 0.15s ease;
}

.pq-list-table tbody tr.pq-row-openable td:not(:nth-child(8)):not(:nth-child(9)):not(:nth-child(10)) {
	cursor: pointer;
}

.pq-list-table tbody tr.pq-row-openable:hover td:not(:nth-child(8)):not(:nth-child(9)):not(:nth-child(10)) {
	background: rgba(79, 70, 229, 0.06);
}

.pq-row-remarks-text {
	display: block;
	width: 100%;
	padding: 4px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--bms-font-sm);
	line-height: 1.25;
}

.pq-remarks-cell {
	position: relative;
	min-width: 180px;
	max-width: 220px;
}

.pq-remarks-col {
	width: 220px;
	max-width: 220px;
}

.pq-remarks-display {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid transparent;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--bms-font-sm);
}

.pq-remarks-cell:hover .pq-remarks-display,
.pq-remarks-display:focus-visible {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: max-content;
	max-width: min(520px, 70vw);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
	background: var(--card);
	border-color: var(--border);
	box-shadow: var(--shadow-sm);
	z-index: 120;
}

.pq-remarks-display[data-editable="1"] {
	cursor: text;
}

.pq-remarks-display[data-editable="1"]:hover {
	background: rgba(15, 23, 42, 0.04);
	border-color: var(--border);
}

.pq-remarks-display.is-empty {
	font-size: 1.02rem;
	font-weight: 600;
}

.pq-remarks-editor {
	display: flex;
	gap: 6px;
	align-items: center;
	min-width: 0;
}

.pq-row-remarks-input {
	font-size: 13px;
	height: 32px;
	padding-top: 6px;
	padding-bottom: 6px;
	min-width: 0;
	flex: 1;
}

.pq-row-remarks-input.is-saving {
	opacity: 0.75;
}

.pq-price-display {
	display: block;
	width: 100%;
	min-width: 0;
	text-align: right;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid transparent;
	line-height: 1.2;
}

.pq-price-display[data-editable="1"] {
	cursor: text;
}

.pq-price-display[data-editable="1"]:hover {
	background: rgba(15, 23, 42, 0.04);
	border-color: var(--border);
}

.pq-price-display.is-empty {
	font-size: 1.02rem;
	font-weight: 600;
}

/* Keep wide tables stable (no shrinking/expanding between pages) */
.table-scroll {
	width: 100%;
	overflow-x: auto;
}

/* Keep table width tight to content inside scroll wrappers while still filling the card.
   This removes large empty right-side gaps across list/detail pages (RFQ, ledger, monitoring, etc.). */
.table-scroll > table,
.perf-table-wrap > table,
.ledger-table-wrap > table,
.monTableWrap > table,
.pq-list-table-wrap > table,
.pq-rfq-table-wrap > table,
.ops-table-wrap--scroll > table {
	width: max-content;
	min-width: 100%;
}

/* OPS list wrapper should not block sticky headers by creating a scroll container. */
.ops-table-wrap {
	overflow: visible;
}

/* OPS list page: scroll the table body instead of the whole page. */
.ops-table-wrap--scroll {
	overflow-y: auto;
	max-height: calc(100vh - 260px);
	--bms-sticky-top: 0px;
}

/* Top horizontal scrollbar helper (OPS list UX) */
.hscroll-top {
	width: 100%;
	height: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	background: rgba(15, 23, 42, 0.03);
	border-bottom: 1px solid var(--border);
}

.hscroll-top__spacer {
	height: 1px;
}

.table-fixed {
	table-layout: fixed;
	min-width: 1100px;
}

/* OPS list: allow wrapping by default. Only force nowrap when explicitly using a fixed-width table. */
.ops-table.table-fixed th,
.ops-table.table-fixed td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

th,
td {
	padding: 12px 12px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: middle;
}

th {
	font-size: var(--bms-font-xs);
	color: var(--muted);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: rgba(248, 250, 252, 0.55);
}

/* Sticky table headers (OPS list + modal tables) */
.ops-table thead th {
	position: sticky;
	top: var(--bms-sticky-top, 0px);
	z-index: 50;
	background: var(--bg-main);
	box-shadow: inset 0 -1px 0 var(--border), 0 8px 12px -12px rgba(15, 23, 42, 0.7);
	color: rgba(51, 65, 85, 0.95);
	font-weight: 900;
	font-size: calc(var(--bms-font-xs) + 1px);
}

/* OPS list: disable sticky headers when requested (prevents overlay issues) */
.ops-table.ops-table--no-sticky thead th {
	position: static;
	top: auto;
	box-shadow: none;
}

/* OPS list: vertical separators between columns */
.ops-table th,
.ops-table td {
	border-right: 1px solid var(--border);
}

.ops-table th:last-child,
.ops-table td:last-child {
	border-right: none;
}

.modal-box table thead th,
.modal-box table th {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(248, 250, 252, 0.95);
	backdrop-filter: blur(6px);
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.modal-box .modal-body {
	position: relative;
}

.modal-box .modal-body .modal-parts-table {
	border-collapse: collapse;
}

.modal-box .modal-body .modal-parts-table thead th,
.modal-box .modal-body .modal-parts-table th {
	position: sticky !important;
	top: 0 !important;
	z-index: 30 !important;
	background: rgba(255, 255, 255, 0.96) !important;
	backdrop-filter: blur(8px) !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
	background-clip: padding-box !important;
}

td {
	font-size: 0.95rem;
}

tr:last-child td {
	border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
	tbody tr:hover td {
		background: rgba(248, 250, 252, 0.65);
	}
}

/* OPS list: highlight OPS with no line-items */
.ops-row--no-items td {
	background: rgba(239, 68, 68, 0.06);
}

.ops-row--no-items td:first-child {
	border-left: 4px solid rgba(239, 68, 68, 0.55);
}

@media (hover: hover) and (pointer: fine) {
	.ops-row--no-items:hover td {
		background: rgba(239, 68, 68, 0.10);
	}
}

td button {
	padding: 8px 10px;
	border-radius: 8px;
	font-weight: 600;
}

/* Team Members / user rows */
.user-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}

.avatar {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	font-weight: 900;
	color: var(--muted);
}

.user-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.user-name {
	font-weight: 800;
}

.user-email {
	color: var(--muted);
	font-size: 12px;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-weight: 700;
}

.status .dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--muted);
}

.status .dot.on {
	background: var(--success);
}

.row-actions {
	position: relative;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	align-items: center;
}

.icon-btn {
	width: 40px;
	height: 38px;
	padding: 0;
	display: inline-grid;
	place-items: center;
}

.btn-primary-outline {
	background: var(--card);
	border-color: var(--border);
	color: var(--primary);
}

.btn-primary-outline:hover {
	border-color: var(--primary);
}

.menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 180px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	display: none;
	z-index: 10;
}

.menu.open {
	display: block;
}

.menu button {
	width: 100%;
	text-align: left;
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	background: var(--card);
	padding: 10px 12px;
}

.menu button:last-child {
	border-bottom: none;
}

.table-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-top: 1px solid var(--border);
	background: var(--card);
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.pager {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pager-nums {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Price Queries: chat / conversations (Instagram-like right panel) */
.pq-shell {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.pq-shell--list {
	min-height: 0;
	height: 100%;
}

.pq-main--rfq-list {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	gap: 10px;
}

body.pq-rfq-list-lock-scroll .main {
	overflow: hidden !important;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

body.pq-rfq-list-lock-scroll #content {
	flex: 1;
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

body.pq-rfq-list-lock-scroll #content > .pq-shell--list {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

body.pq-rfq-list-lock-scroll .pq-main--rfq-list {
	flex: 1;
	min-height: 0;
	height: 100%;
}

body.pq-rfq-list-lock-scroll .pq-main--rfq-list > .pq-list-table-wrap {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.pq-list-top {
	margin-bottom: 0;
	flex-wrap: wrap;
}

.pq-list-top-actions {
	margin-left: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pq-list-title {
	margin: 0;
	font-weight: 900;
	letter-spacing: 0.01em;
}

.pq-list-filters-card {
	margin-top: 0;
	padding: 12px;
}

.pq-list-filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: end;
}

.pq-list-search {
	flex: 1;
	min-width: 300px;
}

.pq-list-field-sm {
	min-width: 160px;
}

.pq-list-field-md {
	min-width: 200px;
}

.pq-list-presets,
.pq-list-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
}

.pq-list-actions {
	gap: 10px;
}

.pq-list-meta-card {
	margin-top: 0;
	padding: 8px 12px;
}

/* Keep list pager controls clear of the floating chat FAB. */
body.pq-chat-floating .pq-shell--list .pq-list-meta-card {
	padding-right: 86px;
}

.pq-list-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.pq-list-per-page {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pq-rfq-table-wrap {
	min-height: 220px;
	margin-top: 0;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--card);
	--bms-sticky-top: 0px;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.pq-rfq-table-wrap .ops-table {
	min-width: 1400px;
}

.pq-list-pager-card {
	margin-top: 0;
	padding: 8px 10px;
}

.pq-list-pager-card .monPager {
	width: 100%;
}

.pq-main--rfq-detail {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pq-detail-top {
	margin-bottom: 0;
}

.pq-detail-head {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.pq-detail-title {
	margin: 0;
	font-weight: 900;
	letter-spacing: 0.01em;
}

.pq-detail-card,
.pq-items-card,
.pq-attachments-card,
#responseCard {
	padding: 14px;
}

.pq-section-title {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.pq-card-head {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pq-card-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.pq-items-help,
.pq-items-error {
	margin-bottom: 8px;
}

.pq-items-table-wrap {
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card);
}

.pq-detail-grid {
	margin-top: 10px;
	gap: 12px;
}

.pq-closed-meta {
	margin-top: 10px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--bg-main) 86%, white);
}

.pq-closed-note {
	white-space: pre-wrap;
	margin-top: 6px;
	line-height: 1.35;
}

.pq-customer-block {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--bg-main) 88%, white);
}

.pq-customer-label {
	margin-bottom: 6px;
}

.pq-customer-type {
	font-weight: 700;
}

.pq-customer-notes {
	white-space: pre-wrap;
	margin-top: 4px;
	line-height: 1.35;
}

.pq-meta-error,
.pq-upload-error {
	margin-top: 10px;
	white-space: pre-wrap;
}

.pq-upload-box {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--bg-main) 90%, white);
}

.pq-upload-help {
	margin-bottom: 6px;
}

.pq-upload-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.pq-upload-list {
	margin-top: 6px;
	white-space: pre-wrap;
}

@media (max-width: 980px) {
	.pq-list-search {
		min-width: 100%;
	}

	body.pq-chat-floating .pq-shell--list .pq-list-meta-card {
		padding-right: 12px;
	}

	.pq-list-field-sm,
	.pq-list-field-md {
		min-width: min(260px, 100%);
	}

	.pq-list-top-actions {
		margin-left: 0;
	}

	.pq-detail-head {
		align-items: flex-start;
	}
}

/* RFQs (Price Queries) - sticky bottom actions */
.pq-bottom-actions {
	position: sticky;
	bottom: 0;
	margin-top: 14px;
	padding: 12px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-sm);
	z-index: 5;
}

.pq-shell--detail .pq-main {
	padding-bottom: 12px;
}

.pq-chat-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 0;
	background: #2563eb;
	color: #fff;
	font-weight: 800;
	box-shadow: var(--shadow-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1001;
	overflow: visible;
}

.pq-chat-fab-label {
	line-height: 1;
}

.pq-chat-fab-badge {
	position: absolute;
	right: -4px;
	top: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--danger);
	color: #fff;
	border: 2px solid var(--card);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.pq-chat-fab:hover {
	filter: brightness(0.95);
}

.pq-chat-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(2, 6, 23, 0.35);
	display: none;
	z-index: 1000;
}

.pq-chat-backdrop.open {
	display: block;
}

/* Chat widget modes */
body.pq-chat-floating .pq-side {
	display: none;
}

body.pq-chat-floating .pq-side.pq-widget-open {
	display: flex;
	position: fixed;
	right: 18px;
	bottom: 86px;
	max-height: calc(100vh - 120px);
	z-index: 1001;
	width: min(720px, calc(100vw - 36px));
	max-width: calc(100vw - 36px);
	box-shadow: var(--shadow-lg);
}

body.pq-chat-docked .pq-side {
	display: flex;
	position: sticky;
	top: 90px;
	align-self: flex-start;
	max-height: calc(100vh - 110px);
}

body.pq-chat-docked.pq-chat-minimized .pq-side {
	display: none;
}

.pq-main {
	flex: 1;
	min-width: 0;
}

.pq-side {
	width: min(640px, 44vw);
	min-width: 360px;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pq-side-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}

.pq-side-actions .btn-soft {
	padding: 6px 10px;
	border-radius: 10px;
	font-weight: 700;
}

.pq-inbox {
	height: min(640px, calc(100vh - 140px));
	display: flex;
	flex-direction: column;
}

.pq-inbox-body {
	flex: 1;
	min-height: 0;
	display: flex;
}

.pq-inbox-list {
	width: 42%;
	min-width: 240px;
	border-right: 1px solid var(--border);
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.pq-inbox-chat {
	flex: 1;
	min-width: 0;
	min-height: 0;
}

.pq-inbox-list .pq-conv-list {
	max-height: none;
	flex: 1;
}

.pq-inbox-chat.pq-chat {
	height: auto;
}

.pq-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}

.pq-side-head {
	padding: 10px 12px;
	display: flex;
	gap: 10px;
	align-items: center;
	border-bottom: 1px solid var(--border);
}

.pq-side-title {
	font-weight: 700;
	color: var(--text);
}

.pq-side-search {
	flex: 1;
}

.pq-side-search input {
	width: 100%;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
}

.pq-conv-list {
	max-height: 340px;
	overflow: auto;
}

.pq-conv {
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}

.pq-conv:hover {
	background: rgba(0,0,0,0.03);
}

.pq-conv.active {
	background: rgba(0,0,0,0.06);
}

.pq-conv-avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.06);
	border: 1px solid var(--border);
	font-weight: 700;
}

.pq-conv-body {
	flex: 1;
	min-width: 0;
}

.pq-conv-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-weight: 700;
}

.pq-conv-sub {
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pq-unread {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #2563eb;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.pq-chat {
	display: flex;
	flex-direction: column;
	height: 520px;
}

.pq-chat-head {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
}

.pq-chat-head-left {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pq-chat-title {
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pq-chat-meta {
	font-size: 11px;
	line-height: 1.2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

.pq-chip {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,0.02);
	white-space: nowrap;
}

.pq-chip__k {
	color: var(--muted);
	font-weight: 700;
	font-size: 10px;
}

.pq-chip__v {
	font-weight: 800;
	color: var(--text);
}

.pq-chip.is-empty .pq-chip__v {
	font-weight: 700;
	color: var(--muted);
}

.pq-chip--urgent {
	border-color: rgba(239,68,68,.35);
	background: rgba(239,68,68,.06);
}

.pq-chip--urgent .pq-chip__v {
	color: var(--danger);
}

.pq-chip--mono .pq-chip__v {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.pq-chip--num .pq-chip__v {
	font-variant-numeric: tabular-nums;
}

.pq-chip--money .pq-chip__v {
	font-variant-numeric: tabular-nums;
}

.pq-chat-messages {
	flex: 1;
	overflow: auto;
	padding: 8px;
	background: rgba(0,0,0,0.02);
}

.pq-msg {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 4px;
}

.pq-msg.me {
	justify-content: flex-end;
}

.pq-bubble {
	display: inline-block;
	width: fit-content;
	max-width: min(76%, 520px);
	padding: 6px 10px;
	border-radius: 18px;
	border: 0;
	background: var(--card);
	font-size: 12px;
	line-height: 1.28;
	word-break: break-word;
	box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.pq-text {
	white-space: pre-wrap;
}

.pq-msg.me .pq-bubble {
	background: rgba(37,99,235,0.10);
}

.pq-meta {
	margin-left: 6px;
	font-size: 10px;
	line-height: 1;
	color: var(--muted);
	white-space: nowrap;
	opacity: 0.75;
}

.pq-chat-compose {
	padding: 10px;
	border-top: 1px solid var(--border);
	display: flex;
	gap: 8px;
	align-items: flex-end;
	background: var(--card);
}

.pq-chat-compose.pq-compose-col {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.pq-compose-tabs {
	display: flex;
	gap: 6px;
	align-items: center;
}

.pq-compose-tabs .btn-soft {
	padding: 6px 10px;
	border-radius: 10px;
	font-weight: 700;
}

.pq-compose-pricing textarea {
	width: 100%;
	resize: vertical;
	padding: 7px 9px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
}

.pq-price-list {
	max-height: 190px;
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(0,0,0,0.02);
	padding: 8px;
}

.pq-price-row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: rgba(255,255,255,0.70);
	margin-top: 8px;
}

.pq-price-row__label {
	flex: 1;
	min-width: 0;
}

.pq-price-row__title {
	font-weight: 700;
	font-size: 12px;
}

.pq-price-row__sub {
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pq-price-row input {
	width: 120px;
	text-align: right;
	padding: 7px 9px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
}

.pq-compose-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

.pq-chat-compose textarea {
	flex: 1;
	min-height: 32px;
	max-height: 90px;
	resize: vertical;
	padding: 7px 9px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
}

.pq-chat-compose select {
	padding: 10px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
}

@media (max-width: 1100px) {
	.pq-shell {
		flex-direction: column;
	}
	.pq-side {
		width: 100%;
		max-width: none;
	}
	.pq-inbox {
		height: 520px;
	}
	body.pq-chat-floating .pq-side.pq-widget-open {
		width: calc(100vw - 36px);
		max-width: calc(100vw - 36px);
	}
	.pq-inbox-body {
		flex-direction: column;
	}
	.pq-inbox-list {
		width: 100%;
		min-width: 0;
		border-right: 0;
		border-bottom: 1px solid var(--border);
	}
}

.pager .page[disabled] {
	opacity: 1;
	color: var(--text);
	background: var(--bg);
}

/* Softer table header for card-contained tables */
.table-soft th {
	background: rgba(248, 250, 252, 0.6);
}

/* Modals */
.modal {
	position: fixed;
	inset: 0;
	background: rgba(2, 6, 23, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 1000;
}

.modal-box {
	width: min(960px, 100%);
	max-height: calc(100vh - 40px);
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(12px);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	box-shadow: var(--shadow-md);
}

@media (min-width: 1400px) {
	.modal-box {
		width: min(1200px, calc(100vw - 80px));
	}
}

.modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 18px 10px;
	border-bottom: 1px solid var(--border);
}

.modal-head h3 {
	font-size: 16px;
	font-weight: 800;
	margin: 0;
}

.modal-close {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	padding: 0;
	line-height: 1;
	background: rgba(255, 255, 255, 0.75);
	color: var(--muted);
}

.modal-close:hover {
	color: var(--text);
}

.modal-body {
	padding: 12px 18px 14px;
	overflow: auto;
	flex: 1;
}

.modal-foot {
	padding: 12px 18px 18px;
	border-top: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.75);
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.customer-form-shell {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.customer-form-address-toggle,
.customer-form-status {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(148, 163, 184, 0.25);
	background: rgba(248, 250, 252, 0.75);
	border-radius: 12px;
}

.customer-form-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	cursor: pointer;
}

.customer-form-help {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted);
}

@media (max-width: 640px) {
	.customer-form-address-toggle,
	.customer-form-status {
		padding: 10px;
	}
}

.pq-rfq-modal .modal-box {
	width: min(1200px, 96vw);
	max-width: 1200px;
	height: min(94vh, 920px);
	max-height: min(94vh, 920px);
	padding: 0;
	display: flex;
	flex-direction: column;
}

.pq-rfq-body {
	padding: 14px 16px 12px;
	overflow: auto;
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.95));
}

.pq-rfq-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	gap: 12px;
}

.pq-rfq-main-col,
.pq-rfq-side-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pq-rfq-side-col {
	position: sticky;
	top: 0;
	align-self: start;
}

.pq-rfq-card {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px;
	box-shadow: var(--shadow-sm);
}

.pq-rfq-card h4 {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.pq-rfq-help {
	margin-bottom: 8px;
}

.pq-rfq-label-compact {
	margin-top: 8px;
}

.pq-rfq-stack-sm {
	margin-top: 8px;
}

.pq-rfq-grid-gap-sm {
	margin-top: 8px;
}

.pq-rfq-radio-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 4px;
}

.pq-rfq-radio-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
}

.pq-rfq-selected {
	margin-top: 6px;
	white-space: pre-wrap;
}

.pq-rfq-results {
	margin-top: 6px;
	padding: 8px;
	max-height: 180px;
	overflow: auto;
}

.pq-rfq-new-lead {
	margin-top: 8px;
	padding: 8px;
	border: 1px dashed var(--border);
	border-radius: 10px;
	background: rgba(248, 250, 252, 0.6);
}

.pq-rfq-new-lead-title {
	font-weight: 700;
	margin-bottom: 4px;
}

.pq-rfq-inline-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.pq-rfq-error {
	margin-top: 8px;
	white-space: pre-wrap;
}

.pq-rfq-items-card {
	min-height: 100%;
}

.pq-rfq-table-wrap {
	max-height: min(46vh, 420px);
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #fff;
}

.pq-filter-card {
	padding: 12px 24px 12px;
}

.pq-filter-card label {
	margin-top: 0;
}

.pq-rfq-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

.pq-rfq-table th {
	background: rgba(15, 23, 42, 0.04);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 1;
}

.pq-rfq-table td {
	padding: 6px 8px;
}

.pq-rfq-table input {
	width: 100%;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 8px;
	font-size: 13px;
}

.pq-rfq-table textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 8px;
	font-size: 13px;
	line-height: 1.35;
	min-height: 34px;
	resize: vertical;
	overflow-y: hidden;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.pq-rfq-table input.pq-rfq-invalid,
.pq-rfq-table textarea.pq-rfq-invalid,
.pq-rfq-modal input.pq-rfq-invalid {
	border-color: var(--danger);
	box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
	background: rgba(239, 68, 68, 0.06);
}

.pq-rfq-rownum {
	font-weight: 700;
	color: var(--muted);
	text-align: center;
}

.pq-rfq-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 8px;
}

.pq-rfq-summary {
	margin-top: 8px;
}

.pq-rfq-paste {
	min-height: 64px;
}

.pq-rfq-files-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 10px;
	align-items: start;
	margin-top: 6px;
}

.pq-rfq-image-preview {
	border: 1px dashed var(--border);
	border-radius: 10px;
	padding: 6px;
	min-height: 96px;
	background: var(--card);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 8px;
	text-align: left;
	font-size: 12px;
	overflow: visible;
}

.pq-rfq-image-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
	align-items: start;
}

.pq-rfq-thumb {
	width: 72px;
	height: 72px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--card);
	overflow: visible;
	position: relative;
}

.pq-rfq-thumb img[data-rfq-img-open] {
	cursor: zoom-in;
}

.pq-rfq-thumb-remove {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 1px solid var(--danger);
	background: #fff;
	color: var(--danger);
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	z-index: 20;
}

.pq-rfq-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 7px;
	display: block;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	transform-origin: center;
	position: relative;
	z-index: 1;
}

.pq-rfq-thumb:hover img {
	transform: scale(1.08);
	box-shadow: var(--shadow-sm);
	z-index: 2;
}

.pq-rfq-thumb-zoom {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	width: 420px;
	height: 300px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card);
	box-shadow: var(--shadow-sm);
	display: none;
	z-index: 12;
}

.pq-rfq-thumb:hover .pq-rfq-thumb-zoom {
	display: block;
}

.pq-rfq-thumb-zoom img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	transform: none;
	box-shadow: none;
}

.modal-box.pq-rfq-image-box {
	width: min(1080px, 94vw);
	max-width: 1080px;
}

.pq-rfq-image-full {
	width: 100%;
	height: min(78vh, 780px);
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--border);
}

.pq-rfq-foot {
	border-top: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.98);
}

.pq-more-items-modal .modal-box.pq-more-items-box {
	width: min(1080px, 96vw);
	max-width: 1080px;
}

.pq-more-items-table-wrap {
	position: relative;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--card);
	max-height: 64vh;
	overflow: auto;
	min-height: 0;
}

.pq-more-items-modal .modal-body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.pq-more-items-modal .pq-more-items-table-wrap {
	flex: 1 1 auto;
	max-height: none;
}

.pq-more-items-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 13px;
}

.pq-more-items-table .pq-mi-col-sn {
	width: 64px;
}

.pq-more-items-table .pq-mi-col-qty {
	width: 92px;
}

.pq-more-items-table .pq-mi-col-price {
	width: 136px;
}

.pq-more-items-table th,
.pq-more-items-table td {
	padding: 7px 8px;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}

.pq-more-items-table thead,
.pq-more-items-table thead th {
	position: sticky;
	top: 0;
}

.pq-more-items-table th {
	z-index: 2;
	background: var(--card);
	text-align: left;
	font-weight: 700;
	color: var(--text);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pq-more-items-table .pq-mi-sn {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: center;
	white-space: nowrap;
	background: var(--card);
	font-weight: 700;
	color: var(--muted);
}

.pq-more-items-table th.pq-mi-sn {
	z-index: 3;
}

.pq-more-items-table .pq-mi-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pq-more-items-table .pq-mi-qty,
.pq-more-items-table .pq-mi-price {
	text-align: right;
	white-space: nowrap;
}

.pq-more-items-table tbody tr:hover {
	background: color-mix(in srgb, var(--card) 88%, var(--bg) 12%);
}

.pq-more-items-table input[data-more-price] {
	width: 118px;
	max-width: 100%;
	text-align: right;
}

@media (max-width: 1000px) {
	.pq-rfq-layout {
		grid-template-columns: 1fr;
	}

	.pq-rfq-side-col {
		position: static;
	}

	.pq-rfq-table-wrap {
		max-height: none;
	}

	.pq-rfq-files-row {
		grid-template-columns: 1fr;
	}
}

.modal-box table {
	margin-top: 12px;
}

/* Modal table dropdowns: keep item selectors readable */
.modal-box table select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/* Quotation modal line-items: avoid horizontal scroll but keep Which readable */
.line-items-table {
	table-layout: fixed;
}

.line-items-table select {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.line-items-table td,
.line-items-table th {
	word-break: break-word;
}

.line-items-table td:nth-child(7),
.line-items-table th:nth-child(7),
.line-items-table td:nth-child(8),
.line-items-table th:nth-child(8) {
	white-space: nowrap;
}

.line-items-table .quote-row-net {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.line-items-table .quote-row-net-amount {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.line-items-table .quote-row-remove {
	padding: 4px 10px;
	white-space: nowrap;
	flex: 0 0 auto;
}

@media (max-width: 1200px) {
	.line-items-table .quote-row-net {
		flex-direction: column;
		align-items: flex-end;
	}
}

/* PI detail: bordered line-items table (readability) */
.pi-lines-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border);
	background: var(--card);
}

.pi-lines-table th,
.pi-lines-table td {
	border: 1px solid var(--border);
	padding: 8px 10px;
	vertical-align: top;
}

.pi-lines-table th {
	font-weight: 800;
	background: rgba(248, 250, 252, 0.50);
}

/* OPS detail: totals panel below line-items table */
.ops-line-totals {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: rgba(248, 250, 252, 0.50);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ops-line-totals__bar {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
}

.ops-line-totals__chip {
	background: rgba(255, 255, 255, 0.70);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 1 1 190px;
	min-height: 44px;
}

.ops-line-totals__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muted);
}

.ops-line-totals__value {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ops-line-totals__grand {
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.04));
	border-color: rgba(37, 99, 235, 0.22);
}

.ops-line-totals__warn {
	font-size: 12px;
	font-weight: 700;
	color: color-mix(in srgb, var(--warning) 55%, var(--text));
	background: color-mix(in srgb, var(--warning) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--border));
	border-radius: var(--radius-sm);
	padding: 10px 12px;
}

/* OPS detail page */
.ops-detail-page {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ops-detail-page .top {
	margin: 0 0 8px;
	gap: 10px;
}

.ops-detail-page > .card {
	padding: 16px;
	margin: 0 !important;
	border-radius: calc(var(--radius) + 2px);
	box-shadow: var(--shadow-sm);
}

.ops-detail-page table {
	margin-bottom: 10px;
}

.ops-detail-page th,
.ops-detail-page td {
	padding: 10px;
}

.ops-detail-hero {
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
	border-radius: calc(var(--radius) + 4px);
	background: linear-gradient(120deg, color-mix(in srgb, var(--bg-main) 68%, #dceaf8), color-mix(in srgb, var(--card) 94%, white));
	box-shadow: var(--shadow-sm);
	align-items: stretch;
}

.ops-detail-hero__title {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ops-detail-hero__title h2 {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
}

.ops-detail-hero__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.ops-detail-actions-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ops-detail-status-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--card) 92%, white);
	border: 1px solid color-mix(in srgb, var(--border) 94%, transparent);
}

.ops-detail-danger-btn {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
}

.ops-detail-danger-btn:hover {
	filter: brightness(0.96);
}

.ops-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.ops-detail-grid .muted {
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 3px;
}

.ops-detail-page .ops-line-totals {
	margin-top: 8px;
	padding: 10px;
	gap: 8px;
}

.ops-detail-page .ops-line-totals__chip {
	padding: 8px 10px;
	min-height: 38px;
}

@media (max-width: 1080px) {
	.ops-detail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.ops-detail-grid {
		grid-template-columns: 1fr;
	}

	.ops-detail-hero {
		padding: 12px;
	}

	.ops-detail-hero__title h2 {
		font-size: 24px;
	}

	.ops-detail-hero__actions {
		justify-content: flex-start;
	}

	.ops-detail-status-wrap {
		width: 100%;
		justify-content: flex-start;
	}

	.ops-line-totals__chip {
		flex: 1 1 100%;
	}
}

.modal-foot > button {
	margin: 0;
}

/* Login */
.auth-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.auth-shell {
	width: min(980px, 100%);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 14px;
}

.auth-panel {
	background: var(--sidebar-bg);
	color: var(--sidebar-fg);
	border: 1px solid rgba(226, 232, 240, 0.08);
	border-radius: 14px;
	padding: 28px;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

.auth-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(37, 99, 235, 0.18);
	border: 1px solid rgba(226, 232, 240, 0.12);
	font-weight: 900;
	letter-spacing: 0.12em;
}

.auth-panel h1 {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.auth-panel .muted {
	color: var(--sidebar-muted);
}

.login-box {
	width: 100%;
	margin: 0;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 22px;
}

.login-box h2 {
	font-size: 18px;
	font-weight: 800;
	margin: 0;
}

.login-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.login-box input {
	margin-top: 10px;
}

.login-box .password-field {
	position: relative;
	margin-top: 10px;
}

.login-box .password-field input {
	margin-top: 0;
	padding-right: 42px;
}

.login-box .password-field .password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	color: var(--muted);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
}

.login-box .password-field .password-toggle:hover,
.login-box .password-field .password-toggle:active {
	transform: translateY(-50%);
	border: none;
	background: transparent;
	box-shadow: none;
}

.login-box .password-field .password-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
}

.login-box form > button[type="submit"] {
	margin-top: 14px;
	width: 100%;
	background: var(--primary);
	border-color: transparent;
	color: #fff;
}

@media (max-width: 860px) {
	.auth-shell {
		grid-template-columns: 1fr;
	}

	.auth-panel {
		min-height: 220px;
	}
}

/* Typing-only numeric inputs: hide spinners (Chrome/Edge/Safari + Firefox) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
/* =========================================================
   Sales Performance Dashboard  (spd-*)
   ========================================================= */
.spd-container {
    padding: 0;
}

.spd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
	margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.spd-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text);
    margin: 0;
}

.spd-header-right {
    display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
    gap: 10px;
}

.spd-filter-wrap {
	position: relative;
}

.spd-range-menu {
	position: relative;
}

.spd-range-menu > summary {
	list-style: none;
}

.spd-range-menu > summary::-webkit-details-marker {
	display: none;
}

.spd-range-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card);
	cursor: pointer;
	user-select: none;
	color: var(--text);
}

.spd-range-trigger-label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.spd-range-trigger-caret {
	font-size: 12px;
	color: var(--muted);
	transform: translateY(-1px);
}

.spd-range-menu[open] .spd-range-trigger-caret {
	transform: rotate(180deg) translateY(1px);
}

.spd-filter-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	padding: 6px 8px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--card);
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.spd-filter-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spd-filter-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.spd-filter-divider {
	font-size: 12px;
	color: var(--muted);
	padding-top: 14px;
}

.spd-date-input {
	width: 126px;
	min-width: 112px;
	height: 32px;
	padding: 4px 8px;
	font-size: 14px;
}

.spd-filter-row #spdApplyRange {
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
}

.spd-actions-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.spd-refresh-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
}

.spd-meta {
	font-size: 11px;
	white-space: nowrap;
}

@media (max-width: 920px) {
	.spd-header-right {
		width: 100%;
		justify-content: flex-start;
	}

	.spd-filter-row,
	.spd-actions-row {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.spd-filter-row {
		left: 0;
		right: auto;
		min-width: min(330px, calc(100vw - 40px));
	}

	.spd-filter-divider {
		display: none;
	}

	.spd-date-input {
		width: 100%;
	}

	.spd-filter-field {
		width: 100%;
	}
}

.spd-card {
    padding: 20px;
}

.spd-table-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.spd-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.spd-card-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.spd-card-icon-sm {
    font-size: 18px;
    flex-shrink: 0;
}

.spd-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.spd-card-head-count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.spd-count-badge {
    font-size: 20px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 10px;
    line-height: 1.3;
    flex-shrink: 0;
}

.spd-count-blue {
    background: #eff6ff;
    color: #1d4ed8;
}

[data-theme="dark"] .spd-count-blue {
    background: rgba(29, 78, 216, 0.18);
    color: #93c5fd;
}

.spd-count-red {
    background: #fff1f2;
    color: #be123c;
}

[data-theme="dark"] .spd-count-red {
    background: rgba(190, 18, 60, 0.18);
    color: #fda4af;
}

.spd-subtitle {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.spd-badge-month {
    font-size: 11px;
    font-weight: 700;
    background: #d1fae5;
    color: #059669;
    padding: 3px 10px;
    border-radius: 9999px;
}

[data-theme="dark"] .spd-badge-month {
    background: rgba(5, 150, 105, 0.2);
    color: #34d399;
}

.spd-big-number {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    margin: 16px 0 6px;
    color: var(--text);
}

.spd-table-wrap {
    overflow: auto;
    max-height: 230px;
    flex: 1;
}

.spd-table {
    width: 100%;
    border-collapse: collapse;
}

.spd-table thead tr {
    background: var(--bg-main);
    position: sticky;
    top: 0;
    z-index: 1;
}

.spd-table th {
    padding: 7px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.spd-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}

.spd-table td a {
    color: var(--primary);
    text-decoration: none;
}

.spd-table td a:hover {
    text-decoration: underline;
}

.spd-view-all {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.spd-view-all:hover {
    background: var(--bg-main);
}

.spd-target-stat {
    margin-bottom: 14px;
}

.spd-target-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.spd-target-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
}

.spd-delivery-header {
    display: grid;
    grid-template-columns: 72px 1fr 120px 70px;
    gap: 10px;
    padding: 7px 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-main);
}

.spd-delivery-row {
    display: grid;
    grid-template-columns: 72px 1fr 120px 70px;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.spd-delivery-day-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.spd-delivery-day {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}

.spd-delivery-date {
    font-size: 10px;
    color: var(--muted);
}

.spd-delivery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    display: inline-block;
}

.spd-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 1100px) {
    .spd-row-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 768px) {
    .spd-row-3 {
        grid-template-columns: 1fr !important;
    }
    .spd-big-number {
        font-size: 40px;
    }
}