/* ======================================================================
   Kitchen by PJ — POS UI (restaurant build 2026-10)
   Brand: blue #55ADDE (theme colour of kitchen-by-pj.nl) on a cool
   off-white; the variable names keep the legacy "orange" slot so the
   whole stylesheet re-themes from the :root block alone.
   --------------------------------------------------------------------
   - Three-column shell: Floor / Products / Cart
   - Mobile / tablet collapse to drawers
   - All classes used by pos_admin.js preserved (kbp-admin-*, kbp-modal-*,
     kbp-form-*, kbp-tag, kbp-swatch, kbp-row-actions, kbp-grid-2, ...)
====================================================================== */

:root {
	--kbp-brand:      #55ADDE;
	--kbp-orange:     #55ADDE; /* brand primary (legacy slot name) */
	--kbp-orange-600: #3f98cc; /* hover */
	--kbp-orange-700: #2a7db0; /* pressed / dark text on tint */
	--kbp-orange-50:  #eaf5fc; /* tint */
	--kbp-orange-100: #cfe6f5; /* tint border */
	--kbp-navy:       #14212b;

	--kbp-bg:        #f3f6f9;
	--kbp-surface:   #ffffff;
	--kbp-surface-2: #f8fafc;

	--kbp-text:      #14212b;
	--kbp-text-2:    #3d4d5a;
	--kbp-muted:     #6b7a86;
	--kbp-line:      #e3e9ee;
	--kbp-line-2:    #eef2f5;

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

	--kbp-shadow-sm: 0 1px 2px rgba(20, 33, 43, 0.06);
	--kbp-shadow-md: 0 4px 14px rgba(20, 33, 43, 0.08);
	--kbp-shadow-lg: 0 18px 48px rgba(20, 33, 43, 0.18);

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

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

	--kbp-h-header: 60px;

	/* Fixed image-area height for product cards. Overridden in media
	   queries below for narrow / short viewports. The card's grid layout
	   uses this directly via `grid-template-rows: var(--kbp-prod-img-h)`,
	   so a single variable update flips the whole layout. */
	--kbp-prod-img-h: 160px;
}

* { box-sizing: border-box; }

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

/* Use dynamic viewport height (dvh) so iPad / iOS Safari don't include the
   address bar in the layout — without this the bottom of the cart pane and
   modal "Bevestig", "Betalen", "Naar Keuken" buttons get clipped below the
   visible viewport. Falls back to 100vh on browsers without dvh support. */
body.kbp-pos-body {
	overflow: hidden;
	height: 100vh;
	height: 100dvh;
}

/* ----------------------------------------------------------------------
   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;
}

#kbp-pos-root {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--kbp-bg);
	z-index: 1;
	/* Respect iPad / iPhone home-bar so action rows aren't covered by the
	   gesture indicator. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ======================================================================
   Loading
====================================================================== */
.kbp-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 240px;
	gap: 18px;
	color: var(--kbp-muted);
	padding: 24px;
	text-align: center;
}
.kbp-loading-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.kbp-loading-logo {
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: var(--kbp-radius);
	background: var(--kbp-surface);
	box-shadow: var(--kbp-shadow-md);
	padding: 6px;
}
.kbp-loading-logo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--kbp-orange) 0%, var(--kbp-orange-700) 100%);
	color: #fff;
	font-weight: 800;
	font-size: 36px;
	letter-spacing: 0.04em;
	padding: 0;
}
.kbp-loading-titles { line-height: 1.2; }
.kbp-loading-titles h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--kbp-orange-700);
	letter-spacing: -0.01em;
}
.kbp-loading-titles p {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kbp-muted);
}
.kbp-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--kbp-orange-50);
	border-top-color: var(--kbp-orange);
	border-radius: 50%;
	animation: kbp-spin 0.8s linear infinite;
}
@keyframes kbp-spin { to { transform: rotate(360deg); } }
.kbp-loading-text { font-weight: 600; color: var(--kbp-orange-700); }

/* ======================================================================
   Buttons (used by both shell and admin console)
====================================================================== */
.kbp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--kbp-orange);
	color: #fff;
	border: 1px solid var(--kbp-orange);
	padding: 9px 14px;
	border-radius: var(--kbp-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;
}
.kbp-btn:hover { background: var(--kbp-orange-600); border-color: var(--kbp-orange-600); }
.kbp-btn:active { transform: translateY(1px); }
.kbp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

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

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

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

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

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

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

