/* ---------------------------------------------------------------------------
   QAFLIMS premium theme — Salons LAYOUT structure + lab SaaS palette
   Palette: deep slate (#0B1F2A) + teal (#0D9488) + sky (#38BDF8)
   Avoids cream/rose/gold and purple-on-white clichés. No ERPNext branding.
   Active when html[data-qaf-skin="salon"] (default). Toggle: localStorage qaf-lims-skin
   Theme-only — does not touch gates.py / tenant hooks / RTM logic.
   Version: 20261109uxweb1
   --------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&display=swap");

@font-face {
	font-family: "QAF Arabic";
	src: url("/assets/lims/fonts/Alexandria-Arabic.ttf") format("truetype");
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
}
@font-face {
	font-family: "QAF Sans";
	src: url("/assets/lims/fonts/Poppins-Medium.ttf") format("truetype");
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "QAF Display";
	src: url("/assets/lims/fonts/VTFRedzone-Classic.ttf") format("truetype");
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
}

/* -- Lab SaaS tokens (canonical; --farras-* kept for compatibility) ------ */
html[data-qaf-skin="salon"],
:root:has(html[data-qaf-skin="salon"]),
html[data-qaf-skin="salon"] :root {
	--farras-bg0: #F4F8FA;
	--farras-bg1: #E8F1F4;
	--farras-bg2: #D9E8EE;
	--farras-ink: #0B1F2A;
	--farras-muted: #5B6B76;
	--farras-accent: #0D9488;
	--farras-accent-2: #14B8A6;
	--farras-gold: #38BDF8;
	--farras-gold-light: #7DD3FC;
	--farras-ember: #2DD4BF;
	--farras-night: #0B1F2A;
	--farras-card: #FFFFFF;
	--farras-border: #C9D7DF;
	--farras-line: rgba(11, 31, 42, 0.15);
	--farras-cream: #F4F8FA;
	--farras-dark: #0B1F2A;
	--farras-font: "Sora", "QAF Sans", "Segoe UI", sans-serif;
	--farras-display: "Sora", "QAF Display", "QAF Sans", sans-serif;
	--farras-container-max: 1280px;
	--farras-motion-fast: 0.18s;
	--farras-motion-base: 0.25s;
	--farras-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-qaf-skin="salon"] {
	/* Remap QAF design-system ? Farras slate/teal (not generic purple-AI) */
	--qaf-blue-50: #F0F7FA;
	--qaf-blue-100: #D5EEF0;
	--qaf-blue-200: #C9D7DF;
	--qaf-blue-300: #B7C9D3;
	--qaf-blue-400: #14B8A6;
	--qaf-blue-500: #0F766E;
	--qaf-blue-600: #0D9488;
	--qaf-blue-700: #0F766E;
	--qaf-blue-800: #115E59;
	--qaf-blue-900: #0B1F2A;
	--qaf-cyan-400: #7DD3FC;
	--qaf-cyan-500: #38BDF8;
	--qaf-cyan-600: #0284C7;
	--qaf-gold-400: #7DD3FC;
	--qaf-gold-500: #38BDF8;
	--qaf-night-900: #0B1F2A;
	--qaf-night-800: #4a2636;

	--qaf-primary: #0D9488;
	--qaf-primary-light: #14B8A6;
	--qaf-primary-dark: #0F766E;
	--qaf-primary-soft: #D5EEF0;
	--qaf-primary-softer: #F0F7FA;
	--qaf-focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.12);

	--qaf-bg: #F4F8FA;
	--qaf-surface: #E8F1F4;
	--qaf-card: #FFFFFF;
	--qaf-card-alt: #F0F7FA;
	--qaf-sidebar-bg: #FFFFFF;
	--qaf-topbar-bg: #ffffff;
	--qaf-text: #0B1F2A;
	--qaf-text-secondary: #1A3340;
	--qaf-muted: #5B6B76;
	--qaf-text-muted: #5B6B76;
	--qaf-border: #C9D7DF;
	--qaf-border-strong: #B7C9D3;
	--qaf-hover-bg: rgba(13, 148, 136, 0.08);
	--qaf-active-bg: #D5EEF0;
	--qaf-input-bg: #ffffff;
	--qaf-kbd-bg: #EAF2F5;

	--qaf-font: "Sora", "QAF Sans", "Segoe UI", sans-serif;
	--qaf-font-ar: "IBM Plex Sans Arabic", "QAF Arabic", "QAF Sans", Tahoma, sans-serif;
	--qaf-font-display: "Sora", "QAF Display", "QAF Sans", sans-serif;

	--qaf-radius-sm: 10px;
	--qaf-radius-md: 14px;
	--qaf-radius-lg: 18px;
	--qaf-radius-xl: 22px;
	--qaf-shadow-sm: 0 10px 28px rgba(11, 31, 42, 0.05);
	--qaf-shadow-md: 0 14px 28px rgba(11, 31, 42, 0.09);
	--qaf-shadow-lg: 0 24px 60px rgba(11, 31, 42, 0.16);

	/* Frappe Desk tokens */
	--primary: #0D9488;
	--primary-color: #0D9488;
	--btn-primary: #0D9488;
	--btn-primary-hover: #0F766E;
	--blue-500: #0D9488;
	--blue-600: #0F766E;
	--bg-color: #F4F8FA;
	--subtle-fg: #f3e8ec;
	--text-color: #0B1F2A;
	--heading-color: #0B1F2A;
	--border-color: #B7C9D3;
	--dark-border-color: #9BB0BC;
	--control-bg: #EAF2F5;
	--control-bg-on-gray: #D7E5EB;
	--card-bg: #ffffff;
	--fg-color: #ffffff;
	--navbar-bg: linear-gradient(120deg, #0B1F2A, #0D9488 55%, #14B8A6);
	--sidebar-select-color: rgba(13, 148, 136, 0.1);
	--awesomplete-hover-bg: rgba(13, 148, 136, 0.08);
	--font-stack: "IBM Plex Sans Arabic", "QAF Arabic", "QAF Sans", Tahoma, sans-serif;
	--text-medium: "IBM Plex Sans Arabic", "QAF Arabic", "QAF Sans", Tahoma, sans-serif;
}

