/**
 * Màn hình bếp.
 *
 * Nền tối để nhìn đỡ chói trong quán, chữ to để liếc một cái là đọc được,
 * nút bấm cao tối thiểu 52px cho ngón tay ướt vẫn bấm trúng.
 *
 * Cả màn hình phủ kín trình duyệt (position: fixed) nên giao diện của theme
 * bên dưới không chen vào được.
 */

body.cmo-kds-page {
	overflow: hidden;
}

.cmo-kds {
	--kds-bg: #12151a;
	--kds-panel: #1b1f27;
	--kds-card: #242a35;
	--kds-line: #333b49;
	--kds-ink: #f2f4f7;
	--kds-muted: #9aa4b2;
	--kds-new: #ff4d4f;
	--kds-making: #faad14;
	--kds-ready: #52c41a;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: var(--kds-bg);
	color: var(--kds-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
}

.cmo-kds *,
.cmo-kds *::before,
.cmo-kds *::after {
	box-sizing: border-box;
}

.cmo-kds [hidden] {
	display: none !important;
}

/* ---------- Cửa nhập PIN ---------- */

.cmo-kds-gate {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--kds-bg);
}

.cmo-kds-gate-box {
	width: 100%;
	max-width: 360px;
	text-align: center;
}

.cmo-kds-gate-title {
	margin: 0 0 4px;
	font-size: 28px;
	font-weight: 800;
	color: var(--kds-ink);
}

.cmo-kds-gate-sub {
	margin: 0 0 28px;
	color: var(--kds-muted);
	font-size: 15px;
}

.cmo-kds-pin label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--kds-muted);
	text-align: left;
}

.cmo-kds-pin input {
	width: 100%;
	height: 56px;
	margin-bottom: 14px;
	padding: 0 16px;
	border: 2px solid var(--kds-line);
	border-radius: 12px;
	background: var(--kds-panel);
	color: var(--kds-ink);
	font-size: 22px;
	letter-spacing: 4px;
	text-align: center;
}

.cmo-kds-pin input:focus {
	outline: none;
	border-color: var(--kds-accent, #ff5722);
}

.cmo-kds-btn {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--kds-accent, #ff5722);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.cmo-kds-btn:active {
	filter: brightness(.9);
}

.cmo-kds-gate-msg {
	min-height: 22px;
	margin: 14px 0 0;
	color: #ff7875;
	font-size: 15px;
}

.cmo-kds-gate-hint {
	margin: 14px 0 0;
	color: var(--kds-muted);
	font-size: 14px;
}

/* ---------- Thanh trên cùng ---------- */

.cmo-kds-app {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.cmo-kds-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: var(--kds-panel);
	border-bottom: 1px solid var(--kds-line);
}

.cmo-kds-top-left,
.cmo-kds-top-right {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.cmo-kds-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kds-ready);
}

.cmo-kds-dot.is-down {
	background: var(--kds-new);
}

.cmo-kds-shop {
	overflow: hidden;
	font-size: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cmo-kds-clock {
	color: var(--kds-muted);
	font-variant-numeric: tabular-nums;
}

.cmo-kds-icon {
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--kds-line);
	border-radius: 10px;
	background: transparent;
	color: var(--kds-ink);
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

/* ---------- Tab (chỉ dùng trên màn hình hẹp) ---------- */

.cmo-kds-tabs {
	display: flex;
	gap: 8px;
	padding: 10px 12px 4px;
}

.cmo-kds-tab {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 46px;
	padding: 0 8px;
	border: 1px solid var(--kds-line);
	border-radius: 10px;
	background: var(--kds-panel);
	color: var(--kds-muted);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.cmo-kds-tab.is-on {
	background: var(--kds-card);
	border-color: var(--kds-accent, #ff5722);
	color: var(--kds-ink);
}

.cmo-kds-badge {
	min-width: 24px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--kds-line);
	color: var(--kds-ink);
	font-size: 13px;
	font-weight: 700;
}

.cmo-kds-tab[data-tab="new"] .cmo-kds-badge {
	background: var(--kds-new);
}

/* ---------- Băng báo đơn mới ---------- */

.cmo-kds-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 10px 12px 0;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--kds-new);
	color: #fff;
	font-weight: 800;
	animation: cmo-kds-flash 1.1s ease-in-out infinite;
}

