/* ======================================================================
   Dutch Homemade Venlo — POS UI (rebuilt 2026-05)
   --------------------------------------------------------------------
   - Three-column shell: Floor / Products / Cart
   - Mobile / tablet collapse to drawers
   - All classes used by pos_admin.js preserved (dhm-admin-*, dhm-modal-*,
     dhm-form-*, dhm-tag, dhm-swatch, dhm-row-actions, dhm-grid-2, ...)
====================================================================== */

:root {
	--dhm-orange: #ff8500;
	--dhm-orange-600: #f07a00;
	--dhm-orange-700: #d96a00;
	--dhm-orange-50:  #fff5e6;
	--dhm-orange-100: #ffe6c2;

	--dhm-bg:        #f6f4f1;
	--dhm-surface:   #ffffff;
	--dhm-surface-2: #fbfaf8;

	--dhm-text:      #1f1b17;
	--dhm-text-2:    #4a423a;
	--dhm-muted:     #8a7f74;
	--dhm-line:      #ece6df;
	--dhm-line-2:    #f4efe8;

	--dhm-success: #2e9d50;
	--dhm-success-50: #e8f6ec;
	--dhm-warning: #f0a000;
	--dhm-warning-50: #fff4dc;
	--dhm-danger:  #d64545;
	--dhm-danger-50: #fdecec;
	--dhm-info:    #2266cc;

	--dhm-shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.06);
	--dhm-shadow-md: 0 4px 14px rgba(20, 16, 12, 0.08);
	--dhm-shadow-lg: 0 18px 48px rgba(20, 16, 12, 0.18);

	--dhm-radius:    12px;
	--dhm-radius-sm: 8px;
	--dhm-radius-lg: 18px;

	--dhm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
		"Helvetica Neue", Arial, sans-serif;

	--dhm-h-header: 60px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--dhm-bg);
	color: var(--dhm-text);
	font-family: var(--dhm-font);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

body.dhm-pos-body { overflow: hidden; height: 100vh; }

/* ----------------------------------------------------------------------
   Frappe web template breakout
   The /pos route is rendered inside web.html which wraps content in
   .container / main.page_content with bootstrap-like padding and a
   max-width. We hide the chrome AND fix-position the POS root over the
   whole viewport so no parent constraint can clip it.
---------------------------------------------------------------------- */
.web-footer,
.navbar,
.web-sidebar,
header.navbar,
.dropdown-navbar,
.page-head { display: none !important; }

.web-page-content,
main.page_content,
main.page-container,
.page_content,
.container,
.container-fluid,
.row,
.col,
.col-12 {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: auto !important;
}

#dhm-pos-root {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--dhm-bg);
	z-index: 1;
}

/* ======================================================================
   Loading
====================================================================== */
.dhm-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 240px;
	gap: 14px;
	color: var(--dhm-muted);
}
.dhm-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--dhm-orange-50);
	border-top-color: var(--dhm-orange);
	border-radius: 50%;
	animation: dhm-spin 0.8s linear infinite;
}
@keyframes dhm-spin { to { transform: rotate(360deg); } }
.dhm-loading-text { font-weight: 600; color: var(--dhm-orange-700); }

/* ======================================================================
   Buttons (used by both shell and admin console)
====================================================================== */
.dhm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--dhm-orange);
	color: #fff;
	border: 1px solid var(--dhm-orange);
	padding: 9px 14px;
	border-radius: var(--dhm-radius-sm);
	font: inherit;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.06s ease;
	white-space: nowrap;
	user-select: none;
}
.dhm-btn:hover { background: var(--dhm-orange-600); border-color: var(--dhm-orange-600); }
.dhm-btn:active { transform: translateY(1px); }
.dhm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.dhm-btn.dhm-btn-secondary {
	background: var(--dhm-surface);
	color: var(--dhm-text);
	border-color: var(--dhm-line);
}
.dhm-btn.dhm-btn-secondary:hover { background: var(--dhm-surface-2); border-color: var(--dhm-orange-100); }