.kbp-brand-logo {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	object-fit: contain;
	border-radius: var(--kbp-radius-sm);
	background: var(--kbp-surface-2);
	padding: 2px;
	border: 1px solid var(--kbp-line);
}
.kbp-brand {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	font-weight: 800;
	color: var(--kbp-orange-700);
	font-size: 16px;
	letter-spacing: -0.01em;
}
.kbp-brand small {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--kbp-muted);
	margin-top: 2px;
}

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

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

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

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

.kbp-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--kbp-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(--kbp-surface);
}

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

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

.kbp-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(--kbp-line);
	background: var(--kbp-surface);
}
.kbp-pane-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kbp-text-2);
}
.kbp-pane-header .sub {
	font-size: 12px;
	color: var(--kbp-muted);
	font-weight: 500;
}

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

/* Compact pane header that only contains a close button — used on the
   Floor pane where the "Zaal" title was removed. Hidden on wide screens
   (the close button is mobile-only) and only shown on narrow drawer
   layouts to host the close handle. */
.kbp-pane-header.kbp-pane-header-compact {
	display: none;
}

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

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

.kbp-takeaway-tile {
	margin: 8px 12px 4px;
	padding: 14px 16px;
	border-radius: var(--kbp-radius);
	background: linear-gradient(135deg, var(--kbp-orange) 0%, var(--kbp-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(--kbp-shadow-md);
	transition: transform 0.1s ease, box-shadow 0.12s ease;
}
.kbp-takeaway-tile .ic { font-size: 18px; }
.kbp-takeaway-tile:hover { transform: translateY(-1px); box-shadow: var(--kbp-shadow-lg); }
.kbp-takeaway-tile.active {
	background: linear-gradient(135deg, var(--kbp-orange-700) 0%, #1f6a98 100%);
}

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

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

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

/* Default visual (grid) table card */
.kbp-table-card {
	position: relative;
	min-height: 86px;
	padding: 12px 10px;
	border-radius: var(--kbp-radius);
	background: var(--kbp-surface);
	border: 1.5px solid var(--kbp-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;
}
.kbp-table-card:hover {
	border-color: var(--kbp-orange-100);
	box-shadow: var(--kbp-shadow-md);
	transform: translateY(-1px);
}
.kbp-table-card.selected {
	border-color: var(--kbp-orange);
	box-shadow: 0 0 0 3px var(--kbp-orange-50);
}
.kbp-table-card .label {
	font-weight: 800;
	font-size: 16px;
	color: var(--kbp-text);
	letter-spacing: 0.02em;
}
.kbp-table-card .seats {
	font-size: 11px;
	color: var(--kbp-muted);
	font-weight: 600;
}
.kbp-table-card .amount {
	font-size: 13px;
	font-weight: 700;
	color: var(--kbp-orange-700);
}
.kbp-table-card .status-pill {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kbp-success);
}
.kbp-table-card.status-free .status-pill { background: var(--kbp-success); }
.kbp-table-card.status-open .status-pill,
.kbp-table-card.status-sent .status-pill { background: var(--kbp-orange); }
.kbp-table-card.status-paid .status-pill { background: var(--kbp-info); }

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

/* Floor plan canvas: visible whenever the JS renders one (both in normal
   POS view and layout-edit mode). Cards inside the canvas are absolutely
   positioned at their saved x/y. The "drag" cursor is only shown while
   the floor is in layout-edit mode. */
body.kbp-layout-mode .kbp-table-grid { display: none; }

.kbp-floor-canvas {
	position: relative;
	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(--kbp-radius);
}
.kbp-floor-canvas .kbp-table-card {
	position: absolute;
	min-height: 0;
}
body.kbp-layout-mode .kbp-floor-canvas .kbp-table-card {
	cursor: move;
}

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

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

.kbp-search-bar {
	position: relative;
}
.kbp-search-bar input {
	width: 100%;
	height: 42px;
	border-radius: var(--kbp-radius);
	border: 1px solid var(--kbp-line);
	background: var(--kbp-surface-2);
	padding: 0 14px 0 40px;
	font: inherit;
	font-size: 14px;
	color: var(--kbp-text);
	outline: none;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.kbp-search-bar input:focus {
	border-color: var(--kbp-orange);
	background: var(--kbp-surface);
}
.kbp-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;
}

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

.kbp-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;
}

.kbp-product-card {
	position: relative;
	background: var(--kbp-surface);
	border: 1px solid var(--kbp-line);
	border-radius: var(--kbp-radius);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease;
	/* CSS Grid with two explicitly sized rows so the meta row (name + price)
	   is GUARANTEED to render at its full height regardless of what the
	   image row tries to do. `--kbp-prod-img-h` is the fixed image area
	   height (overridable in media queries); the meta row is
	   `minmax(60px, auto)` so the name + price ALWAYS get at least 60px of
	   space even if some parent constraint tries to squeeze the card. */
	display: grid;
	grid-template-rows: var(--kbp-prod-img-h, 160px) minmax(60px, auto);
	overflow: hidden;
	min-height: calc(var(--kbp-prod-img-h, 160px) + 60px);
}
.kbp-product-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--kbp-shadow-md);
	border-color: var(--kbp-orange-100);
}
.kbp-product-card:active { transform: translateY(0); }