.cmo-kds-alert-text {
	font-size: 18px;
	letter-spacing: .5px;
}

.cmo-kds-snooze {
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 10px;
	background: rgba(0, 0, 0, .15);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

@keyframes cmo-kds-flash {
	0%, 100% { opacity: 1; }
	50%      { opacity: .62; }
}

/* ---------- Bảng 3 cột ---------- */

.cmo-kds-board {
	display: flex;
	flex: 1 1 auto;
	gap: 12px;
	min-height: 0;
	padding: 10px 12px 4px;
}

.cmo-kds-col {
	display: none;
	flex: 1 1 0;
	min-width: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.cmo-kds-col.is-on {
	display: block;
}

.cmo-kds-col-title {
	display: none;
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0 0 10px;
	padding: 8px 2px;
	background: var(--kds-bg);
	color: var(--kds-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cmo-kds-empty {
	margin: 8px 2px;
	color: var(--kds-muted);
	font-size: 15px;
}

/* ---------- Thẻ đơn hàng ---------- */

.cmo-kds-card {
	margin-bottom: 12px;
	padding: 14px;
	border-left: 6px solid var(--kds-line);
	border-radius: 12px;
	background: var(--kds-card);
}

.cmo-kds-card.is-new {
	border-left-color: var(--kds-new);
}

.cmo-kds-card.is-making {
	border-left-color: var(--kds-making);
}

.cmo-kds-card.is-ready {
	border-left-color: var(--kds-ready);
}

.cmo-kds-card.is-busy {
	opacity: .45;
	pointer-events: none;
}

.cmo-kds-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.cmo-kds-num {
	font-size: 20px;
	font-weight: 800;
}

.cmo-kds-time {
	color: var(--kds-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cmo-kds-items {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.cmo-kds-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--kds-line);
}

.cmo-kds-item:last-child {
	border-bottom: 0;
}

.cmo-kds-qty {
	flex: 0 0 auto;
	min-width: 38px;
	padding: 2px 6px;
	border-radius: 8px;
	background: var(--kds-panel);
	color: var(--kds-ink);
	font-size: 17px;
	font-weight: 800;
	text-align: center;
}

.cmo-kds-item-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cmo-kds-item-name {
	font-size: 17px;
	font-weight: 700;
}

.cmo-kds-item-opt {
	color: #c7d0dc;
	font-size: 15px;
}

.cmo-kds-item-note {
	color: var(--kds-making);
	font-size: 15px;
	font-weight: 600;
}

.cmo-kds-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

/* ---------- Thông tin khách ---------- */

.cmo-kds-cust {
	margin-bottom: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(0, 0, 0, .22);
}

.cmo-kds-row {
	display: flex;
	gap: 10px;
	padding: 3px 0;
	color: var(--kds-ink);
	font-size: 15px;
	text-decoration: none;
}

.cmo-kds-row-label {
	flex: 0 0 96px;
	color: var(--kds-muted);
	font-size: 14px;
}

.cmo-kds-row.is-pickup .cmo-kds-row-value {
	color: var(--kds-ready);
	font-weight: 700;
}

/* Đơn đặt trước: giờ khách nhận món phải nổi bật như tiền. */
.cmo-kds-row.is-due .cmo-kds-row-value {
	color: var(--kds-making);
	font-weight: 800;
}

/* Đơn đặt trước chưa tới giờ báo bếp: một dải nhỏ để biết trước. */
.cmo-kds-scheduled {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 10px 12px 0;
	padding: 10px 14px;
	border: 1px solid var(--kds-making);
	border-radius: 12px;
	background: var(--kds-panel);
	font-size: 15px;
}

.cmo-kds-scheduled[hidden] {
	display: none;
}

.cmo-kds-scheduled-title {
	color: var(--kds-making);
}

.cmo-kds-money .cmo-kds-row-value {
	color: #ffd666;
	font-size: 19px;
	font-weight: 800;
}

.cmo-kds-money.is-paid .cmo-kds-row-value {
	color: var(--kds-ready);
}

.cmo-kds-row-value {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}

.cmo-kds-row-link .cmo-kds-row-value {
	color: #69b7ff;
	text-decoration: underline;
}

/* ---------- Nút thao tác ---------- */

.cmo-kds-acts {
	display: flex;
	gap: 10px;
}

.cmo-kds-act {
	min-height: 54px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.cmo-kds-act.is-main {
	flex: 1 1 auto;
	background: var(--kds-accent, #ff5722);
	color: #fff;
}

.cmo-kds-act.is-quiet {
	flex: 0 0 auto;
	border: 1px solid var(--kds-line);
	background: transparent;
	color: var(--kds-muted);
}

.cmo-kds-card.is-ready .cmo-kds-act.is-main {
	background: var(--kds-ready);
}

.cmo-kds-status {
	margin: 0;
	padding: 6px 14px calc(8px + env(safe-area-inset-bottom, 0px));
	color: var(--kds-muted);
	font-size: 13px;
	text-align: right;
}

/* ---------- Màn hình rộng: xem cả 3 cột cùng lúc ---------- */

@media (min-width: 900px) {
	.cmo-kds-tabs {
		display: none;
	}

	.cmo-kds-col {
		display: block;
	}

	.cmo-kds-col-title {
		display: block;
	}

	.cmo-kds-board {
		padding-top: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmo-kds-alert {
		animation: none;
	}
}

/* ==========================================================================
   Công thức pha chế
   Chữ to, nút cao, nền tối — cùng lối với màn hình bếp.
   ========================================================================== */

.cmo-rc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.cmo-rc-bar {
	padding: 10px 12px 6px;
}

.cmo-rc-search {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--kds-line);
	border-radius: 12px;
	background: var(--kds-card);
	color: var(--kds-ink);
	font-size: 17px;
	-webkit-appearance: none;
	appearance: none;
}

.cmo-rc-search::placeholder {
	color: var(--kds-muted);
}

.cmo-rc-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 12px 16px;
}

.cmo-rc-empty,
.cmo-rc-loading {
	padding: 20px 4px;
	color: var(--kds-muted);
	text-align: center;
}

/* ---------- Danh sách món ---------- */

.cmo-rc-cat {
	margin: 14px 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kds-muted);
}

.cmo-rc-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	margin-bottom: 8px;
	padding: 8px 12px 8px 8px;
	border: 1px solid var(--kds-line);
	border-radius: 12px;
	background: var(--kds-card);
	color: var(--kds-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cmo-rc-card:active {
	background: var(--kds-line);
}

.cmo-rc-thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 9px;
	object-fit: cover;
	background: var(--kds-panel);
}

.cmo-rc-card-mid {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.cmo-rc-card-name {
	font-size: 17px;
	font-weight: 600;
}

.cmo-rc-caret {
	color: var(--kds-muted);
	font-size: 22px;
}

.cmo-rc-new {
	align-self: flex-start;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--kds-new);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* ---------- Một công thức ---------- */

.cmo-rc-back {
	min-height: 44px;
	margin: 8px 0 4px;
	padding: 8px 14px 8px 4px;
	border: 0;
	background: none;
	color: var(--kds-accent, #00b14f);
	font: inherit;
	font-size: 17px;
	cursor: pointer;
}

.cmo-rc-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 0 12px;
}

.cmo-rc-photo {
	flex: 0 0 76px;
	width: 76px;
	height: 76px;
	border-radius: 12px;
	object-fit: cover;
	background: var(--kds-panel);
}

.cmo-rc-header-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cmo-rc-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.cmo-rc-subtitle {
	margin: 0;
	color: var(--kds-muted);
	font-size: 14px;
}

.cmo-rc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.cmo-rc-chip {
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--kds-accent, #00b14f);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.cmo-rc-section {
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid var(--kds-line);
	border-radius: 12px;
	background: var(--kds-panel);
}

.cmo-rc-section-title {
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--kds-muted);
}

.cmo-rc-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
}

/* Bảng định lượng */
.cmo-rc-steps {
	width: 100%;
	border-collapse: collapse;
}

.cmo-rc-steps th,
.cmo-rc-steps td {
	padding: 8px 6px;
	border-bottom: 1px solid var(--kds-line);
	text-align: left;
	vertical-align: top;
}

.cmo-rc-steps tr:last-child td {
	border-bottom: 0;
}

.cmo-rc-steps th {
	font-size: 13px;
	color: var(--kds-muted);
	white-space: nowrap;
}

.cmo-rc-qty {
	width: 90px;
	text-align: right !important;
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
}

.cmo-rc-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cmo-rc-name-main {
	font-size: 16px;
}

.cmo-rc-name-note {
	color: var(--kds-muted);
	font-size: 13px;
}

/* Cột đúng với size khách gọi */
.cmo-rc-current {
	color: var(--kds-ready);
	background: rgba( 82, 196, 26, .08 );
}

.cmo-rc-dim {
	opacity: .35;
}

/* Các bước */
.cmo-rc-step-list {
	margin: 0;
	padding-left: 26px;
}

.cmo-rc-step-list li {
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 1.5;
}

.cmo-rc-step-list li:last-child {
	margin-bottom: 0;
}

/* Cột số thứ tự và nhãn điều kiện trong bảng các bước */
.cmo-rc-steps .cmo-rc-c-num {
	width: 26px;
	padding-left: 0;
	color: var(--kds-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.cmo-rc-condition {
	align-self: flex-start;
	margin-top: 2px;
	padding: 1px 7px;
	border-radius: 5px;
	background: rgba( 250, 173, 20, .16 );
	color: var(--kds-making);
	font-size: 12px;
	font-weight: 600;
}

/* Điều chỉnh theo lựa chọn */
.cmo-rc-tool {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--kds-line);
}

.cmo-rc-tool:last-child {
	border-bottom: 0;
}

.cmo-rc-tool-label {
	flex: 0 0 auto;
	font-weight: 700;
}

.cmo-rc-tool-text {
	flex: 1 1 200px;
	color: var(--kds-muted);
	font-size: 15px;
	line-height: 1.5;
}

.cmo-rc-tool.is-match {
	margin: 0 -8px;
	padding: 8px;
	border-bottom: 0;
	border-radius: 8px;
	background: rgba( 250, 173, 20, .14 );
}

.cmo-rc-tool.is-match .cmo-rc-tool-label {
	color: var(--kds-making);
}

.cmo-rc-tool.is-match .cmo-rc-tool-text {
	color: var(--kds-ink);
}

/* ---------- Thanh tab dưới đáy ---------- */

.cmo-kds-bottom {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	padding: 8px 12px calc( 8px + env( safe-area-inset-bottom ) );
	border-top: 1px solid var(--kds-line);
	background: var(--kds-panel);
}

.cmo-kds-mode {
	flex: 1 1 0;
	min-height: 50px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: none;
	color: var(--kds-muted);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.cmo-kds-mode.is-on {
	border-color: var(--kds-line);
	background: var(--kds-card);
	color: var(--kds-ink);
}

/*
 * Nút "Cài đặt ứng dụng" (cmo-pwa.js) nằm góc dưới bên trái — đè lên tab "Đơn
 * hàng" của thanh này, bấm tab là trúng nút cài. tools/check-layout.js phép 7
 * bắt được 23/09/2026. Nhấc nó lên trên thanh (cao 50px + đệm 8px hai đầu).
 */
body.cmo-kds-page .cmo-pwa-pin {
	bottom: calc( 78px + env( safe-area-inset-bottom ) );
}

/* Máy tính bảng nằm ngang: bảng định lượng rộng ra cho dễ đọc */
@media ( min-width: 760px ) {
	.cmo-rc-scroll {
		padding: 0 18px 20px;
	}

	.cmo-rc-detail,
	.cmo-rc-list {
		max-width: 780px;
		margin: 0 auto;
	}
}

/* Nút tra công thức ngay trên một món trong thẻ đơn */
.cmo-kds-recipe {
	align-self: flex-start;
	min-height: 34px;
	margin-top: 6px;
	padding: 6px 13px;
	border: 1px solid var(--kds-line);
	border-radius: 999px;
	background: var(--kds-panel);
	color: var(--kds-accent, #00b14f);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.cmo-kds-recipe:active {
	background: var(--kds-line);
}

/* Dòng tách nhỏ dưới bước được cộng từ nhiều nguồn */
.cmo-rc-split {
	align-self: flex-start;
	margin-top: 2px;
	color: var(--kds-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}