.dhm-btn.dhm-btn-ghost {
	background: transparent;
	color: var(--dhm-text-2);
	border-color: transparent;
}
.dhm-btn.dhm-btn-ghost:hover { background: var(--dhm-orange-50); color: var(--dhm-orange-700); }

.dhm-btn.dhm-btn-success { background: var(--dhm-success); border-color: var(--dhm-success); }
.dhm-btn.dhm-btn-success:hover { background: #267a40; border-color: #267a40; }
.dhm-btn.dhm-btn-danger  { background: var(--dhm-danger);  border-color: var(--dhm-danger); }
.dhm-btn.dhm-btn-danger:hover { background: #b73838; border-color: #b73838; }

.dhm-btn-block { width: 100%; }
.dhm-btn-lg    { padding: 14px 20px; font-size: 15px; }
.dhm-btn-sm    { padding: 6px 10px; font-size: 12.5px; }

.dhm-btn-icon {
	width: 38px;
	height: 38px;
	padding: 0;
	font-size: 16px;
}
.dhm-btn-icon-glyph { font-size: 16px; line-height: 1; }
.dhm-btn-label      { font-weight: 600; }

/* ======================================================================
   Header
====================================================================== */
.dhm-header {
	flex: 0 0 var(--dhm-h-header);
	height: var(--dhm-h-header);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: var(--dhm-surface);
	border-bottom: 1px solid var(--dhm-line);
	box-shadow: var(--dhm-shadow-sm);
	position: relative;
	z-index: 5;
}

.dhm-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	font-weight: 800;
	color: var(--dhm-orange-700);
	font-size: 16px;
	letter-spacing: -0.01em;
}
.dhm-brand small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--dhm-muted);
	margin-top: 2px;
}

.dhm-header-context {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--dhm-orange-50);
	color: var(--dhm-orange-700);
	font-weight: 600;
	font-size: 13px;
	min-width: 0;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dhm-header-context .ctx-label  { color: var(--dhm-muted); font-weight: 500; }
.dhm-header-context.is-active   { background: var(--dhm-orange); color: #fff; }
.dhm-header-context.is-active .ctx-label { color: rgba(255,255,255,0.8); }

.dhm-header-spacer { flex: 1 1 auto; min-width: 0; }

.dhm-header-user {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.1;
	color: var(--dhm-text-2);
	font-size: 12px;
	margin-right: 4px;
}
.dhm-header-user b { color: var(--dhm-text); font-size: 13px; font-weight: 700; }

.dhm-printer-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--dhm-surface-2);
	border: 1px solid var(--dhm-line);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dhm-muted);
	white-space: nowrap;
}
.dhm-printer-status .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dhm-muted);
}
.dhm-printer-status.ok  { color: var(--dhm-success); border-color: var(--dhm-success-50); background: var(--dhm-success-50); }
.dhm-printer-status.ok .dot  { background: var(--dhm-success); }
.dhm-printer-status.err { color: var(--dhm-danger); border-color: var(--dhm-danger-50); background: var(--dhm-danger-50); }
.dhm-printer-status.err .dot { background: var(--dhm-danger); }
.dhm-printer-status.warn { color: var(--dhm-warning); border-color: var(--dhm-warning-50); background: var(--dhm-warning-50); }
.dhm-printer-status.warn .dot { background: var(--dhm-warning); }

.dhm-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--dhm-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--dhm-surface);
}

/* ======================================================================
   Main 3-pane shell
====================================================================== */
.dhm-main {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 360px;
	gap: 0;
	background: var(--dhm-bg);
	position: relative;
}

.dhm-pane {
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--dhm-surface);
	border-right: 1px solid var(--dhm-line);
	overflow: hidden;
}
.dhm-pane:last-child { border-right: none; }

