/*
 * LexERP shared design system - used by Storefront + Restaurant POS.
 * Tokens mirror OrderFlock / storefront.css (--sf-*).
 */
:root,
.sf-app,
.rest-pos,
.crinkle-app,
.crinkle-body {
	--sf-brand: #388e3c;
	--sf-brand-dark: #2e7d32;
	--sf-brand-light: #e8f5e9;
	--sf-on-brand: #ffffff;
	--sf-wa: #29ac00;
	--sf-bg: #f4f5f5;
	--sf-panel: #f4f5f5;
	--sf-surface: #ffffff;
	--sf-border: #dee2e6;
	--sf-border-input: #d0d0d0;
	--sf-text: #000000;
	--sf-text-strong: #222222;
	--sf-muted: #6c757d;
	--sf-muted-light: #9e9e9e;
	--sf-danger: #c62828;
	--sf-warn: #ef6c00;
	--sf-radius-sm: 3px;
	--sf-radius: 4px;
	--sf-radius-md: 6px;
	--sf-radius-lg: 8px;
	--sf-radius-xl: 12px;
	--sf-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
	--sf-shadow-drop: 0 4px 16px rgba(0, 0, 0, 0.12);
	--sf-font: "Quicksand", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sf-focus-ring: 0 0 0 1px var(--sf-brand);
	/* OrderFlock measured tokens (390 audit) */
	--sf-space-3: 3px;
	--sf-space-4: 4px;
	--sf-space-8: 8px;
	--sf-space-10: 10px;
	--sf-space-11: 11px;
	--sf-space-12: 12px;
	--sf-space-15: 15px;
	--sf-space-16: 16px;
	--sf-space-19: 19px;
	--sf-space-20: 20px;
	--sf-header-h: 54px;
	--sf-store-logo: 60px;
	--sf-order-btn-h: 38.8px;
	--sf-order-btn-w: 80px;
	--sf-order-col-mar-y: 12.625px;
	--sf-product-img: 90px;
	--sf-product-row-mb: 42px;
	--sf-add-h: 30px;
	--sf-filter-h: 35px;
	--sf-cat-tab-h: 40px;
	--sf-cat-strip-pad-t: 20px;
	--sf-bp-drawer: 768px;
}

