/* styles_v2.css (FINAL + analytics) */
:root {
	--bg: #f7f7fb;
	--panel: #fff;
	--text: #111827;
	--muted: rgba(17, 24, 39, .60);
	--muted2: rgba(17, 24, 39, .45);
	--border: rgba(17, 24, 39, .10);
	--border2: rgba(17, 24, 39, .14);
	--shadow: 0 10px 30px rgba(0, 0, 0, .10);
	--primary: #2563eb;
	--primary-weak: rgba(37, 99, 235, .10);
	--ok: #16a34a;
	--ok-weak: rgba(22, 163, 74, .10);
	--err: #dc2626;
	--err-weak: rgba(220, 38, 38, .10);
	--radius: 12px;
	--radius2: 14px;
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial;
	--fs: 13px;
	--fs-sm: 12px;
	--fs-xs: 11px;
	--btn-h: 34px;
	--btn-h-sm: 30px;
	--input-h: 34px;
	--input-h-sm: 30px;
	--sidebar-w: 168px;
	--topbar-h: 0px;
}

* {
	box-sizing: border-box
}

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs);
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased
}

.hidden {
	display: none !important
}

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

.small {
	font-size: var(--fs-sm)
}

.muted.small {
	line-height: 1.35
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	min-height: var(--topbar-h);
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border)
}

.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 180px
}

.logo {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, rgba(37, 99, 235, .16), rgba(37, 99, 235, .06));
	border: 1px solid rgba(37, 99, 235, .25);
	font-weight: 900
}

.brand-text .title {
	font-weight: 900;
	font-size: 13px
}

.brand-text .subtitle {
	font-size: var(--fs-xs);
	color: var(--muted);
	margin-top: 2px
}

.topbar-right {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	flex-wrap: wrap
}

.api-box {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, .78)
}

.layout {
	height: 100%;
	display: grid;
	height: 100vh;
	grid-template-columns: var(--sidebar-w) 1fr;
	min-height: calc(100vh - var(--topbar-h))
}

.sidebar {
	padding: 8px;
	border-right: 1px solid var(--border);
	background: rgba(255, 255, 255, .68);
	backdrop-filter: blur(10px)
}

.content {
	padding: 12px;
	height: 100vh;
	overflow: hidden;
	/* ���㲻���� */
	min-width: 0
}

@media (max-width:900px) {
	.layout {
		grid-template-columns: 1fr
	}

	.sidebar {
		position: sticky;
		z-index: 20;
		border-right: none;
		border-bottom: 1px solid var(--border)
	}
}

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

.nav {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	text-align: left;
	padding: 8px;
	border-radius: 10px;
	cursor: pointer;
	color: rgba(17, 24, 39, .86);
	font-weight: 900;
	font-size: 12px;
	transition: .15s
}

.nav:hover {
	background: rgba(17, 24, 39, .04);
	border-color: rgba(17, 24, 39, .06)
}

.nav.is-active {
	background: var(--primary-weak);
	border-color: rgba(37, 99, 235, .22);
	color: var(--primary)
}

.divider {
	height: 1px;
	background: var(--border);
	margin: 6px 0
}

.hint {
	margin-top: 12px;
	padding: 10px;
	border-radius: var(--radius);
	background: rgba(17, 24, 39, .03);
	border: 1px solid rgba(17, 24, 39, .06)
}

.hint-title {
	font-weight: 900;
	font-size: 11px;
	margin-bottom: 8px
}

.hint-row {
	font-size: 11px;
	color: var(--muted);
	display: flex;
	gap: 6px;
	margin-top: 6px
}

@media (max-width:900px) {
	.hint {
		display: none
	}

	.nav-list {
		flex-direction: row;
		flex-wrap: wrap
	}
}

.view {
	min-width: 0
}

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

.head h1 {
	margin: 0;
	font-size: 17px
}

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

.head-actions .btn {
	white-space: nowrap
}

.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius2);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
	padding: 12px;
	margin-bottom: 10px
}

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

.card-head h2 {
	margin: 0;
	font-size: 15px
}

.grid {
	display: grid;
	gap: 10px
}

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

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

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

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

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

@media (max-width:520px) {

	.grid-2,
	.grid-4 {
		grid-template-columns: 1fr
	}
}

.field label {
	display: block;
	font-size: 11px;
	font-weight: 900;
	color: rgba(17, 24, 39, .78);
	margin-bottom: 6px
}

.span-2 {
	grid-column: span 2
}