.dhm-pane-header {
	flex: 0 0 auto;
	padding: 14px 16px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 1px solid var(--dhm-line);
	background: var(--dhm-surface);
}
.dhm-pane-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dhm-text-2);
}
.dhm-pane-header .sub {
	font-size: 12px;
	color: var(--dhm-muted);
	font-weight: 500;
}

.dhm-pane-close {
	display: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var(--dhm-surface-2);
	border: 1px solid var(--dhm-line);
	color: var(--dhm-text-2);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
}

/* ======================================================================
   Floor pane (left)
====================================================================== */
.dhm-pane-floor { background: var(--dhm-surface-2); }

.dhm-floor-areas {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
	padding: 12px 12px 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.dhm-area-tab {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--dhm-surface);
	border: 1px solid var(--dhm-line);
	color: var(--dhm-text-2);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	transition: all 0.12s ease;
}
.dhm-area-tab:hover { border-color: var(--dhm-orange-100); color: var(--dhm-orange-700); }
.dhm-area-tab.active {
	background: var(--dhm-orange);
	color: #fff;
	border-color: var(--dhm-orange);
	box-shadow: var(--dhm-shadow-sm);
}

.dhm-takeaway-tile {
	margin: 8px 12px 4px;
	padding: 14px 16px;
	border-radius: var(--dhm-radius);
	background: linear-gradient(135deg, var(--dhm-orange) 0%, var(--dhm-orange-600) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	box-shadow: var(--dhm-shadow-md);
	transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.dhm-takeaway-tile .ic { font-size: 18px; }
.dhm-takeaway-tile:hover { transform: translateY(-1px); box-shadow: var(--dhm-shadow-lg); }
.dhm-takeaway-tile.active {
	background: linear-gradient(135deg, var(--dhm-orange-700) 0%, #b85a00 100%);
}

.dhm-floor-toolbar {
	display: none;
	padding: 8px 12px;
	gap: 6px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--dhm-line);
	background: var(--dhm-warning-50);
}
body.dhm-layout-mode .dhm-floor-toolbar { display: flex; }
body.dhm-layout-mode .dhm-pane-floor { background: var(--dhm-warning-50); }

.dhm-floor-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 8px 12px 16px;
}

.dhm-table-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
}

/* Default visual (grid) table card */
.dhm-table-card {
	position: relative;
	min-height: 86px;
	padding: 12px 10px;
	border-radius: var(--dhm-radius);
	background: var(--dhm-surface);
	border: 1.5px solid var(--dhm-line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	user-select: none;
	transition: all 0.12s ease;
	overflow: hidden;
}
.dhm-table-card:hover {
	border-color: var(--dhm-orange-100);
	box-shadow: var(--dhm-shadow-md);
	transform: translateY(-1px);
}
.dhm-table-card.selected {
	border-color: var(--dhm-orange);
	box-shadow: 0 0 0 3px var(--dhm-orange-50);
}
.dhm-table-card .label {
	font-weight: 800;
	font-size: 16px;
	color: var(--dhm-text);
	letter-spacing: 0.02em;
}
.dhm-table-card .seats {
	font-size: 11px;
	color: var(--dhm-muted);
	font-weight: 600;
}
.dhm-table-card .amount {
	font-size: 13px;
	font-weight: 700;
	color: var(--dhm-orange-700);
}
.dhm-table-card .status-pill {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dhm-success);
}
.dhm-table-card.status-free .status-pill { background: var(--dhm-success); }
.dhm-table-card.status-open .status-pill,
.dhm-table-card.status-sent .status-pill { background: var(--dhm-orange); }
.dhm-table-card.status-paid .status-pill { background: var(--dhm-info); }

.dhm-table-card.status-open,
.dhm-table-card.status-sent {
	background: var(--dhm-orange-50);
	border-color: var(--dhm-orange-100);
}
.dhm-table-card.status-paid {
	background: #eef4fc;
	border-color: #d6e4f6;
}

/* Layout-edit mode: free placement on canvas */
body.dhm-layout-mode .dhm-table-grid { display: none; }