/* Image area — the card's grid already gave us a row of exactly
   `var(--kbp-prod-img-h)` for this box, so we just have to fill that
   grid cell. The inner <img> is absolutely positioned so Frappe's
   parent `img { max-width: 100%; height: auto }` (from
   templates/web.html / website.bundle.css) CAN'T re-stretch the box
   to the image's intrinsic 1000+ px height. */
#kbp-pos-root .kbp-product-img {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	padding-bottom: 0 !important;
	background: var(--kbp-orange-50);
	overflow: hidden !important;
}
#kbp-pos-root .kbp-product-img > img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	background: var(--kbp-orange-50);
	display: block !important;
}
#kbp-pos-root .kbp-product-img > span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kbp-orange);
	font-weight: 800;
	font-size: 32px;
	background: var(--kbp-orange-50);
}

.kbp-product-meta {
	padding: 8px 10px 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 60px;
	min-width: 0;
}
.kbp-product-name {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
	color: var(--kbp-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* min-height removed — we no longer need to "reserve" 2 lines of name
	   space; the grid row already guarantees the price has somewhere to
	   sit, and one-line names look fine. */
}
.kbp-product-price {
	font-weight: 800;
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--kbp-orange-700);
	margin-top: 2px;
	/* Make absolutely sure the price never collapses or hides. */
	display: block;
	visibility: visible;
}

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

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

/* ======================================================================
   Cart pane (right)
====================================================================== */
.kbp-pane-cart {
	background: var(--kbp-surface);
	/* CSS Grid layout so the cart-list can shrink to zero (with its own
	   inner scroll) while the totals + actions footer is GUARANTEED to
	   stay visible at the bottom of the pane — even at high browser /
	   system zoom on a tablet where the natural content height exceeds
	   the available pane height. */
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr) auto auto;
	min-height: 0;
	overflow: hidden;
}
.kbp-pane-cart .kbp-pane-header,
.kbp-pane-cart .kbp-cart-summary,
.kbp-pane-cart .kbp-cart-totals,
.kbp-pane-cart .kbp-cart-actions {
	min-height: 0;
}

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

