h1 { color: #333; }
h2 { color: #555; }
ul { list-style: none; padding: 0; }
li { margin-bottom: 8px; }
a { color: #007bff; text-decoration: none; margin-right: 10px; }
a:hover { text-decoration: underline; }
/* Bootstrap override and custom styles */
body { background: #f7f7f7; }
.navbar {
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.card {
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border-radius: 8px;
}
.btn-primary, .bg-primary {
	background-color: #007bff !important;
	border-color: #007bff !important;
}
.navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link, .navbar-dark .btn {
	color: #fff !important;
}
.table th, .table td {
	vertical-align: middle;
}
.form-label {
	font-weight: 500;
}

/* Global responsive improvements for phone/tablet */
.navbar .container-fluid > div {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	justify-content: flex-end;
	align-items: center;
}

.navbar .container-fluid > div .btn {
	margin-right: 0 !important;
}

@media (max-width: 991.98px) {
	body {
		font-size: 0.95rem;
	}

	.container,
	.container-fluid {
		padding-left: 12px;
		padding-right: 12px;
	}

	.navbar {
		position: static !important;
	}

	.navbar .navbar-brand {
		width: 100%;
		margin-bottom: 0.5rem;
	}

	.navbar .container-fluid > div {
		width: 100%;
		justify-content: flex-start;
	}

	.navbar .container-fluid > div .btn {
		font-size: 0.78rem;
		padding: 0.3rem 0.55rem;
	}

	.card {
		border-radius: 6px;
	}

	.row.g-2 > [class*="col-"] {
		margin-bottom: 0.25rem;
	}

	.btn,
	.form-control,
	.form-select {
		min-height: 38px;
	}

	.d-flex.gap-2 {
		flex-wrap: wrap;
	}

	.table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		font-size: 0.86rem;
	}

	.table th,
	.table td {
		padding: 0.45rem 0.5rem;
	}
}

@media (max-width: 575.98px) {
	h1 { font-size: 1.35rem; }
	h2, .h4 { font-size: 1.1rem !important; }

	.navbar .container-fluid > div .btn {
		font-size: 0.74rem;
		padding: 0.28rem 0.48rem;
	}

	.card-body {
		padding: 0.8rem;
	}

	.pagination {
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	.pagination .page-link {
		padding: 0.25rem 0.5rem;
	}
}

@media (max-width: 767.98px) {
	.row.g-2 .col-auto {
		width: 100%;
	}

	.row.g-2 .col-auto .btn {
		width: 100%;
	}

	.list-group-item.d-flex,
	.d-flex.justify-content-between {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.5rem;
	}

	.list-group-item .btn,
	.list-group-item .badge,
	.list-group-item a.btn {
		margin-left: 0 !important;
	}

	table.mobile-card-table {
		border: 0;
		background: transparent;
	}

	table.mobile-card-table thead {
		display: none;
	}

	table.mobile-card-table,
	table.mobile-card-table tbody,
	table.mobile-card-table tr,
	table.mobile-card-table td {
		display: block;
		width: 100%;
	}

	table.mobile-card-table tr {
		border: 1px solid #dee2e6;
		border-radius: 8px;
		margin-bottom: 0.65rem;
		padding: 0.45rem 0.55rem;
		background: #fff;
	}

	table.mobile-card-table td {
		border: 0;
		border-bottom: 1px dashed #e9ecef;
		padding: 0.45rem 0;
		text-align: right;
	}

	table.mobile-card-table td:last-child {
		border-bottom: 0;
	}

	table.mobile-card-table td::before {
		content: attr(data-label);
		float: left;
		font-weight: 600;
		color: #495057;
		margin-right: 0.5rem;
		text-align: left;
	}

	.invoice-content-block {
		min-width: 0 !important;
		width: 100%;
	}

	#editClientModal.edit-client-modal {
		top: 6% !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: calc(100% - 20px);
		max-width: 520px;
		max-height: 88vh;
		overflow-y: auto;
		padding: 14px;
		border-radius: 8px;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
	}
}

@media (max-width: 360px) {
	body {
		font-size: 0.88rem;
	}

	.container,
	.container-fluid {
		padding-left: 8px;
		padding-right: 8px;
	}

	.navbar .container-fluid > div .btn {
		font-size: 0.68rem;
		padding: 0.24rem 0.4rem;
	}

	.btn,
	.form-control,
	.form-select {
		font-size: 0.84rem;
	}

	.table th,
	.table td {
		padding: 0.35rem 0.4rem;
		font-size: 0.8rem;
	}

	table.mobile-card-table td::before {
		max-width: 46%;
		white-space: normal;
		line-height: 1.2;
	}

	.token-btn {
		font-size: 0.72rem;
		padding: 0.2rem 0.38rem;
		margin-bottom: 0.25rem;
	}

	.design-tools .form-control-sm {
		width: 74px !important;
	}

	.designer-preview,
	.builder-canvas {
		padding: 8px;
	}
}