.dhm-floor-canvas {
	position: relative;
	display: none;
	min-width: 100%;
	min-height: 100%;
	background:
		linear-gradient(0deg, transparent 24px, rgba(0,0,0,0.04) 25px),
		linear-gradient(90deg, transparent 24px, rgba(0,0,0,0.04) 25px);
	background-size: 25px 25px;
	border-radius: var(--dhm-radius);
}
body.dhm-layout-mode .dhm-floor-canvas { display: block; }
body.dhm-layout-mode .dhm-table-card {
	position: absolute;
	min-height: 0;
	cursor: move;
}

/* ======================================================================
   Products pane (center)
====================================================================== */
.dhm-pane-products { background: var(--dhm-bg); }

.dhm-products-top {
	flex: 0 0 auto;
	padding: 12px 16px;
	background: var(--dhm-surface);
	border-bottom: 1px solid var(--dhm-line);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dhm-search-bar {
	position: relative;
}
.dhm-search-bar input {
	width: 100%;
	height: 42px;
	border-radius: var(--dhm-radius);
	border: 1px solid var(--dhm-line);
	background: var(--dhm-surface-2);
	padding: 0 14px 0 40px;
	font: inherit;
	font-size: 14px;
	color: var(--dhm-text);
	outline: none;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.dhm-search-bar input:focus {
	border-color: var(--dhm-orange);
	background: var(--dhm-surface);
}
.dhm-search-bar::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a7f74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='5'/><line x1='11' y1='11' x2='15' y2='15'/></svg>");
	background-repeat: no-repeat;
	pointer-events: none;
}

.dhm-cat-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: thin;
	margin: 0 -2px;
	padding: 0 2px 2px;
}
.dhm-cat-tab {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--dhm-surface-2);
	border: 1px solid var(--dhm-line);
	color: var(--dhm-text-2);
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	transition: all 0.12s ease;
}
.dhm-cat-tab:hover { color: var(--dhm-orange-700); border-color: var(--dhm-orange-100); }
.dhm-cat-tab.active {
	background: var(--dhm-orange);
	color: #fff;
	border-color: var(--dhm-orange);
}

.dhm-product-grid {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 14px 16px 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	align-content: start;
}

.dhm-product-card {
	position: relative;
	background: var(--dhm-surface);
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease;
	display: flex;
	flex-direction: column;
}
.dhm-product-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--dhm-shadow-md);
	border-color: var(--dhm-orange-100);
}
.dhm-product-card:active { transform: translateY(0); }

/* Square image box that NEVER collapses — uses padding-bottom 100% trick.
   This is bulletproof regardless of image load order or browser engine. */
.dhm-product-img {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	background: var(--dhm-orange-50);
	overflow: hidden;
}
.dhm-product-img > img,
.dhm-product-img > span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dhm-orange);
	font-weight: 800;
	font-size: 32px;
	background: var(--dhm-orange-50);
}

.dhm-product-meta {
	padding: 8px 10px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dhm-product-name {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
	color: var(--dhm-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}
.dhm-product-price {
	font-weight: 800;
	font-size: 13.5px;
	color: var(--dhm-orange-700);
	margin-top: 2px;
}

.dhm-product-card.out-of-stock { opacity: 0.6; }
.dhm-product-oos-badge {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--dhm-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 3px 8px;
	border-radius: 4px;
}

.dhm-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--dhm-muted);
	font-size: 13px;
}

/* ======================================================================
   Cart pane (right)
====================================================================== */
.dhm-pane-cart { background: var(--dhm-surface); }

