/**
 * Vconnct Whitelabel Stylesheet
 * This CSS file applies hardcoded branding overrides to prevent UI flickering
 */

/* ====================================================
   CAIRO FONT FOR ARABIC LANGUAGE
   ==================================================== */

/* Import Cairo font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* Apply Cairo font for Arabic (RTL) pages */
html[lang="ar"],
html[dir="rtl"],
body[dir="rtl"],
[lang="ar"] {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* Apply Cairo to all elements in RTL mode */
[dir="rtl"] *,
html[lang="ar"] * {
	font-family: inherit;
}

/* Specific elements that need Cairo font in Arabic */
[dir="rtl"] .navbar,
[dir="rtl"] .sidebar,
[dir="rtl"] .page-container,
[dir="rtl"] .main-section,
[dir="rtl"] .frappe-control,
[dir="rtl"] .form-control,
[dir="rtl"] .btn,
[dir="rtl"] .modal,
[dir="rtl"] .dialog,
[dir="rtl"] .dropdown-menu,
[dir="rtl"] .sidebar-header,
[dir="rtl"] .desk-sidebar,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] div, [dir="rtl"] a, [dir="rtl"] label,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* Desktop icons and workspace titles */
[dir="rtl"] .desktop-icon-container,
[dir="rtl"] .workspace-title,
[dir="rtl"] .header-title,
[dir="rtl"] .sidebar-item,
[dir="rtl"] .menu-item-title {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* Tab bar in Arabic */
[dir="rtl"] .mjara-tabbar,
[dir="rtl"] .mjara-tab,
[dir="rtl"] .mjara-tab-title,
[dir="rtl"] .mjara-app-item-name {
	font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* RTL: Move Getting Started/Help panel to left side - EXPANDED */
[dir="rtl"] div.fixed.w-80 {
	right: auto !important;
	left: 20px !important;
	z-index: 100000 !important;
	transition: all 0.2s ease-out !important;
}

/* RTL: Minimized state - panel has 'border' class when minimized */
/* Position above Maher AI icon at bottom-left */
[dir="rtl"] div.fixed.w-80.border {
	right: auto !important;
	left: 20px !important;
	top: auto !important;
	bottom: 80px !important;
	height: 52px !important;
	max-height: 52px !important;
	overflow: hidden !important;
	padding: 0 12px !important;
	margin: 0 !important;
	z-index: 100000 !important;
	transition: all 0.2s ease-out !important;
}

/* RTL: Style the header inside minimized panel - space between text and icons */
[dir="rtl"] div.fixed.w-80.border > div:first-child {
	width: 100% !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

/* RTL: Fix icon and text spacing in sidebar */
[dir="rtl"] .gap-2 {
	gap: 0.5rem;
}

[dir="rtl"] .mr-2 {
	margin-right: 0 !important;
	margin-left: 0.5rem !important;
}

[dir="rtl"] .ml-2 {
	margin-left: 0 !important;
	margin-right: 0.5rem !important;
}

/* RTL: Fix App Panel popup position and size */
[dir="rtl"] .mjara-app-panel {
	right: auto !important;
	left: 16px !important;
	min-width: 320px !important;
	max-width: 360px !important;
}

/* RTL: Ensure 4 columns grid */
[dir="rtl"] .mjara-app-panel-grid {
	grid-template-columns: repeat(4, 1fr) !important;
}

/* RTL: Fix App Panel header text alignment */
[dir="rtl"] .mjara-app-panel-header {
	text-align: right;
}

/* RTL: Keep app items centered */
[dir="rtl"] .mjara-app-item {
	text-align: center;
}

[dir="rtl"] .mjara-app-item-name {
	text-align: center;
	font-size: 10px;
}

/* RTL: Fix dropdown menus and popups */
[dir="rtl"] .dropdown-menu {
	right: auto !important;
	left: 0 !important;
}

[dir="rtl"] .popover {
	right: auto !important;
	left: 0 !important;
}

/* RTL: Fix navbar dropdowns */
[dir="rtl"] .navbar .dropdown-menu {
	right: auto !important;
	left: 0 !important;
}

/* RTL: Fix user avatar dropdown */
[dir="rtl"] .navbar-user .dropdown-menu,
[dir="rtl"] .avatar-frame + .dropdown-menu,
[dir="rtl"] [data-page-container] .dropdown-menu {
	right: auto !important;
	left: 0 !important;
}

/* RTL: Fix absolute positioned panels */
[dir="rtl"] .fixed.right-0 {
	right: auto !important;
	left: 0 !important;
}

[dir="rtl"] .absolute.right-0 {
	right: auto !important;
	left: 0 !important;
}

/* Help Menu - Keep visible but remove external links via JavaScript */

/* Hide Powered By Footer */
.footer-powered {
	display: none !important;
}

/* Hide "Powered by Learning" Zap icon in LMS sidebar */
.lucide-zap,
svg.lucide.lucide-zap,
[class*="lucide-zap"] {
	display: none !important;
}

/* Hide Powered By text in footer */
.web-footer .powered {
	display: none !important;
}

/* Hide any "Powered by Frappe" text */
.powered-by-frappe {
	display: none !important;
}

/* Additional branding overrides */
.navbar-brand .navbar-brand-text::after {
	content: '' !important;
}

/* Login page specific */
.login-content .page-card-head .indicator {
	display: none !important;
}

/* Hide ERPNext branding if present */
.erpnext-icon {
	display: none !important;
}

/* Hide help resources section */
.help-resources {
	display: none !important;
}

/* Hide help links in sidebar */
.standard-sidebar-section[data-title="Help"] {
	display: none !important;
}

/* Additional footer cleanup */
footer .text-muted small {
	display: none !important;
}

/* Hide signup footer */
.footer-signup {
	display: none !important;
}

/* Hide external help links - JavaScript will remove them, this is a backup */
#toolbar-help a[href*="frappe.io"],
#toolbar-help a[href*="erpnext.com"],
#toolbar-help a[href*="frappe.school"],
#toolbar-help a[href*="discuss.frappe.io"],
#toolbar-help a[href*="github.com/frappe"] {
	display: none !important;
}

/* Hide external branding links - SPECIFIC selectors only */
/* Don't use broad [href*="..."] as it hides workspace icons */
.powered-by,
.brand-powered-by,
.footer-powered a[href*="frappe.io"],
.footer-powered a[href*="erpnext.com"],
footer a[href*="frappe.io"],
footer a[href*="erpnext.com"],
#toolbar-help a[href*="frappe.io"],
#toolbar-help a[href*="erpnext.com"] {
	display: none !important;
}

/* Hide Help centre link in onboarding dialogs */
.onboarding-help-link,
.setup-wizard-slide .help-link,
.onboarding-dialog a[href*="docs.erpnext.com"],
.onboarding-dialog a[href*="erpnext.com"],
.onboarding-dialog a[href*="frappe.io"],
.modal a[href*="docs.erpnext.com"],
.modal-body a[href*="docs.erpnext.com"],
.documentation-link,
.help-centre-link {
	display: none !important;
}

/* Hide "Help centre" text/buttons in onboarding */
.onboarding-step-footer a[target="_blank"],
.setup-wizard-footer a[target="_blank"] {
	display: none !important;
}

/* ==========================================
   CRM App - Hide external documentation links
   Use SPECIFIC selectors - not broad ones!
   ========================================== */

/* Hide doc links only in specific contexts */
#toolbar-help a[href*="docs.frappe.io"],
#toolbar-help a[href*="frappecrm.com"],
.navbar a[href*="docs.frappe.io"] {
	display: none !important;
}

/* Hide Help centre link in CRM Help Modal */
.help-modal a[target="_blank"],
.help-dialog a[target="_blank"],
[class*="help-modal"] a[href*="docs"],
[class*="HelpModal"] a[href*="docs"],
div[class*="modal"] a[href*="docs.frappe.io"] {
	display: none !important;
}

/* Hide Documentation link button in CRM sidebar help section */
.sidebar-help-link,
.docs-link,
.documentation-link,
button[class*="docs"],
a[class*="docs-link"] {
	display: none !important;
}

/* Hide the entire footer section of Help modal that contains the docs link */
[class*="HelpModal"] footer,
[class*="help-modal"] footer,
.help-modal-footer,
.help-dialog-footer {
	display: none !important;
}

/* CRM specific: Hide any link that opens in new tab within help sections */
[class*="help"] a[target="_blank"]:not([href*="localhost"]),
[class*="Help"] a[target="_blank"]:not([href*="localhost"]),
.modal a[target="_blank"][href*="docs"],
.dialog a[target="_blank"][href*="docs"] {
	display: none !important;
}

/* Hide text that says "Help centre" or "Documentation" */
a:has-text("Help centre"),
a:has-text("Documentation"),
button:has-text("Help centre"),
button:has-text("Documentation") {
	display: none !important;
}

/* Generic hide for external help links in Vue modals only */
.v-modal a[href^="https://docs"],
.v-dialog a[href^="https://docs"] {
	display: none !important;
}

/* Hide the "Read docs" or similar buttons */
.read-docs-btn,
.view-docs-btn,
[class*="read-docs"],
[class*="view-docs"] {
	display: none !important;
}

/* ====================================================
   MJARA TAB BAR - Browser-like tabs for navigation
   ==================================================== */
.mjara-tabbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	background: var(--mjara-bg-primary, #fff);
	border-bottom: 1px solid var(--mjara-border-light, rgba(0,0,0,0.08));
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 42px;
	overflow: hidden;
}

/* Fix: Frappe sticky navbar should be below tabbar */
.sticky-top {
	position: sticky !important;
	top: 42px !important;
	z-index: 1050 !important;
}

/* Fix: Ensure sticky-top doesn't overlap tabbar when scrolling */
.sticky-top > .navbar {
	position: relative !important;
}

/* Fix: Account for tabbar height in sticky positioning */
body:not(.mjara-no-tabbar) .sticky-top {
	top: 42px !important;
}

body.mjara-no-tabbar .sticky-top {
	top: 0 !important;
}

/* Fix: Disable sticky for form tabs - let them scroll naturally */
/* This prevents the positioning issues caused by the extra tabbar height */
.form-tabs-list {
	position: relative !important;
	top: auto !important;
}

.form-tabs-sticky-up,
.form-tabs-sticky-down {
	position: relative !important;
	top: auto !important;
}

.mjara-tabs-container {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	overflow: hidden;
	min-width: 0;
}

.mjara-tabs-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	margin-left: auto;
}