.kbp-cart-backdated-banner {
	padding: 8px 16px;
	background: var(--kbp-warning-50, #fff4d6);
	color: var(--kbp-warning, #8a6500);
	border-bottom: 1px solid var(--kbp-warning-50, #f0d68c);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}
.kbp-cart-backdated-banner[hidden] { display: none; }

.kbp-cart-list {
	/* Grid row `minmax(0, 1fr)` on the parent gives us the leftover space,
	   so we just need to be the inner scroll surface here. */
	min-height: 0;
	overflow-y: auto;
	padding: 8px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

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

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

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

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

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

/* Wisselgeld / change row inside the payment modal. Greyed-out by default
   until the cashier enters more than the remaining amount. */
.kbp-totals-row.kbp-change-row {
	color: var(--kbp-muted);
	border-top: none;
	margin-top: 0;
	padding-top: 4px;
}
.kbp-totals-row.kbp-change-row.is-active {
	color: var(--kbp-success);
}
.kbp-totals-row.kbp-change-row.is-active span:last-child {
	font-size: 22px;
}

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

/* ======================================================================
   Modal overlay (used by shell + admin + payment + void + shift)
====================================================================== */
.kbp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 33, 43, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	/* Respect notch / home-bar so the modal isn't clipped on iPad / iPhone. */
	padding:
		max(16px, env(safe-area-inset-top, 16px))
		max(16px, env(safe-area-inset-right, 16px))
		max(16px, env(safe-area-inset-bottom, 16px))
		max(16px, env(safe-area-inset-left, 16px));
	animation: kbp-fade-in 0.12s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
@keyframes kbp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.kbp-modal {
	background: var(--kbp-surface);
	border-radius: var(--kbp-radius-lg);
	padding: 24px 22px;
	box-shadow: var(--kbp-shadow-lg);
	width: 100%;
	max-width: 520px;
	/* Use dvh so the modal never extends past the visible viewport on iPad
	   Safari (where 100vh includes the URL bar). 32px accounts for the
	   overlay padding (top + bottom). */
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.kbp-modal h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

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

.kbp-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 6px;
	/* Pin the primary action row to the bottom of the (scrollable) modal so
	   "Bevestig", "Opslaan", "Verwijderen" etc. are always reachable on
	   iPad even when the rest of the modal scrolls. */
	position: sticky;
	bottom: -24px;
	margin-bottom: -24px;
	margin-left: -22px;
	margin-right: -22px;
	padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--kbp-surface);
	border-top: 1px solid var(--kbp-line);
	z-index: 1;
}

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

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

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

/* ----------------------------------------------------------------------
   Payment modal (numpad layout)
   Wider than the default modal so the on-screen numpad stays touch-sized.
   The grid order matches the JS key list:
     7 8 9
     4 5 6
     1 2 3
     . 0 ⌫
---------------------------------------------------------------------- */
.kbp-modal.kbp-modal-pay {
	max-width: 520px;
	gap: 12px;
}
.kbp-pay-amount-display {
	font-size: 36px;
	font-weight: 800;
	text-align: right;
	padding: 14px 18px;
	background: var(--kbp-surface-2);
	border: 2px solid var(--kbp-line);
	border-radius: var(--kbp-radius);
	color: var(--kbp-text);
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	user-select: none;
}
.kbp-pay-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 4px;
}
.kbp-pay-info .kbp-totals-row { padding: 2px 0; }
.kbp-pay-info .kbp-change-row {
	border-top: none;
	margin-top: 0;
	padding-top: 4px;
}
.kbp-pay-numpad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.kbp-pay-key {
	font: inherit;
	font-size: 22px;
	font-weight: 700;
	background: var(--kbp-surface-2);
	border: 1.5px solid var(--kbp-line);
	border-radius: var(--kbp-radius-sm);
	color: var(--kbp-text);
	padding: 16px 0;
	cursor: pointer;
	transition: background 0.08s ease, border-color 0.08s ease, transform 0.05s ease;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.kbp-pay-key:hover  { background: var(--kbp-orange-50); border-color: var(--kbp-orange-100); }
.kbp-pay-key:active { transform: translateY(1px); background: var(--kbp-orange); color: #fff; border-color: var(--kbp-orange); }
.kbp-pay-key-back {
	background: var(--kbp-surface);
	color: var(--kbp-danger);
}
.kbp-pay-key-back:hover { background: var(--kbp-danger-50); border-color: var(--kbp-danger-50); }

.kbp-modal.kbp-modal-pay .kbp-quick-amount {
	padding: 8px 14px;
	font-size: 13.5px;
}
.kbp-modal.kbp-modal-pay .kbp-modal-actions {
	margin-top: 4px;
}
.kbp-modal.kbp-modal-pay .kbp-btn-lg {
	flex: 1 1 auto;
}

/* Slightly larger phone screens still get a usable numpad */
@media (max-width: 480px) {
	.kbp-pay-amount-display { font-size: 28px; padding: 12px 14px; }
	.kbp-pay-key            { font-size: 19px; padding: 13px 0; }
}

/* Short viewports (iPad landscape, small laptops) — tighten the payment
   modal vertically so the "Bevestig & Print" action row is always visible
   without having to scroll far inside the modal. */
@media (max-height: 820px) {
	.kbp-modal { padding: 18px 20px; gap: 10px; }
	.kbp-modal.kbp-modal-pay { gap: 10px; }
	.kbp-modal.kbp-modal-pay .kbp-pay-amount-display {
		font-size: 26px; padding: 10px 14px;
	}
	.kbp-modal.kbp-modal-pay .kbp-payment-method { padding: 10px 8px; }
	.kbp-modal.kbp-modal-pay .kbp-pay-key {
		font-size: 18px; padding: 10px 0;
	}
	.kbp-modal-actions {
		bottom: -18px;
		margin-bottom: -18px;
		margin-left: -20px;
		margin-right: -20px;
		padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
	}
}

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

/* ======================================================================
   Print frame
====================================================================== */
.kbp-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
====================================================================== */
.kbp-admin-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 33, 43, 0.5);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	z-index: 300;
}
.kbp-admin {
	margin: 24px;
	flex: 1 1 auto;
	background: var(--kbp-surface);
	border-radius: var(--kbp-radius-lg);
	box-shadow: var(--kbp-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}
.kbp-admin-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--kbp-line);
	background: var(--kbp-surface-2);
}
.kbp-admin-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--kbp-orange-700);
}
.kbp-admin-tabs {
	display: flex;
	gap: 4px;
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: thin;
}
.kbp-admin-tabs button {
	border: none;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: var(--kbp-text-2);
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}
.kbp-admin-tabs button:hover { background: var(--kbp-orange-50); color: var(--kbp-orange-700); }
.kbp-admin-tabs button.active {
	background: var(--kbp-orange);
	color: #fff;
}
.kbp-admin-body {
	flex: 1 1 auto;
	overflow: auto;
	padding: 20px 22px;
	background: var(--kbp-surface);
}

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

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

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

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

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

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

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

