/*
 * Mjara Tab Bar CSS
 * =================
 * position:fixed tab bar that floats above every page — Desk + all Vue SPAs.
 * Loaded via app_include_css (Desk) and after_request middleware (Vue SPAs).
 */

/* Zero out the navbar-height offset that Frappe v16 still uses internally
   to pad the main content. Our 42px tab bar + body padding-top replaces it. */
:root { --navbar-height: 0px; }


/* Map Frappe CSS variables so the bar follows the active theme automatically */
:root {
	--mjara-bg-primary:    var(--bg-color, #ffffff);
	--mjara-bg-secondary:  var(--control-bg, #f8fafc);
	--mjara-bg-tertiary:   var(--btn-default-bg, #f1f5f9);
	--mjara-primary:       var(--primary, #3E63DD);
	--mjara-border-light:  var(--border-color, rgba(0,0,0,0.08));
	--mjara-border-default:var(--border-color, rgba(0,0,0,0.12));
	--mjara-text-primary:  var(--text-color, #0f172a);
	--mjara-text-secondary:var(--text-muted, #475569);
	--mjara-text-muted:    var(--text-light, #94a3b8);
}

/* =====================================================================
   Tab bar container
   ===================================================================== */
.mjara-tabbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1160;
	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;
}

.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;
}

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

/* Push body content below the fixed bar.
   overflow:hidden prevents a second body-level scrollbar — Frappe v16
   manages scrolling via inner containers, not the body itself. */
body { padding-top: 42px !important; overflow: hidden !important; }
body.mjara-no-tabbar { padding-top: 0 !important; overflow: auto !important; }
/* Login / signup pages — no bar */
body:has(.for-login),
body:has(.for-signup),
body:has(.for-forgot) { padding-top: 0 !important; overflow: auto !important; }

/* =====================================================================
   Frappe Desk v16 layout adjustments
   ===================================================================== */
/* Modals and search dialog must float above the tab bar.
   Exclude #freeze.grid-form — it is Frappe's grid-row backdrop (z-index 1020)
   and must NOT be raised above .form-in-grid (the actual row editor). */
.modal-backdrop:not(.grid-form) { z-index: 1150 !important; }
.modal                          { z-index: 1200 !important; }
.search-dialog                  { z-index: 1200 !important; }

/* Keep the app tabs visible as context while a modal is open, but don't let
   users navigate behind an active dialog. Drop it below the backdrop so the
   modal dim layer covers the tabs too. */
body.modal-open .mjara-tabbar {
	z-index: 1140;
	pointer-events: none;
}

/* Grid row editor (.form-in-grid) sits at z-index 1021 by default — below
   our tab bar (1100). Raise it so the editing form is fully visible. */
.grid-row-open .form-in-grid { z-index: 1120 !important; }

/* --navbar-height:0px makes Frappe compute form inner tab-bar sticky positions
   as top:-1px / top:-2px, hiding them under our 42px fixed bar.
   Override each class so they stick just below our bar instead. */
.form-tabs-sticky-up {
	top: calc(42px - 1px) !important;
}
.form-tabs-sticky-down {
	top: calc(42px - 2px) !important;
}
.form-tabs-sticky-down.show-navbar {
	top: calc(42px + var(--page-head-height, 0px) - 1px) !important;
}

/* Form tab-content scroll-margin-top: Frappe uses navbar-height + 52px.
   With navbar-height:0px this becomes only 52px — not enough to clear our
   42px bar, so clicking a form tab scrolls the target too far up. */
.form-tab-content {
	scroll-margin-top: calc(42px + 52px) !important;
}

/* On form pages, Frappe's 900px --page-max-width + margin:auto centers sections
   in the form wrapper, creating ~290px of left gap on wide screens (looks like
   a right-shift). Expand the limit so sections fill the available space. */
body[data-route^="Form"] {
	--page-max-width: 1400px;
}

/* body{padding-top:42px} shifts every child 42px below the viewport top.
   .body-sidebar and .main-section both have height:100vh so they overflow
   42px off the bottom edge (Administrator hidden, body content clipped).
   Subtracting 42px from both makes them fit exactly within the viewport.
   CSS !important beats the inline style set by Frappe's set_height() JS. */
.body-sidebar,
.body-sidebar-placeholder {
	height: calc(100vh - 42px) !important;
	max-height: calc(100vh - 42px) !important;
}

.main-section {
	height: calc(100vh - 42px) !important;
	scrollbar-gutter: auto !important;
}


/* =====================================================================
   React/Raven (Radix UI) layout fixes
   ===================================================================== */
#root { margin-top: 0 !important; padding-top: 0 !important; }
/* Inline-style fixed elements */
#root [style*="position: fixed"],
#root [style*="position:fixed"]  { top: 42px !important; }
#root .rt-Box[style*="fixed"],
#root .rt-Flex[style*="fixed"]   { top: 42px !important; }
/* Tailwind class-based fixed/sticky headers — scoped to #root so Radix
   dialog portals (rendered outside #root at </body>) are not affected. */
#root .fixed.top-0  { top: 42px !important; }
#root .sticky.top-0 { top: 42px !important; }
#root .h-screen { height: calc(100vh - 42px) !important; max-height: calc(100vh - 42px) !important; }
#root [style*="height: 100vh"],
#root [style*="height:100vh"]    { height: calc(100vh - 42px) !important; }
.rt-Flex[style*="100vh"],
.rt-Box[style*="100vh"]          { height: calc(100vh - 42px) !important; }
/* Raven Tailwind custom calc(100vh-X) height classes — subtract our 42px tab bar */
#root .h-\[calc\(100vh-57px\)\]  { height: calc(100vh - 99px)  !important; }
#root .h-\[calc\(100vh-72px\)\]  { height: calc(100vh - 114px) !important; }
#root .h-\[calc\(100vh-4rem\)\]  { height: calc(100vh - 4rem  - 42px) !important; }
#root .h-\[calc\(100vh-6rem\)\]  { height: calc(100vh - 6rem  - 42px) !important; }
#root .h-\[calc\(100vh-7rem\)\]  { height: calc(100vh - 7rem  - 42px) !important; }
#root .h-\[calc\(100vh-10rem\)\] { height: calc(100vh - 10rem - 42px) !important; }
#root .h-\[100vh\]               { height: calc(100vh - 42px) !important; }
#root .h-\[100dvh\]              { height: calc(100dvh - 42px) !important; }
#root [style*="height: 100dvh"],
#root [style*="height:100dvh"]   { height: calc(100dvh - 42px) !important; }
/* Raven FileDrop: ChatBoxBodyContainer (.overflow-hidden.justify-end) is the
   direct parent of the FileDrop rt-Flex. The FileDrop uses calc(100vh - 80px)
   as inline height; with our 42px tab bar the correct value is calc(100vh - 122px). */
#root .overflow-hidden.justify-end > .rt-Flex { height: calc(100vh - 122px) !important; }

/* =====================================================================
   Individual tab
   ===================================================================== */
.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);
}

/* White bottom edge hides the bar border behind active tab */
.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(62,99,221,0.1);
	color: #a8a8c0;
}
[data-theme="dark"] .mjara-tab:hover {
	background: #1a1a2e;
	color: #f0f0f8;
}
[data-theme="dark"] .mjara-tab.active {
	background: #0d0d18;
	color: #8DA4EF;
	border-color: rgba(62,99,221,0.15);
}

/* Home tab — Indigo gradient, no close button */
.mjara-tab.home-tab {
	background: linear-gradient(135deg, #3E63DD 0%, #3A5BC7 100%);
	color: #fff !important;
	border: none;
	min-width: auto;
	padding: 8px 16px;
}
.mjara-tab.home-tab:hover {
	background: linear-gradient(135deg, #3358D4 0%, #3A5BC7 100%);
	box-shadow: 0 2px 8px rgba(62,99,221,0.3);
}
.mjara-tab.home-tab.active { box-shadow: 0 2px 12px rgba(62,99,221,0.4); }
.mjara-tab.home-tab::after { display: none; }
.mjara-tab.home-tab .mjara-tab-close { display: none; }

/* =====================================================================
   Tab inner elements
   ===================================================================== */
.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-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
   ===================================================================== */
.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;
}

.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(62,99,221,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(62,99,221,0.2); }
[data-theme="dark"] .mjara-tab-dropdown-item { color: #e2e8f0; border-color: rgba(62,99,221,0.1); }
[data-theme="dark"] .mjara-tab-dropdown-item:hover { background: rgba(62,99,221,0.1); }

/* =====================================================================
   Clear-all 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; }

/* =====================================================================
   Language switcher
   ===================================================================== */
.mjara-lang-switcher {
	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; position: relative;
}
.mjara-lang-switcher:hover { background: rgba(94,177,239,0.15); color: #5EB1EF; }
.mjara-lang-switcher svg { width: 18px; height: 18px; }

.mjara-lang-panel {
	position: fixed; top: 46px; right: 60px;
	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: 140px; z-index: 1200; display: none; overflow: hidden;
}
.mjara-lang-panel.open { display: block; }
.mjara-lang-panel-header {
	padding: 8px 12px;
	font-size: 11px; 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-lang-item {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; cursor: pointer;
	font-size: 13px; color: var(--mjara-text-secondary, #475569);
	transition: background 0.15s ease;
}
.mjara-lang-item:hover { background: var(--mjara-bg-tertiary, #f1f5f9); }
.mjara-lang-item.active { background: rgba(94,177,239,0.1); color: #5EB1EF; }
.mjara-lang-name { font-weight: 500; }

[data-theme="dark"] .mjara-lang-switcher:hover { background: rgba(94,177,239,0.2); }
[data-theme="dark"] .mjara-lang-panel { background: #1a1a2e; border-color: rgba(62,99,221,0.2); }
[data-theme="dark"] .mjara-lang-panel-header { border-color: rgba(62,99,221,0.1); }
[data-theme="dark"] .mjara-lang-item { color: #e2e8f0; }
[data-theme="dark"] .mjara-lang-item:hover { background: rgba(62,99,221,0.1); }
[data-theme="dark"] .mjara-lang-item.active { background: rgba(94,177,239,0.15); }

[dir="rtl"] .mjara-lang-panel { right: auto; left: 60px; }

/* =====================================================================
   App switcher panel
   ===================================================================== */
.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; }

.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: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	width: 360px; z-index: 1200; display: none; overflow: hidden;
}
.mjara-app-panel.open { display: block; }
.mjara-app-panel-header {
	padding: 10px 12px;
	font-size: 11px; 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: 10px; }
.mjara-app-item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 6px 2px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease;
}
.mjara-app-item:hover { background: var(--mjara-bg-tertiary, #f1f5f9); }
.mjara-app-item.active { background: rgba(62,99,221,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: 20px; height: 20px;
	display: flex; align-items: center; justify-content: center;
	color: var(--mjara-text-secondary, #475569); margin-bottom: 3px;
}
.mjara-app-item-icon svg { width: 18px; height: 18px; 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;
}

[data-theme="dark"] .mjara-app-switcher {
	background: #12121c; border-color: rgba(62,99,221,0.15); color: #a8a8c0;
}
[data-theme="dark"] .mjara-app-switcher:hover { background: var(--mjara-primary, #667eea); color: #fff; }
[data-theme="dark"] .mjara-app-panel { background: #1a1a2e; border-color: rgba(62,99,221,0.2); }
[data-theme="dark"] .mjara-app-panel-header { border-color: rgba(62,99,221,0.1); }
[data-theme="dark"] .mjara-app-item:hover { background: rgba(62,99,221,0.1); }
[data-theme="dark"] .mjara-app-item.active { background: rgba(62,99,221,0.15); }
[data-theme="dark"] .mjara-app-item-name { color: #a8a8c0; }

[dir="rtl"] .mjara-app-panel { right: auto; left: 16px; }
[dir="rtl"] .mjara-tabs-actions { margin-left: 0; margin-right: auto; }

/* =====================================================================
   Vue SPA — fixed-position layout offsets
   Raven's sidebar and other SPA elements use position:fixed with
   inline top:0, so body padding-top doesn't move them. Override here.
   ===================================================================== */
/* Raven: fixed sidebar (w-80 bg-gray-2 = 320px Frappe-UI sidebar) */
.w-80.bg-gray-2 {
	top: 42px !important;
	height: calc(100vh - 42px) !important;
}

/* =====================================================================
   Mobile — keep the global tabs/actions visible in a compact layout
   ===================================================================== */
@media (max-width: 767px) {
	.mjara-tabbar {
		display: flex;
		gap: 4px;
		height: 42px;
		padding: 0 8px;
	}

	body {
		padding-top: 42px !important;
		overflow: hidden !important;
	}

	body.mjara-no-tabbar,
	body:has(.for-login),
	body:has(.for-signup),
	body:has(.for-forgot) {
		padding-top: 0 !important;
		overflow: auto !important;
	}

	.mjara-tabs-container {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

	.mjara-tabs-container::-webkit-scrollbar {
		display: none;
	}

	.mjara-tab {
		max-width: 130px;
		min-width: 44px;
		padding: 7px 9px;
	}

	.mjara-tab.home-tab {
		min-width: 38px;
		padding: 7px 10px;
	}

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

	.mjara-tab.home-tab[data-url$="/dashboard/sites"] {
		min-width: 112px;
	}

	.mjara-tab.home-tab[data-url$="/dashboard/sites"] .mjara-tab-title {
		display: inline;
	}

	.mjara-tab-clear,
	.mjara-lang-switcher,
	.mjara-app-switcher {
		height: 32px;
		width: 32px;
	}

	.mjara-lang-panel {
		right: 8px;
		top: 46px;
	}

	[dir="rtl"] .mjara-lang-panel {
		left: 48px;
		right: auto;
	}

	.mjara-app-panel {
		max-width: calc(100vw - 16px);
		right: 8px;
		top: 46px;
		width: 360px;
	}

	[dir="rtl"] .mjara-app-panel {
		left: 8px;
		right: auto;
	}
}