.mjara-tabbar::-webkit-scrollbar {
	display: none;
}

[data-theme="dark"] .mjara-tabbar {
	background: #0d0d18;
	border-color: rgba(102,126,234,0.1);
}

/* Fix double scrollbar issue */
html {
	overflow-x: hidden !important;
	height: 100% !important;
}

/* Push ALL content down to account for fixed tab bar */
html, body {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Main content wrapper - push down */
body > *:first-child:not(.mjara-tabbar):not(script):not(style):not(link) {
	margin-top: 50px !important;
}

/* Frappe desk pages */
.page-container,
.layout-main,
[data-page-container],
.desk-body {
	margin-top: 50px !important;
}

/* Vue apps - #root and #app */
#root, #app {
	margin-top: 50px !important;
	height: calc(100vh - 50px) !important;
	max-height: calc(100vh - 50px) !important;
	overflow: auto !important;
}

#root .h-screen,
#app .h-screen,
#root [class*="h-screen"],
#app [class*="h-screen"] {
	height: calc(100vh - 50px) !important;
	max-height: calc(100vh - 50px) !important;
}

/* Fixed sidebars inside Vue apps */
#root [class*="fixed"],
#app [class*="fixed"] {
	top: 50px !important;
}

body.mjara-no-tabbar > *:first-child,
body.mjara-no-tabbar .page-container,
body.mjara-no-tabbar #root,
body.mjara-no-tabbar #app {
	margin-top: 0 !important;
}

