/* Unified primary color for buttons, modals, and controls */
	:root { --app-primary: #2563eb; }

	/* Apply primary brand color to all primary buttons */
	.btn.primary,
	.btn.primary:hover,
	.btn.primary:focus,
	.btn.primary:active,
	.btn.primary:visited { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #fff !important; }

	/* Ensure modal primary buttons match the app primary color */
	.show-modal .btn.primary,
	.show-modal .modal-footer .btn.primary,
	.modal .btn.primary { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #fff !important; }

	/* Primary small buttons too */
	.btn-small.primary,
	.show-modal .file-field .btn.primary,
	.show-modal .file-field .btn-small.primary { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #fff !important; }

	/* Radio/checkbox accent color (modern browsers) */
	input[type="radio"], input[type="checkbox"] { accent-color: var(--app-primary); }
	.show-modal input[type="radio"], .show-modal input[type="checkbox"] { accent-color: var(--app-primary); }

	/* Make inline indicators and focused accents consistent */
	.show-modal .material-icons, .show-modal .modal-content .badge { color: var(--app-primary); }

	/* Modal button and form control styling */
	.show-modal .btn.primary, .show-modal .modal-footer .btn.primary, .modal .btn.primary { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #fff !important; }
	.show-modal .btn.grey, .show-modal .modal-footer .btn.grey { background: #6b7280 !important; border-color: #6b7280 !important; color: #fff !important; }
	.show-modal .file-field .btn.primary, .show-modal .file-field .btn-small.primary { background: var(--app-primary) !important; border-color: var(--app-primary) !important; color: #fff !important; }
	.show-modal input[type="radio"].with-gap:checked + span:before,
	.show-modal input[type="radio"].with-gap:focus + span:before,
	.show-modal input[type="checkbox"]:checked + span:before { border-color: var(--app-primary) !important; }
	.show-modal input[type="radio"].with-gap:checked + span:after,
	.show-modal input[type="checkbox"]:checked + span:after { background-color: var(--app-primary) !important; }
	.show-modal .switch .lever { background-color: #cbd5e1; }
	.show-modal .switch input:checked + .lever { background-color: var(--app-primary) !important; }

	/* Make shop-tab-button active color use same variable (redundant but ensures consistency) */
	.shop-tab-button.active, .shop-tab-button:hover { background-color: var(--app-primary); color: #fff; border-color: var(--app-primary); }

/* Banner modal manager responsive cards */
.dukan-banner-manager-item { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 8px; border: 1px solid #e0d4c3; border-radius: 12px; background: #fff8f5; width: 100%; max-width: 520px; box-sizing: border-box; }
.dukan-banner-manager-item img { width: 96px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid #f1dfca; flex-shrink: 0; }
.dukan-banner-manager-item > div { min-width: 0; flex: 1; }
.dukan-banner-manager-item .btn.red { min-width: 96px; }

@media only screen and (max-width: 420px) {
.dukan-banner-manager-item { gap: 8px; }
.dukan-banner-manager-item .btn.red { min-width: 72px; }
}

/* =========================================================================
   iOS: stop Safari zooming the page when an input is tapped.
   =========================================================================
   iPhone Safari automatically zooms in whenever the user focuses an input
   whose font-size is under 16px - and it does NOT zoom back out afterwards,
   which is why the search bar was leaving staff unable to read the list
   below it. 16px is the threshold iOS itself uses; nothing else prevents
   this (maximum-scale in the viewport tag does not).

   Two separate causes were fixed here:
   1. .searchbar input declares no font-size, so it inherited the 14.4px
      that comes from body{font-size:0.9rem} in styles.css.
   2. common.css forces every modal input/select/textarea to 13px, so the
      same zoom happened on the add/edit order forms too. The heights are
      nudged up alongside it so 16px text is not cramped in a 32px box.

   Scoped to phone-sized screens, so desktop is untouched.
   ========================================================================= */
@media only screen and (max-width: 600px) {
	.searchbar input,
	.searchbar input[type="text"],
	.searchbar input[type="search"] {
		font-size: 16px !important;
	}

	.modal .modal-content input,
	.modal .modal-content select,
	.modal .modal-content textarea {
		font-size: 16px !important;
		height: 38px !important;
	}
}

/* =========================================================================
   Customer details popup - SCOPED to this popup only.
   =========================================================================
   Everything below is under .modal.customer-popup or body.customer-popup-open.
   Those classes are added by custom.js when this popup opens and removed by
   common.js on the next open and on close, so NOTHING here can affect the
   add-order form, grocery items, colour picker or any other modal.

   STRUCTURE - important, this was got wrong once already:
   In common.css (~line 1046) .modal is NOT the visible box. It is a
   full-width TRANSPARENT positioning wrapper stretched from top:5% to
   bottom:5%. The visible white box is .modal-content inside it
   (background:#fff, display:inline-block, centred by text-align on the
   wrapper). Sizing or colouring .modal itself turns that invisible wrapper
   into a tall full-height panel - which is exactly what made the desktop
   popup a narrow strip down the middle of the screen. All sizing and
   colour therefore belongs on .modal-content, never on .modal.

   common.css also sets min-height:150px on .modal-content, which forces
   height even when there are only a few lines, so that is cleared too.
   ========================================================================= */
.modal.customer-popup .modal-content {
	width: 340px !important;
	max-width: 90% !important;
	min-height: 0 !important;
	height: auto !important;
	background: rgba(255, 255, 255, 0.5);
	border: 2px solid #000000;
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	padding: 0 !important;
	overflow: hidden;
}

/* Solid white panel behind the name and phone numbers, so those stay fully
   legible however busy the order list behind the popup is. This is the
   first .col in the template - the block holding h1 plus the two h2 rows. */
.modal.customer-popup .customer-details > .col.s12:first-child {
	background: #ffffff;
	padding: 14px 16px 12px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* Everything below the white panel keeps the see-through background. */
.modal.customer-popup .customer-details > .col.s12 + .col.s12 {
	padding: 0 16px !important;
}

.modal.customer-popup .customer-details h1 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 8px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	color: #111827;
}

/* Label left, value right. styles.css floats the value; flex is more
   predictable and stops a long number colliding with the label. */
.modal.customer-popup .customer-details h2 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 400;
	color: #4b5563;
	margin: 0;
	padding: 4px 0;
}

.modal.customer-popup .customer-details h2 span {
	float: none;
	font-weight: 600;
	color: #111827;
	text-align: right;
	word-break: break-word;
}

/* Small uppercase captions for Note / Order Note. */
.modal.customer-popup .customer-details h3 {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #4b5563;
	margin: 10px 0 2px 0;
}

.modal.customer-popup .customer-details .mg-t-15 {
	margin-top: 10px !important;
}

/* Action icons in a tight row of round buttons. */
.modal.customer-popup .customer-details .mg-t-30 {
	margin-top: 12px !important;
	padding: 12px 16px 14px 16px;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	gap: 12px;
}

.modal.customer-popup .customer-details .call-customer,
.modal.customer-popup .customer-details .whatsapp-customer,
.modal.customer-popup .customer-details .edit-icon,
.modal.customer-popup .customer-details .delete-icon,
.modal.customer-popup .customer-details .add-order-icon {
	background-color: rgba(255, 255, 255, 0.9);
	background-size: 55%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	width: 38px;
	height: 38px;
	cursor: pointer;
	/* mg-l-15 is redundant now the row uses gap; cancelling it keeps the
	   icons evenly spaced instead of drifting to the right. */
	margin-left: 0 !important;
}

/* Lighten the dark backdrop so the order amounts behind stay readable.
   Scoped to the body class, so every other modal keeps its normal overlay. */
body.customer-popup-open .modal-overlay {
	opacity: 0.15 !important;
	background-color: #000;
}

@media only screen and (max-width: 600px) {
	.modal.customer-popup .modal-content {
		width: 300px !important;
		max-width: 88% !important;
	}

	.modal.customer-popup .customer-details .call-customer,
	.modal.customer-popup .customer-details .whatsapp-customer,
	.modal.customer-popup .customer-details .edit-icon,
	.modal.customer-popup .customer-details .delete-icon,
	.modal.customer-popup .customer-details .add-order-icon {
		width: 36px;
		height: 36px;
	}
}

/* =========================================================================
   Desktop: use the empty space either side, and show two cards per row.
   =========================================================================
   styles.css (line ~1580, inside its own @media(min-width:993px) block)
   caps the whole layout at 800px on desktop and centres it. That is the
   white space on both sides. This block widens that to 1200px and lays the
   delivery cards out two across, so roughly 6 cards are visible at once
   instead of 3.

   CRITICAL - why the long selector lists below are not optional:
   styles.css does not only set max-width:800px. It also POSITIONS several
   floating elements by calculating against that same 800 figure:
       margin-left: calc((100% - 800px)/2)     <- header, filters, whatsapp
       right:       calc(((100% - 800px)/2)+20px)  <- the green + button,
                                                      back button, and the
                                                      set-delivery-colour button
   If the container is widened without updating those too, the buttons stay
   anchored to where the old 800px edge used to be and end up floating in
   the middle of the page. Every one of them is repeated here with 1200px.

   This block loads after styles.css, so it wins without needing !important.
   Everything is inside min-width:993px, so phones and tablets are untouched.

   To change the width later, replace 1200px everywhere in this block - all
   four places must match or the buttons will drift again.
   ========================================================================= */
@media only screen and (min-width: 993px) {
	body,
	.tab-content-container,
	.dashboard-filters,
	.header-inner,
	.btn.submit-order-btn,
	.header-inner .page-title,
	.navbar-fixed nav,
	footer.order-summary {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	.dashboard-filters,
	.header-inner,
	a.whatsapp,
	#add-to-home-screen-button,
	#add-to-home-screen-instructions {
		margin-left: calc((100% - 1200px)/2);
	}

	.back-button,
	.btn.submit-order-btn,
	.btn.add-order,
	.btn.set-delivery-color {
		right: calc(((100% - 1200px)/2) + 20px);
		left: auto;
	}

	/* Two delivery cards per row. align-items:flex-start stops a tall card
	   (one with a long address or a note) from stretching the short card
	   beside it to match its height.

	   display uses !important for a specific reason: #deliveryOrders is not
	   just a container, it IS the tab panel. Every time Materialize switches
	   tabs it writes display:block as an INLINE style straight onto this
	   element. An inline style beats a normal stylesheet rule, so without
	   !important the two-column layout was correct on first load and then
	   collapsed back to a single column as soon as the user went to
	   Completed and returned to Delivery. An !important declaration in a
	   stylesheet does outrank a non-important inline style, so this holds.
	   Do not remove it.

	   Scoped to .active on purpose: Materialize puts class "active" only on
	   the panel of the selected tab. Without .active this rule also overrode
	   the display:none Materialize sets when you switch AWAY from Delivery,
	   so on desktop the Delivery cards stayed visible underneath the
	   Expected / Completed cards. Do not remove .active. */
	#deliveryOrders.active {
		display: flex !important;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	#deliveryOrders .card.delivery-order {
		width: calc(50% - 20px);
		box-sizing: border-box;
	}
}

/* =========================================================================
   Short screens: slightly tighter delivery cards.
   =========================================================================
   IMPORTANT - DO NOT reduce the top padding on the payment column
   (.pd-t-30). That 30px is NOT spare space: it is clearance for three
   absolutely-positioned elements that sit across the top-right of every
   card - the added-by badge (top:0), the drag handle (top:2px) and the
   delivery-colour dot (top:5px), all defined in styles.css. Reducing it
   makes the "Paid" button overlap them. This was tried and reverted.

   Only spacing that cannot cause overlap is adjusted here, so the saving
   is modest (roughly 10-12px per card) rather than the 35-40px originally
   hoped for. Fitting significantly more cards would need the card layout
   itself reworked, not just padding tweaks.

   CAVEAT on max-height: on Android, opening the on-screen keyboard shrinks
   the viewport height, so this rule also applies briefly on tall phones
   while someone is typing. That is harmless here (slightly tighter cards
   for a moment) but is the reason no layout-critical rule belongs in this
   block.

   No font sizes are changed - text stays exactly as readable as it is now.
   ========================================================================= */
@media only screen and (max-height: 700px) {
	.card.delivery-order {
		margin-top: 4px;
		margin-bottom: 6px;
	}

	.card.delivery-order label.paid-unpaid {
		margin-bottom: 2px;
	}

	.card.delivery-order .payment-status-action {
		margin-bottom: 3px;
	}
}