/* purpose: MD POS theme tokens — follow account --bo-* colors, light/dark */
/* author: MD Hub */
/* date: 2026-09-08 */

#pos_root{
	--pos-accent:var(--bo-accent,#4C1D95);
	--pos-on-accent:var(--bo-on-accent,#fff);
	--pos-accent-deep:color-mix(in srgb,var(--pos-accent) 52%,#0b1220);
	--pos-card:var(--bo-bg-elevated,#fff);
	--pos-muted:var(--bo-bg-muted,#f1f5f9);
	--pos-text:var(--bo-text,#334155);
	--pos-text-strong:var(--bo-text-strong,#0f172a);
	--pos-text-muted:var(--bo-text-muted,#64748b);
	--pos-border:var(--bo-border,#e2e8f0);
	color:var(--pos-text);
	background:transparent
}
#pos_root .pos-hero{
	background:linear-gradient(145deg,var(--pos-accent),var(--pos-accent-deep))!important;
	color:var(--pos-on-accent,#fff)!important;
	box-shadow:0 12px 28px color-mix(in srgb,var(--pos-accent) 32%,transparent)!important
}
#pos_root .pos-hero-k,
#pos_root .pos-hero-amt,
#pos_root .pos-hero #pos_source_label,
#pos_root .pos-hero #pos_merchant_banner{color:inherit}
#pos_root #pos_mode_badge{
	color:var(--pos-on-accent,#fff)!important;
	background:color-mix(in srgb,var(--pos-on-accent,#fff) 16%,transparent)!important;
	border-color:color-mix(in srgb,var(--pos-on-accent,#fff) 40%,transparent)!important
}
#pos_root #pos_mode_badge.is-live{
	background:color-mix(in srgb,#fff 92%,transparent)!important;
	color:#b91c1c!important;
	border-color:#fff!important
}
#pos_root #pos_mode_badge.is-test{
	background:color-mix(in srgb,var(--pos-on-accent,#fff) 16%,transparent)!important;
	color:var(--pos-on-accent,#fff)!important
}
#pos_root .pos-hero #pos_merchant_banner.pos-card,
#pos_root .pos-hero .pos-status-ok,
#pos_root .pos-hero .pos-status-warn,
#pos_root .pos-hero .pos-status-err{
	background:color-mix(in srgb,var(--pos-on-accent,#fff) 14%,transparent)!important;
	color:var(--pos-on-accent,#fff)!important;
	border:1px solid color-mix(in srgb,var(--pos-on-accent,#fff) 28%,transparent)!important
}
#pos_root .pos-hero .pos-btn-secondary{
	background:color-mix(in srgb,var(--pos-on-accent,#fff) 16%,transparent)!important;
	color:var(--pos-on-accent,#fff)!important;
	border-color:color-mix(in srgb,var(--pos-on-accent,#fff) 35%,transparent)!important
}
#pos_root .pos-btn-accent,
#pos_root .pos-btn-primary{
	background:var(--pos-accent)!important;
	color:var(--pos-on-accent,#fff)!important;
	border-color:var(--pos-accent)!important
}
#pos_root .pos-btn-ghost,
#pos_root .pos-btn-secondary{
	background:var(--pos-card);
	color:var(--pos-text);
	border-color:var(--pos-border)
}
#pos_root .pos-chip{
	background:var(--pos-muted);
	color:var(--pos-text-muted);
	border-color:var(--pos-border)
}
#pos_root #pos_tender_row .pos-chip.is-on{
	background:var(--pos-accent)!important;
	color:var(--pos-on-accent,#fff)!important;
	border-color:var(--pos-accent)!important
}
#pos_root .pos-folder-tabs,
#pos_root .pos-chips[role="tablist"]{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
	gap:0;
	margin:0 0 0;
	padding:0 .15rem;
	background:var(--pos-muted);
	border:1px solid var(--pos-border);
	border-bottom:1px solid var(--pos-border);
	border-radius:1rem 1rem 0 0;
	overflow:visible
}
#pos_root .pos-folder-tabs .pos-folder-tab,
#pos_root .pos-chips[role="tablist"] .pos-folder-tab,
#pos_root .pos-chips[role="tablist"] .pos-chip{
	flex:none;
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	padding:.55rem 1rem .6rem;
	font-size:13px;
	font-weight:600;
	line-height:1.2;
	border:1px solid transparent;
	border-bottom:none;
	border-radius:.65rem .65rem 0 0;
	background:transparent!important;
	color:var(--pos-text-muted)!important;
	cursor:pointer;
	margin-bottom:-1px;
	white-space:nowrap;
	min-height:0
}
#pos_root .pos-folder-tabs .pos-folder-tab:hover,
#pos_root .pos-chips[role="tablist"] .pos-folder-tab:hover,
#pos_root .pos-chips[role="tablist"] .pos-chip:hover{
	color:var(--pos-text-strong)!important;
	background:color-mix(in srgb,var(--pos-card) 55%,transparent)!important
}
#pos_root .pos-folder-tabs .pos-folder-tab.is-active,
#pos_root .pos-folder-tabs .pos-folder-tab.is-on,
#pos_root .pos-chips[role="tablist"] .is-active,
#pos_root .pos-chips[role="tablist"] .is-on{
	background:var(--pos-card)!important;
	color:var(--pos-accent)!important;
	border-color:var(--pos-border)!important;
	border-bottom-color:var(--pos-card)!important;
	box-shadow:0 -1px 0 var(--pos-card)
}
#pos_root .pos-tab-workspace{
	border:1px solid var(--pos-border)!important;
	border-top:0!important;
	border-radius:0 0 1rem 1rem!important;
	background:var(--pos-card)!important;
	padding:1rem!important;
	min-height:min(50vh,420px)!important
}
#pos_root .pos-card{
	background:var(--pos-card);
	border-color:var(--pos-border);
	color:var(--pos-text)
}
#pos_root .pos-input,
#pos_root select.pos-input,
#pos_root textarea.pos-input{
	background:var(--pos-card)!important;
	color:var(--pos-text-strong)!important;
	border-color:var(--pos-border)!important
}
#pos_root .pos-input:focus{
	border-color:var(--pos-accent)!important;
	box-shadow:0 0 0 2px color-mix(in srgb,var(--pos-accent) 25%,transparent)
}
#pos_root .pos-label{color:var(--pos-text-muted)}
#pos_root .pos-ico{
	background:var(--pos-muted);
	color:var(--pos-accent)
}
#pos_root .pos-row{
	background:var(--pos-card);
	border-color:var(--pos-border)
}
#pos_root .pos-row-main h3{color:var(--pos-text-strong)}
#pos_root .pos-row-main p,
#pos_root .pos-empty{color:var(--pos-text-muted)}
#pos_root .pos-amt{color:var(--pos-text-strong)}
#pos_root .pos-status-ok{
	color:#166534;
	background:color-mix(in srgb,#22c55e 14%,var(--pos-card));
	border:1px solid color-mix(in srgb,#22c55e 30%,var(--pos-border))
}
#pos_root .pos-status-warn{
	color:#92400e;
	background:color-mix(in srgb,#f59e0b 14%,var(--pos-card));
	border:1px solid color-mix(in srgb,#f59e0b 30%,var(--pos-border))
}
#pos_root .pos-status-err{
	color:#991b1b;
	background:color-mix(in srgb,#ef4444 12%,var(--pos-card));
	border:1px solid color-mix(in srgb,#ef4444 28%,var(--pos-border))
}
#pos_root .pos-badge-ok{background:color-mix(in srgb,#22c55e 18%,transparent);color:#166534}
#pos_root .pos-badge-pending{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#92400e}
#pos_root .pos-badge-fail{background:color-mix(in srgb,#ef4444 16%,transparent);color:#991b1b}
html.dark #pos_root .pos-status-ok{color:#86efac;background:color-mix(in srgb,#22c55e 18%,var(--pos-card));border-color:color-mix(in srgb,#22c55e 35%,var(--pos-border))}
html.dark #pos_root .pos-status-warn{color:#fcd34d;background:color-mix(in srgb,#f59e0b 18%,var(--pos-card));border-color:color-mix(in srgb,#f59e0b 35%,var(--pos-border))}
html.dark #pos_root .pos-status-err{color:#fca5a5;background:color-mix(in srgb,#ef4444 16%,var(--pos-card));border-color:color-mix(in srgb,#ef4444 35%,var(--pos-border))}
html.dark #pos_root .pos-badge-ok{color:#86efac;background:color-mix(in srgb,#22c55e 22%,transparent)}
html.dark #pos_root .pos-badge-pending{color:#fcd34d;background:color-mix(in srgb,#f59e0b 22%,transparent)}
html.dark #pos_root .pos-badge-fail{color:#fca5a5;background:color-mix(in srgb,#ef4444 22%,transparent)}
#pos_wallet_qr_modal{
	background:color-mix(in srgb,var(--pos-text-strong,#0f172a) 58%,transparent)!important
}
#pos_wallet_qr_modal .pos-wallet-qr-card{
	background:var(--pos-card,var(--bo-bg-elevated,#fff))!important;
	color:var(--pos-text-strong,var(--bo-text,#0f172a))!important;
	border:1px solid var(--pos-border,var(--bo-border,#e2e8f0));
	box-shadow:0 18px 40px color-mix(in srgb,var(--pos-text-strong,#0f172a) 28%,transparent)
}
#pos_wallet_qr_modal .pos-wallet-qr-x{
	background:var(--pos-muted,var(--bo-bg-muted,#e2e8f0))!important;
	color:var(--pos-text-strong,var(--bo-text,#0f172a))!important
}
#pos_wallet_qr{background:#fff}
#pos_root a[style*="--pos-accent"],
#pos_root a[href]{color:var(--pos-accent)}
body.ap-kind-pos #ap_app,
body.ap-kind-pos #ap_workspace,
body.ap-kind-pos #pos_root{
	background:var(--bo-bg-page,var(--bo-bg,#f8fafc));
	color:var(--bo-text,#334155)
}
@media(max-width:640px){
	#pos_root .pos-folder-tabs .pos-folder-tab,
	#pos_root .pos-chips[role="tablist"] .pos-folder-tab,
	#pos_root .pos-chips[role="tablist"] .pos-chip{padding:.45rem .75rem;font-size:12px}
}