/* No margin on login/signup pages */
body:has(.for-login) > *,
body:has(.for-signup) > *,
body:has(.for-forgot) > * {
	margin-top: 0 !important;
}

/* ====================================================
   BEAM CHAT WIDGET - ENHANCED STYLING
   Modern, polished chat widget with animations
   ==================================================== */

/* Widget Container - Enhanced styling */
.raven-chat {
	z-index: 1040 !important;
	background: linear-gradient(180deg, var(--bg-color) 0%, var(--fg-color) 100%) !important;
	border: none !important;
	border-radius: 16px 16px 0 0 !important;
	box-shadow:
		0 -8px 32px rgba(102, 126, 234, 0.15),
		0 -2px 8px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: hidden !important;
}

.raven-container {
	z-index: 1040 !important;
}

/* Smooth expand/collapse animation */
.raven-container {
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s ease !important;
}

.raven-container[data-open-state="false"] {
	transform: translateY(0);
}

.raven-container[data-open-state="true"] {
	transform: translateY(0);
	box-shadow: 0 -12px 48px rgba(102, 126, 234, 0.2) !important;
}

/* Header - Gradient background with Beam branding */
.raven-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	border-bottom: none !important;
	padding: 12px 16px !important;
	height: 48px !important;
	position: relative;
	overflow: hidden;
}

/* Header shimmer effect */
.raven-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
	animation: headerShimmer 3s infinite;
}

@keyframes headerShimmer {
	0% { left: -100%; }
	50%, 100% { left: 100%; }
}

/* Logo styling - Beam branding */
.raven-logo {
	color: #fff !important;
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: relative;
	padding-left: 28px !important;
}

/* Beam icon before logo text */
.raven-logo::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Open button styling */
.raven-header .open-raven-button {
	background: rgba(255, 255, 255, 0.15) !important;
	border-radius: 6px !important;
	transition: all 0.2s ease !important;
	border: none !important;
}

.raven-header .open-raven-button:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	transform: scale(1.05);
}

.raven-header .open-raven-button svg {
	fill: #fff !important;
}

/* Toggle/close button */
.raven-header .back-button {
	background: rgba(255, 255, 255, 0.15) !important;
	border-radius: 8px !important;
	transition: all 0.2s ease !important;
	border: none !important;
	padding: 6px !important;
}

.raven-header .back-button:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	transform: rotate(180deg);
}

.raven-header .back-button svg {
	fill: #fff !important;
}

/* Unread count badge - Enhanced */
.raven-unread-count {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%) !important;
	color: #fff !important;
	padding: 4px 10px !important;
	border-radius: 12px !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 8px rgba(238, 90, 90, 0.4) !important;
	animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* Channel header styling */
.raven-channel-header {
	color: #fff !important;
}

.raven-channel-header svg {
	fill: #fff !important;
}

.raven-channel-header a {
	color: #fff !important;
	text-decoration: none !important;
}

.raven-channel-header-name {
	color: #fff !important;
}

/* Content area styling */
.raven-content-container {
	background: var(--bg-color);
}

/* Channel list enhanced */
.raven-channel-list {
	background: var(--bg-color);
}

.raven-channel-list h4 {
	color: var(--primary) !important;
	font-weight: 600 !important;
	letter-spacing: 1px;
	padding: 12px 16px 8px !important;
}

.raven-channel-list-item {
	border-bottom: 1px solid rgba(102, 126, 234, 0.08) !important;
	padding: 10px 12px !important;
	transition: all 0.2s ease !important;
}

.raven-channel-list-item:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
	padding-left: 16px !important;
}

.raven-channel-list-item .raven-channel-icon {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 8px;
	padding: 4px;
}

.raven-channel-list-item .raven-channel-icon svg {
	fill: #fff !important;
}

/* Channel unread count */
.raven-channel-list-item .channel-unread-count {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
}