@media (max-width:520px) {
	.span-2 {
		grid-column: span 1
	}
}

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

.row-between {
	justify-content: space-between
}

.row-wrap {
	flex-wrap: wrap
}

.input {
	width: 100%;
	height: var(--input-h);
	padding: 8px 10px;
	border-radius: 11px;
	border: 1px solid var(--border2);
	background: rgba(255, 255, 255, .96);
	outline: none;
	transition: .15s
}

.input:focus {
	border-color: rgba(37, 99, 235, .45);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, .12)
}

.input-sm {
	height: var(--input-h-sm);
	padding: 6px 8px;
	border-radius: 10px;
	font-size: 12px;
	min-width: 150px
}

.btn {
	appearance: none;
	height: var(--btn-h);
	border: 1px solid var(--border2);
	background: rgba(255, 255, 255, .92);
	font-weight: 900;
	padding: 7px 10px;
	border-radius: 11px;
	cursor: pointer;
	transition: .15s
}

.btn:hover {
	border-color: rgba(17, 24, 39, .22);
	transform: translateY(-1px)
}

.btn:active {
	transform: none
}

.btn:disabled {
	opacity: .6;
	cursor: not-allowed
}

.btn-sm {
	height: var(--btn-h-sm);
	padding: 6px 9px;
	border-radius: 10px;
	font-size: 12px
}

.btn-primary {
	border-color: rgba(37, 99, 235, .40);
	background: rgba(37, 99, 235, .12);
	color: var(--primary)
}

.btn-ghost {
	background: transparent
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid rgba(17, 24, 39, .10);
	background: rgba(17, 24, 39, .04);
	font-weight: 900;
	font-size: 12px
}

#healthBadge {
	padding: 6px 8px;
	border-radius: 999px;
	border: 1px solid var(--border2);
	background: rgba(17, 24, 39, .04);
	font-size: 11px;
	font-weight: 900
}

#healthBadge.is-ok {
	border-color: rgba(22, 163, 74, .35);
	background: var(--ok-weak);
	color: var(--ok)
}

#healthBadge.is-err {
	border-color: rgba(220, 38, 38, .35);
	background: var(--err-weak);
	color: var(--err)
}

.link {
	color: var(--primary);
	text-decoration: none;
	font-weight: 900
}

.link:hover {
	text-decoration: underline
}

.table-wrap {
	width: 100%;
	overflow: auto;
	border-radius: 14px;
	background: #fff;
	padding: 10px;
}

.table {
	width: 100%;
	border-collapse: collapse;
	min-width: 620px;
	background: #fff
}

.table thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fff;
	font-size: 11px;
	color: rgba(17, 24, 39, .70);
	padding: 8px;
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
	text-align: left
}

.table tbody td {
	padding: 9px 8px;
	border-bottom: 1px solid rgba(17, 24, 39, .06);
	vertical-align: top
}

.table tbody tr:hover {
	background: rgba(17, 24, 39, .02)
}

.dragcell {
	width: 44px;
	text-align: center
}

.drag-handle {
	display: inline-flex;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(17, 24, 39, .12);
	background: rgba(17, 24, 39, .03);
	cursor: grab;
	font-weight: 900;
	color: rgba(17, 24, 39, .55)
}

tbody.is-sorting .drag-handle {
	cursor: grabbing
}

tr.is-dragging {
	opacity: .72;
	background: rgba(37, 99, 235, .08) !important;
	outline: 2px solid rgba(37, 99, 235, .25);
	outline-offset: -2px;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
	border-radius: 12px
}

body[data-dragging="1"] .link,
body[data-dragging="1"] a,
body[data-dragging="1"] button {
	pointer-events: none
}

.ac-wrap {
	position: relative
}

.dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border: 1px solid var(--border2);
	border-radius: 14px;
	box-shadow: var(--shadow);
	max-height: 320px;
	overflow: auto
}

.dd-item {
	padding: 10px;
	cursor: pointer;
	border-bottom: 1px solid rgba(17, 24, 39, .06);
	display: flex;
	flex-direction: column;
	gap: 4px
}

.dd-item:last-child {
	border-bottom: none
}

.dd-item>div:first-child {
	font-weight: 900
}

.dd-item:hover {
	background: rgba(37, 99, 235, .10)
}

.dd-meta {
	font-size: 12px;
	color: var(--muted2)
}

.dd-empty {
	padding: 12px
}

#view-quick {
	height: 100%;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* �ؼ���������Ԫ���� flex ����ȷ���� */
}