/* Bulk-select checkboxes in the Bonnen history table. The column is
   intentionally narrow so the other columns keep their layout. */
.kbp-admin-table .kbp-admin-check-cell {
	width: 36px;
	padding-right: 4px;
	padding-left: 12px;
	text-align: center;
}
.kbp-admin-table .kbp-admin-check-cell input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}
.kbp-admin-table-selectable tbody tr.is-selected {
	background: var(--kbp-orange-50);
}

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

.kbp-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kbp-rep-table tr.kbp-rep-row { cursor: pointer; transition: background 0.12s ease; }
.kbp-rep-table tr.kbp-rep-row:hover { background: var(--kbp-orange-50); }
.kbp-rep-table tr.kbp-rep-row.expanded { background: var(--kbp-orange-50); }
.kbp-rep-table tr.kbp-rep-row.expanded > td:first-child { font-weight: 700; }

.kbp-rep-chev {
	display: inline-block;
	width: 14px;
	margin-right: 8px;
	color: var(--kbp-muted);
	transition: transform 0.15s ease, color 0.15s ease;
	font-weight: 700;
}
.kbp-rep-row.expanded .kbp-rep-chev {
	transform: rotate(90deg);
	color: var(--kbp-orange);
}

.kbp-rep-detail-row > td {
	padding: 0 !important;
	background: var(--kbp-surface-2);
	border-bottom: 1px solid var(--kbp-line);
}
.kbp-rep-detail-inner {
	padding: 12px 14px 16px;
}
.kbp-rep-detail-inner > .kbp-admin-table {
	margin: 0;
	border: 1px solid var(--kbp-line);
}
.kbp-rep-detail-table tr.kbp-rep-total-row {
	background: var(--kbp-surface);
}
.kbp-rep-detail-table tr.kbp-rep-total-row td {
	border-top: 1px solid var(--kbp-line);
	border-bottom: none;
	font-weight: 700;
}
.kbp-rep-total-label { text-align: right; color: var(--kbp-muted); }
.kbp-rep-total-amount { color: var(--kbp-text); }

.kbp-rep-empty {
	padding: 14px 16px;
	color: var(--kbp-muted);
	font-style: italic;
}
.kbp-rep-loading {
	padding: 14px 16px;
	color: var(--kbp-muted);
	display: flex;
	align-items: center;
	gap: 10px;
}

.kbp-month-overview {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.kbp-month-hero {
	background: var(--kbp-surface);
	border: 1px solid var(--kbp-line);
	border-left: 4px solid var(--kbp-orange);
	border-radius: var(--kbp-radius-sm);
	padding: 16px 18px;
}
.kbp-month-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kbp-muted);
}
.kbp-month-total {
	margin-top: 4px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.kbp-month-meta {
	margin-top: 6px;
	color: var(--kbp-muted);
	font-size: 13px;
}
.kbp-month-section h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
}
.kbp-month-empty {
	padding: 14px 16px;
	color: var(--kbp-muted);
	font-style: italic;
	background: var(--kbp-surface);
	border: 1px solid var(--kbp-line);
	border-radius: var(--kbp-radius-sm);
}
.kbp-month-discount td {
	color: var(--kbp-text-2);
}

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

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

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

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

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

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

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

