/*
 * Bijnez brand layer on top of Tabler core (MIT, docs.tabler.io).
 * Loaded after tabler.min.css so these custom-property overrides win.
 *
 * Locked 2026-09-24: match go.bijnez.com's own identity (black + Bijnez
 * Yellow + white, plain backgrounds) instead of inventing a separate one -
 * black is the primary action colour everywhere, yellow is spent on exactly
 * one thing at a time (the "Your Turn" section and its CTA), same discipline
 * EditQR already uses (black Test/-Ve Review buttons, one yellow Save).
 * The 8-stage badge colours are unrelated to branding - they exist purely so
 * an agent can scan the list fast - and are kept as already speced.
 */

:root {
	--bijnez-yellow: #fab406;
	--bijnez-yellow-soft: #fff8d6;
	--bijnez-attention-bg: #fffdf4;
	--bijnez-yellow-ink: #3d2b00;

	--bijnez-ink: #0f172a;
	--bijnez-muted: #667085;
	--bijnez-muted-2: #98a2b3;
	--bijnez-canvas: #f7f8fa;
	--bijnez-surface: #ffffff;
	--bijnez-border: #e4e7ec;
	--bijnez-border-strong: #d0d5dd;

	--bijnez-interactive: #14161a;
	--bijnez-interactive-hover: #000000;
	--bijnez-danger: #ef4444;

	/* pipeline stage colours - badges/dots/tabs only, never large fills (brief section 3/7).
	   One fg/bg pair per stage, ~10-15% tint bg, shared by the stage-tab chip
	   (dot + corner count badge) and the card's stage pill so both read as the
	   same colour language (design brief, 2026-09-26). */
	--stage-all-fg: #475569;        --stage-all-bg: #e9ecf1;
	--stage-token-fg: #52647a;      --stage-token-bg: #eef2f7;
	--stage-design-fg: #9333ea;     --stage-design-bg: #f3e8ff;
	--stage-submitted-fg: #2563eb;  --stage-submitted-bg: #eaf2ff;
	--stage-production-fg: #f97316; --stage-production-bg: #fff0e5;
	--stage-crp-fg: #d99a00;        --stage-crp-bg: #fff7d6;
	--stage-dispatch-fg: #06a6c9;   --stage-dispatch-bg: #e3f8fc;
	--stage-shipready-fg: #16a34a;  --stage-shipready-bg: #e8f8ee;
	--stage-complete-fg: #22c55e;   --stage-complete-bg: #eafbf0;
	--stage-sentback-fg: #dc2626;   --stage-sentback-bg: #fdeaea;

	--bijnez-radius-sm: 8px;
	--bijnez-radius-md: 12px;
	--bijnez-radius-card: 20px;
	--bijnez-card-shadow: 0 4px 14px rgba(16, 24, 40, 0.05);

	/* Tabler's own tokens, pointed at the palette above so its components fall in line */
	--tblr-primary: var(--bijnez-interactive);
	--tblr-primary-rgb: 20, 22, 26;
	--tblr-success: #15803d;
	--tblr-success-rgb: 21, 128, 61;
	--tblr-danger: var(--bijnez-danger);
	--tblr-danger-rgb: 217, 45, 32;
	--tblr-body-bg: var(--bijnez-canvas);
	--tblr-body-color: var(--bijnez-ink);
	--tblr-border-color: var(--bijnez-border);
	--tblr-secondary-color: var(--bijnez-muted);
	--tblr-muted: var(--bijnez-muted);
	--tblr-border-radius: var(--bijnez-radius-md);
	--tblr-border-radius-sm: var(--bijnez-radius-sm);
	--tblr-border-radius-lg: var(--bijnez-radius-card);
	--tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
	/* height:auto is load-bearing - do not drop it while Tabler is loaded.
	   Tabler core sets `body{height:100%;min-height:100%}`, which locks the
	   body box to the viewport instead of letting it grow with its content.
	   The cards then OVERFLOW that locked box and the padding-bottom below
	   lands inside it, above the overflow, adding no space after the last
	   card at all - so the list's last card sat permanently half-hidden
	   behind the fixed bottom-nav/FAB. Only staff-orders.html loads Tabler,
	   which is why only that screen showed it. (2026-09-26) */
	height: auto;
	min-height: 100%;

	/* Bottom padding has to clear the FAB, which floats above the bottom-nav:
	   its top edge sits ~132px up (76px offset + 56px own height). The rest
	   is slack for iOS Safari's URL bar, which shrinks while you drag and
	   springs back on release - env(safe-area-inset-bottom) covers only the
	   hardware home indicator, never that toolbar. */
	padding: 12px 12px calc(180px + env(safe-area-inset-bottom)) 12px;
	font-family: var(--tblr-font-sans-serif);
	color: var(--bijnez-ink);
}

:focus-visible {
	outline: 2px solid var(--bijnez-interactive);
	outline-offset: 2px;
}

h1 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	margin: 0;
}

/* Search field (restyled 2026-09-28 - Swapnil: "does not look professional").
   Three things were wrong: it had no max-width so on desktop it stretched into
   a ~1200px-wide slab of empty input; it used the heavy surface+strong-border
   treatment of a primary form field when search is a utility control that
   should recede; and it set outline:none without replacing it, so clicking in
   gave no feedback at all. Now a pill - matching the stage-tab chips directly
   below it - on a soft canvas fill, capped to a sane width on desktop. */
.search-row-full {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: var(--bijnez-canvas);
	border: 1px solid var(--bijnez-border);
	border-radius: 999px;
	padding: 0 14px;
	margin: 4px 0 14px 0;
	color: var(--bijnez-muted-2);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-row-full .ti { font-size: 17px; flex-shrink: 0; }

.search-row-full input {
	flex: 1 1 auto;
	border: none;
	margin: 0;
	padding: 9px 0;
	min-height: 0;
	background: transparent;
	color: var(--bijnez-ink);
	font-size: 14px;
}
.search-row-full input::placeholder { color: var(--bijnez-muted-2); }
.search-row-full input:focus { outline: none; }
/* Real focus feedback, since the input's own outline is suppressed - the whole
   pill lifts to white with a soft ring instead. */
.search-row-full:focus-within {
	background: var(--bijnez-surface);
	border-color: var(--bijnez-border-strong);
	box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.06);
}

.section-title {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	margin: 14px 0 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.section-title .count {
	color: var(--bijnez-muted);
	font-weight: 500;
	font-size: 14px;
}

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 14px 0 8px;
}
.section-title-row .section-title { margin: 0; }

.sort-toggle {
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	color: var(--bijnez-muted);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	padding: 4px 2px;
}
.sort-toggle i { font-size: 15px; }
.sort-toggle:hover { color: var(--bijnez-ink); }

.subtitle {
	color: var(--bijnez-muted);
	font-size: 0.85rem;
	margin-bottom: 16px;
}

.hint {
	font-size: 0.8rem;
	color: var(--bijnez-muted);
	margin-top: 12px;
}

/* ================= APP BAR ================= */

.app-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--bijnez-surface);
	border-bottom: 1px solid var(--bijnez-border);
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
	margin: -12px -12px 14px -12px;
	padding: 0 14px;
}

.app-bar-brand {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.beta-badge { align-self: center; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
	background: linear-gradient(135deg, #fff4c2, #ffe48a); color: #5c3d00; border: 1px solid #f5c84c;
	font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
	box-shadow: 0 1px 4px rgba(250, 180, 6, .25); white-space: nowrap; flex: none; }

.app-bar-logo {
	height: 26px;
	width: auto;
	display: block;
}

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bijnez-interactive);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	letter-spacing: .02em;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	flex-shrink: 0;
}
.avatar::-webkit-details-marker { display: none; }

.profile-menu { position: relative; }

.profile-panel {
	position: absolute;
	right: 0;
	top: 44px;
	background: var(--bijnez-surface);
	border: 1px solid var(--bijnez-border);
	border-radius: var(--bijnez-radius-md);
	box-shadow: var(--bijnez-card-shadow);
	padding: 10px;
	min-width: 190px;
	z-index: 50;
}

.profile-panel .agent-name {
	font-weight: 600;
	font-size: 14px;
	padding: 6px 8px;
}

.profile-panel a {
	display: block;
	padding: 8px;
	border-radius: var(--bijnez-radius-sm);
	color: var(--bijnez-ink);
	text-decoration: none;
	font-size: 14px;
}
.profile-panel a:hover { background: var(--bijnez-canvas); }

/* ================= PIPELINE STAGE TABS ================= */

.stage-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	overflow-y: visible;
	margin: 0 -12px 10px -12px;
	padding: 10px 12px 8px 12px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.stage-tabs::-webkit-scrollbar { display: none; }

/* Each tab is a tinted chip, not a pill or an underline-only tab - the dot,
   the label and the corner count badge all read off the same --tab-fg/
   --tab-bg pair so a stage is recognisable by colour alone (design brief,
   2026-09-26). "tab-stage-*" stays its own namespace, never "stage-*"
   directly - the card badge pill (.stage-token, .stage-design, ... below,
   under ORDER CARDS) owns that name. Sharing it made every tab pick up the
   badge's fill by accident once already (2026-09-25) - keep them separate. */
.stage-tab {
	--tab-fg: var(--stage-all-fg);
	--tab-bg: var(--stage-all-bg);
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--tab-bg);
	color: var(--tab-fg);
	border: none;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	padding: 8px 14px;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.stage-tab::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tab-fg);
	flex-shrink: 0;
}

.stage-tab[data-stage="all"]         { --tab-fg: var(--stage-all-fg);        --tab-bg: var(--stage-all-bg); }
.stage-tab.tab-stage-token           { --tab-fg: var(--stage-token-fg);      --tab-bg: var(--stage-token-bg); }
.stage-tab.tab-stage-design          { --tab-fg: var(--stage-design-fg);     --tab-bg: var(--stage-design-bg); }
.stage-tab.tab-stage-submitted       { --tab-fg: var(--stage-submitted-fg);  --tab-bg: var(--stage-submitted-bg); }
.stage-tab.tab-stage-production      { --tab-fg: var(--stage-production-fg); --tab-bg: var(--stage-production-bg); }
.stage-tab.tab-stage-crp             { --tab-fg: var(--stage-crp-fg);        --tab-bg: var(--stage-crp-bg); }
.stage-tab.tab-stage-dispatch        { --tab-fg: var(--stage-dispatch-fg);   --tab-bg: var(--stage-dispatch-bg); }
.stage-tab.tab-stage-shipready       { --tab-fg: var(--stage-shipready-fg);  --tab-bg: var(--stage-shipready-bg); }
.stage-tab.tab-stage-complete        { --tab-fg: var(--stage-complete-fg);   --tab-bg: var(--stage-complete-bg); }

/* Notification-style count badge, pinned to the tab's top-right corner
   instead of sitting inline beside the label. */
.stage-tab-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--tab-fg);
	color: #fff;
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--bijnez-canvas);
}

/* Selected stage flips to a solid fill of its own colour, white text/dot/badge
   - a stronger "this one's on" signal than an underline, matching the app's
   visual language (design brief, 2026-09-26). */
.stage-tab.active {
	background: var(--tab-fg);
	color: #fff;
}
.stage-tab.active::before { background: #fff; }
.stage-tab.active .stage-tab-count {
	background: #fff;
	color: var(--tab-fg);
}

.order-card.filtered-out { display: none; }
/* !important: [data-panel="all"] carries an inline display style toggled by the
   Your Turn/All chips (turn on/off "grid"), which otherwise outranks this class. */
[data-panel].panel-empty { display: none !important; }

/* ================= YOUR TURN SECTION ================= */

.your-turn-section { margin-bottom: 6px; }

.your-turn-icon { color: var(--bijnez-yellow-ink); }

/* ================= ORDER CARDS ================= */

.order-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-items: start;
}

.card.order-card {
	background: var(--bijnez-surface);
	border: 1px solid var(--bijnez-border);
	border-radius: var(--bijnez-radius-card);
	box-shadow: var(--bijnez-card-shadow);
	overflow: hidden;
}

.order-card.your-turn {
	background: var(--bijnez-attention-bg);
	border-left: 4px solid var(--bijnez-yellow);
}

.your-turn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 44px;
	background: var(--bijnez-yellow);
	color: var(--bijnez-yellow-ink);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0 12px;
	border-radius: 12px;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Your-turn pill + the upload button sharing one row, like the mockup - the
   pill loses its own bottom margin since the row carries it instead. */
.turn-action-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.turn-action-row .your-turn-pill { margin-bottom: 0; }
/* The label is a nested flex column of its own (button + hidden filename),
   which was inflating its own cross-size and throwing off alignment against
   the pill next to it. display:contents removes the label as a layout box
   entirely so the button becomes a direct, same-height flex child of the row. */
.turn-action-row .upload-field { display: contents; }
.turn-action-row .upload-btn { flex: 1 1 160px; }

.card-body { padding: 10px 12px; }

.order-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 2px;
}

.head-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.card-chevron {
	color: var(--bijnez-muted-2);
	font-size: 16px;
	transition: transform 0.15s ease;
}

.head-right.details-toggle { cursor: pointer; }

.order-card-details.collapsible { display: none; }
.order-card.details-open .order-card-details.collapsible { display: grid; }
.order-card.details-open .card-chevron { transform: rotate(90deg); }

.customer-name {
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--bijnez-ink);
}

.phone {
	color: var(--bijnez-muted);
	font-size: 13px;
	line-height: 18px;
	text-decoration: none;
}
a.phone:hover { color: var(--bijnez-interactive); }

.badge.stage-badge {
	height: 25px;
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	border-radius: var(--bijnez-radius-sm);
	padding: 0 10px;
	white-space: nowrap;
}

.stage-token       { color: var(--stage-token-fg);      background: var(--stage-token-bg); }
.stage-design      { color: var(--stage-design-fg);     background: var(--stage-design-bg); }
.stage-submitted   { color: var(--stage-submitted-fg);  background: var(--stage-submitted-bg); }
.stage-production  { color: var(--stage-production-fg); background: var(--stage-production-bg); }
.stage-crp         { color: var(--stage-crp-fg);        background: var(--stage-crp-bg); }
.stage-dispatch    { color: var(--stage-dispatch-fg);   background: var(--stage-dispatch-bg); }
.stage-shipready   { color: var(--stage-shipready-fg);  background: var(--stage-shipready-bg); }
.stage-complete    { color: var(--stage-complete-fg);   background: var(--stage-complete-bg); }

.instruction-line {
	font-size: 13px;
	line-height: 18px;
	color: var(--bijnez-ink);
	background: var(--bijnez-yellow-soft);
	border-radius: var(--bijnez-radius-sm);
	padding: 6px 10px;
	margin: 6px 0;
	/* Cap the instruction at two lines - a compact card, not a paragraph. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.order-summary-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 6px;
}

.summary-product, .summary-agent {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.summary-product {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 14px;
	color: var(--bijnez-ink);
}
.summary-product i { color: var(--bijnez-muted-2); font-size: 15px; flex-shrink: 0; }
.summary-product span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.summary-amount {
	font-weight: 700;
	font-size: 14px;
	color: var(--bijnez-ink);
	white-space: nowrap;
}

.summary-agent {
	font-size: 13px;
	color: var(--bijnez-muted);
	white-space: nowrap;
}
.summary-agent i { font-size: 14px; }

.order-card-details {
	margin-top: 8px;
	border-top: 1px solid var(--bijnez-border);
	padding-top: 8px;
	display: grid;
	gap: 3px;
}

.detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.detail-label {
	color: var(--bijnez-muted);
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
}

.detail-value {
	color: var(--bijnez-ink);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 62%;
}

.detail-value.quiet {
	color: var(--bijnez-muted);
	font-weight: 400;
	font-size: 13px;
}

.detail-value.amount {
	color: var(--bijnez-ink);
	font-weight: 700;
}

.track-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--bijnez-interactive);
	font-weight: 600;
	text-decoration: none;
	font-size: 14px;
}
.track-link:hover { color: var(--bijnez-interactive-hover); }

.order-card-actions {
	padding: 8px 12px 10px;
	border-top: 1px solid var(--bijnez-border);
}

.order-card-actions form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Draft stage: a normal, high-volume queue, not a "needs attention" state
   (Swapnil, 2026-09-28) - small, quiet, single-line controls, no yellow
   pill, no full-size buttons. Sits below the collapsible detail grid,
   outside .order-card-actions, so it renders on every draft card regardless
   of isTurn. */
.draft-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 0 12px 10px;
}
.draft-row form { display: contents; }
.draft-row-icons {
	display: flex;
	gap: 8px;
	margin-left: auto;
}
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--bijnez-canvas);
	color: var(--bijnez-ink);
	font-size: 18px;
	cursor: pointer;
}
.icon-btn[hidden] { display: none; }
.icon-btn:hover { background: var(--bijnez-border-strong); color: var(--bijnez-ink); }
.mini-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--bijnez-border-strong);
	background: #fff;
	color: var(--bijnez-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
.mini-btn-primary {
	border-color: var(--bijnez-yellow);
	background: var(--bijnez-yellow-soft);
	color: var(--bijnez-yellow-ink);
}
.mini-upload { position: relative; overflow: hidden; }
.mini-upload input[type=file] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.mini-input {
	min-height: 30px;
	padding: 0 8px;
	border-radius: 999px;
	border: 1px solid var(--bijnez-border-strong);
	font-size: 12px;
	width: 90px;
}

/* ===== Draft order modal: Design / Shipping / Token, one unified form
   (Swapnil, 2026-09-28) - the three mini-btn triggers above all open this
   same modal, with the matching section pre-expanded. Reuses the app's own
   existing stage colours (submitted=blue, dispatch=teal, shipready=green)
   for the three sections rather than inventing a new palette. ===== */
.order-modal-backdrop {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	/* Never scroll or drag the page behind the sheet; only .order-modal-body scrolls. */
	touch-action: none;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 50;
}
.order-modal-backdrop[hidden] { display: none; }
.order-modal {
	background: var(--bijnez-surface);
	width: 100%;
	max-width: 480px;
	max-height: 90%;
	margin-top: auto;
	flex-shrink: 0;
	border-radius: 16px 16px 0 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.order-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--bijnez-border);
	font-weight: 700;
	flex-shrink: 0;
}
.order-modal-header { position: relative; }
.pull-close-hint {
	position: absolute; top: 100%; left: 0; right: 0; height: 0; overflow: hidden; z-index: 1;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	font-size: 12.5px; font-weight: 600; color: var(--bijnez-muted-2);
	opacity: 0; pointer-events: none; white-space: nowrap;
}
.pull-close-hint .ti { font-size: 15px; }
.pull-close-hint.mid { color: var(--bijnez-muted); }
.pull-close-pill { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.pull-close-hint.armed .pull-close-pill { background: var(--bijnez-danger); color: #fff; font-size: 14px; gap: 8px; padding: 10px 18px; border-radius: 999px; }
.pull-close-hint.armed .ti { font-size: 18px; }
.order-modal-close-x {
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--bijnez-muted);
	cursor: pointer;
	padding: 2px 6px;
}
/* Set on <html> and <body> while any order modal is open (staff-orders.html
   lockBodyScroll/unlockBodyScroll) - stops the background page from
   scrolling behind the modal without touching layout/position, so it can't
   fight with .order-modal-body's own scrolling the way position:fixed did.
   overscroll-behavior also blocks the BROWSER's own pull-to-refresh while a
   form is open: in a normal Safari/Chrome tab or the Android app (where the
   custom standalone-only gesture in staff-orders.html never runs) dragging
   down inside the modal would otherwise reload the whole app mid-form. */
html.modal-open, body.modal-open {
	overflow: hidden;
	overscroll-behavior-y: contain;
}
.order-modal-backdrop { overscroll-behavior: contain; }

.order-modal-body {
	touch-action: pan-y;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Required for a scrollable flex child: the default min-height:auto
	   refuses to shrink below content size, so the modal would grow past its
	   own max-height instead of scrolling inside it. */
	min-height: 0;
}
/* 🔴 The bug behind three rounds of "the modal breaks and won't scroll"
   (2026-09-28). These sections are flex items of .order-modal-body, so they
   carry the default flex-shrink:1 - and because each one sets
   overflow:hidden, its automatic minimum size is 0, meaning it can be
   squashed to nothing. So once the content was taller than the modal, the
   sections SHRANK AND CLIPPED THEMSELVES (Design's button cut in half,
   Shipping cut mid-field) instead of overflowing - and .order-modal-body's
   overflow-y:auto never scrolled, because nothing ever overflowed it.
   Identical on desktop and mobile, since it's pure layout, not touch.
   flex-shrink:0 makes them keep their natural height so the scroll works. */
.modal-section {
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
}
.modal-section-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border: none;
	background: none;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	text-align: left;
}
.modal-section-toggle .ti-chevron-down { line-height: 1; transition: transform 0.15s ease; }
.modal-section-toggle .toggle-title { display: flex; align-items: center; gap: 8px; }
.modal-section-toggle .toggle-title .ti { font-size: 18px; line-height: 1; }
.modal-section.open .modal-section-toggle .ti-chevron-down { transform: rotate(180deg); }
.modal-section-body { display: none; padding: 0 12px 12px; }
.modal-section.open .modal-section-body { display: block; }