#view-quick .head {
	flex: 0 0 auto;
}

#view-quick .table .input {
	height: 36px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 14px
}

#view-quick .table tbody td {
	padding: 12px 10px
}

#view-quick .table {
	min-width: 760px
}

#view-quick .card:nth-of-type(2) {
	min-height: 440px;
	display: flex;
	flex-direction: column
}

#view-quick .card:nth-of-type(2) .table-wrap {
	flex: 1;
	min-height: 300px
}

#view-quick .card:nth-of-type(2) .totals {
	margin-top: 12px
}

/* quick �ĵ�һ�ſ�������/�ͻ�/��ע/�ܶ������ */
#view-quick>.card:nth-of-type(1) {
	flex: 0 0 auto;
}

/* quick �ĵڶ��ſ�����ϸ���Ե�ʣ���ռ� */
#view-quick>.card:nth-of-type(2) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* �ؼ� */
}

/* ��ϸ������������ card ��ʣ���ռ䣬����ΪΨһ�������� */
#view-quick>.card:nth-of-type(2) .table-wrap {
	flex: 1 1 auto;
	min-height: 0;
	/* �ؼ� */
	overflow: auto;
	/* �7�3 ֻ�������� */
	-webkit-overflow-scrolling: touch;
	/* iOS ˳������ */
}

/* totals �̶�����ϸ��Ƭ�ײ��������Ź��� */
#view-quick>.card:nth-of-type(2) .totals {
	flex: 0 0 auto;
}

.totals {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-top: 10px;
	align-items: flex-end
}

.totals-right {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end
}

.total-box {
	min-width: 150px;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(17, 24, 39, .08);
	background: rgba(17, 24, 39, .03);
	display: flex;
	align-items: center;
}

.total-val {
	font-weight: 900;
	font-size: 16px;
	margin-top: 4px
}

/* ���ף�����/��Ʒ/�ͻ�/��Ӧ�� ����������С�߶� */
#view-documents .card .table-wrap {
	min-height: 420px
}

#view-products .card .table-wrap,
#view-customers .card .table-wrap,
#view-suppliers .card .table-wrap {
	min-height: 460px
}

/* analytics */
.chart-card {
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 6px;
	background: #fff
}

.chart-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
	margin-top: 6px;
	margin-bottom: 10px
}

.chart-title {
	font-weight: 900
}

#view-analytics canvas {
	width: 100%;
	height: auto;
	border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 12px;
	background: #fff
}

.inactive-list {
	/* max-height: 360px; */
	overflow: auto;
	border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 12px;
	padding: 10px;
	background: #fff
}

.inactive-item {
	padding: 10px;
	border-bottom: 1px solid rgba(17, 24, 39, .06)
}

.inactive-item:last-child {
	border-bottom: none
}

.inactive-name {
	font-weight: 900;
	margin-bottom: 4px
}

.toast {
	position: fixed;
	right: 14px;
	bottom: 14px;
	z-index: 60;
	padding: 10px 12px;
	border-radius: 14px;
	border: 1px solid var(--border2);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow);
	font-weight: 900;
	max-width: min(420px, 92vw)
}

.toast.is-ok {
	border-color: rgba(22, 163, 74, .35);
	background: rgba(22, 163, 74, .10);
	color: var(--ok)
}

.toast.is-err {
	border-color: rgba(220, 38, 38, .35);
	background: rgba(220, 38, 38, .10);
	color: var(--err)
}

.modal-backdrop,
#modalBackdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	z-index: 80
}

.modal {
	position: fixed;
	left: 50%;
	top: 10%;
	transform: translateX(-50%);
	width: min(920px, 92vw);
	max-height: 82vh;
	overflow: auto;
	z-index: 81;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 16px 50px rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .10)
}

.modal-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	background: rgba(255, 255, 255, .92);
	position: sticky;
	top: 0
}

.modal-title {
	font-weight: 900;
	font-size: 16px
}

.modal-sub {
	margin-top: 6px;
	font-size: 12px
}

.modal-body {
	padding: 12px 14px
}

#sdze {
	display: flex;
}

.btnSubmitUnpaid {
	background: #f3b6b669;
	border-color: #dd313194;
	color: #e33030;
}

.btnSubmitPending {
	background: #0f66f369;
	border-color: #0085dd94;
	color: #2faae3;
}

.btnSubmitPaid {
	background: #29f36969;
	border-color: #47dd1d94;
	color: #09e323;
}