/* iPad portrait specifically — even though we keep the cart sidebar, give
   the cart slightly less width so the product grid (and the price column in
   each product card) doesn't get crushed, and trim the cart action padding
   so "Betalen" / "Naar Keuken" stay visible without scrolling. */
@media (min-width: 720px) and (max-width: 980px) {
	:root { --kbp-prod-img-h: 140px; }
	.kbp-main { grid-template-columns: minmax(0, 1fr) 300px; }
	.kbp-cart-actions { padding: 10px 14px 12px; gap: 6px; }
	.kbp-cart-totals { padding: 8px 14px; }
	.kbp-cart-list { padding: 6px 10px 10px; }
}

/* Tablet with short viewport height (landscape iPad ~768px, or any device
   the cashier has system-zoomed up so the effective viewport is tight).
   Compact the bottom of the cart and the product card image so the
   action row ("Betalen", "Naar Keuken", "Verwijderen") plus the product
   name + price ALWAYS stay visible without scrolling out of view. */
@media (max-height: 820px) and (min-width: 720px) {
	:root { --kbp-prod-img-h: 120px; }
	.kbp-cart-actions { padding: 8px 12px 10px; gap: 6px; }
	.kbp-cart-actions .kbp-btn-lg { padding: 10px 14px; font-size: 14px; }
	.kbp-cart-actions .kbp-btn { padding: 8px 10px; font-size: 13px; }
	.kbp-cart-totals { padding: 6px 12px; }
	.kbp-totals-row.kbp-grand { font-size: 15px; padding-top: 4px; margin-top: 4px; }
	.kbp-cart-summary { padding: 6px 12px; font-size: 12.5px; }
	.kbp-product-name { font-size: 12.5px; }
	.kbp-product-meta { padding: 6px 8px 8px; min-height: 52px; }
}

@media (max-height: 640px) {
	:root { --kbp-prod-img-h: 90px; }
	.kbp-cart-actions { padding: 6px 12px 8px; gap: 4px; }
	.kbp-cart-actions .kbp-btn-lg { padding: 8px 12px; font-size: 13px; }
	.kbp-cart-actions .kbp-btn { padding: 6px 10px; font-size: 12.5px; }
	.kbp-cart-totals { padding: 4px 12px; }
	.kbp-totals-row { padding: 1px 0; font-size: 12px; }
	.kbp-totals-row.kbp-grand { font-size: 14px; padding-top: 2px; margin-top: 2px; }
	.kbp-product-meta { padding: 4px 6px 6px; min-height: 46px; }
	.kbp-product-name { font-size: 12px; }
	.kbp-product-price { font-size: 12.5px; }
}

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

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

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

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

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

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


/* ======================================================================
   Kitchen by PJ additions: inbox, floor badges, clock, QR, calendar,
   personeel, rooster
====================================================================== */
.kbp-inbox-badge { right: -4px; top: -4px; background: var(--kbp-danger); }
.kbp-btn-attention { box-shadow: 0 0 0 3px var(--kbp-danger-50), 0 0 0 5px var(--kbp-danger); animation: kbp-pulse 1.6s ease-in-out infinite; }
@keyframes kbp-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--kbp-danger-50); } 50% { box-shadow: 0 0 0 4px rgba(214,69,69,.35); } }

.kbp-tile-badge { position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--kbp-brand); color: #fff; line-height: 1.3; z-index: 2; }
.kbp-tile-badge.muted { background: var(--kbp-orange-100); color: var(--kbp-orange-700); }
.kbp-tile-badge.help { right: auto; left: 6px; background: var(--kbp-danger); animation: kbp-pulse 1.6s ease-in-out infinite; }
.kbp-table-card.has-help { border-color: var(--kbp-danger); }