.sf-body,
.rest-pos-body,
.rest-pos,
.crinkle-body,
.crinkle-app {
	font-family: var(--sf-font) !important;
	font-size: 14px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
/* Live OF: .english-font is weight 100 (light body); bold via explicit 700 */
.english-font {
	font-family: var(--sf-font) !important;
	font-weight: 100;
	-webkit-font-smoothing: antialiased;
}

/* -- Primary CTA (storefront .sf-cta-btn) -- */
.sf-cta-btn,
.lex-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-height: 48px;
	padding: 12px 18px;
	background: var(--sf-brand);
	color: var(--sf-on-brand, #fff);
	border: none;
	border-radius: var(--sf-radius-md);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.2;
	box-sizing: border-box;
	transition: filter 0.08s, background 0.08s;
}
.sf-cta-btn:hover,
.lex-btn-primary:hover {
	filter: brightness(0.97);
}
.sf-cta-btn:disabled,
.lex-btn-primary:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.sf-cta-price {
	background: rgba(0, 0, 0, 0.15);
	padding: 4px 10px;
	border-radius: var(--sf-radius);
	font-size: 0.9rem;
}

/* -- Outline / secondary -- */
.sf-add-outline,
.lex-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 14px;
	background: #fff;
	color: var(--sf-brand, #388e3c);
	border: 1.5px solid var(--sf-brand, #388e3c);
	border-radius: var(--sf-radius-sm);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: 0.02em;
	box-sizing: border-box;
}
.sf-add-outline:hover,
.lex-btn-outline:hover {
	background: rgba(56, 142, 60, 0.04);
	border-color: var(--sf-brand, #388e3c);
	color: var(--sf-brand, #388e3c);
}

.lex-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 12px;
	background: #fff;
	color: var(--sf-text-strong);
	border: 1px solid var(--sf-border-input);
	border-radius: var(--sf-radius);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.lex-btn-ghost:hover {
	border-color: var(--sf-brand);
	color: var(--sf-brand);
	background: var(--sf-brand-light);
}

.lex-btn-warn {
	background: var(--sf-warn);
	color: #fff;
	border: none;
	border-radius: var(--sf-radius-md);
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 12px 18px;
}

/* -- Segmented control (order type / tabs) -- */
.of-segment,
.lex-segment {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.of-segment-btn,
.lex-segment-btn {
	flex: 1;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #666;
	border-radius: var(--sf-radius-sm);
	background: #fff;
	color: #444;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.15;
}
.of-segment-btn.active,
.lex-segment-btn.active {
	background: var(--sf-brand, #388e3c);
	border-color: var(--sf-brand, #388e3c);
	color: var(--sf-on-brand, #fff);
}

/* -- Form fields -- */
.of-field,
.lex-field {
	margin-bottom: 14px;
}
.of-field label,
.lex-field label,
.lex-field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sf-text-strong);
	margin-bottom: 6px;
}
.of-field input,
.of-field textarea,
.of-select,
.lex-input,
.lex-select {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--sf-border-input);
	border-radius: var(--sf-radius);
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	font-weight: 500;
	color: var(--sf-text-strong);
	background: #fff;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}
.of-field input:focus,
.of-field textarea:focus,
.of-select:focus,
.lex-input:focus,
.lex-select:focus {
	border-color: var(--sf-brand);
	box-shadow: var(--sf-focus-ring);
}
.of-select-wrap,
.lex-select-wrap {
	position: relative;
	width: 100%;
}
.of-select-wrap::after,
.lex-select-wrap::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: translateY(-60%) rotate(45deg);
	pointer-events: none;
}
.of-select,
.lex-select {
	padding-right: 36px;
	cursor: pointer;
}

/* -- Pay / option cards -- */
.of-pay-option,
.lex-option-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--sf-border-input);
	border-radius: var(--sf-radius-md);
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	margin-bottom: 8px;
}
.of-pay-option.selected,
.lex-option-card.selected,
.lex-option-card.active {
	border-color: var(--sf-brand);
	background: rgba(56, 142, 60, 0.06);
}

/* -- Modal -- */
.sf-modal-overlay,
.lex-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 16px;
}
.sf-modal,
.lex-modal {
	background: #fff;
	border-radius: var(--sf-radius-lg);
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow: auto;
	box-shadow: var(--sf-shadow-drop);
	padding: 20px;
	box-sizing: border-box;
}
.sf-modal-close,
.lex-modal-close {
	border: none;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #666;
	padding: 4px 8px;
}

/* -- Badge -- */
.sf-badge,
.lex-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--sf-radius-sm);
	font-size: 11px;
	font-weight: 600;
	background: #eee;
	color: var(--sf-muted-light);
}
.sf-badge.req,
.lex-badge.req {
	background: #eee;
	color: #757575;
}

/* -- Cards / surfaces -- */
.lex-card {
	background: var(--sf-surface);
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius-lg);
	box-shadow: var(--sf-shadow-card);
}

.lex-link {
	color: var(--sf-brand);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
	font-family: inherit;
	padding: 0;
}
.lex-link:hover {
	text-decoration: underline;
}