@media (max-width: 900px) {
	.ana-kpi-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.layout {
		height: calc(100dvh - var(--topbar-h));
	}

	.content {
		height: calc(90dvh - var(--topbar-h));
	}

	#btnClearDoc {
		display: none;
	}

	#btnAddLine {
		height: 60px;
	}

	.nav-hide-mobile {
		display: none !important;
	}

	#rqtime {
		display: flex;
		flex-direction: column;
	}

	#view-quick .table tbody td {
		padding: 4px 2px;
	}

	.total-box {
		background: none;
		border: none;
	}

	#lrcard {
		padding: 0px !important;
	}

	#view-quick .table .input {
		padding: 4px 4px !important;
	}

	#view-quick .table .input,
	#modal .table .input {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.card {
		padding: 4px;
	}

	.content {
		padding: 6px !important;
	}

	#docsWrap {
		padding: 0px;
	}

	.card-head {
		justify-content: space-evenly !important;
	}

	#sxlx {
		display: none !important;
	}

	.total-box {
		padding: 6px 6px;
	}

	.head-actions {
		flex-direction: row;
	}


	.field {
		margin-right: 0px !important;
	}

	.field label {
		margin-bottom: 0px !important;
	}

	.total-box {
		flex-direction: column;
	}

	/* ֻ������¼����ϸ����һ�еIJ����У�����һ�� + ɾ������ */
	#linesBody tr:last-child td.line-ops {
		display: flex;
		flex-direction: column;
		gap: 6px;
		align-items: stretch;
	}

	#khdd {
		display: grid;
	}

	/* ��ѡ����ť�������õ㰴  �ֻ�*/
	#linesBody tr:last-child td.line-ops .btn {
		width: 100%;
	}

	#docDate {
		border: 0px solid var(--border2) !important;
	}

	.timeset {
		display: flex;
		justify-content: space-around;
	}

	input,
	select,
	textarea {
		font-size: 16px;
	}

	.hideit {
		display: none !important;
	}

	#mxhz {
		display: none;
	}

	#view-quick .card:nth-of-type(2) .totals {
		margin-top: 0px !important;
	}

	.card-head {
		margin-bottom: 0px !important;
	}

	.totals {
		flex-direction: column;
	}

	#modal .docview-wrap {
		overflow-x: auto;
	}

	/* ��ѡ���� table һ������������С���ȣ����������� */
	#modal .docview-table {
		min-width: 520px;
	}
}

/* ��ϸ�������������������ţ���ǿ�� min-width */
#view-quick .table,
#modal .table {
	min-width: 0;
	/* ����ȫ�� min-width:620px */
	table-layout: fixed;
	/* �ؼ������п������̶����� */
}

/* ��ϸ������Ԫ������������С */
#view-quick .table td,
#view-quick .table th,
#modal .table td,
#modal .table th {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ��������խ����Ҳ�����������гſ� */
#view-quick .table .input,
#modal .table .input {
	min-width: 0;
	width: 100%;
}

/* Portal dropdown������ table-wrap �ü��� */
.portal-dropdown {
	position: fixed;
	z-index: 100000;
	/* �� modal(81) ���� */
	background: #fff;
	border: 1px solid rgba(17, 24, 39, .14);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
	max-height: 320px;
	overflow: auto;
}

/* ������������ȥ������΢����spinner�������߿��������� */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
	/* Firefox */
}

/* ��ϸ����������������һ�㣨��ѡ�������ɵ��������� */
#view-quick .table .input,
#modal .table .input {
	padding-left: 10px;
	padding-right: 10px;
}

.field {
	margin-right: 30px;
}

#view-products .table,
#view-customers .table,
#view-suppliers .table {
	table-layout: fixed;
	width: 100%;
	min-width: 0;
}

#view-products .table th,
#view-products .table td,
#view-customers .table th,
#view-customers .table td,
#view-suppliers .table th,
#view-suppliers .table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#view-products .table td.ops,
#view-customers .table td.ops,
#view-suppliers .table td.ops {
	white-space: normal;
}

#view-products .table td.ops .btn,
#view-customers .table td.ops .btn,
#view-suppliers .table td.ops .btn {
	margin: 2px 4px 2px 0;
}

#acPortal.portal-dropdown {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 8px;
}

#acPortal .dd-item {
	border: 1px solid rgba(17, 24, 39, .10);
	border-radius: 12px;
	padding: 8px 10px;
	background: #fff;
}