.kbp-tag.qr-tag { background: var(--kbp-orange-50); border-color: var(--kbp-orange-100); color: var(--kbp-orange-700); font-size: 10px; vertical-align: middle; }
.kbp-cart-guest-note { background: #fff8e1; border: 1px solid #f3e2a3; color: #6f5400; border-radius: var(--kbp-radius-sm); padding: 8px 10px; font-size: 12.5px; margin-bottom: 8px; }
.kbp-product-glyph { font-size: 44px; }

.kbp-modal-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kbp-modal-head-row h2 { margin: 0; flex: 1; }
.kbp-modal.kbp-modal-inbox, .kbp-modal.kbp-modal-wide { max-width: 860px; width: 94vw; max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.kbp-modal.kbp-modal-clock { max-width: 720px; width: 94vw; }
.kbp-inbox-h { margin: 14px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--kbp-muted); display: flex; align-items: center; gap: 8px; }
.kbp-inbox-card { display: flex; gap: 12px; align-items: flex-start; background: var(--kbp-surface-2); border: 1px solid var(--kbp-line); border-radius: var(--kbp-radius); padding: 12px 14px; margin-bottom: 8px; }
.kbp-inbox-card.new { border-color: var(--kbp-brand); background: var(--kbp-orange-50); }
.kbp-inbox-card.help { border-left: 4px solid var(--kbp-danger); }
.kbp-inbox-card.help.busy { border-left-color: var(--kbp-warning); }
.kbp-inbox-main { flex: 1; min-width: 0; }
.kbp-inbox-title { font-size: 15px; }
.kbp-inbox-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.kbp-inbox-items span { background: #fff; border: 1px solid var(--kbp-line); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; }
.kbp-inbox-items em { color: var(--kbp-muted); }
.kbp-inbox-msg { font-style: italic; color: var(--kbp-text-2); margin: 4px 0; }
.kbp-inbox-meta { font-size: 11.5px; color: var(--kbp-muted); }
.kbp-inbox-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.kbp-inbox-actions .kbp-btn { white-space: nowrap; }

.kbp-clock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.kbp-clock-emp { border: 2px solid var(--kbp-line); border-left: 6px solid var(--emp, var(--kbp-brand)); border-radius: var(--kbp-radius-sm); padding: 10px 12px; cursor: pointer; background: #fff; }
.kbp-clock-emp b { display: block; }
.kbp-clock-emp small { color: var(--kbp-muted); }
.kbp-clock-emp.in { background: var(--kbp-success-50); }
.kbp-clock-emp.in small { color: var(--kbp-success); font-weight: 700; }
.kbp-clock-emp.active { border-color: var(--kbp-brand); box-shadow: 0 0 0 3px var(--kbp-orange-50); }
.kbp-clock-panel { border-top: 1px solid var(--kbp-line); padding-top: 10px; margin-top: 6px; }

.kbp-qr-preview svg { width: 240px; height: 240px; }
.kbp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 760px) { .kbp-grid-3 { grid-template-columns: 1fr; } }
.kbp-subtabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--kbp-line); }
.kbp-subtabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px; font: inherit; font-weight: 700; color: var(--kbp-muted); cursor: pointer; }
.kbp-subtabs button.active { color: var(--kbp-orange-700); border-bottom-color: var(--kbp-brand); }
.kbp-scroll-box { max-height: 260px; overflow: auto; }
.kbp-contract-preview { background: #fff; border: 1px solid var(--kbp-line); border-radius: var(--kbp-radius-sm); padding: 18px 22px; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.5; }
.kbp-contract-preview h1 { font-size: 18px; } .kbp-contract-preview h2 { font-size: 14px; margin: 14px 0 4px; }
.kbp-pub-list { max-height: 220px; overflow: auto; border: 1px solid var(--kbp-line); border-radius: var(--kbp-radius-sm); padding: 8px 10px; margin: 8px 0; }

/* calendar */
.kbp-cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.kbp-cal-toolbar h3 { margin: 0; font-size: 18px; min-width: 200px; text-align: center; text-transform: capitalize; }
.kbp-cal-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kbp-kpi { background: #fff; border: 1px solid var(--kbp-line); border-radius: var(--kbp-radius); padding: 10px 14px; }
.kbp-kpi span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--kbp-muted); }
.kbp-kpi b { display: block; font-size: 20px; margin: 2px 0; }
.kbp-kpi small { color: var(--kbp-muted); }
.kbp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kbp-cal-dow { font-size: 11px; font-weight: 800; color: var(--kbp-muted); text-transform: uppercase; text-align: center; padding: 4px 0; }
.kbp-cal-cell { background: #fff; border: 1px solid var(--kbp-line); border-radius: 10px; min-height: 92px; padding: 6px 8px; cursor: pointer; position: relative; display: flex; flex-direction: column; }
.kbp-cal-cell.empty { background: transparent; border: 0; cursor: default; }
.kbp-cal-cell.future { opacity: .55; cursor: default; }
.kbp-cal-cell.today { border-color: var(--kbp-brand); box-shadow: 0 0 0 2px var(--kbp-orange-50); }
.kbp-cal-cell.has-sales:hover { border-color: var(--kbp-brand); }
.kbp-cal-date { font-weight: 800; font-size: 13px; }
.kbp-cal-cell.today .kbp-cal-date { color: var(--kbp-orange-700); }
.kbp-cal-rev { font-weight: 800; font-size: 14px; margin-top: 4px; }
.kbp-cal-rev.muted { color: var(--kbp-line); font-weight: 400; }
.kbp-cal-bar { height: 4px; background: var(--kbp-line-2); border-radius: 2px; margin: 4px 0; overflow: hidden; }
.kbp-cal-bar i { display: block; height: 100%; background: var(--kbp-brand); }
.kbp-cal-meta { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--kbp-muted); }
@media (max-width: 760px) { .kbp-cal-cell { min-height: 70px; padding: 4px; } .kbp-cal-rev { font-size: 11px; } .kbp-cal-meta { display: none; } }

