:root {
	--bg-soft: #f4f7ff;
	--bg-surface: #ffffff;
	--text-strong: #1f2937;
	--text-muted: #6b7280;
	--brand-shadow: 0 14px 30px rgba(15, 23, 42, .08);
}

body {
	color: var(--text-strong);
	background: radial-gradient(1100px 560px at 8% 0%, #e8eeff 0%, rgba(232,238,255,0) 58%),
				linear-gradient(180deg, #f7f9ff 0%, var(--bg-soft) 100%);
}

.app-navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.navbar-brand {
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2px;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
}

.navbar-brand small {
	font-size: .72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .72);
	letter-spacing: .35px;
	text-transform: uppercase;
}

.navbar .nav-link {
	border-radius: 8px;
	padding: .4rem .65rem;
	transition: background-color .15s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.app-env {
	padding-left: .5rem;
	border-left: 1px solid rgba(255, 255, 255, .18);
}

.app-main {
	min-height: calc(100vh - 140px);
}

.auth-wrap {
	min-height: calc(100vh - 260px);
}

.auth-card {
	max-width: 560px;
	margin-inline: auto;
}

.auth-form .form-control {
	height: 44px;
}

.metric-tile {
	border: 1px solid rgba(148, 163, 184, .24);
	border-radius: 12px;
	padding: .7rem .75rem;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.quick-actions {
	border-style: dashed;
}

.quick-actions .btn {
	min-width: 140px;
}

.receipt-wrap {
	max-width: 820px;
	margin: 0 auto;
}

.receipt-card .card {
	box-shadow: none;
}

.customer-invoice {
	background: #fff;
	color: #111827;
}

.receipt-main {
	max-width: 420px;
	margin: 0 auto;
	padding: .5rem;
}

.customer-invoice .receipt-card .table {
	font-size: .92rem;
}

.card {
	border: 1px solid rgba(148, 163, 184, .16);
	border-radius: 14px;
	background: var(--bg-surface);
	box-shadow: var(--brand-shadow);
}

.table thead th {
	white-space: nowrap;
	color: #334155;
	background: #f8fafc;
	border-bottom-color: rgba(15, 23, 42, .12);
	font-weight: 600;
}

.table tbody td { vertical-align: middle; }
.text-muted, .form-text { color: var(--text-muted) !important; }
.form-label { color: #374151; font-weight: 500; }

.btn { border-radius: 10px; }
.btn:focus { box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .2) !important; }

.app-footer {
	font-size: .9rem;
	color: #64748b;
	padding: 1rem 0 1.25rem;
}

@media print {
	@page {
		size: 80mm auto;
		margin: 0;
	}

	html,
	body {
		width: 80mm !important;
		max-width: 80mm !important;
	}

	body { background: #fff; }
	nav.navbar, .no-print, .app-footer { display: none !important; }
	.alert { display: none !important; }
	main.container { padding-top: 0 !important; }
	.card { box-shadow: none !important; border-radius: 0 !important; border: 0 !important; }

	body.customer-invoice {
		margin: 0 !important;
		padding: 0 !important;
		width: 80mm;
	}

	body.customer-invoice .receipt-main {
		max-width: 80mm;
		padding: 0;
	}

	body.customer-invoice .receipt-wrap {
		max-width: 80mm;
		margin: 0;
	}

	body.customer-invoice .receipt-card,
	body.customer-invoice .receipt-card .card,
	body.customer-invoice .receipt-card .card-body {
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	body.customer-invoice .table {
		font-size: 12px;
	}
}