/* MCBC PoD — mobile-first, touch-friendly. Large targets, one-handed use. */
/* Molson Coors Beverage Company brand palette. */
:root {
	--mc-navy: #17213D;   /* primary */
	--mc-gold: #F8B000;   /* accent */
	--mc-gray: #E1E6E8;   /* light surface */
	--mc-sky:  #478ACA;   /* focus / links */
	--mc-orange: #EB6823;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	color: #1a1a1a;
	background: var(--mc-gray);
	-webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
.muted { color: #6b7280; font-size: 0.85em; }
.mono, .num { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }

/* top bar */
.topbar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 16px; background: var(--mc-navy); color: #fff;
}

/* tab navigation */
.tabs {
	position: sticky; top: 0; z-index: 5;
	display: flex; background: var(--mc-navy);
	box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.tab {
	flex: 1; background: transparent; color: #c7cedb; cursor: pointer;
	border: none; border-bottom: 4px solid transparent;
	padding: 12px 8px; font-size: 0.95em; font-weight: 700; letter-spacing: 0.03em;
}
.tab.active { color: #fff; border-bottom-color: var(--mc-gold); }
.page { display: block; }
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
	font-weight: 800; font-size: 1.05em; letter-spacing: 0.14em; color: #fff;
	border-left: 4px solid var(--mc-gold); padding-left: 8px;
}
.brand-sub { font-size: 0.72em; letter-spacing: 0.05em; color: var(--mc-gray); padding-left: 12px; margin-top: 2px; }
.net { font-size: 0.8em; padding: 4px 10px; border-radius: 999px; }
.net.online { background: #1f9d55; }
.net.offline { background: #d64545; }

main { padding: 12px; max-width: 720px; margin: 0 auto; }

/* cards */
.card {
	background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card h2 { margin: 0 0 12px; font-size: 1.05em; color: var(--mc-navy); }

/* fields + buttons (>=44px touch targets) */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; margin-bottom: 6px; font-size: 0.85em; color: #4b5563; }
input[type="text"], input[type="number"] {
	width: 100%; padding: 14px; font-size: 17px;
	border: 1px solid #cbd5e1; border-radius: 10px;
}
input:focus { outline: none; border-color: var(--mc-sky); box-shadow: 0 0 0 3px rgba(71,138,202,0.25); }
.order-select {
	width: 100%; padding: 13px 12px; font-size: 17px; background: #fff; color: #1a1a1a;
	border: 1px solid #cbd5e1; border-radius: 10px;
}
.order-select:focus { outline: none; border-color: var(--mc-sky); box-shadow: 0 0 0 3px rgba(71,138,202,0.25); }
#order-note:not(:empty) { margin: 0 0 12px; }

/* multi-select order list */
.ord-list { display: flex; flex-direction: column; }
.ord-group-head { font-size: 0.78em; font-weight: 700; color: var(--mc-navy); text-transform: uppercase; letter-spacing: 0.04em; margin: 10px 0 6px; }
.ord-item { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 6px; font-size: 0.95em; cursor: pointer; }
.ord-item input { width: 20px; height: 20px; flex: none; accent-color: var(--mc-navy); }
.ord-item.checked { border-color: var(--mc-sky); background: #eef5fb; }
.btn {
	min-height: 52px; padding: 0 20px; font-size: 17px; font-weight: 600;
	border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: var(--mc-navy);
	flex: 1; cursor: pointer;
}
.btn.primary { background: var(--mc-navy); border-color: var(--mc-navy); color: #fff; }
.btn.primary:active { background: #0f1730; }
.btn:disabled { opacity: 0.5; }
button { -webkit-tap-highlight-color: transparent; }

/* invoice table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.lines { width: 100%; border-collapse: collapse; font-size: 0.84em; }
table.lines th, table.lines td { padding: 6px 5px; border-bottom: 1px solid #eef0f3; text-align: left; }
/* Headers, SKU codes and numbers never wrap; only the description column wraps (at its spaces). */
table.lines th { white-space: nowrap; }
table.lines td { overflow-wrap: anywhere; }
table.lines td:first-child, table.lines td.num { white-space: nowrap; overflow-wrap: normal; }
table.lines th.num, table.lines td.num { text-align: right; }
table.lines tfoot td { font-weight: 700; border-top: 2px solid #d1d5db; }

/* signature display (captured upstream) */
.sig-view { text-align: center; padding: 6px 0 2px; }
.sig-image {
	max-width: 100%; max-height: 150px;
	border-bottom: 1px solid #94a3b8; padding-bottom: 6px; margin-bottom: 8px;
}
.sig-name { font-size: 1.25em; font-weight: 700; color: var(--mc-navy); }
.note { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #e7f6ec; color: #14532d; }

/* photos */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid #d1d5db; cursor: pointer; }

/* editable invoice cells */
input.edit {
	width: 46px; padding: 7px 5px; font-size: 15px; text-align: right;
	border: 1px solid #cbd5e1; border-radius: 8px; font-variant-numeric: tabular-nums;
}
input.edit:disabled { background: #f1f5f9; color: #475569; }
td.conf { font-weight: 700; }

/* rendered route / customer document sections */
hr.sep { border: none; border-top: 1px solid #e5e7eb; margin: 16px 0; }
.docs { margin-top: 12px; }
.docs:empty { margin-top: 0; }
.docs h3 { font-size: 0.95em; margin: 16px 0 6px; }
.docs table { margin-bottom: 8px; }
.docs ul { margin: 6px 0; padding-left: 20px; }
.print-doc { flex: none; min-height: 40px; margin-top: 8px; }
.print-end { flex: none; min-height: 40px; padding: 0 16px; }
.print-slip { flex: none; min-height: 40px; padding: 0 14px; }
.doc-block { margin-bottom: 14px; }

/* route stop + inline customer comments (Routes page) */
.stop { border: 1px solid #e5e7eb; border-left: 4px solid var(--mc-sky); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.stop-head { margin-bottom: 4px; }
.comment-list { margin: 6px 0 10px; padding-left: 18px; }
.comment-list li { margin: 3px 0; }

/* printable end-of-route document set */
.doc { margin-top: 18px; }
.doc h2 { color: var(--mc-navy); font-size: 1.1em; border-bottom: 2px solid var(--mc-gold); padding-bottom: 4px; margin: 0 0 10px; }

/* error page */
.error-box {
	max-width: 520px; margin: 60px auto; padding: 24px; text-align: center;
	background: #fff; border-radius: 12px; border-top: 4px solid var(--mc-gold);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.error-box h1 { color: var(--mc-navy); }

/* receipt (screen + print) */
#receipt { background: #fff; }
.receipt { max-width: 720px; margin: 0 auto; padding: 24px; color: #000; }
.receipt-head { border-bottom: 2px solid var(--mc-navy); padding-bottom: 10px; margin-bottom: 14px; }
.brand-print {
	font-weight: 800; letter-spacing: 0.14em; color: var(--mc-navy); font-size: 1.05em;
	border-left: 4px solid var(--mc-gold); padding-left: 8px; margin-bottom: 8px;
}
.receipt-head h1 { margin: 8px 0 6px; font-size: 1.4em; color: var(--mc-navy); }
.receipt .lines { font-size: 0.9em; }
.signoff { display: flex; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.sign-block, .stamp { flex: 1; min-width: 220px; }
.label { font-weight: 700; margin-bottom: 6px; }
img.sig { max-width: 280px; border-bottom: 1px solid #000; }
.photos { margin-top: 24px; }
.photo-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.photo { width: 200px; max-width: 45%; height: auto; border: 1px solid #999; border-radius: 4px; }
.sig.empty { color: #999; padding: 30px 0; border-bottom: 1px solid #000; }
.receipt-actions { text-align: center; margin: 16px; }
.page-break { page-break-before: always; }

/* ---- inline print overlay (replaces window.open for webview) ---- */
#print-overlay {
	position: fixed; inset: 0; z-index: 100;
	background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#print-overlay-bar {
	position: sticky; top: 0; z-index: 101;
	display: flex; gap: 10px; padding: 10px 14px;
	background: var(--mc-navy); border-bottom: 2px solid var(--mc-gold);
}
#print-overlay-bar .btn { flex: none; min-height: 44px; }
#print-overlay-body { padding: 0; }

@media print {
	.no-print { display: none !important; }
	/* When the overlay is open, print only its content */
	body.printing > *:not(#print-overlay) { display: none !important; }
	#print-overlay { position: static !important; overflow: visible !important; }
	#print-overlay-bar { display: none !important; }
	/* Default: hide overlay when printing from main app context */
	body:not(.printing) #print-overlay { display: none !important; }
	body { background: #fff; }
}