/* flowin Market — brand + full anti-ERP chrome hide (SRS §8.4) */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
	--retail-ink: #08080f;
	--retail-primary: #2563eb;
	--retail-primary-hover: #2563eb;
	--retail-primary-gradient: linear-gradient(135deg, #93c5fd 0%, #2563eb 100%);
	--retail-primary-soft: rgba(37, 99, 235, 0.12);
	--retail-sky: #93c5fd;
	--retail-surface: #ffffff;
	--retail-surface-glass: rgba(255, 255, 255, 0.82);
	--retail-bg: #f0f2f8;
	--retail-bg-gradient: linear-gradient(165deg, #f0f2f8 0%, #f0f2f8 100%);
	--retail-text: #08080f;
	--retail-muted: rgba(8, 8, 15, 0.64);
	--retail-border: rgba(8, 8, 15, 0.08);
	--retail-success: #2563eb;
	--retail-success-soft: #f0f2f8;
	--retail-warn: #93c5fd;
	--retail-warn-soft: #f0f2f8;
	--retail-danger: #08080f;
	--retail-danger-soft: #f0f2f8;
	--retail-radius: 14px;
	--retail-radius-sm: 8px;
	--retail-radius-lg: 18px;
	--retail-radius-pill: 999px;
	--retail-shadow-sm: 0 1px 2px rgba(8, 8, 15, 0.04);
	--retail-shadow: 0 4px 24px rgba(8, 8, 15, 0.06);
	--retail-shadow-lg: 0 12px 48px rgba(8, 8, 15, 0.1);
	--retail-shadow-glow: 0 8px 32px rgba(37, 99, 235, 0.18);
	--retail-blur: 12px;
	--retail-font: "Poppins", system-ui, sans-serif;
	--retail-touch: 44px;
	--retail-surface-gradient: linear-gradient(165deg, #fff 0%, #f8faff 100%);
	--retail-surface-gradient-soft: linear-gradient(180deg, #fff 0%, #fafbff 100%);
	--retail-hero-gradient: linear-gradient(135deg, #eff6ff 0%, #fff 45%, #f0f9ff 100%);
	--retail-header-scrolled: rgba(255, 255, 255, 0.94);
	--retail-surface-inset: rgba(255, 255, 255, 0.9);
	--retail-input-bg: #fff;
	--retail-tab-active-bg: #fff;
	--retail-skeleton-mid: #f8f9fc;
	--retail-bar-track: #e2e8f0;
	--retail-intel-gradient: linear-gradient(165deg, #f8faff 0%, #fff 100%);
	--retail-lookup-gradient: linear-gradient(165deg, #fff 0%, #f8faff 100%);
	--retail-warn-surface: #fffbeb;
	--retail-info-surface: #eff6ff;
	--retail-success-surface: #ecfdf5;
	--retail-danger-surface: #fef2f2;
	--retail-foot-gradient: linear-gradient(180deg, transparent, rgba(240, 242, 248, 0.5));
	--retail-menu-foot-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #fff 35%);
	--retail-wizard-foot: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 40%);
	--retail-wizard-success-bg: linear-gradient(135deg, #eff6ff, #dbeafe);
	--retail-insight-info-bg: #f8faff;
	--retail-tile-primary-gradient: linear-gradient(135deg, #fff 0%, var(--retail-primary-soft) 100%);
	--retail-card-polish-gradient: linear-gradient(180deg, #fff 0%, #fafbff 100%);
	--retail-alert-info-text: #1e40af;
	--retail-alert-ok-text: #065f46;
	--retail-alert-warn-text: #92400e;
	--retail-alert-danger-text: #991b1b;
	--retail-danger-hover-bg: #fef2f2;
}

[data-theme="light"] {
	--primary: var(--retail-primary);
	--primary-color: var(--retail-primary);
}

[data-theme="dark"],
body.retail-theme-dark {
	--retail-ink: #f0f2f8;
	--retail-text: #f0f2f8;
	--retail-bg: #08080f;
	--retail-bg-gradient: linear-gradient(165deg, #08080f 0%, #0d0d14 100%);
	--retail-surface: #16161f;
	--retail-surface-glass: rgba(22, 22, 31, 0.92);
	--retail-border: rgba(147, 197, 253, 0.18);
	--retail-muted: rgba(240, 242, 248, 0.62);
	--retail-primary-soft: rgba(37, 99, 235, 0.22);
	--retail-success-soft: rgba(37, 99, 235, 0.12);
	--retail-warn-soft: rgba(147, 197, 253, 0.12);
	--retail-danger-soft: rgba(240, 242, 248, 0.08);
	--retail-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--retail-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
	--retail-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
	--retail-shadow-glow: 0 8px 32px rgba(37, 99, 235, 0.28);
	--retail-surface-gradient: linear-gradient(165deg, #1e1e2a 0%, #16161f 100%);
	--retail-surface-gradient-soft: linear-gradient(180deg, #1e1e2a 0%, #16161f 100%);
	--retail-hero-gradient: linear-gradient(135deg, #1a2744 0%, #16161f 48%, #12121a 100%);
	--retail-header-scrolled: rgba(22, 22, 31, 0.97);
	--retail-surface-inset: rgba(255, 255, 255, 0.07);
	--retail-input-bg: #1e1e2a;
	--retail-tab-active-bg: #252532;
	--retail-skeleton-mid: #252532;
	--retail-bar-track: #2a2a38;
	--retail-intel-gradient: linear-gradient(165deg, #1a1a28 0%, #16161f 100%);
	--retail-lookup-gradient: linear-gradient(165deg, #1e1e2a 0%, #16161f 100%);
	--retail-warn-surface: rgba(217, 119, 6, 0.14);
	--retail-info-surface: rgba(37, 99, 235, 0.14);
	--retail-success-surface: rgba(5, 150, 105, 0.14);
	--retail-danger-surface: rgba(220, 38, 38, 0.14);
	--retail-foot-gradient: linear-gradient(180deg, transparent, rgba(8, 8, 15, 0.88));
	--retail-menu-foot-gradient: linear-gradient(180deg, rgba(22, 22, 31, 0.85) 0%, #16161f 35%);
	--retail-wizard-foot: linear-gradient(180deg, rgba(22, 22, 31, 0.92) 0%, #16161f 40%);
	--retail-wizard-success-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(37, 99, 235, 0.12));
	--retail-insight-info-bg: rgba(37, 99, 235, 0.12);
	--retail-tile-primary-gradient: linear-gradient(135deg, #1e1e2a 0%, rgba(37, 99, 235, 0.2) 100%);
	--retail-card-polish-gradient: linear-gradient(180deg, #1e1e2a 0%, #16161f 100%);
	--retail-alert-info-text: #93c5fd;
	--retail-alert-ok-text: #6ee7b7;
	--retail-alert-warn-text: #fcd34d;
	--retail-alert-danger-text: #fca5a5;
	--retail-danger-hover-bg: rgba(220, 38, 38, 0.14);
	--primary: var(--retail-primary);
	--primary-color: var(--retail-primary);
}

body,
.desk-page,
.form-control,
.btn {
	font-family: var(--retail-font) !important;
}

body.retail-theme-dark .retail-shell,
body.retail-theme-dark .retail-shell__main,
body.retail-theme-dark .desk-page,
html[data-theme="dark"] body.retail-mode .layout-main-section,
html[data-theme="dark"] body.retail-mode .layout-main-section-wrapper,
html[data-theme="dark"] body.retail-mode .page-container {
	background: var(--retail-bg) !important;
	color: var(--retail-text) !important;
}

/* Login styles → retail_login.css */

/* ── Retail mode: hide ALL ERP chrome (ERP-UI-01/02/15) ─── */

body.retail-mode .navbar,
body.retail-mode .layout-navbar,
body.retail-mode .page-head,
body.retail-mode .breadcrumb,
body.retail-mode .standard-actions,
body.retail-mode .layout-side-section,
body.retail-mode .desk-sidebar,
body.retail-mode .sidebar-toggle-btn,
body.retail-mode .page-form-actions,
body.retail-mode .form-footer,
body.retail-mode .layout-footer,
body.retail-mode .comment-box,
body.retail-mode .page-title,
body.retail-mode .page-actions {
	display: none !important;
}

body.retail-mode .layout-main {
	margin-left: 0 !important;
	width: 100% !important;
}

body.retail-mode .layout-main-section-wrapper,
body.retail-mode .layout-main-section {
	padding: 0 !important;
	margin: 0 !important;
	background: var(--retail-bg) !important;
	min-height: 100vh;
}

body.retail-mode .page-container {
	padding: 0 !important;
	max-width: none !important;
}

body.retail-mode .page-content {
	padding: 0 !important;
}

body.retail-mode .desk-page {
	background: var(--retail-bg) !important;
}

/* Ensure retail UI receives clicks (fix stuck frappe freeze / backdrop) */
body.retail-mode .layout-main,
body.retail-mode .layout-main-section,
body.retail-mode .layout-main-section-wrapper,
body.retail-mode .page-container,
body.retail-mode .page-content,
body.retail-mode .desk-page {
	pointer-events: auto !important;
}

body.retail-mode .retail-shell {
	position: relative;
	z-index: 5;
	pointer-events: auto;
}

body.retail-mode #freeze {
	z-index: 9998;
}

body.retail-mode .retail-nav-pill,
body.retail-mode .retail-tile,
body.retail-mode .retail-btn,
body.retail-mode .retail-user-menu__trigger {
	cursor: pointer;
}

/* POS route shares retail tokens */
body.retail-mode.pos-route .layout-main-section {
	background: var(--retail-bg) !important;
}