#acPortal .dd-item>div:first-child {
	font-weight: 900;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#acPortal .dd-meta {
	margin-top: 4px;
	font-size: 12px;
	color: rgba(17, 24, 39, .60);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 520px) {
	#acPortal.portal-dropdown {
		grid-template-columns: 1fr;
	}
}

#acPortal.portal-dropdown {
	overflow-x: hidden;
	box-sizing: border-box;
}

#acPortal .dd-item,
#acPortal .dd-item>div,
#acPortal .dd-meta {
	min-width: 0;
}

#view-documents,
#view-products,
#view-customers,
#view-suppliers {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--topbar-h));
	min-height: 0;
}

/* ҳ�涥�ϵı����������� */
#view-documents .head,
#view-products .head,
#view-customers .head,
#view-suppliers .head {
	flex: 0 0 auto;
}

/* ��Ƭ��ռʣ���ռ䣨���� table-wrap �ٹ��� */
#view-documents .card,
#view-products .card,
#view-customers .card,
#view-suppliers .card {
	flex: 1 1 auto;
	min-height: 0;
}

/* �7�3 ���㲻�������ڲ�����������������/��Ʒ/�ͻ�/������ͨ�� */
.content {
	overflow: hidden;
}

/* �� view �Լ�ռ�� content �߶ȣ���ȥ content padding: 12*2=24�� */
#view-documents,
#view-products,
#view-customers,
#view-suppliers {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--topbar-h) - 24px);
	min-height: 0;
	/* �ؼ� */
}

/* ���������������� */
#view-documents .head,
#view-products .head,
#view-customers .head,
#view-suppliers .head {
	flex: 0 0 auto;
}

/* Ĭ�ϣ���Щ view ���� card �������߶ȣ��Զ��߶ȣ������� */
#view-documents>.card,
#view-products>.card,
#view-customers>.card,
#view-suppliers>.card {
	flex: 0 0 auto;
}

/* �7�3 ���ݲ�ѯ������һ�� card��װ docsWrap �����ţ���ʣ���߶� */
#view-documents>.card:last-of-type {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* �7�3 �� docsWrap ��ΪΨһ�������� */
#docsWrap {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* �7�3 ��Ʒ/�ͻ�/�����̣����Ǹ���ֻ��һ�ű��� card�������� card ��ʣ���߶� */
#view-products>.card,
#view-customers>.card,
#view-suppliers>.card {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* �7�3 ����Щҳ���� table-wrap ��ΪΨһ�������� */
#view-products .table-wrap,
#view-customers .table-wrap,
#view-suppliers .table-wrap {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

/* ��ͷ sticky���ڹ�����������Ч */
.table thead th {
	position: sticky;
	top: 0;
	z-index: 5;
}

/* === ��ͷ�����ڡ� + ��ͷ���� === */

/* 1) ������������¶�죺�����������������գ���ȷ�������ǰ׵� */
.table-wrap {
	padding-top: 0 !important;
	background: #fff;
}

/* 2) �� thead ����Ҳ sticky����Ϊ�ǰ壩������΢���ϸ�ס 1px �� */
.table thead {
	position: sticky;
	top: -1px;
	/* �ؼ������ϸ�ס�� 1px �� */
	z-index: 6;
	background: #fff;
}

/* 3) th ���� sticky Ҳ�У���������Ҫ�� thead �ǰ壻ͬʱ�Ѹ߶�̧�� */
.table thead th {
	position: sticky;
	top: -1px;
	/* �� thead ���� */
	z-index: 7;
	background: #fff;

	/* ��ͷ�߶ȸ��ߣ����ַ�ʽѡһ�� */
	padding-top: 11px;
	/* ԭ�� 8px */
	padding-bottom: 11px;
	line-height: 1.2;
}

/* 4) ����ͷ�ײ���һ������ȷ�ķָ��ߣ�����ʱ���ɾ� */
.table thead {
	box-shadow: 0 1px 0 rgba(17, 24, 39, .10);
}

/* ��ɫС����ʾ��Ӧ�� */
.product-supplier-muted {
	display: block;
	/* ʹ�䵥��һ����ʾ */
	color: var(--muted);
	font-size: var(--fs-xs);
	/* ���� */
	margin-top: 4px;
	/* ����������΢���� */
}

.ac-wrap {
	position: relative;
}

/* �Ҳ�Ԥ���ռ䣬��������ѹס���� */
.input.with-supplier {
	padding-right: 140px;
}