.dhm-cart-summary {
	padding: 10px 16px;
	border-bottom: 1px solid var(--dhm-line);
	background: var(--dhm-orange-50);
	color: var(--dhm-orange-700);
	font-weight: 600;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.dhm-cart-summary.idle {
	background: var(--dhm-surface-2);
	color: var(--dhm-muted);
	font-weight: 500;
}

.dhm-cart-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dhm-cart-empty {
	padding: 30px 16px;
	text-align: center;
	color: var(--dhm-muted);
	font-size: 13px;
	line-height: 1.5;
}

.dhm-cart-item {
	background: var(--dhm-surface-2);
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	padding: 10px 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dhm-cart-item-top {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13.5px;
}
.dhm-cart-item-name { font-weight: 600; line-height: 1.25; }
.dhm-cart-item-amount { font-weight: 700; color: var(--dhm-orange-700); white-space: nowrap; }
.dhm-cart-item-note {
	font-size: 12px;
	color: var(--dhm-muted);
	font-style: italic;
}
.dhm-cart-item-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.dhm-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	overflow: hidden;
	background: var(--dhm-surface);
}
.dhm-qty-stepper button {
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	font-size: 16px;
	font-weight: 700;
	color: var(--dhm-text);
	cursor: pointer;
}
.dhm-qty-stepper button:hover { background: var(--dhm-orange-50); color: var(--dhm-orange-700); }
.dhm-qty-stepper input {
	width: 38px;
	height: 30px;
	border: none;
	background: transparent;
	text-align: center;
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	color: var(--dhm-text);
	outline: none;
}

.dhm-cart-item-actions {
	display: inline-flex;
	gap: 4px;
}
.dhm-cart-item-actions button {
	width: 30px;
	height: 30px;
	border-radius: var(--dhm-radius-sm);
	border: 1px solid var(--dhm-line);
	background: var(--dhm-surface);
	color: var(--dhm-text-2);
	cursor: pointer;
	font-size: 14px;
}
.dhm-cart-item-actions button:hover { background: var(--dhm-orange-50); color: var(--dhm-orange-700); border-color: var(--dhm-orange-100); }
.dhm-cart-item-actions button[data-act="rm"]:hover { background: var(--dhm-danger-50); color: var(--dhm-danger); border-color: var(--dhm-danger-50); }

.dhm-cart-totals {
	flex: 0 0 auto;
	padding: 10px 16px;
	border-top: 1px solid var(--dhm-line);
	background: var(--dhm-surface-2);
}
.dhm-totals-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--dhm-text-2);
	padding: 3px 0;
}
.dhm-totals-row.dhm-grand {
	font-size: 17px;
	font-weight: 800;
	color: var(--dhm-text);
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--dhm-line);
}

.dhm-cart-actions {
	flex: 0 0 auto;
	padding: 12px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid var(--dhm-line);
	background: var(--dhm-surface);
}
.dhm-cart-actions .dhm-btn-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* ======================================================================
   Modal overlay (used by shell + admin + payment + void + shift)
====================================================================== */
.dhm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 12, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	padding: 16px;
	animation: dhm-fade-in 0.12s ease;
}
@keyframes dhm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.dhm-modal {
	background: var(--dhm-surface);
	border-radius: var(--dhm-radius-lg);
	padding: 24px 22px;
	box-shadow: var(--dhm-shadow-lg);
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.dhm-modal h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.dhm-modal-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dhm-modal-field label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dhm-muted);
}
.dhm-modal-field input,
.dhm-modal-field select,
.dhm-modal-field textarea {
	width: 100%;
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	background: var(--dhm-surface-2);
	color: var(--dhm-text);
	outline: none;
}
.dhm-modal-field input:focus,
.dhm-modal-field select:focus,
.dhm-modal-field textarea:focus {
	border-color: var(--dhm-orange);
	background: var(--dhm-surface);
}
.dhm-modal-field textarea { resize: vertical; min-height: 60px; }

.dhm-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 6px;
}

/* Payment grids */
.dhm-payment-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.dhm-payment-method {
	padding: 14px 10px;
	text-align: center;
	border: 1.5px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	font-weight: 700;
	cursor: pointer;
	background: var(--dhm-surface-2);
	transition: all 0.12s ease;
}
.dhm-payment-method:hover { border-color: var(--dhm-orange-100); }
.dhm-payment-method.active {
	background: var(--dhm-orange);
	color: #fff;
	border-color: var(--dhm-orange);
}