/* Chat view styling */
.raven-chat-view {
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Chat input enhanced */
.raven-chat-input {
	background: var(--bg-color) !important;
	border-top: 1px solid rgba(102, 126, 234, 0.1) !important;
	padding: 10px 12px !important;
}

.raven-chat-input textarea {
	border-radius: 12px !important;
	border: 1px solid rgba(102, 126, 234, 0.2) !important;
	padding: 10px 14px !important;
	transition: all 0.2s ease !important;
	background: var(--fg-color) !important;
}

.raven-chat-input textarea:focus {
	border-color: #667eea !important;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
	outline: none !important;
}

.raven-chat-input .send-button {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 8px 12px !important;
	transition: all 0.2s ease !important;
}

.raven-chat-input .send-button:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.raven-chat-input .send-button svg {
	fill: #fff !important;
}

/* Message items */
.message-item {
	padding: 8px 12px !important;
	border-radius: 8px;
	transition: background 0.2s ease;
}

.message-item:hover {
	background: rgba(102, 126, 234, 0.04);
}

/* Avatar enhanced */
.raven-avatar {
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Date separator */
.raven-date-separator .raven-date-separator-line {
	background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent) !important;
}

.raven-date-separator .raven-date-separator-text {
	background: var(--bg-color);
	padding: 2px 12px;
	border-radius: 12px;
	font-weight: 500;
	color: #667eea !important;
}

/* Dark mode support */
[data-theme="dark"] .raven-chat {
	background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
	box-shadow:
		0 -8px 32px rgba(102, 126, 234, 0.2),
		0 -2px 8px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .raven-header {
	background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
}

[data-theme="dark"] .raven-channel-list-item:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
}

[data-theme="dark"] .raven-chat-input textarea {
	background: #1a1a2e !important;
	border-color: rgba(102, 126, 234, 0.3) !important;
}

.mjara-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px 8px 0 0;
	background: var(--mjara-bg-secondary, #f8fafc);
	border: 1px solid var(--mjara-border-light, rgba(0,0,0,0.08));
	border-bottom: none;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--mjara-text-secondary, #475569);
	white-space: nowrap;
	max-width: 180px;
	min-width: 100px;
	transition: all 0.2s ease;
	position: relative;
	top: 1px;
}

.mjara-tab:hover {
	background: var(--mjara-bg-tertiary, #f1f5f9);
	color: var(--mjara-text-primary, #0f172a);
}

.mjara-tab.active {
	background: var(--mjara-bg-primary, #fff);
	color: var(--mjara-primary, #667eea);
	border-color: var(--mjara-border-default, rgba(0,0,0,0.12));
	box-shadow: 0 -2px 4px rgba(0,0,0,0.04);
}

.mjara-tab.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--mjara-bg-primary, #fff);
}

[data-theme="dark"] .mjara-tab {
	background: #12121c;
	border-color: rgba(102,126,234,0.1);
	color: #a8a8c0;
}

[data-theme="dark"] .mjara-tab:hover {
	background: #1a1a2e;
	color: #f0f0f8;
}

[data-theme="dark"] .mjara-tab.active {
	background: #0d0d18;
	color: #9f7aea;
	border-color: rgba(102,126,234,0.15);
}

/* Home tab special styling */
.mjara-tab.home-tab {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff !important;
	border: none;
	min-width: auto;
	padding: 8px 16px;
}

.mjara-tab.home-tab:hover {
	background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
	box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}

.mjara-tab.home-tab.active {
	box-shadow: 0 2px 12px rgba(102,126,234,0.4);
}

.mjara-tab.home-tab::after {
	display: none;
}

.mjara-tab-title {
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.mjara-tab-close {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.mjara-tab-close:hover {
	opacity: 1;
	background: rgba(0,0,0,0.1);
}

.mjara-tab.home-tab .mjara-tab-close {
	display: none;
}

.mjara-tab-close svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
	stroke-width: 2;
}

.mjara-tab-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.7;
}

.mjara-tab-icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.mjara-tab.home-tab .mjara-tab-icon {
	opacity: 1;
}

/* Overflow menu button */
.mjara-tab-overflow {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mjara-text-muted, #94a3b8);
	transition: all 0.15s ease;
	flex-shrink: 0;
	position: relative;
}

.mjara-tab-overflow.has-hidden {
	display: flex;
}

.mjara-tab-overflow:hover {
	background: var(--mjara-bg-tertiary, #f1f5f9);
	color: var(--mjara-primary, #667eea);
}

.mjara-tab-overflow svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

.mjara-tab-overflow-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--mjara-primary, #667eea);
	color: #fff;
	font-size: 9px;
	font-weight: 600;
	min-width: 14px;
	height: 14px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* Overflow dropdown */
.mjara-tab-dropdown {
	position: fixed;
	top: 46px;
	right: 50px;
	background: var(--mjara-bg-primary, #fff);
	border: 1px solid var(--mjara-border-light, rgba(0,0,0,0.08));
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 180px;
	max-width: 250px;
	max-height: 300px;
	overflow-y: auto;
	z-index: 1200;
	display: none;
}

.mjara-tab-dropdown.open {
	display: block;
}

.mjara-tab-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	font-size: 13px;
	color: var(--mjara-text-secondary, #475569);
	transition: background 0.15s ease;
	border-bottom: 1px solid var(--mjara-border-light, rgba(0,0,0,0.05));
}

.mjara-tab-dropdown-item:last-child {
	border-bottom: none;
}

.mjara-tab-dropdown-item:hover {
	background: var(--mjara-bg-tertiary, #f1f5f9);
}

.mjara-tab-dropdown-item.active {
	background: rgba(102, 126, 234, 0.1);
	color: var(--mjara-primary, #667eea);
}

.mjara-tab-dropdown-item .mjara-tab-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.mjara-tab-dropdown-item .mjara-tab-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mjara-tab-dropdown-item .mjara-tab-close {
	opacity: 0.5;
}

.mjara-tab-dropdown-item:hover .mjara-tab-close {
	opacity: 1;
}

[data-theme="dark"] .mjara-tab-dropdown {
	background: #1a1a2e;
	border-color: rgba(102,126,234,0.2);
}

[data-theme="dark"] .mjara-tab-dropdown-item {
	color: #e2e8f0;
	border-color: rgba(102,126,234,0.1);
}

[data-theme="dark"] .mjara-tab-dropdown-item:hover {
	background: rgba(102,126,234,0.1);
}

/* Clear all tabs button */
.mjara-tab-clear {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mjara-text-muted, #94a3b8);
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.mjara-tab-clear:hover {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.mjara-tab-clear svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

/* App Switcher */
.mjara-app-switcher {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mjara-text-muted, #94a3b8);
	background: var(--mjara-bg-secondary, #f8fafc);
	border: 1px solid var(--mjara-border-light, rgba(0,0,0,0.08));
	transition: all 0.15s ease;
	flex-shrink: 0;
	position: relative;
}

.mjara-app-switcher:hover {
	background: var(--mjara-primary, #667eea);
	color: #fff;
	border-color: var(--mjara-primary, #667eea);
}

.mjara-app-switcher svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

/* App Panel */
.mjara-app-panel {
	position: fixed;
	top: 46px;
	right: 16px;
	background: var(--mjara-bg-primary, #fff);
	border: 1px solid var(--mjara-border-light, rgba(0,0,0,0.08));
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	min-width: 280px;
	max-width: 320px;
	z-index: 1200;
	display: none;
	overflow: hidden;
}

.mjara-app-panel.open {
	display: block;
}

.mjara-app-panel-header {
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mjara-text-muted, #94a3b8);
	border-bottom: 1px solid var(--mjara-border-light, rgba(0,0,0,0.08));
}

.mjara-app-panel-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 12px;
}

.mjara-app-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 8px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.mjara-app-item:hover {
	background: var(--mjara-bg-tertiary, #f1f5f9);
}

.mjara-app-item.active {
	background: rgba(102, 126, 234, 0.1);
}

.mjara-app-item.active .mjara-app-item-icon {
	color: var(--mjara-primary, #667eea);
}

.mjara-app-item.active .mjara-app-item-name {
	color: var(--mjara-primary, #667eea);
}

.mjara-app-item-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mjara-text-secondary, #475569);
	margin-bottom: 6px;
}

.mjara-app-item-icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

.mjara-app-item-name {
	font-size: 11px;
	font-weight: 500;
	color: var(--mjara-text-secondary, #475569);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

[data-theme="dark"] .mjara-app-switcher {
	background: #1a1a2e;
	border-color: rgba(102,126,234,0.2);
}

[data-theme="dark"] .mjara-app-panel {
	background: #1a1a2e;
	border-color: rgba(102,126,234,0.2);
}

[data-theme="dark"] .mjara-app-panel-header {
	border-color: rgba(102,126,234,0.1);
}

[data-theme="dark"] .mjara-app-item:hover {
	background: rgba(102,126,234,0.1);
}

[data-theme="dark"] .mjara-app-item-icon,
[data-theme="dark"] .mjara-app-item-name {
	color: #e2e8f0;
}

/* Hide tabbar on login pages */
body:has(.for-login) .mjara-tabbar,
body:has(.for-signup) .mjara-tabbar,
body:has(.for-forgot) .mjara-tabbar {
	display: none !important;
}

/* ====================================================
   MODERN SEARCH BAR - Centered & Enhanced
   ==================================================== */

/* Make the navbar container use flexbox properly for centering */
.navbar .container {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

/* Position the search bar in the center */
.navbar .navbar-collapse form.form-inline {
	position: absolute !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	justify-content: center !important;
	width: auto !important;
	flex: none !important;
}

/* Modern search bar container */
.navbar .search-bar {
	width: 480px !important;
	max-width: 480px !important;
	flex: none !important;
	position: relative !important;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
	border: 1px solid rgba(102, 126, 234, 0.15) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08) !important;
}

.navbar .search-bar:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%) !important;
	border-color: rgba(102, 126, 234, 0.25) !important;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.12) !important;
}

.navbar .search-bar:focus-within {
	background: var(--fg-color, #fff) !important;
	border-color: rgba(102, 126, 234, 0.5) !important;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15), 0 8px 24px rgba(102, 126, 234, 0.15) !important;
	transform: scale(1.02);
}

/* Modern search input */
.navbar .search-bar #navbar-search {
	background: transparent !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 10px 16px 10px 42px !important;
	font-size: 14px !important;
	font-weight: 450 !important;
	color: var(--text-color, #1f2937) !important;
	width: 100% !important;
	height: 42px !important;
	transition: all 0.2s ease !important;
}

.navbar .search-bar #navbar-search::placeholder {
	color: rgba(102, 126, 234, 0.6) !important;
	font-weight: 400 !important;
	opacity: 1 !important;
}

.navbar .search-bar #navbar-search:focus {
	outline: none !important;
	box-shadow: none !important;
}

.navbar .search-bar #navbar-search:focus::placeholder {
	color: rgba(102, 126, 234, 0.4) !important;
}

/* Modern search icon */
.navbar .search-bar .search-icon {
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: rgba(102, 126, 234, 0.7) !important;
	pointer-events: none !important;
	z-index: 1 !important;
	transition: all 0.2s ease !important;
}

.navbar .search-bar .search-icon svg,
.navbar .search-bar .search-icon .icon {
	width: 18px !important;
	height: 18px !important;
	stroke: currentColor !important;
}

.navbar .search-bar:focus-within .search-icon {
	color: #667eea !important;
}

/* Desktop search icon in /desk home - center vertically and match color */
.desktop-search-icon {
	top: 9px !important;
	color: rgba(102, 126, 234, 0.7) !important;
	transition: all 0.2s ease !important;
}

.desktop-search-icon svg,
.desktop-search-icon .icon {
	stroke: currentColor !important;
}

.search-bar:focus-within .desktop-search-icon,
.search-bar:hover .desktop-search-icon {
	color: #667eea !important;
}

/* Keyboard shortcut badge */
.navbar .search-bar::after {
	content: '⌘K';
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: rgba(102, 126, 234, 0.5) !important;
	background: rgba(102, 126, 234, 0.1) !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	pointer-events: none !important;
	transition: all 0.2s ease !important;
}

.navbar .search-bar:focus-within::after {
	opacity: 0 !important;
}

/* Awesomebar dropdown styling */
.navbar .search-bar .awesomplete > ul,
.awesomplete > ul {
	border-radius: 12px !important;
	border: 1px solid rgba(102, 126, 234, 0.15) !important;
	box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
	margin-top: 8px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	max-height: 400px !important;
	background: var(--fg-color, #fff) !important;
	scrollbar-width: thin !important;
	scrollbar-color: rgba(102, 126, 234, 0.3) transparent !important;
}

/* Custom scrollbar for webkit browsers */
.navbar .search-bar .awesomplete > ul::-webkit-scrollbar,
.awesomplete > ul::-webkit-scrollbar {
	width: 6px !important;
}

.navbar .search-bar .awesomplete > ul::-webkit-scrollbar-track,
.awesomplete > ul::-webkit-scrollbar-track {
	background: transparent !important;
}

.navbar .search-bar .awesomplete > ul::-webkit-scrollbar-thumb,
.awesomplete > ul::-webkit-scrollbar-thumb {
	background: rgba(102, 126, 234, 0.3) !important;
	border-radius: 3px !important;
}

.navbar .search-bar .awesomplete > ul::-webkit-scrollbar-thumb:hover,
.awesomplete > ul::-webkit-scrollbar-thumb:hover {
	background: rgba(102, 126, 234, 0.5) !important;
}

.navbar .search-bar .awesomplete > ul > li {
	padding: 10px 16px !important;
	border-bottom: 1px solid rgba(102, 126, 234, 0.08) !important;
	transition: all 0.15s ease !important;
}

.navbar .search-bar .awesomplete > ul > li:last-child {
	border-bottom: none !important;
}

.navbar .search-bar .awesomplete > ul > li:hover,
.navbar .search-bar .awesomplete > ul > li[aria-selected="true"] {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
}

.navbar .search-bar .awesomplete > ul > li mark {
	background: rgba(102, 126, 234, 0.2) !important;
	color: #667eea !important;
	font-weight: 600 !important;
	border-radius: 2px !important;
	padding: 0 2px !important;
}

/* Ensure right-side nav items stay on the right */
.navbar .navbar-collapse .navbar-nav {
	margin-left: auto !important;
}

/* Keep breadcrumbs on the left after logo */
.navbar #navbar-breadcrumbs {
	flex: 0 0 auto !important;
	margin-left: 16px !important;
}

/* Dark mode support */
[data-theme="dark"] .navbar .search-bar {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%) !important;
	border-color: rgba(102, 126, 234, 0.2) !important;
}

[data-theme="dark"] .navbar .search-bar:hover {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.18) 0%, rgba(118, 75, 162, 0.18) 100%) !important;
	border-color: rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .navbar .search-bar:focus-within {
	background: var(--fg-color, #1a1a2e) !important;
	border-color: rgba(102, 126, 234, 0.5) !important;
}

[data-theme="dark"] .navbar .search-bar #navbar-search {
	color: #e2e8f0 !important;
}

[data-theme="dark"] .navbar .search-bar #navbar-search::placeholder {
	color: rgba(159, 122, 234, 0.6) !important;
}

[data-theme="dark"] .navbar .search-bar .search-icon {
	color: rgba(159, 122, 234, 0.7) !important;
}

[data-theme="dark"] .navbar .search-bar::after {
	color: rgba(159, 122, 234, 0.6) !important;
	background: rgba(159, 122, 234, 0.15) !important;
}

[data-theme="dark"] .navbar .search-bar .awesomplete > ul {
	background: #1a1a2e !important;
	border-color: rgba(102, 126, 234, 0.2) !important;
}

[data-theme="dark"] .navbar .search-bar .awesomplete > ul > li {
	border-color: rgba(102, 126, 234, 0.1) !important;
}

/* Responsive: on smaller screens, reduce search bar width */
@media (max-width: 1200px) {
	.navbar .search-bar {
		width: 380px !important;
		max-width: 380px !important;
	}
}

@media (max-width: 992px) {
	.navbar .navbar-collapse form.form-inline {
		position: relative !important;
		left: auto !important;
		transform: none !important;
	}
	.navbar .search-bar {
		width: 280px !important;
		max-width: 280px !important;
	}
	.navbar .search-bar::after {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.navbar .search-bar {
		width: 200px !important;
		max-width: 200px !important;
	}
}

/* Add tab button */
.mjara-tab-add {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mjara-text-muted, #94a3b8);
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.mjara-tab-add:hover {
	background: var(--mjara-bg-hover, rgba(102,126,234,0.08));
	color: var(--mjara-primary, #667eea);
}

.mjara-tab-add svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
}

/* ====================================================
   SEARCH BAR - RTL SUPPORT
   ==================================================== */

[dir="rtl"] .navbar .search-bar #navbar-search {
	padding: 10px 42px 10px 16px !important;
}

[dir="rtl"] .navbar .search-bar .search-icon {
	left: auto !important;
	right: 0 !important;
}

[dir="rtl"] .navbar .search-bar::after {
	right: auto !important;
	left: 12px !important;
}

[dir="rtl"] .desktop-search-icon {
	left: auto !important;
	right: 12px !important;
}

/* ====================================================
   MAHER AI CHAT - RTL SUPPORT
   Move chat icon to bottom-left in Arabic/RTL mode
   ==================================================== */

[dir="rtl"] #maher-ai-container {
	right: auto !important;
	left: 24px !important;
}

[dir="rtl"] .maher-ai-fab {
	right: auto !important;
	left: 24px !important;
}

[dir="rtl"] .maher-ai-chat {
	right: auto !important;
	left: 0 !important;
}

[dir="rtl"] .maher-ai-chat.maximized {
	right: auto !important;
	left: -23px !important;
}

[dir="rtl"] .maher-ai-toast {
	right: auto !important;
	left: 24px !important;
}

[dir="rtl"] .maher-ai-rec-toast {
	right: auto !important;
	left: 20px !important;
	border-left: none !important;
	border-right: 4px solid #2563eb !important;
}

[dir="rtl"] .maher-ai-toast-container {
	right: auto !important;
	left: 24px !important;
}

/* ====================================================
   VCONNCT REBRANDING - HIDE EXTERNAL LINKS & ELEMENTS
   Hide Help Center, About, Support, Telegram links
   across all Vue apps (CRM, Helpdesk, LMS, Insights)
   Using VALID CSS selectors only
   ==================================================== */

/* ----------------------------------------
   GLOBAL - Hide external documentation links
   These use href attribute selectors (valid CSS)
   ---------------------------------------- */

/* Hide links to Frappe documentation sites */
a[href*="docs.frappe.io"],
a[href*="docs.erpnext.com"],
a[href*="frappecrm.com"],
a[href*="docs.frappeinsights.com"] {
	display: none !important;
}

/* Hide links to Telegram groups */
a[href*="t.me/frappe"],
a[href*="t.me/frappecrm"],
a[href*="t.me/frappedesk"],
a[href*="t.me/frappeinsights"] {
	display: none !important;
}

/* Hide links to GitHub repositories */
a[href*="github.com/frappe/crm"],
a[href*="github.com/frappe/helpdesk"],
a[href*="github.com/frappe/lms"],
a[href*="github.com/frappe/insights"] {
	display: none !important;
}

/* Hide links to Frappe support */
a[href*="support.frappe.io"],
a[href*="frappe.io/support"] {
	display: none !important;
}

/* Hide links to Frappe website (for apps) */
a[href="https://frappe.io/crm"],
a[href="https://frappe.io/helpdesk"],
a[href="https://frappe.io/lms"] {
	display: none !important;
}

/* ----------------------------------------
   HELP MODAL / HELP CENTER - Selective Hiding
   KEEP Getting Started visible
   HIDE Help Center (search articles) view
   ---------------------------------------- */

/* Hide HelpModal ONLY when showing Help Center (has Search articles input) */
/* This keeps "Getting Started" onboarding visible but hides Help Center articles */
div.fixed:has(input[placeholder="Search articles..."]) {
	display: none !important;
}

/* Hide "Help centre" footer link inside HelpModal ONLY */
/* Must be scoped to fixed positioned elements (HelpModal) to avoid hiding LMS sidebar */
/* The footer link is inside div.fixed.z-50.right-0 */
div.fixed.z-50.right-0 > div:last-child > div {
	display: none !important;
}

/* More specific: only hide inside the help modal panel */
div.fixed[class*="z-50"][class*="right-0"][class*="w-80"] > div:last-child {
	display: none !important;
}

/* ----------------------------------------
   ABOUT DIALOG - Hide completely
   The About dialog contains specific links we can target with :has()
   ---------------------------------------- */

/* Hide dialogs containing Frappe CRM about links */
div[class*="Dialog"]:has(a[href*="frappe.io/crm"]),
div[class*="Dialog"]:has(a[href*="github.com/frappe/crm"]),
div[class*="Dialog"]:has(a[href*="t.me/frappecrm"]) {
	display: none !important;
}

/* Hide dialogs containing Frappe Helpdesk about links */
div[class*="Dialog"]:has(a[href*="frappe.io/helpdesk"]),
div[class*="Dialog"]:has(a[href*="github.com/frappe/helpdesk"]),
div[class*="Dialog"]:has(a[href*="t.me/frappedesk"]) {
	display: none !important;
}

/* ----------------------------------------
   LMS APP - Fix Email Templates UI Bug
   ---------------------------------------- */

/* Email Templates table needs better column handling */
[class*="ListView"] table {
	table-layout: auto !important;
}

[class*="ListView"] td,
[class*="ListView"] th {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 400px !important;
}

/* ----------------------------------------
   ELEMENTS MARKED FOR HIDING BY JS
   These classes are added by vconnct.js for text-based hiding
   ---------------------------------------- */

/* Universal hide class applied by JavaScript */
.vconnct-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Pre-hide dropdown menu items that will be hidden by JS */
/* This prevents flickering by hiding before JS runs */
[role="menu"] [role="menuitem"],
[class*="Dropdown"] li,
[class*="dropdown"] [class*="item"] {
	transition: none !important;
}

/* ====================================================
   UI BUG FIXES - January 2026
   ==================================================== */

/* Fix: RTL dropdown overflow - ensure dropdowns don't overflow viewport */
[dir="rtl"] .dropdown-menu {
	max-width: calc(100vw - 32px) !important;
}

/* Fix: RTL dropdown-menu-right should be on left in RTL */
[dir="rtl"] .dropdown-menu-right {
	right: auto !important;
	left: 0 !important;
}

/* Fix: Navbar dropdowns z-index - ensure they appear above sidebar */
.navbar .dropdown-menu,
.dropdown-help .dropdown-menu,
.dropdown-navbar-user .dropdown-menu,
.dropdown-notifications .dropdown-menu,
.dropdown-message .dropdown-menu {
	z-index: 1060 !important;
	position: absolute !important;
}

/* Fix: RTL Help dropdown positioning */
[dir="rtl"] .dropdown-help .dropdown-menu {
	right: 0 !important;
	left: auto !important;
	transform: none !important;
}

[dir="rtl"] .dropdown-navbar-user .dropdown-menu {
	right: 0 !important;
	left: auto !important;
	transform: none !important;
}

/* Fix: RTL navbar dropdown should not go behind sidebar */
[dir="rtl"] .navbar .dropdown-menu {
	z-index: 1060 !important;
}

/* Fix: Sidebar z-index should be lower than dropdown */
[dir="rtl"] .desk-sidebar,
[dir="rtl"] .body-sidebar,
[dir="rtl"] .layout-side-section {
	z-index: 1020 !important;
}

/* Fix: RTL dropdown position relative to trigger */
[dir="rtl"] .dropdown {
	position: relative;
}

[dir="rtl"] .dropdown-menu.show {
	z-index: 1060 !important;
}

/* Fix: Ensure dropdowns don't overflow on mobile */
@media (max-width: 768px) {
	.dropdown-menu {
		max-width: calc(100vw - 20px) !important;
		overflow-x: auto !important;
	}
}

/* Fix: Modal z-index stacking for datepicker */
.modal .datepicker,
.modal .daterangepicker,
.modal .ui-datepicker {
	z-index: 1150 !important;
}

/* Fix: Ensure modal backdrop doesn't block datepicker */
.modal-backdrop + .datepicker,
.modal-backdrop + .daterangepicker {
	z-index: 1150 !important;
}

/* Fix: Mobile viewport height issues - use dvh where supported */
@supports (height: 100dvh) {
	#root, #app {
		height: calc(100dvh - 50px) !important;
		max-height: calc(100dvh - 50px) !important;
	}

	#root .h-screen,
	#app .h-screen,
	#root [class*="h-screen"],
	#app [class*="h-screen"] {
		height: calc(100dvh - 50px) !important;
		max-height: calc(100dvh - 50px) !important;
	}
}

/* Fix: Prevent horizontal scroll on body */
body {
	overflow-x: hidden !important;
}

/* Fix: RTL text alignment for form labels */
[dir="rtl"] .frappe-control > label,
[dir="rtl"] .form-group > label {
	text-align: right !important;
}

/* Fix: RTL input text direction */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="number"],
[dir="rtl"] textarea,
[dir="rtl"] .ql-editor {
	text-align: right !important;
	direction: rtl !important;
}

/* Fix: RTL form control icons */
[dir="rtl"] .control-input-wrapper .search-icon,
[dir="rtl"] .control-input-wrapper .link-btn {
	right: auto !important;
	left: 8px !important;
}

/* Fix: RTL sidebar menu items */
[dir="rtl"] .sidebar-menu .menu-item {
	text-align: right !important;
	padding-right: 16px !important;
	padding-left: 8px !important;
}

/* Fix: RTL breadcrumbs */
[dir="rtl"] .breadcrumb-container {
	direction: rtl !important;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
	content: "\\";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Fix: RTL page header actions */
[dir="rtl"] .page-head .page-actions {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Fix: RTL table header alignment */
[dir="rtl"] .frappe-list th,
[dir="rtl"] .datatable th {
	text-align: right !important;
}

/* Fix: RTL modal close button */
[dir="rtl"] .modal-header .close,
[dir="rtl"] .modal-header .btn-close {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Fix: RTL alert icons */
[dir="rtl"] .alert .alert-icon {
	margin-right: 0 !important;
	margin-left: 12px !important;
}

/* Fix: RTL checkbox and radio alignment */
[dir="rtl"] .checkbox label,
[dir="rtl"] .radio label {
	padding-left: 0 !important;
	padding-right: 20px !important;
}

[dir="rtl"] .checkbox input[type="checkbox"],
[dir="rtl"] .radio input[type="radio"] {
	margin-left: 0 !important;
	margin-right: -20px !important;
}

/* Fix: RTL select2 dropdown */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
	right: auto !important;
	left: 8px !important;
}

/* Fix: RTL toast notifications */
[dir="rtl"] .toast-container {
	right: auto !important;
	left: 16px !important;
}

/* Fix: Scrollbar styling for better UX */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--scroll-track-color, #f1f1f1);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb-color, #c1c1c1);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scroll-thumb-hover-color, #a1a1a1);
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track {
	background: #1a1a2e;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: #4a4a6a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: #6a6a8a;
}

/* Fix: Empty state centering */
.empty-state,
.no-result,
.msgprint {
	text-align: center !important;
}

[dir="rtl"] .empty-state,
[dir="rtl"] .no-result {
	text-align: center !important;
}

/* Fix: Button group RTL */
[dir="rtl"] .btn-group > .btn:first-child {
	border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

[dir="rtl"] .btn-group > .btn:last-child {
	border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

/* Fix: Input group RTL */
[dir="rtl"] .input-group > .form-control:first-child {
	border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}

[dir="rtl"] .input-group > .form-control:last-child {
	border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

[dir="rtl"] .input-group-prepend {
	margin-right: 0 !important;
	margin-left: -1px !important;
}

[dir="rtl"] .input-group-append {
	margin-left: 0 !important;
	margin-right: -1px !important;
}