/* ���������Ҳ�С�� */
.supplier-inline {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	opacity: .75;
	pointer-events: none;
	max-width: 120px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.supplier-inline.is-empty {
	display: none;
}


/* ���Ʋ鿴���ڿ��� + ����Ӧ��Ļ */
#modal.modal {
	width: min(980px, calc(100vw - 24px));
	max-width: 980px;
}

/* modal ����������Ҫ���� */
#modal .modal-body {
	max-height: calc(100vh - 140px);
	overflow: auto;
}

/* ���ݲ鿴����ռ�� modal ���ݿ��� */
#modal .docview-table {
	width: 100%;
}




body.is-modal-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* �����������������ڲ������������� iOS ���Թ��� */
#modal .modal-body {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	/* ��ֹ���������ݵ� body������������֧�֣� */
	max-height: calc(100vh - 240px);
	/* ��ͷ�����ռ䣬�ɰ���ͷ���߶�΢�� */
}

/* �������롰�������򡱵���������Ҳ���Լӣ� */
#modal .table-wrap {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* ===== Analytics: ����ģ�������������� ===== */
#view-analytics {
	display: flex;
	flex-direction: column;
	height: calc(100dvh - var(--topbar-h) - 24px);
	/* 24 = .content ���� padding */
	min-height: 0;
	overflow: auto;
	/* �7�3 �ؼ���ֻ�� analytics �Լ��� */
	-webkit-overflow-scrolling: touch;
}

/* ��ѡ���� analytics �ı������ڹ���ʱ������������������ģ�飩 */
#view-analytics .head {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--bg);
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ��ͼ�����򲻻��Ѳ��ֳŵù�������������������������� */
#view-analytics .grid {
	min-width: 0;
}


/* ===== Analytics: ÿ��ģ�����Ƹ߶ȣ��ڲ����� ===== */

/* ÿ��ͼ����Ƭ���ɡ�ͷ�̶� + ������������ */
#view-analytics .chart-card {
	display: flex;
	flex-direction: column;
	max-height: 520px;
	/* ���ɸij� 420/600 ��ϲ�� */
	overflow: hidden;
	/* ��Ƭ�����������ѹ��������ڲ������� */
}

/* chart-head �������������� */
#view-analytics .chart-card .chart-head {
	flex: 0 0 auto;
}

/* ������ JS ���ɵİ����������������� */
#view-analytics .chart-card .ana-rank-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 4px;
	/* �����������ռ������� */
}

/* KPI ����Ҳ����һ�£��������� */
/* ===== Analytics ���� + ģ�������߶ȹ�������Ӱ�� #view-analytics�� ===== */

#view-analytics .analytics-blocks {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 10px;
}

/* ÿ�������鶼���Ƹ߶ȣ������ڲ����� */
#view-analytics .ana-block {
	display: flex;
	flex-direction: column;
	max-height: 520px;
	/* �����Ե���420/560/600 */
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(17, 24, 39, .10);
	background: #fff;
}

/* ��Ƭͷ��������һ�� */
#view-analytics .ana-block .chart-head {
	padding: 12px 12px 6px 12px;
	border-bottom: 1px solid rgba(17, 24, 39, .06);
}

/* ���������� */
#view-analytics .ana-block .ana-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 12px 12px 12px;
}

/* ���� KPI ����Ҳ���Ƹ߶� *

/* KPI ��ʽ */
.ana-summary-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.ana-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.ana-kpi {
	border: 1px solid rgba(17, 24, 39, .08);
	background: rgba(17, 24, 39, .02);
	border-radius: 14px;
	padding: 10px 12px;
}

.ana-kpi-val {
	font-weight: 900;
	font-size: 16px;
	margin-top: 4px;
}

.ana-kpi-ok {
	color: #16a34a;
}

.ana-kpi-warn {
	color: #dc2626;
}

/* ����ͷ */
.ana-rank-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.ana-rank-title {
	font-weight: 900;
}

/* �����б����ڲ������� */
.ana-rank-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ���� */
.ana-item {
	border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 14px;
	padding: 6px 6px;
	background: #fff;
}

.ana-item.is-click {
	cursor: pointer;
}

.ana-item.is-click:hover {
	background: rgba(37, 99, 235, .06);
	border-color: rgba(37, 99, 235, .18);
}

.ana-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ana-item-name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ana-rank-no {
	display: inline-flex;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 12px;
	color: rgba(37, 99, 235, .95);
	background: rgba(37, 99, 235, .10);
	border: 1px solid rgba(37, 99, 235, .18);
}

