* { box-sizing: border-box; }
:root {
	--bg: #f7faf8;
	--surface: #ffffff;
	--text: #1f2d1f;
	--muted: #6b7f6b;
	--brand: #00bb55;
	--brand-600: #00a34a;
	--brand-700: #009043;
	--danger: #c0392b;
	--warning: #f39c12;
	--shadow: 0 4px 20px rgba(0,0,0,0.06);
	--radius: 12px;
}
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
header {
	position: sticky; top: 0; z-index: 10;
	background: linear-gradient(180deg, var(--brand), #0a9f53);
	color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
	box-shadow: var(--shadow);
}
header .nav a { margin-left: 16px; color: #fff; font-weight: bold; opacity: .95; position: relative; padding-bottom: 2px; }
header .nav a:hover { opacity: 1; }
header .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: rgba(255,255,255,.8); transform: scaleX(0); transition: transform .2s ease; }
header .nav a:hover::after { transform: scaleX(1); }
.container { display: flex; gap: 16px; padding: 16px; }
.menu { flex: 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .1s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.card img { width: 100%; height: 140px; object-fit: cover; background: #eee; }
.card .info { padding: 12px; display: flex; justify-content: space-between; align-items: center; }
.card .name { font-weight: 700; }
.card .price { color: var(--brand); font-weight: 700; }
.card button { width: 100%; padding: 12px; border: none; background: var(--brand); color: #fff; cursor: pointer; font-weight: bold; }
.card button:hover { background: var(--brand-600); }
.cart { flex: 2; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; }
.cart h2 { margin: 6px 0 10px; }
.cart-list { flex: 1; overflow: auto; border-top: 1px solid #eef1ee; border-bottom: 1px solid #eef1ee; margin: 8px 0; }
.cart-item { display: grid; grid-template-columns: 1fr 80px 90px 32px; gap: 8px; padding: 10px 0; align-items: center; border-bottom: 1px dashed #eef1ee; }
.cart-item .qty input { width: 70px; padding: 6px 8px; border: 1px solid #dfe6df; border-radius: 8px; outline: none; }
.cart-item .qty input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,187,85,.1); }
.cart-item .remove { color: var(--danger); cursor: pointer; text-align: center; font-weight: bold; }
.cart-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; gap: 8px; flex-wrap: wrap; }
.total { font-size: 18px; font-weight: bold; }
.btn { padding: 10px 12px; border: none; background: var(--brand); color: #fff; cursor: pointer; border-radius: 10px; font-weight: bold; box-shadow: var(--shadow); }
.btn:hover { background: var(--brand-600); }
.btn:active { background: var(--brand-700); transform: translateY(1px); }
.btn.secondary { background: #667a66; }
.btn.secondary:hover { background: #586b58; }
.btn.danger { background: var(--danger); }
.btn.warning { background: var(--warning); color: #222; }
.btn:disabled { background: #b9c6b9; cursor: not-allowed; box-shadow: none; }
.panel { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 16px; }
table { 
	width: 100%; 
	border-collapse: collapse; 
	background: var(--surface); 
	border-radius: var(--radius); 
	overflow: hidden; 
}
/* Desktop table - normal display */
@media (min-width: 769px) {
	table {
		display: table;
		table-layout: auto;
	}
}
thead th { background: #f3f7f4; }
th, td { border-bottom: 1px solid #eef1ee; padding: 10px; text-align: left; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
input[type="text"], input[type="number"], select, input[type="file"] { padding: 10px 12px; border: 1px solid #dfe6df; border-radius: 10px; background: #fff; color: var(--text); outline: none; }
input[type="text"]:focus, input[type="number"]:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,187,85,.12); }
#qrModal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 16px; }
#qrModal > div { background: var(--surface); padding: 16px; border-radius: var(--radius); width: 380px; max-width: 96vw; box-shadow: var(--shadow); }
.toolbar { display: flex; gap: 8px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.toolbar input[type="text"] { flex: 1; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; border-top: 1px solid #eef1ee; }
/* Tablet and below */
@media (max-width: 900px) {
	.container { flex-direction: column; }
	.menu { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.panel { margin: 12px; padding: 12px; }
}

/* Mobile devices */
@media (max-width: 768px) {
	header { 
		padding: 10px 12px; 
		flex-wrap: wrap;
		gap: 8px;
	}
	header > div:first-child { 
		font-size: 16px; 
		width: 100%;
		margin-bottom: 4px;
	}
	header .nav { 
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	header .nav a { 
		margin-left: 0;
		font-size: 13px; 
		padding: 6px 10px;
		background: rgba(255,255,255,0.15);
		border-radius: 6px;
	}
	
	.container { padding: 10px; gap: 10px; }
	.menu { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
	.card img { height: 120px; }
	.card .info { padding: 8px; font-size: 14px; }
	.card button { padding: 10px; font-size: 14px; }
	
	.toolbar { 
		flex-wrap: wrap; 
		padding: 8px;
	}
	.toolbar input[type="text"] { 
		min-width: 100%;
		margin-bottom: 8px;
	}
	.toolbar button { 
		flex: 1;
		min-width: calc(50% - 4px);
	}
	
	.panel { margin: 10px; padding: 12px; }
	.grid { grid-template-columns: 1fr; gap: 10px; }
	
	/* Tables - horizontal scroll on mobile */
	.panel table,
	.table-wrapper table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 100%;
	}
	.panel table thead, 
	.panel table tbody,
	.table-wrapper table thead,
	.table-wrapper table tbody {
		display: table;
		width: 100%;
		min-width: 600px; /* Minimum width to force scroll on small screens */
		table-layout: auto;
	}
	.panel table tr,
	.table-wrapper table tr {
		display: table-row;
	}
	.panel table th, 
	.panel table td,
	.table-wrapper table th,
	.table-wrapper table td { 
		padding: 8px 6px; 
		font-size: 13px;
		word-break: break-word;
		white-space: nowrap;
	}
	.panel table th:first-child, 
	.panel table td:first-child,
	.table-wrapper table th:first-child,
	.table-wrapper table td:first-child { 
		padding-left: 8px; 
		min-width: 50px;
	}
	.panel table th:last-child, 
	.panel table td:last-child,
	.table-wrapper table th:last-child,
	.table-wrapper table td:last-child { 
		padding-right: 8px; 
	}
	
	/* Admin table specific columns */
	.panel table th:nth-child(1), /* ID */
	.panel table td:nth-child(1) {
		min-width: 50px;
		width: 50px;
	}
	.panel table th:nth-child(2), /* Image */
	.panel table td:nth-child(2) {
		min-width: 70px;
		width: 70px;
	}
	.panel table th:nth-child(3), /* Name */
	.panel table td:nth-child(3) {
		min-width: 120px;
		width: auto;
	}
	.panel table th:nth-child(4), /* Price */
	.panel table td:nth-child(4) {
		min-width: 80px;
		width: 80px;
	}
	.panel table th:nth-child(5), /* Active */
	.panel table td:nth-child(5) {
		min-width: 70px;
		width: 70px;
	}
	.panel table th:nth-child(6), /* Actions */
	.panel table td:nth-child(6) {
		min-width: 150px;
		width: 150px;
		white-space: normal;
	}
	
	/* Admin table actions */
	.panel table td:last-child {
		white-space: normal;
	}
	.panel table td:last-child .btn {
		padding: 6px 10px;
		font-size: 12px;
		margin: 2px;
		display: inline-block;
		width: auto;
		min-width: 60px;
	}
}

@media (max-width: 600px) {
	header { padding: 8px 10px; }
	header > div:first-child { font-size: 15px; }
	header .nav a { font-size: 12px; padding: 5px 8px; }
	
	.container { padding: 8px; gap: 8px; }
	.menu { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
	.card img { height: 110px; }
	.card .info { padding: 6px; font-size: 13px; }
	.card button { padding: 10px 8px; font-size: 13px; }
	
	/* Mobile cart as bottom drawer */
	.cart {
		position: fixed; 
		left: 0; 
		right: 0; 
		bottom: 0;
		border-radius: 16px 16px 0 0; 
		padding: 12px 14px; 
		max-height: 75vh; 
		overflow-y: auto;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
		z-index: 100;
	}
	.container { padding-bottom: 75vh; }
	.cart h2 { font-size: 18px; margin: 4px 0 8px; }
	.cart-list { 
		max-height: calc(75vh - 180px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cart-item { 
		grid-template-columns: 1fr 60px 75px 28px; 
		gap: 6px;
		padding: 8px 0;
		font-size: 13px;
	}
	.cart-item .qty input { 
		width: 55px; 
		padding: 5px 6px; 
		font-size: 13px;
	}
	.cart-item .remove { 
		font-size: 18px;
		padding: 2px;
	}
	.cart-footer { 
		padding-top: 10px;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.cart-footer > div:last-child {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	.cart-footer .btn {
		width: 100%;
		padding: 12px;
		font-size: 15px;
	}
	.total { font-size: 20px; text-align: center; }
	
	.btn { 
		padding: 12px 14px; 
		font-size: 15px; 
		min-height: 44px; /* Touch target size */
	}
	.panel { margin: 8px; padding: 10px; }
	.panel h3 { font-size: 16px; margin: 8px 0; }
	
	/* Admin page table wrapper for scroll */
	.panel > div {
		position: relative;
	}
	
	/* Scroll hint for mobile - shown on table containers */
	@media (max-width: 768px) {
		.panel h3 + div::before,
		.table-wrapper::before {
			content: '← Swipe to scroll →';
			position: absolute;
			right: 15px;
			top: 15px;
			background: rgba(0,187,85,0.9);
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 10px;
			pointer-events: none;
			z-index: 1;
			opacity: 0.8;
			font-weight: bold;
		}
		.table-wrapper {
			position: relative;
		}
	}
	
	/* Reports table specific column widths */
	@media (max-width: 768px) {
		#reportTable th:nth-child(1), /* Order # */
		#reportTable td:nth-child(1) {
			min-width: 80px;
			width: 80px;
		}
		#reportTable th:nth-child(2), /* Amount */
		#reportTable td:nth-child(2) {
			min-width: 100px;
			width: 100px;
		}
		#reportTable th:nth-child(3), /* Payment */
		#reportTable td:nth-child(3) {
			min-width: 90px;
			width: 90px;
		}
		#reportTable th:nth-child(4), /* Created */
		#reportTable td:nth-child(4) {
			min-width: 150px;
			width: 150px;
		}
	}
	
	/* Reports page controls */
	.report-controls {
		display: flex;
		gap: 8px;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}
	.period-label {
		flex: 1;
		min-width: 120px;
	}
	.report-total {
		flex: 1 1 100%;
		text-align: center;
		padding-top: 12px;
		border-top: 1px solid #eef1ee;
		margin-top: 8px;
		font-size: 18px;
	}
	.table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		margin-top: 12px;
	}
	
	/* Reports page mobile */
	@media (max-width: 600px) {
		.report-controls {
			flex-direction: column;
			gap: 10px;
			align-items: stretch;
		}
		.period-label {
			width: 100%;
			min-width: auto;
		}
		.report-controls .btn {
			width: 100%;
		}
		.report-total {
			font-size: 16px;
			padding-top: 10px;
		}
	}
	
	/* Payment modal mobile */
	#paymentModal {
		padding: 10px;
		align-items: flex-end;
	}
	#paymentModal > div {
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 16px 16px 0 0;
		max-height: 90vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#paymentModal h3 { font-size: 18px; }
	#paymentModal .grid { grid-template-columns: 1fr; }
	#qrCode { padding: 12px !important; }
	#qrCode canvas { max-width: 100% !important; height: auto !important; }
	
	/* Forms mobile */
	input[type="text"], 
	input[type="number"], 
	select, 
	input[type="file"] {
		padding: 12px;
		font-size: 16px; /* Prevents zoom on iOS */
		min-height: 44px;
		width: 100%;
	}
	label { font-size: 13px; }
	
	/* Empty state */
	.empty { 
		padding: 20px;
		text-align: center;
		font-size: 14px;
	}
}

/* Very small devices */
@media (max-width: 400px) {
	.menu { grid-template-columns: repeat(2, 1fr); }
	.card img { height: 100px; }
	header .nav a { font-size: 11px; padding: 4px 6px; }
	.cart-item { grid-template-columns: 1fr 50px 70px 24px; font-size: 12px; }
	.cart-item .qty input { width: 45px; padding: 4px; }
}