.dhm-quick-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.dhm-quick-amount {
	padding: 6px 12px;
	border: 1px solid var(--dhm-line);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	background: var(--dhm-surface-2);
}
.dhm-quick-amount:hover { background: var(--dhm-orange-50); color: var(--dhm-orange-700); }

.dhm-payment-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	padding: 8px;
	background: var(--dhm-surface-2);
}
.dhm-payment-list-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
}
.dhm-payment-list-row .rm {
	cursor: pointer;
	color: var(--dhm-danger);
	font-weight: 700;
	margin-left: 6px;
}

/* ======================================================================
   Toasts
====================================================================== */
.dhm-toast-stack {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 9999;
	pointer-events: none;
}
.dhm-toast {
	background: var(--dhm-text);
	color: #fff;
	padding: 12px 16px;
	border-radius: var(--dhm-radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	max-width: 360px;
	box-shadow: var(--dhm-shadow-lg);
	transition: opacity 0.2s ease;
	pointer-events: auto;
}
.dhm-toast.success { background: var(--dhm-success); }
.dhm-toast.danger  { background: var(--dhm-danger); }
.dhm-toast.warning { background: var(--dhm-warning); color: var(--dhm-text); }

/* ======================================================================
   Print frame
====================================================================== */
.dhm-print-frame {
	position: fixed;
	top: -9999px;
	left: -9999px;
	width: 80mm;
	height: 200mm;
	border: 0;
}

/* ======================================================================
   Admin Console (Manager) — preserves all classes used in pos_admin.js
====================================================================== */
.dhm-admin-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 12, 0.5);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	z-index: 300;
}
.dhm-admin {
	margin: 24px;
	flex: 1 1 auto;
	background: var(--dhm-surface);
	border-radius: var(--dhm-radius-lg);
	box-shadow: var(--dhm-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}
.dhm-admin-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--dhm-line);
	background: var(--dhm-surface-2);
}
.dhm-admin-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--dhm-orange-700);
}
.dhm-admin-tabs {
	display: flex;
	gap: 4px;
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: thin;
}
.dhm-admin-tabs button {
	border: none;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--dhm-text-2);
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}
.dhm-admin-tabs button:hover { background: var(--dhm-orange-50); color: var(--dhm-orange-700); }
.dhm-admin-tabs button.active {
	background: var(--dhm-orange);
	color: #fff;
}
.dhm-admin-body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 20px 22px;
	background: var(--dhm-surface);
}

.dhm-admin-section + .dhm-admin-section { margin-top: 24px; }
.dhm-admin-section h3 {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	color: var(--dhm-text);
}

.dhm-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.dhm-admin-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0;
}
.dhm-admin-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--dhm-text-2);
}

.dhm-admin-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.dhm-admin-toolbar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 12px;
}
.dhm-admin-toolbar input,
.dhm-admin-toolbar select {
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	padding: 8px 10px;
	font: inherit;
	font-size: 13.5px;
	background: var(--dhm-surface);
	color: var(--dhm-text);
	outline: none;
}

.dhm-admin-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
	background: var(--dhm-surface);
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius-sm);
	overflow: hidden;
}
.dhm-admin-table th,
.dhm-admin-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--dhm-line);
	vertical-align: middle;
}
.dhm-admin-table th {
	background: var(--dhm-surface-2);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dhm-muted);
}
.dhm-admin-table tr:last-child td { border-bottom: none; }
.dhm-admin-table code {
	background: var(--dhm-orange-50);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 12px;
}

.dhm-row-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	white-space: nowrap;
}

.dhm-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: var(--dhm-surface-2);
	color: var(--dhm-text-2);
	border: 1px solid var(--dhm-line);
	margin-right: 4px;
}
.dhm-tag.success { background: var(--dhm-success-50); color: var(--dhm-success); border-color: var(--dhm-success-50); }
.dhm-tag.warning { background: var(--dhm-warning-50); color: var(--dhm-warning); border-color: var(--dhm-warning-50); }
.dhm-tag.danger  { background: var(--dhm-danger-50);  color: var(--dhm-danger);  border-color: var(--dhm-danger-50); }