/* -- Horizontal chip / category nav (POS categories, FA ajaxtabs, submenus) -- */
.lex-chip-nav,
.lex-cat-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	background: var(--sf-surface, #fff);
	border: 1px solid var(--sf-border, #dee2e6);
	border-radius: var(--sf-radius-lg, 8px);
	box-shadow: var(--sf-shadow-card, 0 1px 3px rgba(0, 0, 0, 0.06));
	list-style: none;
	box-sizing: border-box;
}

.lex-chip,
.lex-cat-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 1rem;
	margin: 0;
	border: 2px solid var(--sf-border, #dee2e6);
	border-radius: 999px;
	background: #fff;
	color: var(--sf-text-strong, #222);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none !important;
	box-sizing: border-box;
	transition: background 0.08s, border-color 0.08s, color 0.08s;
}

.lex-chip:hover,
.lex-cat-btn:hover {
	border-color: var(--sf-brand);
	color: var(--sf-brand);
	background: var(--sf-brand-light, #e8f5e9);
}

.lex-chip.active,
.lex-chip.current,
.lex-cat-btn.active,
.lex-cat-btn.current {
	background: var(--sf-brand);
	border-color: var(--sf-brand);
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(56, 142, 60, 0.28);
}

.lex-chip:disabled,
.lex-cat-btn:disabled,
.lex-chip[disabled],
.lex-cat-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 900px) {
	.lex-chip-nav,
	.lex-cat-nav {
		padding: 8px;
		gap: 6px;
	}
	.lex-chip,
	.lex-cat-btn {
		min-height: 40px;
		font-size: 0.8rem;
	}
}

/* ============================================================
 * UI skin: minimal (Cursor-inspired)
 * Brand accents remain --sf-brand* from settings.
 * Toggle via sf_settings.ui_skin = minimal | classic
 * ============================================================ */
body.sf-skin-minimal,
body.sf-skin-minimal .sf-app,
body.sf-skin-minimal .rest-pos,
.sf-skin-minimal.rest-pos {
	--sf-bg: #fafafa;
	--sf-panel: #fafafa;
	--sf-surface: #ffffff;
	--sf-border: #ebebeb;
	--sf-border-input: #e5e5e5;
	--sf-text: #0a0a0a;
	--sf-text-strong: #0a0a0a;
	--sf-muted: #737373;
	--sf-muted-light: #a3a3a3;
	--sf-radius-sm: 6px;
	--sf-radius: 8px;
	--sf-radius-md: 8px;
	--sf-radius-lg: 12px;
	--sf-radius-xl: 16px;
	--sf-shadow-card: none;
	--sf-shadow-drop: 0 12px 40px rgba(0, 0, 0, 0.08);
	--sf-focus-ring: 0 0 0 2px color-mix(in srgb, var(--sf-brand) 28%, transparent);
	--pos-bg: var(--sf-bg);
	--pos-surface: var(--sf-surface);
	--pos-border: var(--sf-border);
	--pos-text: var(--sf-text);
	--pos-muted: var(--sf-muted);
	--pos-radius: var(--sf-radius-lg);
	--pos-radius-ctrl: var(--sf-radius);
}

body.sf-skin-minimal.sf-body,
body.sf-skin-minimal.rest-pos-body,
body.sf-skin-minimal .grayBackground,
body.sf-skin-minimal .sf-app,
body.sf-skin-minimal .sf-boot-shell,
body.sf-skin-minimal .sf-splash,
body.sf-skin-minimal .sf-splash--full,
body.sf-skin-minimal .sf-splash--cover {
	background-color: var(--sf-bg) !important;
	background: var(--sf-bg) !important;
}

body.sf-skin-minimal.english-font,
body.sf-skin-minimal .english-font {
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.011em;
}

/* Primary CTAs: brand fill, Cursor proportions */
body.sf-skin-minimal .sf-cta-btn,
body.sf-skin-minimal .lex-btn-primary {
	min-height: 44px;
	padding: 12px 20px;
	border-radius: var(--sf-radius-md);
	font-weight: 600;
	letter-spacing: -0.01em;
	box-shadow: none;
	transition: opacity 0.15s ease, background 0.15s ease;
}
body.sf-skin-minimal .sf-cta-btn:hover,
body.sf-skin-minimal .lex-btn-primary:hover {
	filter: none;
	opacity: 0.92;
}

body.sf-skin-minimal .sf-add-outline,
body.sf-skin-minimal .lex-btn-outline {
	border-width: 1px;
	border-radius: var(--sf-radius);
	font-weight: 500;
	min-height: 36px;
}
body.sf-skin-minimal .sf-add-outline:hover,
body.sf-skin-minimal .lex-btn-outline:hover {
	background: var(--sf-brand-light);
}

body.sf-skin-minimal .lex-btn-ghost {
	border-radius: var(--sf-radius);
	border-color: var(--sf-border);
	font-weight: 500;
	color: var(--sf-muted);
}
body.sf-skin-minimal .lex-btn-ghost:hover {
	background: #fff;
	border-color: #d4d4d4;
	color: var(--sf-text);
}

/* Segments / chips — rectangular, quiet */
body.sf-skin-minimal .of-segment-btn,
body.sf-skin-minimal .lex-segment-btn {
	border-radius: var(--sf-radius);
	border-color: var(--sf-border);
	font-weight: 500;
	color: var(--sf-muted);
}
body.sf-skin-minimal .of-segment-btn.active,
body.sf-skin-minimal .lex-segment-btn.active {
	box-shadow: none;
}

body.sf-skin-minimal .lex-chip-nav,
body.sf-skin-minimal .lex-cat-nav {
	border: 1px solid var(--sf-border);
	border-radius: var(--sf-radius-lg);
	box-shadow: none;
	background: var(--sf-surface);
	padding: 8px;
	gap: 6px;
}
body.sf-skin-minimal .lex-chip,
body.sf-skin-minimal .lex-cat-btn {
	border-radius: var(--sf-radius);
	border-width: 1px;
	font-weight: 500;
	min-height: 36px;
	box-shadow: none;
}
body.sf-skin-minimal .lex-chip:hover,
body.sf-skin-minimal .lex-cat-btn:hover {
	background: #f5f5f5;
}
body.sf-skin-minimal .lex-chip.active,
body.sf-skin-minimal .lex-chip.current,
body.sf-skin-minimal .lex-cat-btn.active,
body.sf-skin-minimal .lex-cat-btn.current {
	box-shadow: none;
}

/* Forms */
body.sf-skin-minimal .of-field input,
body.sf-skin-minimal .of-field textarea,
body.sf-skin-minimal .of-select,
body.sf-skin-minimal .lex-input,
body.sf-skin-minimal .lex-select {
	border-radius: var(--sf-radius);
	border-color: var(--sf-border-input);
	padding: 12px 14px;
	font-weight: 400;
	background: #fff;
}
body.sf-skin-minimal .of-field label,
body.sf-skin-minimal .lex-field label,
body.sf-skin-minimal .lex-field-label {
	font-weight: 500;
	color: var(--sf-muted);
	font-size: 13px;
}

body.sf-skin-minimal .of-pay-option,
body.sf-skin-minimal .lex-option-card {
	border-radius: var(--sf-radius-md);
	border-color: var(--sf-border);
	font-weight: 500;
}
body.sf-skin-minimal .of-pay-option.selected,
body.sf-skin-minimal .lex-option-card.selected,
body.sf-skin-minimal .lex-option-card.active {
	background: var(--sf-brand-light);
	box-shadow: none;
}

body.sf-skin-minimal .sf-modal,
body.sf-skin-minimal .lex-modal {
	border-radius: var(--sf-radius-xl);
	box-shadow: var(--sf-shadow-drop);
	border: 1px solid var(--sf-border);
	padding: 24px;
}
body.sf-skin-minimal .sf-modal-overlay,
body.sf-skin-minimal .lex-modal-overlay {
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
}

body.sf-skin-minimal .lex-card {
	box-shadow: none;
	border-color: var(--sf-border);
	border-radius: var(--sf-radius-lg);
}

body.sf-skin-minimal .lex-link {
	font-weight: 500;
}

/* Storefront header surfaces */
body.sf-skin-minimal .sf-store-header-btn,
body.sf-skin-minimal .of-desktop-store-wrap {
	background: #fff;
	border-color: var(--sf-border) !important;
}
body.sf-skin-minimal .sf-store-logo {
	border-radius: var(--sf-radius);
	border-color: var(--sf-border);
}
body.sf-skin-minimal .sf-store-name {
	font-weight: 600;
	letter-spacing: -0.02em;
}
body.sf-skin-minimal .sf-store-tagline {
	color: var(--sf-muted);
}

/* POS chrome */
body.sf-skin-minimal .pos-topbar {
	background: #fff !important;
	border-bottom: 1px solid var(--sf-border) !important;
	box-shadow: none !important;
}
body.sf-skin-minimal .rest-pos {
	background: var(--sf-bg);
	color: var(--sf-text);
}
body.sf-skin-minimal .pos-panel,
body.sf-skin-minimal .pos-cart,
body.sf-skin-minimal .pos-menu,
body.sf-skin-minimal .pos-sidebar {
	background: var(--sf-surface);
	border-color: var(--sf-border);
	box-shadow: none;
}