/* Early apply before attribute (SSR/fallback): body class from JS also works */
html.qaf-skin-salon,
body.qaf-skin-salon {
	/* inherit via attribute preference; body class as backup hook */
}

/* -- Desk shell ----------------------------------------------------------- */
html[data-qaf-skin="salon"] html,
html[data-qaf-skin="salon"] body,
html[data-qaf-skin="salon"] .desk,
html[data-qaf-skin="salon"] .page-container,
html[data-qaf-skin="salon"] .layout-main,
html[data-qaf-skin="salon"] .form-control,
html[data-qaf-skin="salon"] .btn,
html[data-qaf-skin="salon"] input,
html[data-qaf-skin="salon"] select,
html[data-qaf-skin="salon"] textarea {
	font-family: var(--font-stack, "IBM Plex Sans Arabic", "QAF Arabic", "QAF Sans", Tahoma, sans-serif) !important;
}

html[data-qaf-skin="salon"] body,
html[data-qaf-skin="salon"] body.full-width,
html[data-qaf-skin="salon"] .desk,
html[data-qaf-skin="salon"] .page-container,
html[data-qaf-skin="salon"] .layout-main {
	color: #0B1F2A !important;
	background:
		radial-gradient(circle at 88% 8%, rgba(20, 184, 166, 0.1), transparent 26%),
		linear-gradient(145deg, #F4F8FA, #EDF4F7) !important;
}

/* Navbar */
html[data-qaf-skin="salon"] .navbar,
html[data-qaf-skin="salon"] header.navbar,
html[data-qaf-skin="salon"] #navbar,
html[data-qaf-skin="salon"] .std-desk-nav {
	min-height: 58px;
	background: linear-gradient(105deg, #0B1F2A, #134E4A 55%, #0F766E) !important;
	border-bottom: 0 !important;
	box-shadow: 0 9px 28px rgba(11, 31, 42, 0.22) !important;
}

html[data-qaf-skin="salon"] .navbar .nav-link,
html[data-qaf-skin="salon"] .navbar .navbar-home,
html[data-qaf-skin="salon"] .navbar .es-icon,
html[data-qaf-skin="salon"] .navbar .btn,
html[data-qaf-skin="salon"] .navbar .search-bar,
html[data-qaf-skin="salon"] .navbar .dropdown-toggle {
	color: rgba(243, 250, 247, 0.92) !important;
}

html[data-qaf-skin="salon"] .navbar .navbar-brand img,
html[data-qaf-skin="salon"] .navbar .app-logo {
	max-height: 34px !important;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

html[data-qaf-skin="salon"] .navbar .form-control,
html[data-qaf-skin="salon"] .navbar input[type="search"],
html[data-qaf-skin="salon"] .navbar .search-input {
	color: #0B1F2A !important;
	background: rgba(255, 255, 255, 0.94) !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	border-radius: 12px !important;
	box-shadow: 0 5px 18px rgba(11, 31, 42, 0.12);
}

html[data-qaf-skin="salon"] .navbar .form-control::placeholder {
	color: #6A7A85 !important;
}

/* Sidebar */
html[data-qaf-skin="salon"] .desk-sidebar,
html[data-qaf-skin="salon"] .workspace-sidebar,
html[data-qaf-skin="salon"] .standard-sidebar,
html[data-qaf-skin="salon"] .list-sidebar,
html[data-qaf-skin="salon"] .body-sidebar,
html[data-qaf-skin="salon"] .layout-side-section,
html[data-qaf-skin="salon"] #qaf-sidebar {
	background: rgba(255, 253, 252, 0.96) !important;
	border-inline-end: 1px solid rgba(13, 148, 136, 0.22) !important;
}

html[data-qaf-skin="salon"] .desk-sidebar .standard-sidebar-item.selected,
html[data-qaf-skin="salon"] .workspace-sidebar .item-anchor.active,
html[data-qaf-skin="salon"] .body-sidebar .sidebar-item-container.selected,
html[data-qaf-skin="salon"] .standard-sidebar-item.selected,
html[data-qaf-skin="salon"] .qaf-nav-item.is-active,
html[data-qaf-skin="salon"] .qaf-nav-item.active {
	background: #D5EEF0 !important;
	color: #0F766E !important;
	border-radius: 10px !important;
}

html[data-qaf-skin="salon"] .qaf-nav-item:hover {
	background: rgba(13, 148, 136, 0.08) !important;
	color: #0D9488 !important;
}

html[data-qaf-skin="salon"] .qaf-sidebar-search input:focus {
	border-color: #0D9488;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

/* Cards / widgets */
html[data-qaf-skin="salon"] .icon-grid .icon-grid-item,
html[data-qaf-skin="salon"] .desktop-icon,
html[data-qaf-skin="salon"] .workspace-icon-box,
html[data-qaf-skin="salon"] .widget.shortcut,
html[data-qaf-skin="salon"] .number-widget-box,
html[data-qaf-skin="salon"] .dashboard-widget-box,
html[data-qaf-skin="salon"] .widget,
html[data-qaf-skin="salon"] .qaf-card,
html[data-qaf-skin="salon"] .frappe-card {
	border-radius: 16px !important;
	border: 1px solid rgba(11, 31, 42, 0.15) !important;
	box-shadow: 0 10px 28px rgba(11, 31, 42, 0.05) !important;
	background: #fff !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

html[data-qaf-skin="salon"] .icon-grid .icon-grid-item:hover,
html[data-qaf-skin="salon"] .desktop-icon:hover,
html[data-qaf-skin="salon"] .widget:hover,
html[data-qaf-skin="salon"] .qaf-card:hover {
	transform: translateY(-2px);
	border-color: rgba(13, 148, 136, 0.35) !important;
	box-shadow: 0 14px 28px rgba(11, 31, 42, 0.09) !important;
}

/* Buttons */
html[data-qaf-skin="salon"] .btn-primary,
html[data-qaf-skin="salon"] .btn.btn-primary,
html[data-qaf-skin="salon"] button.btn-primary,
html[data-qaf-skin="salon"] .primary-action,
html[data-qaf-skin="salon"] .qaf-btn-primary {
	background: linear-gradient(135deg, #0D9488, #14B8A6) !important;
	border-color: transparent !important;
	color: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 22px rgba(13, 148, 136, 0.22) !important;
}

html[data-qaf-skin="salon"] .btn-primary:hover,
html[data-qaf-skin="salon"] .qaf-btn-primary:hover {
	filter: brightness(1.04);
	transform: translateY(-1px);
	color: #fff !important;
	background: linear-gradient(135deg, #0F766E, #0D9488) !important;
}

html[data-qaf-skin="salon"] .btn-default,
html[data-qaf-skin="salon"] .btn-secondary,
html[data-qaf-skin="salon"] .qaf-btn-secondary {
	border-radius: 12px !important;
	border-color: rgba(13, 148, 136, 0.22) !important;
	color: #0B1F2A !important;
}

html[data-qaf-skin="salon"] .qaf-btn-secondary:hover {
	background: rgba(13, 148, 136, 0.08) !important;
	border-color: #14B8A6 !important;
	color: #0D9488 !important;
}

/* Forms / lists */
html[data-qaf-skin="salon"] .form-control:not([type="checkbox"]),
html[data-qaf-skin="salon"] .input-with-feedback:not([type="checkbox"]),
html[data-qaf-skin="salon"] .awesomplete > input,
html[data-qaf-skin="salon"] .like-disabled-input {
	min-height: 38px;
	border-radius: 10px !important;
	border: 1px solid #B0C4CF !important;
	background-color: #fff !important;
	color: #0B1F2A !important;
}

html[data-qaf-skin="salon"] .form-control:focus,
html[data-qaf-skin="salon"] .input-with-feedback:focus {
	border-color: #0D9488 !important;
	box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

html[data-qaf-skin="salon"] .page-head,
html[data-qaf-skin="salon"] .level.page-form,
html[data-qaf-skin="salon"] .list-row-head {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(10px);
}

html[data-qaf-skin="salon"] .list-row:hover,
html[data-qaf-skin="salon"] .list-row-container:hover {
	background: rgba(13, 148, 136, 0.04) !important;
}

html[data-qaf-skin="salon"] .indicator-pill.blue,
html[data-qaf-skin="salon"] .indicator.blue,
html[data-qaf-skin="salon"] .indicator-pill-right.blue {
	background: rgba(13, 148, 136, 0.12) !important;
	color: #0D9488 !important;
}

/* Modals */
html[data-qaf-skin="salon"] .modal-content,
html[data-qaf-skin="salon"] .dialog .modal-content {
	border-radius: 18px !important;
	border: 1px solid rgba(13, 148, 136, 0.22) !important;
	box-shadow: 0 24px 60px rgba(11, 31, 42, 0.16) !important;
}

html[data-qaf-skin="salon"] a,
html[data-qaf-skin="salon"] .btn-link {
	--icon-stroke: #0D9488;
}

html[data-qaf-skin="salon"] a:hover {
	color: #14B8A6;
}

/* Scrollbars */
html[data-qaf-skin="salon"] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-qaf-skin="salon"] *::-webkit-scrollbar-thumb {
	background: rgba(13, 148, 136, 0.28);
	border-radius: 999px;
}
html[data-qaf-skin="salon"] *::-webkit-scrollbar-track { background: transparent; }

/* Workflow strip / command center polish under salon skin */
html[data-qaf-skin="salon"] .qaf-lab-flow,
html[data-qaf-skin="salon"] .qaf-flow-bar {
	background: linear-gradient(105deg, #0B1F2A, #0D9488 55%, #14B8A6) !important;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(11, 31, 42, 0.18);
}

html[data-qaf-skin="salon"] .qaf-lab-flow .is-active,
html[data-qaf-skin="salon"] .qaf-flow-step.is-active {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
}

/* Gold CTA accent (salon luxury buttons) */
html[data-qaf-skin="salon"] .qaf-btn-gold,
html[data-qaf-skin="salon"] .btn-qaf-gold {
	color: #0B1F2A !important;
	background: linear-gradient(105deg, #38BDF8, #7DD3FC) !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 34px rgba(56, 189, 248, 0.22) !important;
	font-weight: 700;
}

/* QAF custom topbar (Desk hides stock .navbar) */
html[data-qaf-skin="salon"] .qaf-topbar,
html[data-qaf-skin="salon"] body.qaf-lims-shell .qaf-topbar {
	background: linear-gradient(105deg, #0B1F2A, #134E4A 55%, #0F766E) !important;
	border-bottom: 0 !important;
	box-shadow: 0 9px 28px rgba(11, 31, 42, 0.22) !important;
	color: #F4F8FA !important;
}
html[data-qaf-skin="salon"] .qaf-topbar-brand-text,
html[data-qaf-skin="salon"] .qaf-topbar-user-email,
html[data-qaf-skin="salon"] .qaf-topbar .qaf-topbar-icon-btn {
	color: #F4F8FA !important;
}
html[data-qaf-skin="salon"] .qaf-topbar input,
html[data-qaf-skin="salon"] .qaf-topbar .form-control,
html[data-qaf-skin="salon"] .qaf-topbar [type="search"] {
	background: rgba(255, 255, 255, 0.94) !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	border-radius: 12px !important;
	color: #0B1F2A !important;
}
html[data-qaf-skin="salon"] .qaf-topbar-avatar {
	background: linear-gradient(135deg, #0D9488, #14B8A6) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
html[data-qaf-skin="salon"] #qaf-sidebar {
	background:
		linear-gradient(180deg, rgba(13, 148, 136, 0.05), transparent 180px),
		#FFFFFF !important;
	border-inline-end: 1px solid rgba(13, 148, 136, 0.22) !important;
}
html[data-qaf-skin="salon"] .qaf-brand-text {
	color: #0D9488 !important;
}