.ana-rank-label {
	font-weight: 900;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ana-item-val {
	font-weight: 900;
	color: rgba(17, 24, 39, .78);
	white-space: nowrap;
}

/* ��ɫ���������������ģ������ */
.ana-track {
	height: 12px;
	border-radius: 999px;
	background: rgba(37, 99, 235, .10);
	overflow: hidden;
	margin-top: 8px;
}

.ana-bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(37, 99, 235, .95), rgba(37, 99, 235, .55));
}

.ana-sub {
	margin-top: 6px;
}

/* pill */
.ana-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 900;
	font-size: 12px;
	background: rgba(17, 24, 39, .04);
	border: 1px solid rgba(17, 24, 39, .10);
}

.ana-pill-warn {
	background: rgba(220, 38, 38, .10);
	border-color: rgba(220, 38, 38, .20);
	color: #dc2626;
}

/* �������ձ��� */
.ana-compact-table-wrap {
	width: 100%;
	overflow: auto;
	border-radius: 14px;
	border: 1px solid rgba(17, 24, 39, .08);
	background: #fff;
}

.ana-compact-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
}

.ana-compact-table th,
.ana-compact-table td {
	padding: 10px 10px;
	border-bottom: 1px solid rgba(17, 24, 39, .06);
	text-align: left;
	vertical-align: top;
}

.ana-compact-table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 2;
	font-size: 11px;
	color: rgba(17, 24, 39, .70);
}

/* ����Ԥ���б� */
.ana-overdue-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ana-overdue-item {
	border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 14px;
	padding: 10px 12px;
	background: #fff;
}

.ana-overdue-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ana-overdue-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 900;
}

.ana-overdue-supplier {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 520px;
}

.ana-overdue-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.ana-overdue-amt {
	font-weight: 900;
	white-space: nowrap;
}

.ana-overdue-remark {
	margin-top: 6px;
}

/* analytics��KPI �ɵ�����ʾ */
#view-analytics .ana-kpi-clickable .ana-kpi {
	cursor: pointer;
}

#view-analytics .ana-kpi-clickable .ana-kpi:hover {
	background: rgba(37, 99, 235, .06);
	border-color: rgba(37, 99, 235, .18);
}

#view-analytics .ana-kpi-hot {
	box-shadow: 0 0 0 4px rgba(220, 38, 38, .06);
}

/* ���������������Ӿ������������������ۣ� */
.ana-track {
	height: 8px;
}

.ana-bar {
	background: linear-gradient(90deg, rgba(37, 99, 235, .98), rgba(37, 99, 235, .60));
}


/* ===== Analytics �������Լ��Ĺ�����������Ϊȫ�� body/content �� hidden�� ===== */
#view-analytics {
	display: flex;
	flex-direction: column !important;
	height: calc(100vh - var(--topbar-h) - 24px) !important;
	/* 24 = content padding ���� */
	min-height: 0 !important;
	overflow: auto !important;
	/* �7�3 �ؼ���analytics �Լ����»� */
	-webkit-overflow-scrolling: touch !important;
}

/* blocks ���� */
#view-analytics .analytics-blocks {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px !important;
	margin-top: 10px !important;
}

/* ÿ��ģ�����Ƹ߶ȣ��ڲ����� */
#view-analytics .ana-block {
	display: flex !important;
	flex-direction: column !important;
	max-height: 520px !important;
	overflow: hidden !important;
}

/* ģ������������ */
#view-analytics .ana-block .ana-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow: auto !important;
	/* �7�3 �ؼ���ģ���ڲ�Ҳ�ɹ� */
	-webkit-overflow-scrolling: touch !important;
	padding: 10px 12px 12px 12px !important;
}

/* KPI �ɵ��� */
#view-analytics .ana-kpi-clickable .ana-kpi {
	cursor: pointer;
}

#view-analytics .ana-kpi-clickable .ana-kpi:hover {
	background: rgba(37, 99, 235, .06);
	border-color: rgba(37, 99, 235, .18);
}

#view-analytics .ana-kpi-hot {
	box-shadow: 0 0 0 4px rgba(220, 38, 38, .06);
}

/* inactive �б����� item Ҳ�ɵ��� */
#view-analytics .inactive-item.ana-click {
	cursor: pointer;
}

#view-analytics .inactive-item.ana-click:hover {
	background: rgba(37, 99, 235, .06);
}