.dhm-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid var(--dhm-line);
	vertical-align: middle;
	margin-right: 4px;
}

.dhm-admin-tool-card {
	border: 1px solid var(--dhm-line);
	border-radius: var(--dhm-radius);
	padding: 16px;
	background: var(--dhm-surface-2);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dhm-admin-tool-card h4 { margin: 0; font-size: 14px; font-weight: 800; }
.dhm-admin-tool-card p  { margin: 0; color: var(--dhm-muted); font-size: 13px; line-height: 1.4; }
.dhm-admin-tool-card button { align-self: flex-start; }

/* ======================================================================
   Pane backdrop (mobile drawers)
====================================================================== */
.dhm-pane-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(20, 16, 12, 0.4);
	z-index: 80;
}

/* ======================================================================
   Responsive
====================================================================== */

/* Large desktop: more breathing room */
@media (min-width: 1500px) {
	.dhm-main { grid-template-columns: 280px minmax(0, 1fr) 380px; }
}

/* Tablet landscape */
@media (max-width: 1180px) {
	.dhm-main { grid-template-columns: 230px minmax(0, 1fr) 320px; }
	.dhm-product-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}

/* Tablet portrait — collapse floor pane to drawer */
@media (max-width: 980px) {
	.dhm-main { grid-template-columns: minmax(0, 1fr) 320px; }
	.dhm-pane-floor {
		position: fixed;
		top: var(--dhm-h-header);
		left: 0;
		bottom: 0;
		width: min(86vw, 360px);
		z-index: 90;
		transform: translateX(-100%);
		transition: transform 0.18s ease;
		box-shadow: var(--dhm-shadow-lg);
		border-right: 1px solid var(--dhm-line);
	}
	body.dhm-floor-open .dhm-pane-floor { transform: translateX(0); }
	body.dhm-floor-open .dhm-pane-backdrop,
	body.dhm-cart-open  .dhm-pane-backdrop { display: block; }
	.dhm-pane-floor .dhm-pane-close { display: inline-flex; }
	.dhm-only-narrow { display: inline-flex !important; }
}

/* Phones — collapse cart too */
@media (max-width: 720px) {
	:root { --dhm-h-header: 56px; }
	.dhm-main { grid-template-columns: minmax(0, 1fr); }
	.dhm-pane-cart {
		position: fixed;
		top: var(--dhm-h-header);
		right: 0;
		bottom: 0;
		width: min(92vw, 380px);
		z-index: 90;
		transform: translateX(100%);
		transition: transform 0.18s ease;
		box-shadow: var(--dhm-shadow-lg);
	}
	body.dhm-cart-open .dhm-pane-cart { transform: translateX(0); }
	.dhm-pane-cart .dhm-pane-close { display: inline-flex; }

	.dhm-header-context { display: none; }
	.dhm-header-user { display: none; }
	.dhm-printer-status .label-text { display: none; }

	.dhm-product-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); padding: 12px; gap: 10px; }
	.dhm-products-top { padding: 10px 12px; }
	.dhm-brand { font-size: 14px; }
	.dhm-brand small { display: none; }

	.dhm-btn-label { display: none; } /* compact buttons in header */
	.dhm-header .dhm-btn { padding: 0; width: 40px; height: 40px; }
}

/* Show narrow-only buttons (toggle floor / cart) only on narrow screens */
.dhm-only-narrow { display: none !important; }
@media (max-width: 980px) { .dhm-only-narrow { display: inline-flex !important; } }

/* Touch-friendly scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
	background: rgba(20, 16, 12, 0.18);
	border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(20, 16, 12, 0.28); }
::-webkit-scrollbar-track { background: transparent; }