/* roster */
.kbp-roster-wrap { overflow-x: auto; }
.kbp-roster { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 860px; background: #fff; border: 1px solid var(--kbp-line); border-radius: var(--kbp-radius); }
.kbp-roster th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--kbp-muted); padding: 8px 6px; border-bottom: 1px solid var(--kbp-line); text-align: center; }
.kbp-roster th small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.kbp-roster th.today, .kbp-roster td.today { background: var(--kbp-orange-50); }
.kbp-roster td { border-bottom: 1px solid var(--kbp-line-2); border-left: 1px solid var(--kbp-line-2); vertical-align: top; padding: 4px; }
.kbp-roster .kbp-roster-emp { text-align: left; min-width: 170px; border-left: 0; padding: 8px; }
.kbp-roster-cell { min-width: 96px; position: relative; min-height: 56px; }
.kbp-roster-cell .kbp-shift-add { opacity: 0; width: 100%; border: 1px dashed var(--kbp-line); background: none; border-radius: 6px; color: var(--kbp-muted); cursor: pointer; font-size: 16px; line-height: 1.2; padding: 2px; }
.kbp-roster-cell:hover .kbp-shift-add { opacity: 1; }
.kbp-shift { background: #fff; border: 1px solid var(--kbp-line); border-left: 5px solid var(--emp, var(--kbp-brand)); border-radius: 6px; padding: 4px 6px; margin-bottom: 4px; cursor: pointer; font-size: 12px; line-height: 1.25; }
.kbp-shift.pub { border-color: var(--kbp-brand); border-left-color: var(--emp, var(--kbp-brand)); background: #fbfdff; }
.kbp-shift b { display: block; }
.kbp-shift small { color: var(--kbp-muted); }
.kbp-roster-total td { background: var(--kbp-surface-2); font-size: 12px; text-align: center; font-weight: 700; }
.kbp-roster-total td:first-child { text-align: left; }

/* image uploader (products / logo) */
.kbp-upload-row { display: flex; gap: 12px; align-items: flex-start; }
.kbp-upload-preview { width: 84px; height: 84px; flex: 0 0 84px; border: 1px dashed var(--kbp-line); border-radius: var(--kbp-radius-sm); background: var(--kbp-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--kbp-muted); font-size: 12px; }
.kbp-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.kbp-upload-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.kbp-upload-pick { cursor: pointer; }
.kbp-upload-hint { font-size: 11px; color: var(--kbp-muted); word-break: break-all; }
.kbp-details summary { cursor: pointer; font-size: 12px; color: var(--kbp-muted); margin: 4px 0 6px; }
.kbp-thumb-cell { width: 52px; }
.kbp-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--kbp-surface-2); border: 1px solid var(--kbp-line); }
.kbp-thumb-empty { font-size: 20px; color: var(--kbp-muted); }