/* ���������� */
.ana-bar {
	background: linear-gradient(90deg, rgba(37, 99, 235, .98), rgba(37, 99, 235, .60));
}

/* ===== Analytics scroll hard-fix (override) ===== */
#view-analytics {
	overflow: auto !important;
	height: calc(100vh - var(--topbar-h) - 24px) !important;
	min-height: 0 !important;
	-webkit-overflow-scrolling: touch !important;
}

/* ÿ��ģ�����Ƹ߶ȣ���Ƭ������ */
#view-analytics .ana-block {
	max-height: 520px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}

/* ģ��������������ֻ�ڳ���ʱ���� */
#view-analytics .ana-block .ana-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

/* ===== Analytics rank: head fixed, list scrolls ===== */
#view-analytics .ana-body {
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	overflow: hidden !important;
	/* �7�3 ana-body ������ֻ������ */
}

/* ͷ���̶����������б����� */
#view-analytics .ana-rank-head {
	flex: 0 0 auto !important;
	position: sticky !important;
	/* �7�3 ��ʹ����δ���й�����Ҳ���� */
	top: 0 !important;
	z-index: 3 !important;
	background: #fff !important;
	padding-top: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(17, 24, 39, .06);
}

/* �б����ǹ����������������κ� item �Ϲ�����Ч */
#view-analytics .ana-rank-list {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	/* �7�3 �ؼ��������� flex �в����������� */
	overflow: auto !important;
	/* �7�3 ֻ������ */
	-webkit-overflow-scrolling: touch !important;
	padding-right: 4px;
}


#view-analytics .ana-body {
	min-height: 0 !important;
}

#view-analytics .is-ana-loading {
	opacity: 0;
	pointer-events: none;
}


.gb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	background: rgba(22, 163, 74, .06);
	border: 1px solid rgba(22, 163, 74, .20);
	color: #16a34a;
}

.rb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	background: rgba(220, 38, 38, .06);
	border: 1px solid rgba(220, 38, 38, .20);
	color: #dc2626;
}

.bb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	background: rgba(37, 99, 235, .06);
	border: 1px solid rgba(37, 99, 235, .20);
	color: #2563eb;
}

/* ===== Mobile: ��ֹ Analytics ���һζ������������� ===== */
#view-analytics {
	overflow-x: hidden !important;
	/* �7�3 ��ֹ�������� */
	overscroll-behavior-x: none;
	/* �7�3 ��ֹ�����ص�/������ */
}

#view-analytics * {
	max-width: 100%;
	box-sizing: border-box;
}

/* canvas ǿ�Ʋ��������ƶ������Ԫ�ף� */
#view-analytics canvas {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}


/* �����п��������������������������ֻ��˲�ǿ�� 520px */
@media (max-width: 520px) {
	#view-analytics .ana-compact-table {
		min-width: 0 !important;
		/* �7�3 ���ٳ����ӿ� */
	}
}

/* ===== Product purchase history modal ===== */
.product-history {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ph-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.ph-kpi,
.ph-chart-card,
.ph-panel {
	border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 14px;
	background: #fff;
	padding: 10px;
}

.ph-kpi b {
	display: block;
	margin-top: 4px;
	font-size: 15px;
}

.ph-svg {
	width: 100%;
	height: auto;
	min-height: 260px;
	border: 1px solid rgba(17, 24, 39, .08);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(37, 99, 235, .035), rgba(255, 255, 255, 1));
}

.ph-axis {
	stroke: rgba(17, 24, 39, .45);
	stroke-width: 1.2;
}

.ph-grid {
	stroke: rgba(17, 24, 39, .08);
	stroke-width: 1;
}

.ph-line {
	stroke: rgba(37, 99, 235, .95);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ph-axis-tick {
	stroke: rgba(17, 24, 39, .45);
	stroke-width: 1;
}

.ph-label,
.ph-empty {
	font-size: 11px;
	fill: rgba(17, 24, 39, .58);
}

.ph-mini-table-wrap {
	max-height: 260px;
	min-height: 0 !important;
}

.ph-records-wrap {
	max-height: 360px;
	min-height: 0 !important;
}

.ph-records-table,
.ph-mini-table {
	min-width: 720px;
}

.ph-note {
	line-height: 1.6;
}

.ph-scope-desc {
	margin-top: 6px;
}

.ph-toolbar {
	justify-content: flex-end;
}

@media (max-width: 720px) {
	.ph-kpis,
	.ph-panels {
		grid-template-columns: 1fr !important;
	}
}