.section-design { background: #F3E8FF; border: 1px solid #DDD0FA; }
.section-design .modal-section-toggle { color: #7C3AED; }
.section-shipping { background: #F7E8D2; border: 1px solid #E8C99E; }
.section-shipping .modal-section-toggle { color: #9A5B25; }
.section-payment { background: #E7F8EE; border: 1px solid #BCE8CC; }
.section-payment .modal-section-toggle { color: #16A34A; }

/* Share-link row: one tinted strip - who fills the address on the left, Copy
   and Share as two icon buttons on the right (Swapnil's mock, 2026-09-29). */
.self-serve-share-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px; border-radius: 12px; background: rgba(154, 91, 37, .10); }
.self-serve-badge { position: relative; flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #9A5B25; font-size: 28px; }
.self-serve-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.self-serve-text strong { font-size: 14px; font-weight: 600; color: #5a3413; }
.self-serve-text span { font-size: 12.5px; color: #6b7280; }
.public-section .self-serve-text span { color: #8a1c1c; }
.public-section .self-serve-text span strong { font-size: inherit; font-weight: 700; color: #8a1c1c; }
.self-serve-share-row .icon-btn { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; font-size: 20px; }
.self-serve-copy { background: #fff; border: 1px solid var(--bijnez-border-strong); color: #374151; }
.self-serve-copy:hover { background: #f8fafc; }
.self-serve-share { background: #fff4d6; border: 1px solid #f5d78a; color: #d97706; }
.self-serve-share:hover { background: #ffecb8; }

/* The shipping+billing fields (2026-09-28 redesign) reuse the same <label>/
   <input>/.section-heading/.checkbox-row markup as the full-page public
   form, but that form's spacing (12px label margins, 44px-tall inputs, 14-
   20px section gaps) was sized for a spacious standalone page, not a
   compact modal - reused bare it made this section feel oversized with too
   much gap on mobile (Swapnil, 2026-09-28). Compact sizing for the modal
   context here. The billing checkbox inside this form keeps its native look:
   the input[type="checkbox"] rule further down ties on specificity and wins
   on source order. */
.modal-shipping-form { display: flex; flex-direction: column; gap: 4px; }
.modal-shipping-form label {
	margin-bottom: 4px;
	font-size: 0.8rem;
}
.modal-shipping-form input,
.modal-shipping-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 38px;
	padding: 8px 10px;
	margin-top: 2px;
	border-radius: 8px;
	border: 1px solid var(--bijnez-border-strong);
	font-size: 14px;
	background: #fff;
}
.modal-shipping-form select {
	min-height: 38px;
	padding: 8px 32px 8px 10px;
	margin-top: 2px;
	border-radius: 8px;
	border: 1px solid var(--bijnez-border-strong);
	font-size: 14px;
	background-color: #fff;
}
.modal-shipping-form .section-heading {
	font-size: 0.82rem;
	margin: 10px 0 4px 0;
	padding-top: 8px;
}
.modal-shipping-form .section-heading:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.modal-shipping-form .checkbox-row {
	font-size: 0.8rem;
	margin: 2px 0;
}
.modal-upload { display: inline-flex; margin-top: 4px; }

.order-modal-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--bijnez-border);
	flex-shrink: 0;
}
.order-modal-footer .btn { flex: 1; }
.order-modal-footer form {
	flex: 1;
	display: flex;
	gap: 8px;
}
.order-modal-footer .mini-input { flex: 1; width: auto; }

/* On-tap refresh: fields the customer just changed get a brief neutral tint
   (not yellow - yellow is reserved for "your turn"), cleared on first edit.
   Hidden-state rules because .badge / the footer note set their own display. */
.modal-shipping-form .live-updated { background: #eef2f7; border-color: var(--bijnez-border-strong); }
.modal-fresh-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #eef2f7; color: var(--bijnez-ink); font-size: 12px; line-height: 1.4; }
.modal-fresh-note[hidden], .badge[hidden], .order-modal-footer[hidden] { display: none !important; }

/* ================= BUTTONS ================= */

/* appearance:none - not the fix for the 2026-09-28 invisible-text-on-hover
   bug (that was Tabler's own hover-color inversion, see
   .btn-outline-secondary below) but correct regardless: these are plain
   custom buttons, so they should never pick up native OS button chrome. */
.btn, .btn-link {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	border-radius: var(--bijnez-radius-md);
	min-height: 44px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.btn-primary, .btn-link {
	background: var(--bijnez-interactive);
	color: #fff;
}
.btn-primary:hover, .btn-link:hover { background: var(--bijnez-interactive-hover); color: #fff; }

/* 🔴 The real cause, found 2026-09-28 by checking Tabler's own CSS: it's a
   Bootstrap-style outline button, which INVERTS on hover - Tabler's own
   --tblr-btn-hover-color is a near-white (meant for a solid dark hover fill).
   We only ever overrode `background` for hover, never `color`, so Tabler's
   own near-white hover text rendered against our near-white hover
   background - invisible, not a bug guessable from `color` looking fine at
   rest. Pin both `color` and `background` explicitly on :hover so nothing
   Tabler ships underneath can invert them again. */
.btn-outline-secondary {
	background: #fff;
	color: #344054;
	border-color: var(--bijnez-border-strong);
}
.btn-outline-secondary:hover { background: var(--bijnez-canvas); color: #344054; }

.btn-cta {
	width: 100%;
	min-height: 44px;
	background: var(--bijnez-yellow);
	color: var(--bijnez-yellow-ink);
	font-size: 14px;
	font-weight: 600;
}
.btn-cta:hover { background: #e6a505; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- styled file upload, real input stays present and accessible ---- */

.upload-field { display: flex; flex-direction: column; gap: 6px; }

.upload-field input[type="file"] {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: 0; border: 0; min-height: 0;
	opacity: 0; overflow: hidden;
	clip: rect(0 0 0 0);
}

.upload-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border: none;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.06);
	color: var(--bijnez-ink);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}
.upload-field.has-file .upload-btn {
	background: #eef1ff;
	color: var(--bijnez-interactive);
}

.upload-filename {
	font-size: 12px;
	color: var(--bijnez-muted);
	display: none;
}
.upload-field.has-file .upload-filename { display: block; }

/* ================= PHONE LOOKUP STATUS (Door B) ================= */

.lookup-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	font-size: 13px;
	line-height: 18px;
	color: var(--bijnez-muted);
	background: var(--bijnez-canvas);
	border-radius: var(--bijnez-radius-sm);
	padding: 8px 10px;
	margin: -6px 0 12px 0;
}

.lookup-status.lookup-found {
	color: #15803d;
	background: #eafbf0;
}

.lookup-status.lookup-warn {
	color: #9a5b00;
	background: var(--bijnez-yellow-soft);
}

.lookup-status .lookup-dismiss {
	margin-left: auto;
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--bijnez-radius-sm);
	color: inherit;
	font: inherit;
	font-weight: 600;
	padding: 4px 10px;
	cursor: pointer;
}

/* ================= PULL-TO-REFRESH (standalone/home-screen mode only) ================= */

/* Plain text hint in the gap the page opens as you pull down. Text colour walks
   light grey -> darker grey -> dark (the action), same as the modal pull-to-close. */
.pull-refresh-hint {
	position: fixed; top: 0; left: 0; right: 0; height: 0; overflow: hidden; z-index: 60;
	display: flex; align-items: center; justify-content: center; font-family: var(--tblr-font-sans-serif);
	font-size: 12.5px; font-weight: 600; color: var(--bijnez-muted-2);
	opacity: 0; pointer-events: none; white-space: nowrap;
}
.pull-refresh-line { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.pull-refresh-hint .ti { font-size: 15px; }
.pull-close-hint.pop .pull-close-pill, .pull-refresh-hint.pop .pull-refresh-line { animation: pullPop 0.2s ease-out; }
@keyframes pullPop { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
.pull-refresh-hint.mid { color: var(--bijnez-muted); }
.pull-refresh-hint.armed, .pull-refresh-hint.refreshing { color: var(--bijnez-interactive); font-size: 14px; font-weight: 700; }
.pull-refresh-hint.armed .ti, .pull-refresh-hint.refreshing .ti { font-size: 18px; }
.pull-refresh-hint.refreshing .ti { animation: pullRefreshSpin 0.7s linear infinite; }
@keyframes pullRefreshSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ================= PUBLIC CUSTOMER PAGE (/o/{token}) ================= */

/* No login, no back-nav, no avatar - just the brand mark, centred, the way
   the login screens present it - a customer's first view of this app should
   feel like arriving somewhere branded, not landing on an internal utility
   screen (design brief, 2026-09-26). */
.public-header {
	text-align: center;
	margin: 12px 0 20px 0;
}

/* Customer page reuses the staff modal's tan Shipping section so both sides
   look alike (Swapnil, 2026-09-29). Inputs are 16px here: iPhone zooms the
   page on focus for anything smaller. */
.public-wrap { max-width: 480px; margin: 0 auto; }
.public-section { margin-bottom: 14px; }
.public-section .modal-section-toggle { cursor: default; padding-top: 12px; }
.public-section .modal-section-body { padding: 0 14px 14px; }
.public-section .modal-shipping-form input,
.public-section .modal-shipping-form textarea,
.public-section .modal-shipping-form select { font-size: 14px; }
.public-section .modal-shipping-form input[type="checkbox"] { min-height: auto; }
.public-section .btn-cta { margin-top: 14px; }

.success-panel {
	text-align: center;
	padding: 28px 20px;
}

.success-panel p {
	margin: 10px 0 0 0;
}

/* Green, not the brand black+yellow - matches the app's own "done" meaning
   already established by .badge-real/.stage-complete, kept reserved rather
   than borrowing the primary action colour for a confirmation icon. */
.success-icon {
	font-size: 32px;
	color: #15803d;
	background: var(--stage-complete-bg);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ================= LOGIN / MISC SHARED ================= */

.login-box, .card {
	background: var(--bijnez-surface);
	border: 1px solid var(--bijnez-border);
	border-radius: var(--bijnez-radius-md);
	box-shadow: 0 1px 2px rgba(24, 34, 48, 0.04);
}

.login-box {
	padding: 24px;
	max-width: 420px;
	margin: 60px auto 0 auto;
	text-align: center;
}

form label {
	display: block;
	font-size: 0.85rem;
	color: var(--bijnez-ink);
	margin-bottom: 12px;
}

.optional { color: var(--bijnez-muted); font-weight: normal; }

/* Splits a single form into labeled groups (public-order.html delivery vs
   billing, 2026-09-28) without a separate card per group. */
.section-heading {
	font-size: 0.95rem;
	margin: 20px 0 10px 0;
	padding-top: 14px;
	border-top: 1px solid var(--bijnez-border);
}
.section-heading:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }

.checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
}
/* 🔴 Keep this base rule's selector PLAIN (`input`, not `input:not(...)`).
   2026-09-28: it was briefly written as
   `input:not([type="checkbox"]):not([type="radio"])` to keep checkboxes out
   of the appearance:none reset. That worked, but each :not() adds class-level
   specificity - taking this rule from (0,0,1) to (0,2,1) and silently
   beating EVERY component-scoped `.something input` rule in this file, which
   all sit at (0,1,1). Two real bugs came straight out of that in one evening:
   the order modal's compact fields reverted to full-page sizing, and the
   search pill grew a white bordered input box nested inside itself. Exclude
   checkboxes with the separate, later rule below instead - it wins on its own
   specificity without inflating this one. */
input, select, textarea {
	width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 12px;
	margin-top: 4px;
	background: var(--bijnez-surface);
	color: var(--bijnez-ink);
	border: 1px solid var(--bijnez-border);
	border-radius: var(--bijnez-radius-sm);
	font-size: 0.95rem;
	font-family: inherit;
	min-height: 44px;
}

/* Checkboxes/radios opt back out of everything above - the appearance:none in
   particular stripped their native checkmark, so checked and unchecked looked
   identical (an empty square). Must stay AFTER the base rule. */
input[type="checkbox"], input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	width: 18px;
	height: 18px;
	min-height: auto;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	accent-color: var(--bijnez-interactive);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--bijnez-interactive);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23667085' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
}

/* form fields laid inside a plain white card (order-new, dealer-new, etc) -
   .card alone (see LOGIN / MISC SHARED below) gives border+radius+shadow but
   no inner gutter, since order cards manage their own padding via .card-body. */
form.card.form-card {
	padding: 18px 16px;
	margin-bottom: 14px;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 600;
	background: var(--bijnez-surface);
	border-bottom: 1px solid var(--bijnez-border);
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.05);
	margin: -12px -12px 14px -12px;
	padding: 14px;
	min-height: 56px;
}
.topbar a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--bijnez-interactive);
	text-decoration: none;
	font-weight: 600;
}
.topbar a i { font-size: 16px; }

/* ================= SMALL / INLINE FORM CONTROLS (tables) ================= */

.btn-sm {
	min-height: 36px;
	padding: 0 12px;
	font-size: 13px;
}

.inline-form {
	display: flex;
	gap: 8px;
	align-items: center;
}
.inline-form input {
	margin-top: 0;
	min-height: 36px;
	width: auto;
	flex: 1 1 110px;
}

table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bijnez-surface);
	border: 1px solid var(--bijnez-border);
	border-radius: var(--bijnez-radius-md);
	overflow: hidden;
	font-size: 0.88rem;
}
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bijnez-border); }
th { background: #fafbfc; color: var(--bijnez-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }

.badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	border-radius: var(--bijnez-radius-sm);
	padding: 4px 10px;
	white-space: nowrap;
}

.badge-draft { background: #fff7ed; color: #ea580c; }
.badge-real { background: #dcfce7; color: #15803d; }

.empty { color: var(--bijnez-muted); padding: 20px 0; }

.redo-banner {
	background: #fef2f2;
	color: var(--bijnez-danger);
	font-size: 0.8rem;
	padding: 8px 16px;
	border-bottom: 1px solid #fbd5d5;
}

.error-banner {
	background: #fef2f2;
	color: var(--bijnez-danger);
	border: 1px solid #fbd5d5;
	border-radius: var(--bijnez-radius-sm);
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 12px;
}

/* ================= FLOATING ACTION BUTTON ================= */

.fab-wrap {
	position: fixed;
	right: 16px;
	bottom: calc(76px + env(safe-area-inset-bottom));
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.fab {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--bijnez-yellow);
	color: var(--bijnez-yellow-ink);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(250, 180, 6, 0.45);
	transition: transform 0.15s ease;
}
.fab.open { transform: rotate(45deg); }

.fab-menu {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	animation: fabIn 0.15s ease;
}

@keyframes fabIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.fab-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.fab-menu-label {
	background: var(--bijnez-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: var(--bijnez-radius-sm);
	white-space: nowrap;
	box-shadow: var(--bijnez-card-shadow);
}

.fab-menu-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--bijnez-surface);
	border: 1px solid var(--bijnez-border);
	color: var(--bijnez-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	box-shadow: var(--bijnez-card-shadow);
	flex-shrink: 0;
}

/* ================= BOTTOM NAV (mobile) ================= */

.bottom-nav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 40;
	display: flex;
	background: var(--bijnez-surface);
	border-top: 1px solid var(--bijnez-border);
	box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.05);
	padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	color: var(--bijnez-muted);
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	position: relative;
	cursor: pointer;
	background: none;
	border: none;
	font-family: inherit;
}

.bottom-nav-item i { font-size: 20px; }

.bottom-nav-item.active { color: var(--bijnez-interactive); }
.bottom-nav-item.active::after {
	content: "";
	position: absolute;
	top: 4px;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--bijnez-yellow);
}

.bottom-nav-more-panel {
	position: fixed;
	right: 12px;
	bottom: 68px;
	background: var(--bijnez-surface);
	border: 1px solid var(--bijnez-border);
	border-radius: var(--bijnez-radius-md);
	box-shadow: var(--bijnez-card-shadow);
	padding: 8px;
	min-width: 180px;
	z-index: 50;
}
.bottom-nav-more-panel a {
	display: block;
	padding: 10px 10px;
	border-radius: var(--bijnez-radius-sm);
	color: var(--bijnez-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.bottom-nav-more-panel a:hover { background: var(--bijnez-canvas); }

@media (min-width: 900px) {
	body { padding: 20px 24px; }
	.app-bar { margin: -20px -24px 18px -24px; padding: 0 24px; }
	.shell, .order-grid { max-width: 1280px; }
	/* A search box has no business being 1200px wide - it's a control, not a
	   content column. Full-width stays the right call on a phone. */
	.search-row-full { max-width: 380px; }
	.order-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
	.bottom-nav { display: none; }
	body { padding-bottom: 24px; }
	.fab-wrap { bottom: 24px; right: 24px; }
}

/* Textareas size themselves to their content (see autogrow.js); the manual
   drag handle and inner scrollbar would only fight that. */
textarea { resize: none; overflow: hidden; }

/* Design / Shipping / Token progress chips on the draft card. Plain = not
   started, amber + clock = in progress (link sent to customer or partly
   filled), green + check = done. Amber here is "waiting on the customer",
   a different meaning from the yellow your-turn pill - kept orange-toned so
   the two never read as the same signal. */
.chip { gap: 5px; }
.chip .ti { display: none; font-size: 15px; }
.chip-done { background: #e9f8ee; border-color: #9fdcb3; color: #16783a; }
.chip-done .chip-i-done { display: inline-block; }
.chip-progress { background: #fff2dc; border-color: #f3bf6a; color: #a85a00; }
.chip-progress .chip-i-progress { display: inline-block; }

/* Payment proof cards (Token + Balance): up to 5 thumbnails, dashed add tile, full-screen viewer */
.proof-card { border: 1px solid var(--bijnez-border-strong); border-radius: 14px; background: #fff; padding: 12px; }
.proof-card + .proof-card { margin-top: 12px; }
.proof-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.proof-card-title { font-weight: 600; flex: 1; min-width: 0; }
.proof-amount { color: #6b7280; font-weight: 500; margin-left: 4px; }
.proof-count { display: inline-flex; align-items: center; gap: 5px; background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.proof-count i { display: none; }
.proof-count.has { background: #dcfce7; color: #15803d; }
.proof-count.has i { display: inline-block; }
.proof-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.proof-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.proof-add-tile { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; color: #475569; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center; padding: 4px; }
.proof-add-tile i { font-size: 22px; }
.proof-add-tile[hidden] { display: none; }
.proof-add-tile.busy { opacity: .6; pointer-events: none; }
.proof-grid.no-proofs .proof-add-tile { flex: 1 1 auto; width: auto; height: 84px; flex-direction: row; gap: 8px; font-size: 14px; }
.proof-thumb { flex: 0 0 auto; width: 84px; height: 84px; padding: 0; border: 1px solid var(--bijnez-border-strong); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.proof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-thumb[hidden] { display: none; }
.proof-thumb-sm { width: 52px; height: 52px; border-radius: 8px; }
.proof-error { margin: 8px 0 0; font-size: 13px; color: #b91c1c; }
.proof-error[hidden] { display: none; }
.proof-hint { margin: 8px 0 0; font-size: 12.5px; color: #6b7280; }
.proof-history { margin-top: 12px; border-top: 1px dashed #e5e7eb; padding-top: 10px; font-size: 13px; }
.proof-history summary { cursor: pointer; color: #6b7280; font-weight: 600; }
.proof-history ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.proof-history li { display: flex; gap: 10px; align-items: center; }
.proof-history-text { color: #374151; line-height: 1.4; }
.autosave-status { margin: 12px 0 0; font-size: 13px; color: #6b7280; }
.autosave-status.saving { color: #a85a00; }
.autosave-status.saved { color: #15803d; }
.autosave-status.error { color: #b91c1c; }
.proof-lightbox { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; flex-direction: column; align-items: stretch; }
.proof-lightbox[hidden] { display: none; }
.proof-lb-top { position: relative; flex: 0 0 auto; height: 60px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; }
.proof-lightbox-close { position: absolute; top: 9px; left: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.proof-lb-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.proof-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
/* Zoom: the photo grows inside the stage only, so the close button and the bottom buttons stay usable. */
.proof-lb-stage { overflow: hidden; }
.proof-lb-stage img { cursor: zoom-in; user-select: none; -webkit-user-drag: none; will-change: transform; }
.proof-lightbox.zoomed .proof-lb-stage img { cursor: grab; border-radius: 0; }
.proof-lightbox.zoomed .proof-lb-nav { display: none; }
.proof-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; }
.proof-lb-nav[hidden] { display: none; }
.proof-lb-prev { left: 8px; }
.proof-lb-next { right: 8px; }
.proof-lb-msg { flex: 0 0 auto; margin: 0; padding: 8px 16px 0; text-align: center; font-size: 14px; color: #fca5a5; }
.proof-lb-msg[hidden] { display: none; }
.proof-lb-actions { flex: 0 0 auto; display: flex; gap: 12px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.proof-lb-actions[hidden] { display: none; }
.proof-lb-btn { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; }
.proof-lb-replace { background: #2b2f36; }
.proof-lb-delete { background: #dc2626; }
.proof-lb-delete.confirming { background: #991b1b; }
.proof-lightbox.busy .proof-lb-btn { opacity: .5; pointer-events: none; }

/* Draft row stays on ONE line whether chips show a tick or not: a ticked chip
   is wider, and used to push the truck/copy buttons onto a second row. Tighter
   chip padding + smaller icon buttons leave room for all three ticked. A card
   with a Claim button has one extra chip, so only that one may wrap. */
.draft-row { flex-wrap: nowrap; gap: 4px; }
.draft-row:has(.mini-form) { flex-wrap: wrap; }
.draft-row .chip { padding: 0 8px; gap: 3px; flex: 0 1 auto; min-width: 0; }
.draft-row .chip .ti { font-size: 13px; }
.draft-row-icons { flex: 0 0 auto; gap: 4px; }
.draft-row-icons .icon-btn { width: 30px; height: 30px; font-size: 16px; }

/* ================= NO AUTO-ZOOM ON FOCUS (iOS zooms any field under 16px) ================= */
@media (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* Cancel order - quiet red text button at the bottom of the sheet, plus the in-page confirm. */
.cancel-order-btn {
	flex-shrink: 0;
	align-self: flex-end;
	display: inline-flex; align-items: center; gap: 6px;
	margin: 6px 0 4px;
	padding: 10px 16px;
	border: 1px solid var(--bijnez-danger);
	border-radius: 10px;
	background: none;
	color: var(--bijnez-danger);
	font: inherit; font-weight: 600;
	cursor: pointer;
}
.confirm-backdrop {
	position: fixed; inset: 0; z-index: 90;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.55);
}
.confirm-backdrop[hidden] { display: none; }
.confirm-dialog {
	width: 100%; max-width: 360px;
	padding: 20px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.confirm-dialog h3 { margin: 0 0 8px; font-size: 18px; }
.confirm-dialog p { margin: 0 0 10px; }
.confirm-error { color: var(--bijnez-danger); font-weight: 600; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 14px; }
.btn.btn-danger { background: var(--bijnez-danger); border-color: var(--bijnez-danger); color: #fff; }
.btn.btn-danger:disabled { opacity: 0.6; }
.confirm-actions.step-1 { flex-direction: row-reverse; }
.nog-dialog { max-width: 420px; }
.nog-step { font-size: 12px; font-weight: 700; color: var(--bijnez-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.nog-count { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 10px 0 6px; }
.nog-count span { font-size: 56px; font-weight: 800; line-height: 1; color: var(--bijnez-ink); font-variant-numeric: tabular-nums; }
.nog-count small { font-size: 14px; color: var(--bijnez-muted); font-weight: 600; }
.nog-note { color: var(--bijnez-danger); font-weight: 700; text-align: center; }
.nog-actions { flex-wrap: wrap; }
.nog-actions .btn { flex: 1 1 auto; }
.order-card:has(.order-modal-trigger) { cursor: pointer; }

/* ================= SETTINGS (admin: stages per person) ================= */

.settings-wrap { padding: 16px 12px 96px 12px; max-width: 560px; margin: 0 auto; }
.settings-lead { margin: 6px 0 0 0; }
.settings-people { margin-top: 8px; flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.settings-people .person-chip { text-decoration: none; }
.settings-card { padding: 4px 14px 14px 14px; }
.settings-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px 0; }
.settings-card-title { font-size: 15px; font-weight: 700; }
.settings-saved { font-size: 12px; font-weight: 600; color: var(--bijnez-muted); }
.settings-saved.bad { color: var(--bijnez-danger); }
.settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px solid var(--bijnez-border);
	cursor: pointer;
}
.settings-chip { cursor: inherit; }
.settings-row input[type="checkbox"] { width: 22px; height: 22px; }
.settings-note { font-size: 12px; color: var(--bijnez-muted); padding-top: 10px; border-top: 1px solid var(--bijnez-border); }

/* ================= READY PHOTOS + 4 CHIPS + MERGED GREEN CHIP ================= */

/* Fourth section of the order sheet: standee ready photos (sky blue, like the other three) */
.section-ready { background: #E6F1FE; border: 1px solid #BBD5FB; }
.section-ready .modal-section-toggle { color: #2563EB; }

/* Four chips no longer fit one row with the three icon buttons on a phone: let the icons drop to the next line */
.draft-row { flex-wrap: wrap; }
.draft-row-icons { margin-left: auto; }

/* Design + Shipping + Token all done: the three chips fold into one loosely-stacked green chip */
.chip-trio { display: contents; }
.chip-trio:not(.all-done) .chip-merged { display: none; }
.chip-merged { display: inline-flex; align-items: center; gap: 6px; }
.tick-stack { display: inline-flex; align-items: center; }
.tick-stack > span { width: 16px; height: 16px; border-radius: 50%; background: #16a34a; border: 1.5px solid #e9f8ee; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; }
.tick-stack > span:first-child { margin-left: 0; }
.tick-stack .ti { display: inline-block !important; font-size: 10px; color: #fff; }

/* View-only sheet sections: no add tile, and a plain note when nothing has been added */
.proof-card[data-editable="false"] .proof-add-tile { display: none !important; }
.proof-card[data-editable="false"] .proof-grid.no-proofs::after { content: "Nothing added yet"; font-size: 13px; color: var(--bijnez-muted); padding: 6px 2px; }
fieldset.ro-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ro-fieldset:disabled input, fieldset.ro-fieldset:disabled textarea { background: #f3f4f6; color: var(--bijnez-ink); opacity: 1; }

/* ================= ROCK-SOLID BOTTOM BAR (iPhone) ================= */
/* A fixed bar can still be dragged or nudged on iPhone: by the rubber-band bounce
   at the ends of the page, and while the browser re-measures the screen mid-scroll.
   1) no bounce at all, 2) the bar and the + button get their own GPU layer so the
   scroll cannot move them. The More panel is a fixed child of the bar; a transformed
   parent makes it position against the bar, which sits at the same bottom edge, so
   it lands exactly where it did before. */
html, body { overscroll-behavior-y: none; }
.bottom-nav, .fab-wrap {
	transform: translate3d(0, calc(var(--lost, 0px) + var(--pan, 0px)), 0);
	-webkit-transform: translate3d(0, calc(var(--lost, 0px) + var(--pan, 0px)), 0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* ================= CHIP STRIP: swipe sideways, truck + copy stay fixed ================= */
.draft-row { flex-wrap: nowrap; align-items: center; gap: 6px; }
.chip-scroll {
	display: flex; align-items: center; gap: 4px;
	flex: 1 1 auto; min-width: 0;
	overflow-x: auto; overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
	touch-action: pan-x pan-y;
}
.chip-scroll::-webkit-scrollbar { display: none; }
@media (hover: hover) { .chip-scroll { scrollbar-width: thin; padding-bottom: 4px; } }
.draft-row .chip-scroll .chip { flex: 0 0 auto; min-width: auto; }
.draft-row-icons { flex: 0 0 auto; margin-left: 0; }
/* three greens folded: tap the green chip to open them up (they stay open until the card reloads) */
.chip-trio.all-done:not(.expanded) .chip:not(.chip-merged) { display: none; }
.chip-trio.all-done.expanded .chip:not(.chip-merged) { display: inline-flex; }
.chip-trio.all-done.expanded .chip-merged { display: none; }
.photos-locked { display: none !important; }

/* ================= SHIPMENT SECTION (indigo) ================= */
.section-shipment { background: #EEF0FF; border: 1px solid #CDD2FA; }
.section-shipment .modal-section-toggle { color: #4F46E5; }
.tracking-field { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: #4F46E5; }
.tracking-field input { margin-top: 4px; background: #fff; }
.tracking-field input:disabled { background: #f3f4f6; color: var(--bijnez-ink); opacity: 1; }

/* Customer photo viewer buttons (same shape as the staff viewer's Replace / Delete) */
.cust-lb-download { background: #2b2f36; text-decoration: none; }
.cust-lb-wa { background: #16a34a; }

/* ================= DEALER WALLETS (cards) ================= */
.dealer-card { padding: 14px; margin-top: 12px; }
.dealer-head { display: flex; align-items: center; gap: 12px; }
.dealer-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: var(--bijnez-interactive); color: #fff; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.dealer-who { flex: 1 1 auto; min-width: 0; }
.dealer-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.dealer-sub { font-size: 12px; color: var(--bijnez-muted); margin-top: 2px; }
.dealer-balance { flex: 0 0 auto; font-size: 20px; font-weight: 800; letter-spacing: -0.2px; color: #16783a; }
.dealer-credit { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bijnez-border); }
.dealer-amount { position: relative; flex: 1 1 auto; min-width: 0; }
.dealer-amount input { margin-top: 0; padding-left: 28px; }
.dealer-rupee { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bijnez-muted); font-weight: 600; pointer-events: none; }
.dealer-credit-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--bijnez-radius-sm); background: var(--bijnez-yellow); color: var(--bijnez-yellow-ink); font: 700 14px/1 inherit; cursor: pointer; }
.dealer-credit-btn .ti { font-size: 18px; }

/* Dealer wallets - compact sizes (Swapnil: "small size of all, not this big").
   The amount box keeps 16px text on purpose: anything smaller makes iPhone zoom in on tap. */
.dealer-page h1 { font-size: 17px; line-height: 22px; }
.dealer-page .settings-lead { font-size: 12px; line-height: 1.4; margin-top: 4px; }
.dealer-card { padding: 10px 12px; margin-top: 8px; border-radius: 12px; }
.dealer-head { gap: 10px; }
.dealer-avatar { width: 32px; height: 32px; font-size: 14px; }
.dealer-name { font-size: 14px; }
.dealer-sub { font-size: 11px; margin-top: 1px; }
.dealer-balance { font-size: 16px; }
.dealer-credit { margin-top: 10px; padding-top: 10px; gap: 6px; }
.dealer-amount input { min-height: 38px; height: 38px; padding: 4px 10px 4px 24px; border-radius: 10px; }
.dealer-rupee { left: 9px; font-size: 14px; }
.dealer-credit-btn { min-height: 38px; height: 38px; padding: 0 12px; font-size: 13px; border-radius: 10px; gap: 4px; }
.dealer-credit-btn .ti { font-size: 16px; }

/* ================= DELETED ORDERS (cards, reuses the compact dealer card) ================= */
.del-avatar { background: #fef2f2; color: #dc2626; }
.del-avatar .ti { font-size: 17px; }
.del-restore { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 1px solid var(--bijnez-border-strong); border-radius: 10px; background: #fff; color: var(--bijnez-ink); font: 600 13px/1 inherit; cursor: pointer; }
.del-restore .ti { font-size: 16px; }
.del-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bijnez-border); font-size: 12px; color: var(--bijnez-muted); }
.del-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.del-meta strong { color: var(--bijnez-ink); font-weight: 600; }
.del-meta .ti { font-size: 14px; }
.del-empty { display: flex; align-items: center; gap: 8px; color: var(--bijnez-muted); font-size: 14px; }
.del-empty .ti { font-size: 20px; color: #16a34a; }

/* ================= REDO HISTORY (cards) ================= */
.redo-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.redo-count-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--bijnez-border); font-size: 12.5px; font-weight: 600; }
.redo-count-num { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff2dc; color: #a85a00; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.redo-avatar { background: #fff2dc; color: #a85a00; }
.redo-avatar .ti { font-size: 17px; }
.dealer-sub strong { color: var(--bijnez-ink); font-weight: 600; }
.redo-status { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.redo-open { background: #fff2dc; color: #a85a00; }
.redo-resolved { background: #e9f8ee; color: #16783a; }
.redo-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bijnez-border); }
.redo-reason { display: inline-block; padding: 4px 10px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 12.5px; font-weight: 700; }
.redo-line { display: flex; gap: 6px; margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--bijnez-ink); }
.redo-line .ti { flex: 0 0 auto; font-size: 15px; margin-top: 1px; color: var(--bijnez-muted); }
.redo-line em { font-style: normal; font-weight: 700; color: var(--bijnez-muted); margin-right: 4px; }
.redo-reply .ti { color: #16783a; }
.redo-body .del-meta { border-top: 0; margin-top: 6px; padding-top: 0; }

/* Top bar follows the same pan as the bottom bar, so both stay on the true edges of the screen. */
.app-bar { transform: translate3d(0, var(--pan, 0px), 0); -webkit-transform: translate3d(0, var(--pan, 0px), 0); }

/* Stage action footer inside the order sheet (Mark manufactured / Collect balance / Confirm payment / Ship) */
.stage-footer form { margin: 0; }
.stage-hint { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--bijnez-muted); }

/* The generic footer puts a form's children in one row (built for input + button).
   The stage footer is hint text above ONE full-width button, so stack it. */
.order-modal-footer.stage-footer { display: block; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.order-modal-footer.stage-footer form { display: block; }
.order-modal-footer.stage-footer .btn { width: 100%; flex: none; }

/* Sheet shipping form: 14px values, tighter boxes (Swapnil: the 16px text looked big).
   The global iPhone rule forces 16px with !important; this one is scoped to the sheet's form and
   more specific, so it wins. Tapping a field does not zoom the page because every page's viewport
   carries maximum-scale=1 (the customer page already works this way at 14px). */
@media (pointer: coarse) {
	.order-modal .modal-shipping-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
	.order-modal .modal-shipping-form textarea,
	.order-modal .modal-shipping-form select {
		font-size: 14px !important;
		min-height: 36px;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.order-modal .modal-shipping-form label { font-size: 12px; }
	.order-modal .modal-shipping-form .section-heading { font-size: 13px; }
}

/* Customer page shipping form: same compact sizes as the agent's sheet (14px values, 12px labels).
   Beats the global 16px iPhone rule the same way; zoom-on-tap stays off via maximum-scale=1. */
@media (pointer: coarse) {
	.public-section .modal-shipping-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
	.public-section .modal-shipping-form textarea,
	.public-section .modal-shipping-form select {
		font-size: 14px !important;
		min-height: 36px;
		padding-top: 6px;
		padding-bottom: 6px;
	}
	.public-section .modal-shipping-form label { font-size: 12px; }
	.public-section .modal-shipping-form .section-heading { font-size: 13px; }
}

/* ================= STAGE ACCENT BAR (left edge of every order card) ================= */
/* Same colours as the stage tabs, so a card's stage is readable from across the room. */
.card.order-card { position: relative; --accent: var(--stage-all-fg); }
.card.order-card::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 14px;
	bottom: 14px;
	width: 4px;
	border-radius: 999px;
	background: var(--accent);
	pointer-events: none;
}
.card.order-card[data-stage="draft"]                { --accent: var(--stage-token-fg); }
.card.order-card[data-stage="submitted"]            { --accent: var(--stage-submitted-fg); }
.card.order-card[data-stage="ready_for_production"] { --accent: var(--stage-production-fg); }
.card.order-card[data-stage="crp"]                  { --accent: var(--stage-crp-fg); }
.card.order-card[data-stage="dispatch"]             { --accent: var(--stage-dispatch-fg); }
.card.order-card[data-stage="payment_confirmed"]    { --accent: var(--stage-shipready-fg); }
.card.order-card[data-stage="complete"]             { --accent: var(--stage-complete-fg); }

/* Accent follows the card's own curved left edge (Swapnil: "rounded accent of curved card left side"):
   a thick coloured left border on the rounded card, so it bends round the top-left and bottom-left corners.
   Replaces the floating pill above. */
.card.order-card::before { display: none; }
.card.order-card { border-left: 5px solid var(--accent); }

/* ================= CARD STAGE LOOK: progress dashes + solid badge (replaces the left accent) ================= */
.card.order-card { border-left: 1px solid var(--bijnez-border); }
.card.order-card::before { display: none; }
.stage-dashes { display: flex; gap: 4px; margin: 0 0 10px; }
.stage-dashes span { flex: 1 1 0; height: 4px; border-radius: 999px; background: #e5e7eb; }
.stage-dashes span.on { background: var(--accent); }
.card.order-card .badge.stage-badge { background: var(--accent); color: #fff; }


/* ================= CARD DESIGN (chosen by the admin in Settings; applied through data-cd-* attributes) ================= */
/* The attributes sit on <body> on the Orders page and on the sample wrapper in Settings, so one set of rules serves both. */
[data-cd-marker="strip"] .stage-dashes, [data-cd-marker="curve"] .stage-dashes, [data-cd-marker="tint"] .stage-dashes,
[data-cd-marker="dot"] .stage-dashes, [data-cd-marker="none"] .stage-dashes { display: none; }
[data-cd-marker="strip"] .card.order-card::before { display: block; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 5px; border-radius: 0; }
[data-cd-marker="curve"] .card.order-card { border-left: 5px solid var(--accent); }
[data-cd-marker="tint"] .card.order-card { background: color-mix(in srgb, var(--accent) 7%, #fff); }
[data-cd-marker="dot"] .card.order-card .customer-name::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }

[data-cd-badge="soft"] .card.order-card .badge.stage-badge { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); }
[data-cd-badge="outline"] .card.order-card .badge.stage-badge { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
[data-cd-badge="hidden"] .card.order-card .badge.stage-badge { display: none; }

[data-cd-density="compact"] .card.order-card .card-body { padding: 7px 10px; }
[data-cd-density="compact"] .card.order-card .stage-dashes { margin-bottom: 6px; }
[data-cd-density="roomy"] .card.order-card .card-body { padding: 16px 18px; }
[data-cd-density="roomy"] .card.order-card .stage-dashes { margin-bottom: 14px; }

[data-cd-radius="sharp"] .card.order-card { border-radius: 6px; }
[data-cd-radius="round"] .card.order-card { border-radius: 30px; }
[data-cd-shadow="none"] .card.order-card { box-shadow: none; }
[data-cd-shadow="raised"] .card.order-card { box-shadow: 0 8px 22px rgba(16, 24, 40, 0.14); }

[data-cd-phone="off"] .card.order-card .phone { display: none; }
[data-cd-product="off"] .card.order-card .summary-product, [data-cd-product="off"] .card.order-card .summary-amount { display: none; }
[data-cd-agent="off"] .card.order-card .summary-agent { display: none; }
[data-cd-chips="off"] .card.order-card .chip-scroll { display: none; }
[data-cd-icons="off"] .card.order-card .draft-row-icons { display: none; }
/* never leave a card that cannot be opened */
[data-cd-chips="off"][data-cd-icons="off"] .card.order-card .draft-row-icons { display: flex; }

/* the Settings picker itself */
.cd-preview { margin: 4px 0 6px; pointer-events: none; }
.cd-preview .order-card { margin: 0; }
.cd-group { padding: 12px 0 2px; border-top: 1px solid var(--bijnez-border); margin-top: 10px; }
.cd-group-title { font-size: 12px; font-weight: 700; color: var(--bijnez-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cd-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-opt { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bijnez-border-strong); background: #fff; color: var(--bijnez-ink); font: 600 13px/1 inherit; cursor: pointer; }
.cd-opt.active { background: var(--bijnez-interactive); border-color: var(--bijnez-interactive); color: #fff; }
.cd-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 14px; cursor: pointer; }
.cd-toggle input { width: 22px; height: 22px; }
.cd-reset { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--bijnez-border-strong); background: #fff; font: 600 13px/1 inherit; cursor: pointer; }
.cd-reset .ti { font-size: 16px; }

/* "Before you can do this" checklist inside the stage action forms */
.need-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.need-item { margin: 0; }
.need-btn { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 12px;
	border: 1px solid #fecdca; background: #fef3f2; color: #b42318; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.need-label { flex: 1; }
.need-go { font-size: 16px; opacity: .7; }
.need-i-done { display: none; }
.need-item.done .need-btn { border-color: #abefc6; background: #ecfdf3; color: #067647; cursor: default; }
.need-item.done .need-i-done { display: inline; }
.need-item.done .need-i-missing, .need-item.done .need-go { display: none; }
.need-error { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #b42318; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.need-error[hidden] { display: none; }
.need-shake { animation: needShake .4s; }
@keyframes needShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.modal-section.need-flash { animation: needFlash 2.2s ease-out; }
@keyframes needFlash { 0%, 55% { box-shadow: 0 0 0 3px #f04438; } 100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0); } }

.app-bar-home { display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }

/* Stage banner under the order sheet's header: the card's own stage colour, always shown */
.modal-stage { position: relative; z-index: 2; padding: 10px 16px 12px; border-bottom: 1px solid var(--bijnez-border);
	background: color-mix(in srgb, var(--accent, #667085) 7%, #fff); flex-shrink: 0; }
.modal-stage-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-stage-pill { background: var(--accent, #667085); color: #fff; font-size: 12.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; letter-spacing: .01em; }
.modal-stage-step { font-size: 12px; font-weight: 600; color: var(--bijnez-muted); }
.ms-dashes { display: flex; gap: 4px; }
.ms-dashes span { flex: 1 1 0; height: 5px; border-radius: 999px; background: #e5e7eb; }
.ms-dashes span.on { background: var(--accent, #667085); }

/* Full-screen photo: we handle the swipes ourselves (down = close, sideways = next/previous) */
.proof-lightbox { touch-action: none; overscroll-behavior: contain; }

/* Customer name is always ONE line: what does not fit fades out at the edge instead of wrapping */
.order-card-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.customer-name, .order-modal-header [data-live="name"] {
	white-space: nowrap; overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.order-modal-header [data-live="name"] { flex: 1 1 auto; min-width: 0; margin-right: 10px; }

/* Submit footer: the required-reply message sits on its own line above the reply box + button */
[data-live="submit-form"] { flex-wrap: wrap; }
[data-live="submit-form"] .need-error { flex: 0 0 100%; margin: 0; }

/* Reply history: the whole story of an order between the team, oldest first */
.section-history { background: #F4F5F7; border: 1px solid #DDE0E6; }
.section-history .modal-section-toggle { color: #475467; }
.history-count { display: inline-block; margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #475467; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: #D0D5DD; border-radius: 2px; }
.timeline li { position: relative; padding: 0 0 14px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -16px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: #98A2B3; box-shadow: 0 0 0 3px #F4F5F7; }
.timeline .tl-start::before { background: #475467; }
.timeline .tl-stage::before { background: #2563EB; }
.timeline .tl-sentback::before { background: #F04438; }
.timeline .tl-reply::before { background: #12B76A; }
.timeline .tl-waiting::before { background: #F79009; }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--bijnez-ink); }
.tl-title strong { font-weight: 700; }
.tl-time { flex: none; font-size: 11.5px; color: var(--bijnez-muted); white-space: nowrap; }
.tl-text { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #E4E7EC; font-size: 13.5px; line-height: 1.45; color: var(--bijnez-ink); white-space: pre-wrap; word-break: break-word; }
.timeline .tl-sentback .tl-text { background: #FEF3F2; border-color: #FECDCA; }
.timeline .tl-reply .tl-text { background: #ECFDF3; border-color: #ABEFC6; }
.timeline .tl-waiting .tl-title { color: #B54708; }

/* Full-screen photo: Download + Share (image only, for WhatsApp) for everyone who can see the photo */
.proof-lb-tools { flex: 0 0 auto; display: flex; gap: 12px; padding: 12px 16px 0; }
.proof-lb-tools .proof-lb-btn { min-height: 46px; }
.proof-lb-download { background: #2b2f36; }
.proof-lb-share { background: #128c4b; }
.proof-lb-tools [hidden] { display: none; }
.proof-lb-actions { padding-top: 10px; }
.proof-lightbox:not(:has(.proof-lb-actions:not([hidden]))) .proof-lb-tools { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

/* ---- Order details form inside the Design section (brief-form.js, 2026-10-02) ----
   Design DNA: the Design section's purple stays the frame; each group is a white card,
   purple only for icons/active states, black stays the primary action, yellow only on
   the one Editor button. Fields stay at 16px so phones never auto-zoom. */
.brief-mount { display: flex; flex-direction: column; gap: 10px; }
.bf-card { background: #fff; border: 1px solid #E6D9FB; border-radius: 12px; padding: 12px; }
.bf-card > .bf-label:first-child { margin-top: 0; }
.bf-label { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: #3b2a63; }
.bf-label .ti { font-size: 17px; color: #7C3AED; }
.bf-req { color: var(--bijnez-danger); }
.bf-help { font-size: 12.5px; color: var(--bijnez-muted); margin: -2px 0 8px; line-height: 1.4; }
.bf-card select, .bf-card input[type="text"], .bf-card input[type="number"], .bf-card textarea { width: 100%; box-sizing: border-box; font-size: 16px; background: #fff; }
.bf-pills { display: flex; gap: 8px; }
.bf-pill, .bf-lpill, .bf-mpill { flex: 1; padding: 10px 8px; border: 1px solid var(--bijnez-border-strong); background: #fff; border-radius: 10px; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; }
.bf-pill.on, .bf-lpill.on, .bf-mpill.on { background: #7C3AED; border-color: #7C3AED; color: #fff; }
.bf-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-thumbs:not(:empty) { margin-bottom: 8px; }
.bf-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid #E6D9FB; background: #faf7ff; }
.bf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-thumb button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.bf-add { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; background: #faf7ff; border: 1px dashed #B79CF2; color: #7C3AED; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bf-add input { display: none; }
.bf-qrrow { display: grid; grid-template-columns: 44px 1fr; gap: 6px 8px; align-items: center; margin-top: 8px; }
.bf-qrno { font-size: 13px; font-weight: 700; color: #7C3AED; grid-row: 1; }
.bf-qrrow select { grid-column: 2; }
.bf-qrrow .bf-linkwrap { grid-column: 2; display: grid; grid-template-columns: 1fr auto auto; gap: 6px 8px; align-items: stretch; }
.bf-qropen { display: flex; align-items: center; justify-content: center; width: 44px; border: 1px solid #C9B3F5; border-radius: 10px; background: #fff; color: #6D28D9; text-decoration: none; }
.bf-qropen[hidden] { display: none; }
.bf-qropen .ti { font-size: 21px; }
.bf-qrrow .bf-linkwrap .bf-qrmsg { grid-column: 1 / -1; }
.bf-qrscan { width: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #C9B3F5; border-radius: 10px; background: #FAF7FF; color: #6D28D9; cursor: pointer; }
.bf-qrscan .ti { font-size: 22px; }
.bf-qrscan input { display: none; }
.bf-qrmsg { font-size: 12.5px; line-height: 1.35; color: var(--bijnez-muted); }
.bf-qrmsg:empty { display: none; }
.bf-qrmsg.ok { color: #15803d; }
.bf-qrmsg.err { color: var(--bijnez-danger); }
/* a subtle gap between the cards inside a product */
.bf-rest { display: flex; flex-direction: column; gap: 10px; }
.bf-rest[hidden] { display: none; }
.bf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-pilot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: #fff; border: 1px solid #E6D9FB; border-radius: 12px; padding: 12px; font-size: 13.5px; }
.bf-pilot span { color: var(--bijnez-muted); }
.bf-pilot .btn { margin-top: 4px; }
.bf-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bf-check { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #E6D9FB; font-size: 12.5px; font-weight: 600; color: #667085; }
.bf-check .ti { font-size: 15px; }
.bf-check.ok { color: #15803d; border-color: #BCE8CC; background: #E7F8EE; }
/* Chips are buttons: tap one to jump to that field. A remaining one is amber so it reads as "still to fill". */
button.bf-check { font-family: inherit; line-height: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bf-check:not(.ok) { color: #B45309; border-color: #FCD34D; background: #FFFBEB; }
.bf-check:not(.ok)::after { content: "\203A"; margin-left: 2px; font-size: 14px; }
.bf-check:active { transform: scale(.96); }
/* The field the chip jumped to: an amber ring that pulses twice, then fades. */
.bf-attn { animation: bf-attn 1.8s ease-out; border-radius: 10px; }
@keyframes bf-attn {
	0%, 40% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .0), 0 0 0 3px #F59E0B; }
	20%, 60% { box-shadow: 0 0 0 6px rgba(245, 158, 11, .25), 0 0 0 3px #F59E0B; }
	100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 0 0 rgba(245, 158, 11, 0); }
}
.bf-status { font-size: 12.5px; color: var(--bijnez-muted); }
.bf-status:empty { display: none; }
.bf-status.bf-error { color: var(--bijnez-danger); }

/* Photo cards inside the Order details form reuse .proof-card; just tighten them to sit among the white cards. */
.brief-mount .proof-card.bf-photo { border-color: #E6D9FB; }
.brief-mount .proof-card.bf-photo .bf-help { margin: 2px 0 8px; }
.brief-mount .proof-card-title .bf-req { color: var(--bijnez-danger); }

/* ---- Several products in one order: one collapsible card per product (brief-form.js) ---- */
.bf-products { display: flex; flex-direction: column; gap: 10px; }
.bf-prod { background: #fff; border: 1px solid #DDD0FA; border-radius: 14px; overflow: hidden; }
.bf-prod-head { display: flex; align-items: center; gap: 8px; padding: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.bf-prod-head:focus-visible { outline: 2px solid #7C3AED; outline-offset: -2px; }
.bf-chev { font-size: 18px; color: #7C3AED; transition: transform .15s ease; flex: 0 0 auto; transform: rotate(-90deg); }
.bf-prod.open .bf-chev { transform: rotate(0deg); }
.bf-prod-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bf-prod-no { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #7C3AED; }
.bf-prod-name { font-size: 15px; font-weight: 700; color: var(--bijnez-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-prod-sub { font-size: 12.5px; color: var(--bijnez-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-prod-sub:empty { display: none; }
.bf-prod-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.bf-prod-state:empty { display: none; }
.bf-prod-state.ok { background: #E7F8EE; color: #15803d; }
.bf-prod-state.todo { background: #F3E8FF; color: #7C3AED; }
.bf-prod-remove { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; min-width: 34px; padding: 0 8px; border: 1px solid var(--bijnez-border-strong); border-radius: 10px; background: #fff; color: #667085; font-size: 12.5px; font-weight: 600; cursor: pointer; justify-content: center; }
.bf-prod-remove .ti { font-size: 17px; }
.bf-prod-remove.confirming { background: #fdeaea; border-color: #f3b4b4; color: #b42318; }
.bf-prod-remove[hidden] { display: none; }
.bf-prod-body { display: none; padding: 0 10px 10px; border-top: 1px solid #EFE6FD; }
.bf-prod.open .bf-prod-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.bf-addproduct { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 12px; background: #fff; border: 1px dashed #B79CF2; border-radius: 12px; color: #7C3AED; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.bf-addproduct:disabled { opacity: .6; cursor: default; }

/* Read-only product summary (submitted and finished orders) */
.bf-sum { display: flex; flex-direction: column; gap: 0; padding: 4px 12px; }
.bf-sum-row { display: flex; gap: 12px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #F1EAFD; font-size: 13.5px; }
.bf-sum-row:last-of-type { border-bottom: 0; }
.bf-sum-l { flex: 0 0 auto; color: var(--bijnez-muted); font-weight: 600; }
.bf-sum-v { text-align: right; word-break: break-word; color: var(--bijnez-ink); font-weight: 600; }
.bf-sum-open { margin: 8px 0; align-self: flex-start; }

/* Banner above the read-only products: "Edit order" while it can still change, "Locked" after the artwork is made */
.bf-banner { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #DDD0FA; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.bf-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; font-size: 13px; }
.bf-banner-text strong { font-size: 13.5px; color: var(--bijnez-ink); }
.bf-banner-text span { color: var(--bijnez-muted); }
.bf-banner .btn { flex: 0 0 auto; white-space: nowrap; }
.bf-banner .bf-reopen.confirming { background: #fdeaea; border-color: #f3b4b4; color: #b42318; }
.bf-banner.locked { background: #F7F7F9; border-color: var(--bijnez-border); }
.bf-banner.locked .ti { font-size: 20px; color: #667085; }

/* ---- Order summary: a receipt of what was ordered (brief-form.js buildSummary) ---- */
.bf-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid #DDD0FA; border-radius: 12px; padding: 4px; margin-bottom: 10px; }
.bf-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: #667085; font-size: 14px; font-weight: 700; cursor: pointer; }
.bf-tab .ti { font-size: 17px; }
.bf-tab.on { background: #7C3AED; color: #fff; }
.bf-editpane[hidden], .bf-summary-host[hidden] { display: none; }
.bf-summary { display: flex; flex-direction: column; gap: 10px; }
.bf-sumcard { background: #fff; border: 1px solid #DDD0FA; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.bf-sumtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bf-sumtitles { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bf-sumno { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #7C3AED; }
.bf-sumname { font-size: 16.5px; font-weight: 800; color: var(--bijnez-ink); word-break: break-word; }
.bf-sumright { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; line-height: 1.25; }
.bf-sumqty { font-size: 13px; font-weight: 700; color: #667085; }
.bf-sumtotal { font-size: 16px; font-weight: 800; color: var(--bijnez-ink); }
.bf-sumchips { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-sumchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #F3E8FF; color: #5b21b6; font-size: 12.5px; font-weight: 700; }
.bf-sumchip.ed { background: #fff4d6; color: #92400e; }
.bf-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .25); display: inline-block; }
.bf-sumqrs { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #FAF7FF; border-radius: 12px; }
.bf-sumqr { display: flex; align-items: center; gap: 10px; }
.bf-sumqric { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid #E6D9FB; display: inline-flex; align-items: center; justify-content: center; color: #7C3AED; font-size: 19px; }
.bf-sumqrtxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bf-sumqrname { font-size: 13.5px; font-weight: 700; color: var(--bijnez-ink); }
.bf-sumqrlink { font-size: 12.5px; color: var(--bijnez-muted); word-break: break-all; }
a.bf-sumqrlink { color: #5b21b6; text-decoration: underline; }
.bf-sumphotos { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-sumphotos .bf-mini { flex: 1 1 140px; padding: 8px; border-radius: 12px; }
.bf-sumphotos .bf-mini .proof-card-head { margin-bottom: 6px; }
.bf-sumphotos .bf-mini .proof-card-title { font-size: 12.5px; }
.bf-sumnote { display: flex; gap: 8px; padding: 10px; background: #fffbea; border-radius: 12px; font-size: 13.5px; color: #5a3b00; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.bf-sumnote .ti { flex: 0 0 auto; color: #d99a00; font-size: 17px; }
.bf-summissing { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #fdeaea; color: #b42318; border-radius: 10px; font-size: 13px; font-weight: 700; }
.bf-sumgrand { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid #DDD0FA; border-radius: 14px; font-size: 14px; color: #667085; font-weight: 600; }
.bf-sumgrand strong { font-size: 17px; color: var(--bijnez-ink); }

/* ---- One compact field size for the whole order sheet (2026-10-02) ----
   The shipping form was 38px, the design form 44px, so the form felt long and uneven. Every text
   field, dropdown and note box inside the sheet is now 36px tall (16px text stays: no iPhone zoom).
   Placed last so it wins over the earlier per-form rules. */
.order-modal-backdrop input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
.order-modal-backdrop select,
.order-modal-backdrop textarea {
	min-height: 36px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 2px;
	border-radius: 8px;
}
.order-modal-backdrop select { padding-right: 30px; background-position: right 10px center; }
.order-modal-backdrop textarea { line-height: 1.35; }
.order-modal-backdrop .bf-card { padding: 10px; }
.order-modal-backdrop .bf-label { margin: 10px 0 4px; }
.order-modal-backdrop .bf-card > .bf-label:first-child { margin-top: 0; }
.order-modal-backdrop .bf-qrrow { margin-top: 6px; gap: 5px 8px; }
.order-modal-backdrop .bf-qrscan, .order-modal-backdrop .bf-qropen { width: 38px; border-radius: 8px; }
.order-modal-backdrop .bf-qrscan .ti, .order-modal-backdrop .bf-qropen .ti { font-size: 19px; }
.order-modal-backdrop .bf-pill, .order-modal-backdrop .bf-lpill, .order-modal-backdrop .bf-mpill { padding: 7px 8px; border-radius: 8px; }
.order-modal-backdrop .modal-shipping-form label { margin-bottom: 2px; }

/* QR link row: link field fills the row, the icon buttons sit flush right (also when only the QR
   button shows), the "link read" message wraps underneath. UPI gets the same row. */
.bf-qrrow .bf-linkwrap { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px 8px; }
.bf-qrrow .bf-linkwrap[hidden] { display: none; }
.bf-qrrow .bf-linkwrap .bf-qrlink { flex: 1 1 0; min-width: 0; width: auto; margin-top: 0; }
.bf-qrrow .bf-linkwrap .bf-qrscan, .bf-qrrow .bf-linkwrap .bf-qropen { flex: 0 0 38px; width: 38px; margin: 0; }
.bf-qrrow .bf-linkwrap .bf-qropen[hidden] { display: none; }
.bf-qrrow .bf-linkwrap .bf-qrmsg { flex: 1 0 100%; }
.bf-qrcard .bf-upi { margin-top: 10px; }

/* iPhone UPI app chooser (brief-form.js): a bottom sheet over everything */
.upi-sheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .45); }
.upi-sheet-box { width: 100%; max-width: 480px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: #fff; border-radius: 16px 16px 0 0; }
.upi-sheet-title { font-size: 14px; font-weight: 700; color: #3b2a63; text-align: center; padding-bottom: 2px; }
.upi-sheet-btn { min-height: 46px; border: 1px solid #DDD0FA; border-radius: 12px; background: #FAF7FF; color: #4c1d95; font-size: 16px; font-weight: 600; cursor: pointer; }
.upi-sheet-btn.cancel { background: #fff; border-color: var(--bijnez-border-strong); color: #475467; }

/* QR link row, final: the link takes the full width; the QR and open icons sit under it, right-aligned,
   in exactly the order card's small icon style (34px, soft grey, no border). */
.bf-qrrow .bf-linkwrap { gap: 4px 8px; }
.bf-qrrow .bf-linkwrap .bf-qrlink { order: 0; flex: 1 0 100%; }
.bf-qrrow .bf-linkwrap .bf-qrmsg { order: 1; flex: 1 1 0; min-width: 0; align-self: center; }
.bf-qrrow .bf-linkwrap .bf-qrscan, .bf-qrrow .bf-linkwrap .bf-qropen {
	order: 2; flex: 0 0 34px; width: 34px; height: 34px; margin: 0;
	border: 0; border-radius: 10px; background: var(--bijnez-canvas); color: var(--bijnez-ink);
}
.bf-qrrow .bf-linkwrap .bf-qrscan { margin-left: auto; }
.bf-qrrow .bf-linkwrap .bf-qrscan .ti, .bf-qrrow .bf-linkwrap .bf-qropen .ti { font-size: 18px; }
.order-modal-backdrop .bf-qrrow .bf-linkwrap .bf-qrscan, .order-modal-backdrop .bf-qrrow .bf-linkwrap .bf-qropen { width: 34px; border-radius: 10px; }
.order-modal-backdrop .bf-qrrow .bf-linkwrap .bf-qrscan .ti, .order-modal-backdrop .bf-qrrow .bf-linkwrap .bf-qropen .ti { font-size: 18px; }

/* QR slots: narrower label column so the fields sit closer to "QR 1", slightly tighter between slots */
.bf-qrrow, .order-modal-backdrop .bf-qrrow { grid-template-columns: 30px 1fr; gap: 4px 6px; margin-top: 8px; }
.bf-qrrow:first-child { margin-top: 4px; }
.bf-qrno { white-space: nowrap; }

/* Customize kit: closed panel under Notes, one row per extra item */
.bf-kit { margin-top: 12px; border: 1px solid #E6D9FB; border-radius: 12px; background: #faf7ff; overflow: hidden; }
.bf-kit[hidden], .bf-kit-body[hidden] { display: none; }
.bf-kit-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.bf-kit-title { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #3b2a63; }
.bf-kit-title .ti { font-size: 17px; color: #7C3AED; }
.bf-kit-state { font-size: 12px; font-weight: 600; color: #667085; }
.bf-kit-state.custom { color: #7C3AED; }
.bf-kit-chev { font-size: 18px; color: #7C3AED; transition: transform .15s; }
.bf-kit.open .bf-kit-chev { transform: rotate(180deg); }
.bf-kit-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.bf-kitrow { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; }
.bf-kitname { font-size: 13px; font-weight: 700; color: #7C3AED; }
.bf-kitfixed { font-size: 13.5px; color: #667085; }
.bf-sumkit-title { margin-top: 10px; font-size: 12px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .03em; }
.bf-sumqr.chg .bf-sumqrname { color: #7C3AED; }

/* Unlock: request dialog, locked-box messages, approver cards, history */
.bf-unlock-msg { display: block; margin-top: 6px; font-weight: 600; color: #7C3AED; }
.bf-unlock-msg.bad { color: var(--bijnez-danger); }
.bf-modal-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(20, 12, 40, .55); display: flex; align-items: flex-end; justify-content: center; overflow-y: auto; }
.bf-modal { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 18px 18px 0 0; padding: 18px 16px 20px; }
.bf-modal-title { font-size: 18px; font-weight: 800; color: #3b2a63; }
.bf-modal-list { margin: 10px 0 4px; padding-left: 18px; font-size: 14px; color: #475467; display: flex; flex-direction: column; gap: 6px; }
.bf-modal-list li:last-child { color: #B42318; font-weight: 600; }
.bf-modal-field { width: 100%; box-sizing: border-box; font-size: 16px; margin-top: 8px; }
.bf-modal-err { min-height: 0; margin-top: 8px; font-size: 13px; color: var(--bijnez-danger); }
.bf-modal-err:empty { display: none; }
.bf-modal-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.unlock-section { margin-bottom: 14px; }
.unlock-card { background: #fff; border: 1px solid #E6D9FB; border-radius: 14px; padding: 12px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.unlock-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.unlock-stage { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #F2ECFD; color: #6D28D9; }
.unlock-meta { font-size: 13px; color: #667085; }
.unlock-reason { font-size: 14.5px; font-weight: 700; color: #3b2a63; }
.unlock-note { font-size: 14px; color: #475467; font-style: italic; }
.unlock-warn { font-size: 13px; color: #B54708; background: #FFF6E5; border-radius: 8px; padding: 6px 8px; }
.unlock-decision-note { width: 100%; box-sizing: border-box; font-size: 16px; }
.unlock-err { font-size: 13px; color: var(--bijnez-danger); }
.unlock-err[hidden] { display: none; }
.unlock-actions { display: flex; gap: 8px; }
.unlock-actions .btn { flex: 1; }
.bf-uh { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bf-uh-title { font-size: 12px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .03em; }
.bf-uh-card { border: 1px solid #E6D9FB; border-radius: 12px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 5px; }
.bf-uh-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bf-uh-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #FFF6E5; color: #B54708; }
.bf-uh-status.st-rejected { background: #FEECEB; color: #B42318; }
.bf-uh-status.st-approved.done { background: #E7F8EE; color: #15803d; }
.bf-uh-when { font-size: 12px; color: #667085; }
.bf-uh-line { font-size: 13.5px; color: #344054; }
.bf-uh-note { font-size: 13.5px; color: #475467; font-style: italic; }
.bf-uh-sub { margin-top: 4px; font-size: 13px; font-weight: 700; color: #3b2a63; }
.bf-uh-change { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 8px; background: #faf7ff; }
.bf-uh-prod { font-size: 11.5px; font-weight: 700; color: #7C3AED; }
.bf-uh-label { font-size: 13px; font-weight: 700; color: #3b2a63; }
.bf-uh-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.bf-uh-from { color: #B42318; text-decoration: line-through; word-break: break-word; }
.bf-uh-to { color: #15803d; font-weight: 600; word-break: break-word; }
.bf-uh-arrow { color: #667085; }

/* AI review suggestion card under a Google QR */
.bf-ai { grid-column: 2; border: 1px solid #E6D9FB; border-radius: 12px; background: #faf7ff; }
.bf-ai[hidden], .bf-ai-body[hidden], .bf-ai-list[hidden] { display: none; }
.bf-ai-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.bf-ai-title { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #3b2a63; }
.bf-ai-title .ti { font-size: 16px; color: #7C3AED; }
.bf-ai-state { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #EEF0F4; color: #667085; }
.bf-ai-state.on { background: #E7F8EE; color: #15803d; }
.bf-ai-chev { font-size: 18px; color: #7C3AED; transition: transform .15s; }
.bf-ai.open .bf-ai-chev { transform: rotate(180deg); }
.bf-ai-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.bf-ai-typewrap { position: relative; }
.bf-ai-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #E6D9FB; border-radius: 10px; box-shadow: 0 8px 20px rgba(60, 40, 110, .15); }
.bf-ai-opt { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid #F2ECFD; font: inherit; font-size: 15px; color: #1d1535; cursor: pointer; }
.bf-ai-opt:last-child { border-bottom: 0; }
.bf-ai-hint { font-size: 12.5px; color: var(--bijnez-danger); }
.bf-ai-hint:empty { display: none; }

/* State boxes with suggestions (state-suggest.js) - same look as the customer's own order page. */
.state-suggest-wrap { position: relative; }
.state-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid #d5d5dc; border-radius: 8px; max-height: 220px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); margin-top: -2px; }
.state-suggest-item { padding: 12px 14px; font-size: 16px; color: #111; border-bottom: 1px solid #f0f0f3; cursor: pointer; }
.state-suggest-item:last-child { border-bottom: 0; }
.state-suggest-item:active { background: #fdf0c9; }
input.state-bad { border-color: var(--bijnez-danger, #c0392b); }

/* Narrow phones (Android): a plain 1fr column will not shrink below the select's and the link box's natural
   width, so the QR row pushed past the card and clipped the open-link and upload buttons.
   minmax(0, 1fr) lets the column shrink; the fields then fill it and the buttons stay inside the card. */
.bf-qrrow, .order-modal-backdrop .bf-qrrow { grid-template-columns: 30px minmax(0, 1fr); }
.bf-qrrow > * { min-width: 0; }
.bf-qrrow select { width: 100%; max-width: 100%; box-sizing: border-box; }
.bf-qrrow .bf-linkwrap { min-width: 0; max-width: 100%; box-sizing: border-box; }
.bf-qrrow .bf-linkwrap .bf-qrlink { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ---- Submit order review (2026-10-03): a compact receipt, read top to bottom; Confirm wakes at the end ---- */
.review-sheet { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .5); animation: rv-fade .18s ease; }
.review-box { width: 100%; max-width: 480px; max-height: 88%; display: flex; flex-direction: column; background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(16, 24, 40, .18); animation: rv-up .22s ease; overflow: hidden; }
@media (min-width: 900px) { .review-sheet { align-items: center; } .review-box { border-radius: 18px; max-height: 84%; } }
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-up { from { transform: translateY(40px); opacity: .4; } }
.review-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 10px; }
.review-head-text { flex: 1; min-width: 0; }
.review-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #3b2a63; }
.review-title .ti { font-size: 18px; color: #7c3aed; }
.review-sub { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--bijnez-muted); }
.review-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f2f4f7; color: #475467; font-size: 16px; cursor: pointer; }
.review-progress { height: 3px; background: #F1EBFD; }
.review-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #a78bfa, #7c3aed); transition: width .12s linear; }
.review-box.read .review-progress span { background: #22c55e; }
.review-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 4px 14px 8px; font-size: 12.5px; line-height: 1.4; color: var(--bijnez-ink); }
.rv-sec { padding: 10px 0; border-bottom: 1px dashed var(--bijnez-border); }
.rv-sec-title { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d28d9; }
.rv-sec-title .ti { font-size: 14px; }
.rv-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 2px 0; }
.rv-k { color: var(--bijnez-muted); }
.rv-v { font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.rv-note { margin: 0; white-space: pre-line; }
.rv-loading { color: var(--bijnez-muted); font-style: italic; }
.rv-err { color: var(--bijnez-danger); font-style: normal; }
.rv-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rv-thumb { width: 52px; height: 52px; padding: 0; border: 1px solid var(--bijnez-border); border-radius: 8px; overflow: hidden; background: #f9fafb; cursor: zoom-in; }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The order receipt (same one as the Summary tab), shrunk to fit a quick read */
.rv-order .bf-summary { gap: 8px; }
.rv-order .bf-sumcard { padding: 8px 10px; border-radius: 10px; }
.rv-order .bf-sumname { font-size: 13.5px; }
.rv-order .bf-sumchip { font-size: 11.5px; padding: 1px 7px; }
.rv-order .bf-sumqr { padding: 3px 0; gap: 6px; }
.rv-order .bf-sumqric { width: 22px; height: 22px; font-size: 13px; }
.rv-order .bf-sumqrname { font-size: 12px; }
.rv-order .bf-sumqrlink { font-size: 11.5px; }
.rv-order .bf-sumphotos { gap: 6px; }
.rv-order .bf-sumphotos .proof-thumb { width: 52px; height: 52px; }
.rv-order .bf-sumphotos .proof-card-title { font-size: 11.5px; }
.rv-order .bf-uh, .rv-order .bf-sum-open { display: none; }
.review-end { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 0 6px; font-size: 12px; font-weight: 600; color: #15803d; }
.review-end .ti { font-size: 16px; }
.review-foot { padding: 8px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bijnez-border); background: #fff; }
.review-hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #B45309; }
.review-hint .ti { animation: rv-bob 1.2s ease-in-out infinite; }
.review-box.read .review-hint { color: #15803d; }
.review-box.read .review-hint .ti { animation: none; }
@keyframes rv-bob { 50% { transform: translateY(3px); } }
.review-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.review-back { min-height: 46px; border: 1px solid var(--bijnez-border-strong); border-radius: 12px; background: #fff; color: #475467; font-size: 15px; font-weight: 600; cursor: pointer; }
.review-ok { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; transition: opacity .2s, filter .2s; }
.review-ok:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.review-box.read .review-ok:not(:disabled) { animation: rv-pop .35s ease; }
@keyframes rv-pop { 50% { transform: scale(1.03); } }

/* ---- Shipping checks (shipping-rules.js): wrong phone / pincode / address ---- */
.ship-bad, .ship-bad:focus { border-color: var(--bijnez-danger) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12) !important; }
.ship-err { display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #b42318; }
.ship-err::before { content: "!"; flex: none; width: 15px; height: 15px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center; margin-top: 1px; }
/* Address locked after Payment confirmed (order-card.html) */
.ship-lock-note { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 10px; padding: 8px 10px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ship-lock-note .ti { font-size: 15px; margin-top: 1px; }

/* ---- Order card: logo square + preview in the expanded card (2026-10-03) ---- */
.card-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.card-who-text { min-width: 0; flex: 1 1 auto; }
.card-logo { flex: none; box-sizing: border-box; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
	background: #fff; border: 1px solid var(--bijnez-border); box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.card-logo[hidden] { display: none !important; }
button.card-logo { padding: 4px; cursor: zoom-in; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease; }
button.card-logo:hover { box-shadow: 0 3px 10px rgba(16, 24, 40, .12); }
button.card-logo:active { transform: scale(.95); }
.card-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-initials { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; letter-spacing: .02em;
	color: var(--accent, #475467); border-color: color-mix(in srgb, var(--accent, #98a2b3) 25%, #fff);
	background: color-mix(in srgb, var(--accent, #98a2b3) 12%, #fff); }
.card-preview { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--bijnez-border); }
.card-preview-label { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; font-size: 11.5px; font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase; color: var(--bijnez-muted); }
.card-preview-label .ti { font-size: 15px; color: var(--accent, #667085); }
.card-preview-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.card-preview-grid.multi { grid-template-columns: 1fr 1fr; }
.card-preview-img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 200px; padding: 6px; border-radius: 14px; overflow: hidden;
	background: var(--bijnez-canvas, #f7f8fa); border: 1px solid var(--bijnez-border); cursor: zoom-in; animation: cardPrevIn .25s ease both; }
.card-preview-grid.multi .card-preview-img { max-height: 140px; }
.card-preview-img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 9px; }
.card-preview-img:active { transform: scale(.98); }
@keyframes cardPrevIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .card-preview-img { animation: none; } }
/* The general .proof-thumb (84x84, cover) must not shrink or crop these two */
.proof-thumb.card-logo { width: 52px; height: 52px; border: 1px solid var(--bijnez-border); border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); padding: 4px; }
.proof-thumb.card-logo img { object-fit: contain; }
.proof-thumb.card-preview-img { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 220px; border: 1px solid var(--bijnez-border); border-radius: 14px; box-shadow: none; background: var(--bijnez-canvas, #f7f8fa); padding: 6px; }
.card-preview-grid.multi .proof-thumb.card-preview-img { max-height: 150px; }
.proof-thumb.card-preview-img img { object-fit: contain; }
/* Order sheet header: the same logo square, 40px */
.modal-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.modal-who [data-live="name"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-logo.modal-logo, .proof-thumb.card-logo.modal-logo { width: 40px; height: 40px; border-radius: 10px; padding: 3px; }
.card-initials.modal-logo { font-size: 13.5px; padding: 0; }

/* ---- Bijnu, the pull mascot (pull-to-refresh + order sheet pull-to-close), 2026-10-04 ---- */
.pull-close-hint, .pull-refresh-hint { flex-direction: column; justify-content: flex-end; gap: 4px; padding-bottom: 8px; box-sizing: border-box; }
.bijnu-row { position: relative; flex: none; width: 176px; height: 60px; --l: 0; --r: 0; }
.bijnu-row .bj { position: absolute; bottom: 0; width: 56px; height: auto; pointer-events: none; user-select: none;
	-webkit-user-drag: none; filter: drop-shadow(0 3px 4px rgba(16, 24, 40, .18)); will-change: transform, opacity; }
/* left: hello-Bijnu slides in from the left edge, tilting up as it arrives */
.bijnu-row .bj-left { left: 4px; opacity: var(--l);
	transform: translateX(calc((1 - var(--l)) * -64px)) rotate(calc((1 - var(--l)) * -28deg)) scale(calc(.75 + var(--l) * .25)); }
/* right: wink-Bijnu slides in from the right edge */
.bijnu-row .bj-right { right: 4px; opacity: var(--r);
	transform: translateX(calc((1 - var(--r)) * 64px)) rotate(calc((1 - var(--r)) * 28deg)) scale(calc(.75 + var(--r) * .25)); }
/* centre: sleepy-Bijnu, hidden until the release point */
.bijnu-row .bj-center { left: 50%; width: 62px; opacity: 0; transform: translateX(-50%) translateY(14px) scale(.3);
	transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.bijnu-row.bj-armed .bj-left { opacity: 0; transform: translateX(56px) scale(.5) rotate(20deg); transition: transform .22s ease, opacity .2s ease; }
.bijnu-row.bj-armed .bj-right { opacity: 0; transform: translateX(-56px) scale(.5) rotate(-20deg); transition: transform .22s ease, opacity .2s ease; }
.bijnu-row.bj-armed .bj-center { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); animation: bjSnooze 1.4s ease-in-out .32s infinite; }
@keyframes bjSnooze { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); } 50% { transform: translateX(-50%) translateY(-3px) rotate(-4deg); } }
/* After a pull-to-refresh reload: sleepy-Bijnu is still there for a moment, then slides up behind the header (z-index 40). */
.bijnu-bye { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 56px); z-index: 39; height: 76px;
	display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform .55s cubic-bezier(.5, 0, .75, 0), opacity .55s ease; }
.bijnu-bye img { width: 62px; height: auto; filter: drop-shadow(0 3px 4px rgba(16, 24, 40, .18)); animation: bjSnoozeBye 1.2s ease-in-out infinite; }
.bijnu-bye.go { transform: translateY(-120px); opacity: 0; }
@keyframes bjSnoozeBye { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bijnu-row .bj, .bijnu-bye, .bijnu-bye img { animation: none !important; transition: none !important; } }
/* hello-Bijnu fills more of its picture than wink-Bijnu, so it looked bigger - a little smaller (Swapnil 2026-10-04) */
.bijnu-row .bj-left { width: 48px; }
/* All three Bijnus a step smaller (Swapnil 2026-10-04) */
.bijnu-row { height: 52px; width: 160px; }
.bijnu-row .bj-left { width: 40px; }
.bijnu-row .bj-right { width: 46px; }
.bijnu-row .bj-center { width: 52px; }
.bijnu-bye img { width: 52px; }
/* Smaller again (Swapnil 2026-10-04) */
.bijnu-row { height: 42px; width: 136px; }
.bijnu-row .bj-left { width: 32px; }
.bijnu-row .bj-right { width: 37px; }
.bijnu-row .bj-center { width: 42px; }
.bijnu-bye img { width: 42px; }

/* ---- Bijnu stage-move hop along the stage tabs (bijnu-move.js), 2026-10-04 ---- */
.bijnu-move { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; will-change: transform, opacity; --fx: 1; transition: opacity .25s ease; }
.bijnu-move.back { --fx: -1; }
.bijnu-move img { display: block; height: 40px; width: auto; transform: scaleX(var(--fx)); transform-origin: 50% 100%;
	filter: drop-shadow(0 3px 4px rgba(16, 24, 40, .22)); user-select: none; -webkit-user-drag: none; }
.bijnu-move.land img { animation: bjLand .22s ease-out; }
@keyframes bjLand {
	0% { transform: scaleX(var(--fx)) scaleY(.76); }
	60% { transform: scaleX(calc(var(--fx) * 1.06)) scaleY(1.06); }
	100% { transform: scaleX(var(--fx)) scaleY(1); }
}
.bijnu-move.out { opacity: 0; }
.stage-tab.bj-hit { animation: bjHit .36s ease; }
@keyframes bjHit { 0% { transform: none; } 35% { transform: translateY(2px) scale(.95); } 100% { transform: none; } }

/* ---- Token rockets (rockets.js), 2026-10-04 ---- */
.rk-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 3000; pointer-events: none; }
.rk-banner { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 3001; pointer-events: none;
	display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
	padding: 8px 14px 8px 8px; border-radius: 18px; background: #14161a; color: #fff;
	box-shadow: 0 10px 30px rgba(16, 24, 40, .35), 0 0 0 2px var(--bijnez-yellow, #fab406);
	transform: translateX(-50%); animation: rkIn .45s cubic-bezier(.34, 1.56, .64, 1) both; transition: opacity .35s ease, transform .35s ease; }
.rk-banner img { flex: none; height: 46px; width: auto; animation: rkBob 1s ease-in-out .45s infinite alternate; }
.rk-words { display: flex; flex-direction: column; min-width: 0; }
.rk-words strong { font-size: 15.5px; font-weight: 800; color: var(--bijnez-yellow, #fab406); }
.rk-line { font-size: 12.5px; color: #e4e7ec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-count { flex: none; margin-left: 4px; padding: 4px 9px; border-radius: 999px; background: var(--bijnez-yellow, #fab406);
	color: var(--bijnez-yellow-ink, #3d2b00); font-size: 12.5px; font-weight: 800; }
.rk-banner.rk-out { opacity: 0; transform: translateX(-50%) translateY(-14px); }
@keyframes rkIn { from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.85); } }
@keyframes rkBob { to { transform: translateY(-3px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .rk-banner, .rk-banner img { animation: none; } }
/* Happy box a bit bigger and easier to read (2026-10-04) */
.rk-banner { padding: 10px 16px 10px 10px; gap: 12px; border-radius: 20px; }
.rk-banner img { height: 58px; }
.rk-words strong { font-size: 17.5px; }
.rk-line { font-size: 13.5px; }
.rk-count { font-size: 14px; padding: 5px 11px; }
/* 10+ orders in a day: the happy box glows */
.rk-banner.rk-finale { box-shadow: 0 10px 30px rgba(16, 24, 40, .35), 0 0 0 3px #fab406, 0 0 26px 6px rgba(250, 180, 6, .55); animation: rkIn .45s cubic-bezier(.34, 1.56, .64, 1) both, rkGlow 1.2s ease-in-out .45s infinite alternate; }
@keyframes rkGlow { to { box-shadow: 0 10px 30px rgba(16, 24, 40, .35), 0 0 0 3px #ffd54a, 0 0 40px 12px rgba(250, 180, 6, .75); } }
.rk-words strong { white-space: nowrap; }
/* "#N today" pill in the top bar, next to the avatar (same look as the rocket happy box pill) */
.app-bar .rk-today { margin-left: auto; margin-right: 10px; align-self: center; white-space: nowrap;
	font-size: 13.5px; padding: 5px 11px; box-shadow: 0 2px 6px rgba(250, 180, 6, .35); }
.app-bar .rk-today[hidden] { display: none; }
.rk-today.rk-pop { animation: rkTodayPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes rkTodayPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Pill sits 10px from the avatar (bar gap 12px - 2px); its right edge stays put, longer numbers grow to the left. */
.app-bar .rk-today { margin-right: -2px; }
/* Bijnu in the happy box has a fixed size, so the box never jumps when the picture arrives */
.rk-banner img { width: 52px; height: 58px; object-fit: contain; }
/* Emoji sits on a white circle inside the yellow pill, so it stands out (2026-10-04) */
.app-bar .rk-today { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; }
.rk-today .rk-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
	background: #fff; font-size: 14px; line-height: 1; box-shadow: 0 1px 2px rgba(61, 43, 0, .25); }
/* Top-bar pill in the happy box's dark style: emoji pops on black, no white circle (Swapnil 2026-10-04) */
.app-bar .rk-today { background: #14161a; color: var(--bijnez-yellow, #fab406); padding: 5px 12px 5px 9px; gap: 5px;
	box-shadow: 0 0 0 1.5px var(--bijnez-yellow, #fab406), 0 2px 6px rgba(16, 24, 40, .25); }
.rk-today .rk-ico { width: auto; height: auto; background: none; box-shadow: none; font-size: 15px; }
/* Swapnil picked C (2026-10-04): white pill, yellow outline, dark text - minimal, blends with the top bar */
.app-bar .rk-today { background: #fff; color: var(--bijnez-ink, #0f172a);
	box-shadow: 0 0 0 1.5px var(--bijnez-yellow, #fab406), 0 2px 6px rgba(250, 180, 6, .18); }
/* Swapnil 2026-10-04 (final): back to the plain YELLOW pill; the emoji sits OUTSIDE it, on the left.
   The wrapper itself is invisible; tapping it replays today's rockets (no happy box). */
.app-bar .rk-today { background: none; color: inherit; box-shadow: none; padding: 0; gap: 6px; border-radius: 0;
	display: inline-flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app-bar .rk-today[hidden] { display: none; }
.rk-today .rk-ico { width: auto; height: auto; background: none; box-shadow: none; font-size: 20px; line-height: 1; }
.rk-today .rk-num { font-size: 13.5px; padding: 5px 11px; box-shadow: 0 2px 6px rgba(250, 180, 6, .35); }
.rk-today:active .rk-num { transform: scale(.95); }
.rk-num.rk-pop { animation: rkTodayPop .5s cubic-bezier(.34, 1.56, .64, 1); }
/* Emoji tucked closer to the pill; the pill's right edge stays where it is (2026-10-04) */
.app-bar .rk-today { gap: 2px; }
/* FINAL pill look (Swapnil 2026-10-04, from his screenshot): dark pill like the happy box - black, yellow text,
   thin yellow ring, emoji inside on the left. Tapping it still replays today's rockets. */
.app-bar .rk-today { background: none; color: #14161a; border-radius: 0;
	padding: 0; gap: 5px; font-size: 13.5px; font-weight: 800; box-shadow: none; }
/* Swapnil 2026-10-04: plain black "#N today" text, no pill, no ring. Icon sits tight against the text. */
.app-bar .rk-today { gap: 0; }
.app-bar .rk-today .rk-ico { margin-right: -3px; display: inline-block; transform-origin: 50% 85%;
	animation: rkIcoBreathe 2.4s ease-in-out infinite; }
/* Slow, subtle life: the icon breathes (tiny grow + 3 degree sway) - no flashing, stops for reduced-motion users. */
@keyframes rkIcoBreathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.28) rotate(-8deg); } }
/* 🔥 only: uneven little flicker like a real flame (grows from its base, never flashes). */
.app-bar .rk-today .rk-ico.rk-fire { animation: rkFlame 1.9s ease-in-out infinite; }
@keyframes rkFlame {
	0%, 100% { transform: scale(1, 1) rotate(0deg); }
	18% { transform: scale(.9, 1.22) rotate(-7deg); }
	37% { transform: scale(1.14, .95) rotate(6deg); }
	55% { transform: scale(.92, 1.28) rotate(-4deg); }
	78% { transform: scale(1.1, 1.05) rotate(5deg); }
}
.rk-today .rk-ico { font-size: 15px; }
.rk-today .rk-num { background: none; color: inherit; padding: 0; box-shadow: none; font-size: 13.5px; font-weight: 800; border-radius: 0; }
.rk-today:active { transform: scale(.96); }
.rk-today:active .rk-num { transform: none; }

/* ---- Order strip under the QR rows (brief-form.js renderStrip, 2026-10-04): a small row of the platform icons in
   standee order, slot 1 on the left; each slot fills in as a platform is picked, so the agent sees the layout. ---- */
.bf-qrstrip-wrap { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e4dcf5; }
.bf-qrstrip-cap { font-size: 12px; font-weight: 700; color: #6b6585; margin-bottom: 8px; letter-spacing: .02em; }
.bf-qrstrip { display: flex; gap: 6px; }
.bf-qrslot { position: relative; flex: 1 1 0; max-width: 52px; aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed #cfc6e6;
	background: #faf8ff; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; }
.bf-qrslot.on { border: 1.5px solid #e4dcf5; background: #fff; box-shadow: 0 1px 3px rgba(60, 40, 120, .12); }
.bf-qrslot-no { position: absolute; top: -6px; left: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; box-sizing: border-box;
	background: #cfc6e6; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.bf-qrslot.on .bf-qrslot-no { background: #7c3aed; }
.bf-qrslot-ico { width: 68%; height: 68%; object-fit: contain; border-radius: 8px; font-size: 22px; color: #3b2f63;
	display: flex; align-items: center; justify-content: center; animation: bfSlotPop .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes bfSlotPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Summary / review polish (2026-10-04): platform icon tiles + one tidy media panel ---- */
.bf-sumqrs { gap: 6px; padding: 8px 10px; }
.bf-sumqric { width: 30px; height: 30px; border-radius: 10px; border-color: #E6D9FB; box-shadow: 0 1px 3px rgba(60, 40, 120, .12); font-size: 17px; }
.bf-sumqric img { width: 68%; height: 68%; object-fit: contain; border-radius: 6px; display: block; }
.rv-order .bf-sumqrs { gap: 2px; padding: 6px 8px; }
.rv-order .bf-sumqric { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
/* Preview + Logo: one purple panel, two columns that start on the same line (the old cards were stacked with a
   12px margin on the second one, so Logo sat lower than Preview and both had a lot of empty space). */
.bf-sumphotos { display: flex; flex-wrap: nowrap; gap: 0; align-items: flex-start; padding: 8px 10px; background: #FAF7FF; border-radius: 12px; }
.bf-sumphotos .bf-mini.proof-card { flex: 1 1 0; min-width: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: none; }
.bf-sumphotos .bf-mini.proof-card:first-child { padding-left: 0; }
.bf-sumphotos .bf-mini.proof-card:last-child { padding-right: 0; }
.bf-sumphotos .bf-mini.proof-card + .bf-mini.proof-card { margin-top: 0; border-left: 1px solid #E6D9FB; }
.bf-sumphotos .bf-mini .proof-card-head { margin-bottom: 6px; }
.bf-sumphotos .bf-mini .proof-card-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d28d9; }
.bf-sumphotos .bf-mini .proof-grid { gap: 6px; }
.bf-sumphotos .bf-mini .proof-thumb { width: 54px; height: 54px; border: 1px solid #E6D9FB; border-radius: 10px; box-shadow: 0 1px 3px rgba(60, 40, 120, .12); background: #fff; }
.bf-sumphotos .bf-mini[data-kind^="sum-logo"] .proof-thumb img { object-fit: contain; padding: 4px; box-sizing: border-box; }
.rv-order .bf-sumphotos { padding: 6px 8px; }
.rv-order .bf-sumphotos .proof-thumb { width: 48px; height: 48px; }
/* Review sheet: grab handle + drag-down-to-close */
.review-grab { width: 38px; height: 4px; border-radius: 2px; background: #d6d0e6; margin: 8px auto 0; flex: none; }
.review-head { touch-action: none; }
/* Review sheet pull-to-close: header block stays locked (above the content), the hint grows under it. */
.review-top { position: relative; z-index: 2; flex: none; background: #fff; }
.review-scroll { position: relative; z-index: 1; }
.review-foot { position: relative; z-index: 3; }

/* Card headline before a product is picked: quiet grey instead of the placeholder product name. */
.summary-product .quiet { color: var(--bijnez-muted-2); font-weight: 500; }
.proof-amount[hidden] { display: none; }

/* ---- Packed look + box launch (2026-10-04): a parcel that is boxed and photographed but not shipped yet reads like a
   draft email - half done, almost ready. Brown carton colours on the card; little boxes launch on the first photo. ---- */
.order-card.is-packed { background: linear-gradient(180deg, #f7ecdc 0%, #f1e0c8 100%); border-color: #d6b185; }
.order-card.is-packed .card-body > .stage-dashes span.on { background: #b9854c; }
.order-card.is-packed .order-card-head .stage-badge { background: #a8703a; color: #fff; }
.order-card.is-packed .order-card-head .stage-badge::before { content: "\1F4E6\00a0"; }
.order-card.is-packed .card-logo { border-color: #d6b185; }
.rk-banner.rk-packed-box { box-shadow: 0 10px 30px rgba(16, 24, 40, .35), 0 0 0 2px #c8934f; }
.rk-banner.rk-packed-box .rk-words strong { color: #f3c58a; }
.rk-banner.rk-packed-box .rk-count { background: #c8934f; color: #2b1a05; }
.rk-banner .rk-boxico { flex: none; font-size: 40px; line-height: 1; width: 52px; text-align: center; animation: rkBob 1s ease-in-out .45s infinite alternate; }
/* Packed badge was still green: the card's accent colour drives it, so set the accent itself (beats [data-stage]). */
.card.order-card.is-packed[data-stage] { --accent: #a8703a; }
.card.order-card.is-packed[data-stage] .order-card-head .stage-badge { background: #a8703a !important; color: #fff !important; }

/* ---- Barcode step (2026-10-04): step 1 of packing, barcode scanned, no parcel photo yet. Black card, like a label. ---- */
.card.order-card.is-barcoded[data-stage] { --accent: #111827; background: linear-gradient(180deg, #2a2d33 0%, #1d2025 100%);
	border-color: #0b0c0e; color: #f3f4f6; }
.card.order-card.is-barcoded[data-stage] .order-card-head .stage-badge { background: #fff !important; color: #111827 !important; }
.card.order-card.is-barcoded[data-stage] .order-card-head .stage-badge::before { content: "\2588\2502\2588\2588\2502\2588\00a0"; letter-spacing: -1px; font-size: 9px; vertical-align: 1px; }
.order-card.is-barcoded .card-body > .stage-dashes span { background: #3f434b; }
.order-card.is-barcoded .card-body > .stage-dashes span.on { background: #f3f4f6; }
.order-card.is-barcoded .card-who-text .customer-name, .order-card.is-barcoded .summary-product, .order-card.is-barcoded .summary-amount { color: #fff; }
.order-card.is-barcoded .card-who-text .phone, .order-card.is-barcoded .summary-agent, .order-card.is-barcoded .card-chevron,
.order-card.is-barcoded .order-summary-row .ti { color: #c7cbd2; }
.order-card.is-barcoded .draft-row-icons .icon-btn { background: #3a3e45; color: #f3f4f6; }
/* the order sheet inside the card keeps its normal light look */
.order-card.is-barcoded .order-modal, .order-card.is-packed .order-modal { color: var(--bijnez-ink, #0f172a); }

/* ---- Day strip under the top bar: the day's counters (shipping person: #barcode, #packed). ---- */
.day-strip { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 6px 16px;
	background: #fff; border-bottom: 1px solid #eef0f3; font-size: 13.5px; font-weight: 800; color: #14161a; }
.day-strip[hidden], .day-count[hidden] { display: none; }
.day-count { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.day-count .rk-ico { font-size: 16px; line-height: 1; }
.day-barcode .rk-ico { font-size: 18px; color: #111827; }
.day-packed { cursor: pointer; }
.day-packed:active { transform: scale(.96); }

/* ---- Barcode box + scan icon in the Shipment section ---- */
.barcode-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; border-radius: 10px; transition: box-shadow .3s; }
.barcode-row .tracking-input { flex: 1 1 auto; min-width: 0; font-size: 16px; letter-spacing: .03em; }
.barcode-row .barcode-scan-btn { flex: none; width: 44px; height: 40px; border-radius: 10px; background: #111827; color: #fff; font-size: 22px; }
.barcode-row.bc-tick { box-shadow: 0 0 0 3px #22c55e; }
.barcode-row.bc-tick::after { content: "\2713"; color: #16a34a; font-weight: 900; font-size: 20px; animation: rkTodayPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.shipment-photos-step { margin-top: 12px; }
.barcode-first-hint { display: none; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: #b45309; }
.shipment-photos-step.needs-barcode .barcode-first-hint { display: block; }
.shipment-photos-step.needs-barcode .proof-add-tile, .shipment-photos-step.needs-barcode label:has(.proof-file-input) { opacity: .45; pointer-events: none; }

/* ---- Scanner sheet (barcode-scan.js) ---- */
.bc-sheet { position: fixed; inset: 0; z-index: 3500; display: none; flex-direction: column; background: #000; color: #fff;
	padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.bc-sheet.open { display: flex; }
body.bc-open { overflow: hidden; }
.bc-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.bc-title { font-size: 17px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.bc-title .ti { font-size: 24px; }
.bc-close { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; }
.bc-view { position: relative; flex: 1 1 auto; overflow: hidden; }
.bc-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-frame { position: absolute; left: 8%; right: 8%; top: 50%; height: 34%; transform: translateY(-50%); border-radius: 14px;
	box-shadow: 0 0 0 9999px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.85); }
.bc-laser { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 10px 2px rgba(239,68,68,.7);
	animation: bcLaser 1.6s ease-in-out infinite alternate; }
@keyframes bcLaser { from { top: 15%; } to { top: 85%; } }
.bc-msg { margin: 0; padding: 12px 16px 4px; text-align: center; font-size: 14.5px; color: #e5e7eb; }
.bc-msg.bad { color: #fca5a5; }
.bc-actions { display: flex; gap: 10px; padding: 10px 16px 16px; }
.bc-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 12px;
	background: rgba(255,255,255,.14); color: #fff; border: 0; font-size: 15px; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .bc-laser { animation: none; } }
/* Ship greyed until barcode + first parcel photo are in */
.btn.ship-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* ---- Packing drawer (2026-10-04): replaces the plain day strip. Card-style, same radius/shadow family as the order
   cards; tiles reuse the card colours (black = barcode, brown = packed). Native <details> opens and closes it. ---- */
.day-drawer { margin: 10px 16px 0; background: #fff; border: 1px solid #eceef2; border-radius: 18px;
	box-shadow: 0 2px 10px rgba(16, 24, 40, .06); overflow: hidden; }
.day-drawer-bar { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
	-webkit-tap-highlight-color: transparent; user-select: none; }
.day-drawer-bar::-webkit-details-marker { display: none; }
.day-drawer-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #667085; white-space: nowrap; }
.day-drawer-title .ti { font-size: 17px; color: #a8703a; }
.day-drawer-counts { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 800; color: #14161a; }
.day-drawer-chev { flex: none; font-size: 18px; color: #98a2b3; transition: transform .25s ease; }
.day-drawer[open] .day-drawer-chev { transform: rotate(180deg); }
.day-drawer-body { padding: 2px 14px 14px; animation: drawerIn .28s ease both; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-6px); } }
.day-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.day-tile { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; border-radius: 16px; min-height: 104px; box-sizing: border-box; }
.day-tile-ico { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 6px; }
.day-tile-num { font-size: 28px; line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; }
.day-tile-label { font-size: 13.5px; font-weight: 700; }
.day-tile-sub { font-size: 11.5px; opacity: .7; }
.tile-barcode { background: linear-gradient(160deg, #2a2d33 0%, #15171b 100%); color: #fff; }
.tile-barcode .day-tile-ico { background: rgba(255,255,255,.12); color: #fff; }
.tile-packed { background: linear-gradient(160deg, #f7ecdc 0%, #ecd6b6 100%); color: #3b2508; border: 1px solid #dfbf96; cursor: pointer;
	-webkit-tap-highlight-color: transparent; }
.tile-packed .day-tile-ico { background: rgba(255,255,255,.65); }
.tile-packed:active, .day-handover:active { transform: scale(.98); }
.day-tile-num.rk-pop { animation: rkTodayPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.day-handover { margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 16px;
	background: var(--bijnez-yellow, #fab406); color: var(--bijnez-yellow-ink, #3d2b00); text-align: left; cursor: pointer;
	box-shadow: 0 4px 14px rgba(250, 180, 6, .3); -webkit-tap-highlight-color: transparent; }
.day-handover-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.55); display: inline-flex;
	align-items: center; justify-content: center; font-size: 22px; }
.day-handover-words { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.day-handover-words strong { font-size: 15px; font-weight: 800; }
.day-handover-words small { font-size: 12px; opacity: .8; }
.day-handover > .ti { font-size: 20px; }
@media (min-width: 720px) { .day-drawer { max-width: 560px; margin-left: auto; margin-right: 16px; } }
@media (prefers-reduced-motion: reduce) { .day-drawer-body { animation: none; } }
/* Packing drawer, take 2 (Swapnil 2026-10-04): part of the top bar itself - white, full width, no gaps, no rounded
   corners, a thin line under it like the app bar. Compact: one short row closed; small one-line tiles open. */
.day-drawer { margin: 0; max-width: none; border: 0; border-bottom: 1px solid #eef0f3; border-radius: 0; box-shadow: none; background: #fff; }
@media (min-width: 720px) { .day-drawer { max-width: none; margin: 0; } }
.day-drawer-bar { padding: 6px 16px; min-height: 34px; gap: 8px; }
.day-drawer-title { font-size: 12.5px; gap: 5px; }
.day-drawer-title .ti { font-size: 15px; }
.day-drawer-counts { gap: 10px; font-size: 13px; }
.day-count .rk-ico { font-size: 14px; }
.day-barcode .rk-ico { font-size: 16px; }
.day-drawer-chev { font-size: 16px; }
@media (max-width: 380px) { .day-drawer-title span, .day-drawer-title { font-size: 0; } .day-drawer-title .ti { font-size: 15px; } }
.day-drawer-body { padding: 0 16px 10px; }
.day-tiles { gap: 8px; }
.day-tile { flex-direction: row; align-items: center; gap: 8px; min-height: 0; padding: 8px 10px; border-radius: 12px; }
.day-tile-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 16px; margin: 0; flex: none; }
.day-tile-num { font-size: 20px; }
.day-tile-label { font-size: 12.5px; line-height: 1.15; }
.day-tile-sub { display: none; }
.day-handover { margin-top: 8px; padding: 7px 12px; gap: 10px; border-radius: 12px; box-shadow: none; }
.day-handover-ico { width: 30px; height: 30px; border-radius: 9px; font-size: 18px; }
.day-handover-words strong { font-size: 14px; }
.day-handover-words small { font-size: 11.5px; }
.day-handover > .ti { font-size: 18px; }
/* Packing drawer, take 3 (Swapnil 2026-10-04): it lives INSIDE the top bar as its second row. The bar is simply
   taller - same white, same bottom line and shadow - so the counters feel like part of the app, not a new box. */
.app-bar.has-drawer { height: auto; flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
.app-bar.has-drawer > .app-bar-brand, .app-bar.has-drawer > .profile-menu { height: 52px; display: flex; align-items: center; }
.app-bar.has-drawer > .day-drawer { order: 3; flex: 0 0 auto; width: calc(100% + 28px); margin: -6px -14px 0; border: 0; background: transparent; }
@media (min-width: 900px) { .app-bar.has-drawer > .day-drawer { width: calc(100% + 48px); margin: -6px -24px 0; } }
.app-bar.has-drawer .day-drawer-bar { padding: 0 14px 8px; min-height: 28px; }
@media (min-width: 900px) { .app-bar.has-drawer .day-drawer-bar, .app-bar.has-drawer .day-drawer-body { padding-left: 24px; padding-right: 24px; } }
.app-bar.has-drawer .day-drawer-body { padding: 0 14px 10px; }

/* ---- Handover sheet (handover.js, 2026-10-04): bottom sheet on phones, centred card on desktop ---- */
.ho-backdrop { position: fixed; inset: 0; z-index: 2500; display: none; align-items: flex-end; justify-content: center;
	background: rgba(16, 24, 40, .45); }
.ho-backdrop.open { display: flex; }
body.ho-open { overflow: hidden; }
.ho-sheet { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: #fff;
	border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(16, 24, 40, .25); animation: hoUp .3s cubic-bezier(.2, .9, .3, 1) both;
	padding-bottom: env(safe-area-inset-bottom, 0px); }
@keyframes hoUp { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 720px) { .ho-backdrop { align-items: center; } .ho-sheet { border-radius: 22px; } }
.ho-grab { width: 40px; height: 4px; border-radius: 4px; background: #d0d5dd; margin: 8px auto 2px; }
.ho-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; border-bottom: 1px solid #eef0f3; }
.ho-head-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--bijnez-yellow, #fab406); display: inline-flex;
	align-items: center; justify-content: center; font-size: 22px; color: var(--bijnez-yellow-ink, #3d2b00); }
.ho-head-words { flex: 1; display: flex; flex-direction: column; }
.ho-head-words strong { font-size: 17px; font-weight: 800; }
.ho-head-words small { font-size: 12.5px; color: #667085; }
.ho-x { border: 0; background: #f2f4f7; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; color: #344054; }
.ho-body { padding: 14px 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ho-count { font-size: 14px; color: #475467; margin-bottom: 8px; }
.ho-count b { font-size: 22px; color: #14161a; margin-right: 2px; }
.ho-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid #eef0f3; border-radius: 14px; overflow: hidden; }
.ho-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid #f2f4f7; }
.ho-list li:first-child { border-top: 0; }
.ho-serial { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #14161a; display: inline-flex;
	align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ho-who { display: flex; flex-direction: column; min-width: 0; }
.ho-who strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ho-who small { font-size: 12px; color: #667085; letter-spacing: .02em; }
.ho-mail { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #344054; background: #f8f9fb; border-radius: 12px;
	padding: 10px 12px; margin: 0 0 10px; }
.ho-mail .ti { font-size: 18px; color: #667085; flex: none; }
.ho-mail.ok { background: #ecfdf3; color: #067647; }
.ho-mail.ok .ti { color: #16a34a; }
.ho-warn { font-size: 12.5px; color: #667085; margin: 0 0 12px; }
.ho-bad { font-size: 13px; color: #b42318; background: #fef3f2; border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.ho-go, .ho-close { width: 100%; min-height: 50px; border: 0; border-radius: 14px; font-size: 16px; font-weight: 800; display: inline-flex;
	align-items: center; justify-content: center; gap: 8px; }
.ho-go { background: var(--bijnez-yellow, #fab406); color: var(--bijnez-yellow-ink, #3d2b00); box-shadow: 0 4px 14px rgba(250, 180, 6, .3); }
.ho-go:disabled { opacity: .7; }
.ho-close { background: #14161a; color: #fff; margin-top: 12px; }
.ho-wait { text-align: center; color: #667085; padding: 24px 0; }
.ho-spin { display: inline-block; animation: hoSpin 1s linear infinite; }
@keyframes hoSpin { to { transform: rotate(360deg); } }
.ho-empty { text-align: center; padding: 18px 8px 8px; }
.ho-empty span { font-size: 40px; }
.ho-empty strong { display: block; font-size: 16px; margin: 6px 0 4px; }
.ho-empty p { font-size: 13px; color: #667085; margin: 0; }
.ho-done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 12px; }
.ho-tick { width: 56px; height: 56px; border-radius: 50%; background: #22c55e; color: #fff; display: inline-flex; align-items: center;
	justify-content: center; font-size: 30px; margin-bottom: 8px; animation: rkTodayPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.ho-done strong { font-size: 18px; font-weight: 800; }
.ho-done small { font-size: 12.5px; color: #667085; }
.ho-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ho-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border-radius: 14px;
	border: 1px solid #eaecf0; background: #fff; color: #14161a; font-size: 13px; font-weight: 700; text-decoration: none; }
.ho-act .ti { font-size: 22px; }
.ho-act:active, .ho-go:active { transform: scale(.98); }
/* Handover settings form */
.ho-gear { margin-right: 6px; }
.ho-set-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.ho-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: #344054; margin-bottom: 12px; }
.ho-field input { font-size: 16px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 12px; font-weight: 500; }
.ho-field small { font-weight: 500; color: #667085; font-size: 12px; }
.ho-cc-list { display: flex; flex-direction: column; gap: 8px; }
.ho-cc-row { display: flex; gap: 8px; align-items: center; }
.ho-cc-row input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 12px; font-weight: 500; }
.ho-cc-del { flex: none; width: 40px; height: 40px; border: 1px solid #e4e7ec; border-radius: 12px; background: #fff; color: #667085; font-size: 16px; display: grid; place-items: center; cursor: pointer; }
.ho-cc-add { align-self: flex-start; margin-top: 2px; border: 1px dashed #d0d5dd; background: #fff; color: #344054; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.ho-switch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #eaecf0; border-radius: 14px; margin-bottom: 12px; cursor: pointer; }
.ho-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ho-switch-ui { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: #d0d5dd; transition: background .2s; }
.ho-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.ho-switch input:checked + .ho-switch-ui { background: #22c55e; }
.ho-switch input:checked + .ho-switch-ui::after { transform: translateX(18px); }
.ho-switch-words { display: flex; flex-direction: column; }
.ho-switch-words strong { font-size: 14px; }
.ho-switch-words small { font-size: 12px; color: #667085; }

/* ---- Packed = solid kraft brown (Swapnil 2026-10-04): the final packing step should look the most "done".
   Black = labelled (barcode), brown = boxed and ready, green = shipped. Overrides the earlier pale beige. ---- */
.card.order-card.is-packed[data-stage] { --accent: #f3e3c7; background: linear-gradient(180deg, #a0703a 0%, #8b5a2b 100%);
	border-color: #6f4520; color: #fff; }
.card.order-card.is-packed[data-stage] .order-card-head .stage-badge { background: #f7ead2 !important; color: #5a3815 !important; }
.order-card.is-packed .card-body > .stage-dashes span { background: rgba(255, 255, 255, .22); }
.order-card.is-packed .card-body > .stage-dashes span.on { background: #f3e3c7; }
.order-card.is-packed .card-who-text .customer-name, .order-card.is-packed .summary-product, .order-card.is-packed .summary-amount { color: #fff; }
.order-card.is-packed .card-who-text .phone, .order-card.is-packed .summary-agent, .order-card.is-packed .card-chevron,
.order-card.is-packed .order-summary-row .ti { color: #f3e3c7; }
.order-card.is-packed .draft-row-icons .icon-btn { background: rgba(255, 255, 255, .16); color: #fff; }
.order-card.is-packed .card-logo { border-color: rgba(255, 255, 255, .35); }
/* Drawer tile follows the card */
.tile-packed { background: linear-gradient(160deg, #a0703a 0%, #8b5a2b 100%); color: #fff; border-color: #6f4520; }
.tile-packed .day-tile-ico { background: rgba(255, 255, 255, .18); }
/* The order sheet lives inside the card: give it back the normal Payment Confirmed green, so its badge and dashes
   don't take the brown/black card's cream or white (was unreadable on the white sheet). */
.card.order-card.is-packed[data-stage] .order-modal, .card.order-card.is-barcoded[data-stage] .order-modal { --accent: var(--stage-shipready-fg, #16a34a); color: var(--bijnez-ink, #0f172a); }
/* Single-order Ship retired: a quiet note under the two packing steps points to Handover */
.handover-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px;
	background: #fff8e6; color: #5c4400; font-size: 13px; line-height: 1.4; }
.handover-note .ti { font-size: 18px; color: #b07d00; flex: none; }
/* Ready note: same green field as the done steps (Swapnil 2026-10-04); yellow "what's next" until then */
.handover-note .hn-ready { display: none; }
.handover-note.ready { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.handover-note.ready .ti { color: #16a34a; }
.handover-note.ready .hn-wait { display: none; }
.handover-note.ready .hn-ready { display: inline; }
/* Two packing actions side by side in the top-bar drawer: Print labels (dark, like the barcode step) + Handover (yellow) */
.day-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.day-actions .day-handover { margin-top: 0; }
.day-handover.day-print { background: #14161a; color: #fff; }
.day-print .day-handover-ico { background: rgba(255, 255, 255, .14); color: #fff; }
.day-handover:disabled { opacity: .7; }
.day-handover-words small b { font-weight: 800; }
.ho-tick.ho-tick-dark { background: #14161a; }
.ho-act { cursor: pointer; font-family: inherit; }
.ho-actions { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* ---- Tracking section + card (fragments/tracking-card.html, 2026-10-04): last section of the customer link and of
   the staff sheet once shipped. Green section = "done", white card inside like the other sections, yellow main
   button (the one thing to tap), black/green action buttons like the photo actions. ---- */
.section-tracking { background: #ecfdf3; border: 1px solid #abefc6; }
.section-tracking .modal-section-toggle { color: #067647; }
.trk-card { background: #fff; border: 1px solid #d1fadf; border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(16, 24, 40, .05); }
.trk-top { display: flex; align-items: center; gap: 12px; }
.trk-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; background: #dcfae6; color: #067647; display: inline-flex;
	align-items: center; justify-content: center; font-size: 24px; }
.trk-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trk-words strong { font-size: 15.5px; font-weight: 800; color: #0f172a; }
.trk-words small { font-size: 12.5px; color: #667085; }
.trk-live { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #ecfdf3;
	color: #067647; font-size: 12px; font-weight: 700; white-space: nowrap; }
.trk-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: trkPulse 1.8s ease-out infinite; }
@keyframes trkPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }
.trk-number { position: relative; margin: 14px 0 12px; padding: 10px 48px 10px 12px; border: 1.5px dashed #c7d7cc; border-radius: 12px; background: #f9fafb; }
.trk-number-label { display: block; font-size: 11.5px; font-weight: 700; color: #667085; text-transform: uppercase; letter-spacing: .06em; }
.trk-number-value { display: block; font-size: 20px; font-weight: 800; letter-spacing: .08em; color: #0f172a; font-variant-numeric: tabular-nums;
	word-break: break-all; }
.trk-copy-num { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px;
	background: #fff; color: #344054; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); font-size: 18px; cursor: pointer; }
.trk-copy-num.trk-done { color: #16a34a; }
.trk-track { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; margin-top: 12px;
	background: var(--bijnez-yellow, #fab406); color: var(--bijnez-yellow-ink, #3d2b00); font-size: 16px; font-weight: 800; text-decoration: none;
	box-shadow: 0 4px 14px rgba(250, 180, 6, .3); -webkit-tap-highlight-color: transparent; }
.trk-number + .trk-track { margin-top: 0; }
.trk-track .ti { font-size: 20px; }
.trk-track .ti-external-link { font-size: 16px; opacity: .7; }
.trk-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.trk-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border: 0; border-radius: 12px;
	background: #14161a; color: #fff; font: 700 13.5px/1 inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.trk-act .ti { font-size: 18px; }
.trk-act.trk-wa { background: #16a34a; }
.trk-act.trk-done { background: #16a34a; }
.trk-track:active, .trk-act:active { transform: scale(.98); }
.trk-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: #667085; }
.trk-note .ti { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .trk-dot { animation: none; } }
/* Notes in the Handover sheet: one flowing line of text (as flex, each bold word became its own column), icon on the
   left, long emails wrap instead of running off the edge. */
.ho-mail { display: block; position: relative; padding-left: 38px; line-height: 1.45; overflow-wrap: anywhere; }
.ho-mail > .ti { position: absolute; left: 12px; top: 10px; }
.ho-act.ho-wa-excel { background: #16a34a; border-color: #16a34a; color: #fff; }
/* Step 2 gate: parcel photos wait until the label is printed (same lock as the barcode gate) */
.label-first-hint { display: none; align-items: flex-start; gap: 6px; margin: 0 0 6px; padding: 8px 10px; border-radius: 10px;
	background: #14161a; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.label-first-hint .ti { font-size: 16px; flex: none; }
.shipment-photos-step.needs-label .label-first-hint { display: flex; }
.shipment-photos-step.needs-label .proof-add-tile, .shipment-photos-step.needs-label label:has(.proof-file-input) { opacity: .45; pointer-events: none; }
/* Packing steps now sit at the end of the sheet and scroll with it */
.order-modal .pack-steps { margin-top: 12px; padding: 12px; border: 1px solid #eaecf0; border-radius: 16px; background: #fff; }
.ho-act.ho-dl-excel { background: #fff; }
/* Handover done screen: two small buttons side by side (Send on Gmail, Download Excel), same on phone and desktop */
.ho-mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ho-mini { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 12px;
	border: 1px solid #eaecf0; background: #fff; color: #14161a; font: 700 13.5px/1 inherit; cursor: pointer; white-space: nowrap;
	-webkit-tap-highlight-color: transparent; }
.ho-mini .ti { font-size: 18px; }
.ho-mini.ho-mini-gmail { background: var(--bijnez-yellow, #fab406); border-color: var(--bijnez-yellow, #fab406); color: var(--bijnez-yellow-ink, #3d2b00); }
.ho-mini:active { transform: scale(.98); }
.ho-mini-hint { margin: 8px 2px 0; font-size: 12px; color: #667085; text-align: center; line-height: 1.4; }
/* "Ready to ship" was hidden on phones 380px or narrower (most Androids). Always show it; on narrow screens shrink
   the text and gaps instead, and let the title shorten with "..." only if it truly can't fit. */
@media (max-width: 380px) {
	.day-drawer-title { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.day-drawer-title .ti { font-size: 14px; }
	.day-drawer-counts { gap: 8px; font-size: 12.5px; }
	.day-drawer-bar { gap: 6px; }
}
.day-drawer-title { display: inline-flex; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.day-drawer-counts { flex: none; }
/* Tracking card, compact (Swapnil 2026-10-04): the buttons were too big. One slim yellow main button, then three
   small light chips (Copy / Share / WhatsApp) - same on phone and desktop. */
.trk-card { padding: 12px; }
.trk-number { margin: 12px 0 10px; padding: 8px 44px 8px 12px; }
.trk-number-value { font-size: 17px; letter-spacing: .06em; }
.trk-copy-num { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
.trk-track { min-height: 40px; border-radius: 12px; font-size: 14.5px; gap: 6px; box-shadow: 0 2px 8px rgba(250, 180, 6, .25); }
.trk-track .ti { font-size: 17px; }
.trk-track .ti-external-link { font-size: 14px; }
.trk-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.trk-act { flex: 0 0 auto; min-height: 32px; padding: 0 12px; border-radius: 999px; gap: 5px; font-size: 12.5px;
	background: #f2f4f7; color: #14161a; border: 1px solid #e4e7ec; }
.trk-act .ti { font-size: 15px; }
.trk-act.trk-wa { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.trk-act.trk-done { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.trk-note { justify-content: center; margin-top: 8px; font-size: 11.5px; }
/* Scan button, techy + see-through (Swapnil 2026-10-05): glass tile (transparent indigo tint, thin outline, like the
   Shipment section), scanner icon (corner brackets + bars) and a soft red laser that sweeps up and down.
   Stretches to exactly the text box's height. */
.barcode-row { align-items: stretch; }
.barcode-row .barcode-scan-btn { position: relative; overflow: hidden; height: auto; min-height: 0; width: 52px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
	background: rgba(79, 70, 229, .08); border: 1.5px solid rgba(79, 70, 229, .45); color: #4F46E5;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.barcode-row .barcode-scan-btn .scan-ico { width: 26px; height: 26px; position: relative; z-index: 1; }
.barcode-row .barcode-scan-btn .scan-laser { position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; border-radius: 2px;
	background: #ef4444; box-shadow: 0 0 6px 1px rgba(239, 68, 68, .7); opacity: .85; animation: scanSweep 2.2s ease-in-out infinite; z-index: 2; }
@keyframes scanSweep { 0%, 100% { top: 30%; } 50% { top: 68%; } }
.barcode-row .barcode-scan-btn:hover { background: rgba(79, 70, 229, .14); }
.barcode-row .barcode-scan-btn:active { transform: scale(.96); background: rgba(79, 70, 229, .18); }
@media (prefers-reduced-motion: reduce) { .barcode-row .barcode-scan-btn .scan-laser { animation: none; } }

/* ---- Came back (Sent back / Unlocked) - Swapnil 2026-10-06: top of the list, impossible to miss ---- */
.order-card[data-redo="1"] { border: 1.5px solid #f4a3a3; box-shadow: 0 6px 22px rgba(220, 38, 38, .14); }
.comeback-banner { margin: 0; padding: 12px 14px 12px; background: linear-gradient(180deg, #fff1f1, #fff7f2);
	border-bottom: 1px solid #fbd5d5; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cb-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase;
	letter-spacing: .05em; color: #b42318; }
.cb-head .ti { font-size: 16px; }
.cb-kind { flex: 1; min-width: 0; }
.cb-resp { flex: none; font-size: 11px; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; text-transform: none; font-weight: 800; }
.cb-resp.resp-customer { background: #eaf2ff; color: #1d4ed8; }
.cb-resp.resp-sales { background: #fff4c2; color: #7a5200; }
.cb-resp.resp-design { background: #f3e8ff; color: #7e22ce; }
.cb-resp.resp-production { background: #fff0e5; color: #c2410c; }
.cb-resp.resp-other { background: #eef2f7; color: #475569; }
.cb-resp::before { content: "Responsible: "; font-weight: 600; opacity: .75; }
.cb-reason { margin-top: 6px; font-size: 15px; font-weight: 800; color: #7a1d14; line-height: 1.3; }
.cb-note { margin-top: 4px; font-size: 14px; color: #3f1d1a; line-height: 1.4; font-style: italic; }
.cb-meta { margin-top: 6px; font-size: 12px; color: #8a4a44; }
.cb-meta b { font-weight: 700; color: #6b2b25; }
.cb-todo { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #fff;
	background: #dc2626; padding: 5px 10px; border-radius: 999px; }

/* ---- Reprint (Production -> design team), Swapnil 2026-10-06 ---- */
.reprint-box { margin-top: 10px; border: 1px dashed #f4a3a3; border-radius: 14px; background: #fffafa; }
.reprint-box > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 700; color: #b42318;
	display: flex; align-items: center; gap: 6px; }
.reprint-box > summary::-webkit-details-marker { display: none; }
.reprint-box[open] > summary { border-bottom: 1px dashed #f4a3a3; }
.reprint-box form { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.reprint-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: #344054; }
.reprint-field select, .reprint-field textarea { font-size: 16px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 12px;
	font-weight: 500; background: #fff; width: 100%; }
.reprint-hint { margin: 0; font-size: 12px; color: #8a4a44; }
.reprint-btn { background: #dc2626; color: #fff; border: 0; border-radius: 12px; font-weight: 800; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.reprint-btn:hover { background: #b91c1c; color: #fff; }

/* Payment-fix footer: hint, reply, button stacked full width (it was squeezed into one row). */
.payfix-footer { display: block; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.payfix-footer form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.payfix-footer .stage-hint { margin: 0; font-size: 13px; line-height: 1.4; }
.payfix-footer .mini-input { flex: none; width: 100%; max-width: none; font-size: 16px; padding: 12px 14px; border-radius: 12px; }
.payfix-footer .btn { flex: none; width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: normal; }

/* Problem after delivery (2026-10-06): Courier chip, the agent's banner on a Complete order, photos on the approver card. */
.cb-resp.resp-courier { background: #e6f6f4; color: #0f766e; }
.bf-banner.ad-banner { background: #FFF7F2; border-color: #F8C9B0; }
.bf-banner.ad-banner .ti { font-size: 20px; color: #C2410C; }
.ad-goes { font-size: 13px; font-weight: 700; color: #C2410C; margin: -2px 0 6px; }
.ad-goes:empty { display: none; }
.ad-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-photos img, .ad-charge img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bijnez-border); display: block; }
.ad-charge { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #475467; }
.unlock-meta .cb-resp { margin-left: 6px; }
/* Photo picker in the Problem after delivery form: dashed Add tile + removable thumbnails (no native "Choose Files"). */
.ad-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ad-pick-add { width: 84px; height: 84px; border: 1.5px dashed #C9B8F2; border-radius: 12px; background: #FBF9FF; color: #6D28D9;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 700;
	line-height: 1.2; text-align: center; padding: 6px; cursor: pointer; }
.ad-pick-add .ti { font-size: 22px; }
.ad-pick-add[hidden] { display: none; }
.ad-pick-thumb { position: relative; width: 84px; height: 84px; }
.ad-pick-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--bijnez-border); display: block; }
.ad-pick-x { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #1f2937;
	color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ad-pick-x .ti { font-size: 14px; }
/* Redo order (2026-10-06): came back from Complete - orange edge + small tag at every stage until delivered again. */
.order-card.is-redo-order { border: 2px solid #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, .12); }
.redo-order-tag { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 6px; padding: 2px 9px; border-radius: 999px;
	background: #FFF1E6; color: #C2410C; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.redo-order-tag .ti { font-size: 13px; }
.redo-order-box { margin: 2px 0 8px; }
.redo-order-box .redo-order-tag { margin: 0; }
.redo-order-why { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #9A3412; }
/* Redone (redo order Complete again): indigo tag - stands apart from the green Complete look; no orange border. */
.redo-order-box.redone .redo-order-tag { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
.redo-order-box.redone .redo-order-why { color: #475467; }
/* Who sent a redo order back from Complete. */
.redo-order-by { margin-top: 3px; font-size: 12.5px; color: #344054; display: flex; align-items: center; gap: 4px; }
.redo-order-by b { font-weight: 800; color: #101828; }
.redo-order-by .ti { font-size: 14px; color: #667085; }
/* Packer's top bar (Swapnil 2026-10-06): logo, "#N today" and the avatar always stay on the first row; on a narrow
   phone the logo shrinks instead of pushing the YU circle onto a second line. The drawer still takes the next row. */
.app-bar.has-drawer > .app-bar-brand { flex: 1 1 0; min-width: 0; overflow: hidden; }
.app-bar.has-drawer > .app-bar-brand .app-bar-home { min-width: 0; flex: 0 1 auto; }
.app-bar.has-drawer > .app-bar-brand .app-bar-logo { max-width: 100%; height: auto; max-height: 26px; }
.app-bar.has-drawer > .rk-today, .app-bar.has-drawer > .profile-menu { flex: none; }
@media (max-width: 400px) { .app-bar.has-drawer { gap: 8px; } .app-bar.has-drawer .beta-badge { padding: 0 6px; font-size: 9.5px; height: 18px; } }
/* Emergency gate: "Still make it here" jumps sides on each box (Swapnil 2026-10-06). order works in row and column layouts. */
.nog-actions.nog-swap #nogNext { order: -1; }
/* Feedback (2026-10-06): the Problem / Idea sheet and the admin inbox. */
.fb-lead { font-size: 13.5px; color: #475467; margin: -4px 0 10px; line-height: 1.4; }
.fb-kinds { display: flex; gap: 8px; }
.fb-kind { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 12px;
	border: 1.5px solid var(--bijnez-border); background: #fff; font-weight: 700; font-size: 14.5px; color: #475467; cursor: pointer; }
.fb-kind .ti { font-size: 18px; }
.fb-kind.on { border-color: #6D28D9; background: #F5F0FF; color: #5B21B6; }
.fb-thanks { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 8px; text-align: center; color: #067647; }
.fb-thanks .ti { font-size: 44px; }
.fb-thanks strong { font-size: 18px; color: #101828; }
.fb-thanks span { color: #475467; }
.fb-avatar.fb-bug { background: #FEF3F2; color: #B42318; }
.fb-avatar.fb-idea { background: #FFFAEB; color: #B54708; }
.fb-msg { margin: 8px 0 6px; font-size: 14.5px; color: #101828; white-space: pre-wrap; line-height: 1.45; }
.fb-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #475467; cursor: pointer; flex: none; }
.fb-tick input { width: 20px; height: 20px; accent-color: #12B76A; }
.fb-card.fb-done { opacity: .55; }
/* Address history (2026-10-06): who typed / changed the delivery details - the proof in a wrong-address dispute. */
.addr-history { margin-top: 10px; border: 1px solid #E4E7EC; border-radius: 12px; background: #fff; }
.addr-history > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 700; color: #344054;
	display: flex; align-items: center; gap: 6px; }
.addr-history > summary::-webkit-details-marker { display: none; }
.addr-history-n { color: #667085; font-weight: 600; }
.addr-history-list { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.addr-history-list li { border-left: 3px solid #98A2B3; padding: 2px 0 2px 9px; }
.addr-history-list li.by-customer { border-left-color: #2E90FA; }
/* Staff changes in red (Swapnil 2026-10-06): a change by the Bijnez team stands out in any dispute. */
.addr-history-list li.by-staff { background: #FEF3F2; border-radius: 0 8px 8px 0; padding: 4px 8px 4px 9px; }
.addr-history-list li.by-staff .ah-head, .addr-history-list li.by-staff .ah-head b { color: #B42318; }
.addr-history-list li.by-staff { border-left-color: #D92D20; }
.ah-head { font-size: 12.5px; color: #475467; }
.ah-head b { color: #101828; }
.ah-line { font-size: 13.5px; color: #101828; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin-top: 2px; }
.ah-field { font-weight: 700; color: #344054; }
.ah-field::after { content: ":"; }
.ah-old { color: #B42318; text-decoration: line-through; }
.ah-arrow { color: #667085; }
.ah-new { color: #067647; font-weight: 600; }
.addr-history-none { font-size: 12.5px; color: #667085; font-style: italic; margin: 4px 0; }
.addr-saved-by { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: #344054; background: #EFF8FF;
	border: 1px solid #B2DDFF; border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; line-height: 1.4; }
.addr-saved-by .ti { color: #1570EF; font-size: 16px; margin-top: 1px; }
/* Customer link: our team changed their details last - red note, section and log open. */
.addr-staff-changed { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: #912018; background: #FEF3F2;
	border: 1px solid #FECDCA; border-radius: 10px; padding: 8px 10px; margin: 4px 0 8px; line-height: 1.4; font-weight: 600; }
.addr-staff-changed .ti { color: #D92D20; font-size: 16px; margin-top: 1px; }
/* Standee material tile (2026-10-06): Submitted + Production cards. Acrylic = white sheet, MDF = black board. */
.mat-strip { display: flex; gap: 8px; margin: 2px 0 8px; }
.mat-tile { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 2px solid;
	box-shadow: 0 2px 8px rgba(16, 24, 40, .12); }
.mat-tile img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; border: 1px solid rgba(0,0,0,.15); }
.mat-text { display: flex; flex-direction: column; line-height: 1.1; }
.mat-text small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.mat-text b { font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.mat-tile.mat-mdf { background: #1d1d1f; border-color: #000; color: #fff; }
.mat-tile.mat-acrylic { background: #fff; border-color: #7C3AED; color: #4C1D95; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.bf-sumchip-mat.mat-mdf { background: #1d1d1f; color: #fff; }
.bf-sumchip-mat.mat-acrylic { background: #F5F0FF; color: #5B21B6; border: 1px solid #C4B5FD; }
/* Pack in the box (2026-10-06): Dispatch + Payment cards - the parcel's contents at a glance, kraft-paper feel like the
   brown Packed card, products as rows, kit cards/keychains as chips with the platform icon. */
.pack-box { margin: 2px 0 10px; padding: 10px 12px 12px; border-radius: 14px; background: linear-gradient(180deg, #FBF4EA, #F6EADA);
	border: 1px solid #E8D3B5; }
.pack-box-title { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
	text-transform: uppercase; color: #8A5A1F; margin-bottom: 8px; }
.pack-box-title .ti { font-size: 16px; }
.pack-box-n { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; color: #A0743D; font-size: 12px; }
.pack-box-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pack-prod { flex: 0 0 100%; display: flex; align-items: center; gap: 9px; padding: 2px 0 4px; }
.pack-prod-ic { width: 32px; height: 32px; border-radius: 10px; background: #fff; border: 1px solid #E8D3B5; display: inline-flex;
	align-items: center; justify-content: center; color: #8A5A1F; font-size: 18px; flex: none; box-shadow: 0 1px 3px rgba(120, 80, 30, .12); }
.pack-prod-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pack-prod-txt b { font-size: 14.5px; color: #3D2A12; }
.pack-prod-txt small { font-size: 12px; color: #8A6A44; font-weight: 600; }
.pack-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff;
	border: 1px solid #E8D3B5; font-size: 12.5px; font-weight: 700; color: #3D2A12; box-shadow: 0 1px 2px rgba(120, 80, 30, .08); }
.pack-chip-ic { width: 22px; height: 22px; border-radius: 50%; background: #FBF4EA; display: inline-flex; align-items: center;
	justify-content: center; overflow: hidden; flex: none; }
.pack-chip-ic img { width: 16px; height: 16px; object-fit: contain; }
.pack-chip-ic .ti { font-size: 14px; color: #8A5A1F; }
.pack-kind { font-size: 13px; color: #A0743D; }
.pack-chip.chg { border-color: #7C3AED; box-shadow: 0 0 0 2px rgba(124, 58, 237, .12); }
/* Scan from the card (Yuvraj): toast with the number just saved. */
.bc-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
	background: #101828; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 999px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .3); transition: opacity .4s ease; max-width: calc(100% - 32px); }
.bc-toast.out { opacity: 0; }
.draft-row-icons .card-scan-btn { color: #101828; }
/* Redo tags on black (Barcode) and brown (Packed) cards: readable light text. */
.order-card.is-barcoded .redo-order-why, .order-card.is-packed .redo-order-why { color: #FECDCA; }
.order-card.is-barcoded .redo-order-by, .order-card.is-packed .redo-order-by,
.order-card.is-barcoded .redo-order-by b, .order-card.is-packed .redo-order-by b,
.order-card.is-barcoded .redo-order-by .ti, .order-card.is-packed .redo-order-by .ti { color: #F2F4F7; }
/* Address log: a value saved before the log started - grey, who typed it is unknown. */
.addr-history-list li.by-before { border-left-color: #D0D5DD; }
.addr-history-list li.by-before .ah-head, .addr-history-list li.by-before .ah-head b { color: #667085; font-weight: 600; }
.addr-history-list li.by-before .ah-new { color: #344054; }
/* Settings - Standee materials (2026-10-06): one row per material with its texture, name, state and switch. */
.mat-set-lead { font-size: 13px; color: #667085; margin: 0 0 10px; line-height: 1.4; }
.mat-set-list { display: flex; flex-direction: column; gap: 8px; }
.mat-set-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid #eaecf0; border-radius: 14px;
	cursor: pointer; background: #F9FAFB; transition: background .2s, border-color .2s; }
.mat-set-row.on { background: #fff; border-color: #C4B5FD; box-shadow: 0 0 0 3px rgba(124, 58, 237, .08); }
.mat-set-img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(0,0,0,.12); flex: none; }
.mat-set-row:not(.on) .mat-set-img { filter: grayscale(1) opacity(.55); }
.mat-set-words { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mat-set-words strong { font-size: 16px; font-weight: 800; color: #101828; }
.mat-set-state { font-size: 12.5px; color: #667085; }
.mat-set-row.on .mat-set-state { color: #067647; font-weight: 600; }
.mat-set-switch { border: 0; padding: 0; margin: 0; }
/* Order form: a material that is switched off - visible, greyed, not tappable. */
.bf-mpill.off { background: #F2F4F7; border-style: dashed; color: #98A2B3; cursor: not-allowed; position: relative; }
.bf-mpill.off small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #98A2B3; margin-top: 1px; }

/* UPI slot: test QR of exactly the link Swing prints, with Download (2026-10-07) */
.bf-qrrow .bf-linkwrap .bf-upimsg { flex: 1 0 100%; order: 2; }
.bf-qrrow .bf-linkwrap .bf-upitest { flex: 1 0 100%; order: 3; display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px dashed #c4b5fd; border-radius: 12px; background: #faf7ff; }
.bf-qrrow .bf-linkwrap .bf-upitest[hidden] { display: none; }
.bf-upitest-img { width: 112px; height: 112px; flex: 0 0 112px; image-rendering: pixelated; background: #fff; border-radius: 8px; }
.bf-upitest-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bf-upitest-cap { font-size: 12.5px; line-height: 1.35; color: var(--bijnez-muted); }
.bf-upitest-dl { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: #6d28d9; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.bf-upitest-dl:hover { color: #fff; background: #5b21b6; }

/* Pull-to-refresh: Bijnu keeps dancing while the new page loads (2026-10-07). A CSS animation runs on the
   phone's compositor, so it keeps going even while the iPhone pauses the page's JavaScript during the reload. */
.pull-refresh-hint.refreshing .bjp-row { animation: bjpRefreshDance 0.9s ease-in-out infinite; }
@keyframes bjpRefreshDance {
	0%   { transform: scale(1) translateY(0) rotate(0deg); }
	20%  { transform: scale(1.04, .94) translateY(0) rotate(-10deg); }
	45%  { transform: scale(.96, 1.06) translateY(-10px) rotate(0deg); }
	70%  { transform: scale(1.04, .94) translateY(0) rotate(10deg); }
	100% { transform: scale(1) translateY(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .pull-refresh-hint.refreshing .bjp-row { animation: none; } }

/* ================= REAL LOGIN (same email + password as Chat Bijnez, 2026-10-07) ================= */
.lg-box { margin: 48px 16px 0; max-width: 400px; text-align: left; }
@media (min-width: 440px) { .lg-box { margin: 60px auto 0; } }
.lg-box .app-bar-logo { display: block; margin: 0 auto; }
.lg-title { font-size: 22px; font-weight: 800; text-align: center; margin-top: 6px; color: var(--bijnez-ink); }
.lg-sub { text-align: center; color: var(--bijnez-muted); font-size: 14px; margin: 4px 0 16px; }
.lg-sub .ti { vertical-align: -2px; }
.lg-err { background: #FFF1F0; border: 1px solid #FDA29B; color: #B42318; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; margin-bottom: 12px; }
.lg-form { margin: 0; }
.lg-label { display: block; font-size: 13px; font-weight: 600; color: var(--bijnez-ink); margin: 0 0 6px; }
.lg-input { display: block; width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 14px; border: 1px solid var(--bijnez-border);
	border-radius: 12px; margin: 0 0 14px; background: #fff; color: var(--bijnez-ink); }
.lg-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.lg-passwrap { position: relative; }
.lg-passwrap .lg-input { padding-right: 48px; }
.lg-eye { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border: 0; background: none; color: var(--bijnez-muted); font-size: 20px; cursor: pointer; }
.lg-go { width: 100%; margin-top: 4px; font-size: 16px; padding: 12px; }
.lg-go:disabled { opacity: .7; }
.lg-forgot { display: block; text-align: center; margin-top: 14px; font-weight: 600; color: #6d28d9; text-decoration: none; }
.lg-hint { text-align: center; color: var(--bijnez-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.4; }

/* ================= TEAM SCREEN (admin) ================= */
.tm-flash { border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; line-height: 1.4; }
.tm-flash.ok { background: #F0FDF4; border: 1px solid #86EFAC; color: #166534; }
.tm-flash.bad { background: #FFF1F0; border: 1px solid #FDA29B; color: #B42318; }
.tm-add { padding: 0; }
.tm-add-head { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 700; color: #6d28d9; }
.tm-add-head::-webkit-details-marker { display: none; }
.tm-add .tm-form { padding: 0 16px 16px; }
.tm-form { display: grid; gap: 10px; margin-top: 8px; }
.tm-label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bijnez-ink); margin: 0; }
.tm-input { font-size: 16px; padding: 10px 12px; border: 1px solid var(--bijnez-border); border-radius: 10px; width: 100%; box-sizing: border-box; }
.tm-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-role { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px; border: 1px solid var(--bijnez-border); border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; }
.tm-role input { margin: 0; width: 16px; height: 16px; }
.tm-role:has(input:checked) { border-color: #7c3aed; background: #f5f0ff; color: #5b21b6; }
.tm-role-admin:has(input:checked) { border-color: #14161a; background: #14161a; color: #fff; }
.tm-btn { justify-self: start; padding: 9px 16px; }
.tm-note { font-size: 12.5px; color: var(--bijnez-muted); }
.tm-card .dealer-head { align-items: center; }
.tm-avatar { background: #14161a; color: #fff; font-weight: 700; }
.tm-off .tm-avatar { background: #d0d5dd; color: #475467; }
.tm-off .dealer-name { color: var(--bijnez-muted); }
.tm-email { word-break: break-all; }
.tm-you { font-size: 11px; font-weight: 700; background: #f5f0ff; color: #6d28d9; border-radius: 999px; padding: 1px 8px; vertical-align: 2px; }
.tm-chip { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.tm-chip.on { background: #F0FDF4; color: #15803d; border: 1px solid #86EFAC; }
.tm-chip.off { background: #F2F4F7; color: #475467; border: 1px solid #D0D5DD; }
.tm-meta { font-size: 13px; color: var(--bijnez-muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.tm-edit { margin-top: 10px; border-top: 1px dashed var(--bijnez-border); padding-top: 8px; }
.tm-edit > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #6d28d9; list-style: none; }
.tm-edit > summary::-webkit-details-marker { display: none; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tm-actions form { margin: 0; }
.tm-act { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px;
	border: 1px solid var(--bijnez-border); background: #fff; color: var(--bijnez-ink); cursor: pointer; }
.tm-act-bad { color: #B42318; border-color: #FDA29B; }
.tm-act-good { color: #15803d; border-color: #86EFAC; }

/* ================= PHONE ALERTS card (Orders page, 2026-10-07) ================= */
.push-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 16px 4px; padding: 12px 14px;
	background: #f5f0ff; border: 1px solid #ddd0fb; border-radius: 14px; }
.push-card-ico { flex: 0 0 38px; height: 38px; border-radius: 12px; background: #6d28d9; color: #fff; display: grid; place-items: center; font-size: 20px; }
.push-card-txt { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.push-card-txt b { font-size: 14.5px; color: var(--bijnez-ink); }
.push-card-txt span { font-size: 13px; color: var(--bijnez-muted); line-height: 1.35; }
.push-card-btns { display: flex; gap: 8px; margin-left: auto; }
.push-card-btn { border: 1px solid #ddd0fb; background: #fff; color: #5b21b6; border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.push-card-btn.main { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.push-card-btn:disabled { opacity: .7; }
/* A tapped approval alert lands on its card: a short orange glow so the eye finds it (2026-10-07) */
.unlock-card.ap-flash { animation: apFlash 2.4s ease-out 1; }
@keyframes apFlash { 0%, 35% { box-shadow: 0 0 0 4px rgba(249, 115, 22, .55); border-color: #f97316; } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
/* Team card: alerts on/off at a glance (2026-10-07) */
.tm-alerts.on { color: #15803d; font-weight: 600; }
.tm-alerts.off { color: #B42318; font-weight: 600; }

/* ================= SETTINGS TABS (2026-10-07): like the Orders stage tabs, all black ================= */
.set-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 4px -16px 14px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #14161a; background: #fff; color: #14161a;
	border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.set-tab.active { background: #14161a; color: #fff; }
[data-pane][hidden] { display: none !important; }
.glance-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--bijnez-border); }
.glance-row:first-of-type { border-top: 0; }
.glance-av { flex: 0 0 38px; height: 38px; border-radius: 50%; background: #14161a; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.glance-who { display: grid; gap: 3px; min-width: 0; }
.glance-who b { font-size: 15px; }
.glance-line { font-size: 13px; display: flex; align-items: center; gap: 5px; }
.glance-line.ok { color: #15803d; }
.glance-line.bad { color: #B42318; }
.glance-manage { display: inline-flex; margin-top: 12px; text-decoration: none; }

/* ================= 🔔 BELL + ALERTS PAGE (task 4, 2026-10-07) ================= */
.bell-btn { position: relative; margin-left: auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; color: var(--bijnez-ink); text-decoration: none; font-size: 22px; flex: none; -webkit-tap-highlight-color: transparent; }
.bell-btn:active { background: #f2f4f7; }
.app-bar .rk-today:not([hidden]) + .bell-btn { margin-left: -10px; }   /* pill sits right up against the bell (Swapnil 2026-10-07) */
.app-bar.has-drawer > .bell-btn { height: 52px; border-radius: 0; }
.bell-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bijnez-danger);
	color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.app-bar.has-drawer > .bell-btn .bell-n { top: 9px; }
.bell-n[hidden] { display: none; }
.al-kind.locked { background: #f9fafb; cursor: default; }
.al-kind.locked .ho-switch-ui { opacity: .55; }
.al-kind small i { font-size: 12px; }
.al-quiet { margin-top: 16px; }
.al-times { display: flex; gap: 10px; }
.al-times .ho-field { flex: 1; }
.al-times.off { opacity: .45; pointer-events: none; }
.bell-btn.active { background: #f2f4f7; }
/* 🔔 floating panel (Facebook style): under the bell, right side; on a phone it is almost full width */
.bell-panel { position: fixed; right: 8px; top: 60px; z-index: 70; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px);
	display: none; flex-direction: column; background: #fff; border: 1px solid var(--bijnez-border); border-radius: 16px;
	box-shadow: 0 16px 40px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08); overflow: hidden; }
.bell-panel.open { display: flex; animation: bpIn .16s ease-out; }
@keyframes bpIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.bp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--bijnez-border); flex: none; }
.bp-head b { font-size: 17px; font-weight: 800; }
.bp-acts { display: flex; align-items: center; gap: 6px; }
.bp-readall { border: 0; background: #f2f4f7; color: var(--bijnez-ink); font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; }
.bp-readall[hidden] { display: none; }
.bp-gear { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--bijnez-ink); font-size: 20px; text-decoration: none; }
.bp-gear:active { background: #f2f4f7; }
.bp-list { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.bp-msg { display: flex; gap: 10px; align-items: center; color: var(--bijnez-muted); font-size: 14px; padding: 18px 16px; }
.bp-msg i { font-size: 26px; flex: none; }
.bp-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #f2f4f7; color: var(--bijnez-ink); text-decoration: none; }
.bp-row:last-child { border-bottom: 0; }
.bp-row.unread { background: #f5f8ff; }
.bp-row:active { background: #eef2f6; }
.bp-dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: transparent; }
.bp-row.unread .bp-dot { background: var(--bijnez-danger); }
.bp-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bp-words strong { font-size: 14.5px; font-weight: 600; }
.bp-row.unread .bp-words strong { font-weight: 800; }
.bp-body { font-size: 13px; color: #475467; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bp-words small { font-size: 12px; color: var(--bijnez-muted); }
.bp-row:not(.unread) .bp-words { opacity: .75; }

/* ================= BETA STRIP (2026-10-07) - replaced the BETA pill that squeezed the logo ================= */
.beta-strip { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% + 24px); margin: -14px -12px 12px;
	min-height: 24px; padding: 3px 12px; border: 0; border-bottom: 1px solid #f5d77a; background: #fff6d1; color: #5c3d00;
	font: 500 12px/1.3 Inter, system-ui, sans-serif; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.beta-strip i { font-size: 14px; flex: none; }
.beta-strip b { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.beta-strip:active { background: #ffeeb0; }
@media (min-width: 900px) { .beta-strip { width: calc(100% + 48px); margin: -18px -24px 16px; } }
/* the logo keeps its real shape - other things in the bar give way first */
.app-bar-brand { flex: none; }
.app-bar-logo { flex: none; max-width: none; }
@media (max-width: 380px) {
	.app-bar .rk-today { font-size: 12px; padding: 4px 8px; }
	.app-bar { gap: 8px; }
}
.beta-strip[hidden] { display: none; }
/* one line always (Swapnil 2026-10-07): never wraps; very narrow phones cut the end with "..." */
.beta-strip { white-space: nowrap; overflow: hidden; }
.beta-strip span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* iPhone Safari enlarges text on pages with long paragraphs (Settings) - keep the strip at its real size */
.beta-strip, .beta-strip * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ================= FULL-SCREEN PHOTO (photo-view.js, 2026-10-07) - X, tap black, swipe down to close ================= */
.pv-ov { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .94); touch-action: none; -webkit-user-select: none; user-select: none; }
.pv-ov.open { display: flex; }
html.pv-lock, html.pv-lock body { overflow: hidden; }
.pv-ov img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .2s ease; }
.pv-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; z-index: 2; width: 44px; height: 44px; border: 0;
	border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.pv-count { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 24px); left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .18); color: #fff; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.pv-nav[hidden] { display: none; }
.pv-prev { left: 8px; }
.pv-next { right: 8px; }
.pv-hint { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .6); font-size: 12.5px; pointer-events: none; }

/* Settings link rows (2026-10-07): slim one-line rows instead of big yellow buttons - icon, name, hint/count, › */
.set-link { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 12px 12px 14px; min-height: 48px;
	border: 1px solid var(--bijnez-border); border-radius: 14px; background: #fff; color: var(--bijnez-ink); text-decoration: none; }
.set-link:active { background: #f2f4f7; }
.set-link > .ti:first-child { font-size: 20px; flex: none; }
.set-link span { font-size: 15px; font-weight: 700; white-space: nowrap; }
.set-link small { margin-left: auto; font-size: 12.5px; color: var(--bijnez-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.set-link-n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--bijnez-danger); color: #fff;
	font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.set-link-go { color: #98a2b3; font-size: 18px; flex: none; }
/* red number on a Settings tab (Feedback: open reports) */
.set-tab-n { display: inline-block; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bijnez-danger);
	color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.set-tab-n[hidden] { display: none; }

/* ================= JOURNEY (2026-10-07) - order sheet timeline + Settings > Journey ================= */
.jr-list { list-style: none; margin: 0; padding: 0; position: relative; }
.jr-list::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: #e4e7ec; }
.jr-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.jr-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #98a2b3; z-index: 1; }
.jr-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #101828; }
.jr-name small { font-weight: 500; color: var(--bijnez-muted); font-size: 12.5px; }
.jr-name em { font-style: normal; font-size: 11px; font-weight: 800; color: #b54708; background: #fffaeb; border: 1px solid #fedf89; border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.jr-took { flex: none; font-size: 13.5px; font-weight: 700; color: #344054; font-variant-numeric: tabular-nums; }
.jr-placed .jr-dot { background: #101828; border-color: #101828; }
.jr-now .jr-dot { background: #2e90fa; border-color: #2e90fa; box-shadow: 0 0 0 4px rgba(46, 144, 250, .18); }
.jr-now .jr-took { color: #175cd3; }
.jr-done .jr-dot { background: #12b76a; border-color: #12b76a; }
.jr-slow .jr-dot { border-color: #d92d20; }
.jr-slow .jr-took, .jr-slow .jr-name > span { color: #d92d20; }
.jr-totals { margin-top: 10px; border-top: 1px solid var(--bijnez-border); padding-top: 10px; display: grid; gap: 6px; }
.jr-totals div { display: flex; justify-content: space-between; font-size: 13.5px; color: #475467; }
.jr-totals b { color: #101828; }
.jr-range { display: flex; gap: 8px; margin: 0 0 12px; }
.jr-range a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 999px; border: 1px solid var(--bijnez-border); background: #fff;
	color: var(--bijnez-ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.jr-range a.on { background: #14161a; border-color: #14161a; color: #fff; }
.jr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.jr-kpis > div { border: 1px solid var(--bijnez-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-kpis small { font-size: 12px; color: var(--bijnez-muted); font-weight: 600; }
.jr-kpis b { font-size: 19px; font-weight: 800; color: #101828; }
.jr-kpis b.jr-red { color: #d92d20; }
.jr-kpis span { font-size: 11.5px; color: #98a2b3; }
.jr-bars { display: grid; gap: 8px; margin-bottom: 10px; }
.jr-bar-row { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; }
.jr-bar-name { font-size: 13px; font-weight: 600; color: #344054; }
.jr-bar-track { height: 10px; border-radius: 5px; background: #f2f4f7; overflow: hidden; }
.jr-bar-fill { display: block; height: 100%; border-radius: 5px; background: #98a2b3; min-width: 2px; }
.jr-bar-val { font-size: 13px; font-weight: 700; color: #101828; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.jr-bar-row.jr-slow .jr-bar-fill { background: #d92d20; }
.jr-bar-row.jr-slow .jr-bar-name, .jr-bar-row.jr-slow .jr-bar-val { color: #d92d20; }
.jr-wait-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jr-wait-who b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-wait-who small { margin-left: 0; font-size: 12.5px; color: var(--bijnez-muted); }
.jr-wait-time { flex: none; font-size: 14px; font-weight: 800; color: #344054; }
.jr-wait.jr-late .jr-wait-time { color: #d92d20; }

/* ================= CARD CLOCK (2026-10-07) - hours since the token, under the stage badge ================= */
.badge-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tok-clock { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
	background: #f2f4f7; color: #344054; font-size: 13px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tok-clock i { font-size: 14px; }
.tok-clock b { font-weight: 800; }
.tok-clock.tc-warn { background: #fffaeb; color: #b54708; box-shadow: inset 0 0 0 1px #fedf89; }
.tok-clock.tc-late { background: #fef3f2; color: #b42318; box-shadow: inset 0 0 0 1px #fecdca; }
.tok-clock.tc-done { background: #ecfdf3; color: #067647; }
/* the clock sits under the badge, so the chevron lines up with the badge, not the middle of both */
.head-right:has(.tok-clock) { align-items: flex-start; }
.head-right:has(.tok-clock) .card-chevron { margin-top: 7px; }
/* the three card clocks in one row, right-aligned; they wrap under each other on a narrow phone */
.tok-clocks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 190px; }
.tok-clock.tc-bal { background: #f4f3ff; color: #5925dc; }
.tok-clock.tc-pay { background: #f0f9ff; color: #026aa2; }
.tok-clock.tc-bal.tc-warn, .tok-clock.tc-pay.tc-warn { background: #fffaeb; color: #b54708; box-shadow: inset 0 0 0 1px #fedf89; }
.tok-clock.tc-bal.tc-late, .tok-clock.tc-pay.tc-late { background: #fef3f2; color: #b42318; box-shadow: inset 0 0 0 1px #fecdca; }
.tok-clock.tc-bal.tc-done, .tok-clock.tc-pay.tc-done { background: #ecfdf3; color: #067647; }
.tok-clock[hidden] { display: none; }
/* clocks pinned to the header's bottom-right corner (2026-10-07): the header grows a little so they always sit
   under the badge, never on it - whatever the phone's font size */
.order-card-head:has(> .tok-clocks) { position: relative; min-height: 64px; }
.order-card-head > .tok-clocks { position: absolute; right: 0; bottom: 0; flex-wrap: nowrap; max-width: none; }
/* bell (and the #today pill with it) right up against the avatar (Swapnil 2026-10-07) */
.app-bar .bell-btn { margin-right: -10px; }
.day-drawer[hidden] { display: none !important; }

/* Delete order dialog (admin, 2026-10-17): reason picker + shipped warning. */
.del-reason { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.del-reason[hidden] { display: none; }
.del-reason label { font-weight: 600; font-size: 14px; }
.del-reason .mini-input { width: 100%; max-width: none; font-size: 16px; padding: 10px 12px; border-radius: 10px; }
.del-warn { padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #9a3412; font-weight: 600; font-size: 14px; }
.del-warn[hidden] { display: none; }

/* Studio entry in Order details (admin only, 2026-10-18) */
.bf-studio-tag { margin-left: 6px; font-size: 11px; font-weight: 700; color: #7a5a00; background: #fff1c7; border-radius: 6px; padding: 1px 6px; }
.bf-studio .bf-studio-btn { margin-top: 8px; width: 100%; }