/*
 * Boxtech Theme - Premium UI overrides for Frappe Framework
 * Targets child tables (.form-grid) to provide a modern, clean look.
 * Fully compatible with Frappe Light and Dark modes.
 */

/*
 * Boxtech Theme - Premium UI overrides for Frappe Framework
 * Dynamic & Responsive Child Table (.form-grid) System.
 * Fully compatible with Frappe Light and Dark modes.
 */

.form-grid-container {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	max-width: 100% !important;
	width: 100% !important;
	-webkit-overflow-scrolling: touch;
}

.form-grid {
	border: 1px solid #81C784 !important;
	border-radius: var(--border-radius-md) !important;
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
	overflow-x: visible !important;
	overflow-y: hidden !important;
	width: max-content !important;
	max-width: none !important;
	min-width: unset !important;
	display: inline-block !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;

	.grid-heading-row,
	.grid-body {
		min-width: unset !important;
		width: max-content !important;
		overflow: visible !important;
	}

	.grid-row {
		min-width: unset !important;
		width: max-content !important;
	}

	.row-check,
	.grid-heading-row .row-check,
	.grid-body .data-row .row-check {
		flex: 0 0 38px !important;
		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
		padding: 0 4px !important;
		box-sizing: border-box !important;
		position: relative !important;
		left: auto !important;
	}

	.row-index,
	.grid-heading-row .row-index,
	.grid-body .data-row .row-index {
		flex: 0 0 42px !important;
		width: 42px !important;
		min-width: 42px !important;
		max-width: 42px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		position: relative !important;
		left: auto !important;

		span {
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			text-align: center !important;
			width: 22px !important;
			height: 22px !important;
			min-width: 22px !important;
			min-height: 22px !important;
			max-width: 22px !important;
			max-height: 22px !important;
			border-radius: 50% !important;
			background: #E8F5E9 !important;
			color: #2E7D32 !important;
			font-size: 11px !important;
			font-weight: 700 !important;
			line-height: 22px !important;
			margin: auto !important;
			padding: 0 !important;
			box-sizing: border-box !important;
			flex-shrink: 0 !important;
		}
	}

	// Universal Data Columns: Ensure data columns keep minimum readable space and vertical centering without breaking Frappe's column proportion system
	.col:not(.row-check):not(.row-index),
	.grid-static-col:not(.row-check):not(.row-index) {
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		flex-shrink: 0;
	}

	// Header Row
	.grid-heading-row {
		background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
		background-color: #E8F5E9 !important;
		border-top: 1px solid #81C784 !important;
		border-bottom: 2px solid #81C784 !important;
		color: #1B5E20 !important;
		overflow: visible !important;

		.filter-row,
		.grid-row.filter-row {
			display: none !important;
			height: 0 !important;
			min-height: 0 !important;
			max-height: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			border: none !important;
			overflow: hidden !important;
			visibility: hidden !important;
			opacity: 0 !important;
			pointer-events: none !important;
		}

		.data-row {
			display: flex !important;
			flex-wrap: nowrap !important;
			align-items: stretch !important;
			min-height: 38px !important;
			min-width: unset !important;
			width: max-content !important;

			>div,
			.col,
			.grid-static-col,
			.row-index,
			.row-check {
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				text-align: center !important;
				padding: 6px 8px !important;
				margin: 0 !important;
				line-height: 1.2 !important;
				box-sizing: border-box !important;
				background: transparent !important;
				background-color: transparent !important;
				color: #1B5E20 !important;
				font-weight: 700 !important;
				font-size: 11px !important;
				text-transform: uppercase !important;
				letter-spacing: 0.5px !important;
			}

			.col:not(.row-check):not(.row-index) {
				justify-content: flex-start !important;
				text-align: left !important;
			}

			.static-area,
			.col .static-area,
			.row-index span {
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				text-align: center !important;
				width: 100% !important;
				height: 100% !important;
				margin: 0 !important;
				padding: 0 !important;
				line-height: 1 !important;
			}

			span,
			.static-area span {
				display: inline-flex !important;
				align-items: center !important;
				justify-content: center !important;
				line-height: 1 !important;
			}
		}

		.grid-row,
		.grid-static-col,
		.row-check,
		.row-index {
			background: transparent !important;
			background-color: transparent !important;
			color: #1B5E20 !important;
			font-weight: 700 !important;
		}

		.grid-static-col,
		.row-index,
		.row-check {
			color: #1B5E20 !important;
			font-weight: 700 !important;
			border-right: 1.5px solid #A5D6A7 !important;

			a,
			a svg,
			.icon {
				stroke: #1B5E20 !important;
				color: #1B5E20 !important;
				fill: none !important;
				filter: none !important;
			}
		}

		accent-color: #2E7D32 !important;
	}

	// 4. Hover + Click highlight for body rows
	.grid-body {
		.grid-row {
			cursor: pointer;

			&:hover {
				background-color: #E8F5E9 !important;

				.grid-static-col,
				.row-check,
				.row-index {
					background-color: #E8F5E9 !important;
				}
			}

			// ── Click / active / selected highlight ──────────────────────
			&:active,
			&.selected,
			&.row-selected {
				background-color: #C8E6C9 !important;
				box-shadow: inset 3px 0 0 #2E7D32 !important;

				.col,
				.grid-static-col,
				.row-check,
				.row-index {
					background-color: #C8E6C9 !important;
					color: #1B4332 !important;
				}

				// ── Keep input/select widgets fully visible inside highlighted rows ──
				// Without this, the #C8E6C9 cell background washes out the widget.
				input,
				select,
				textarea,
				.form-control,
				.input-with-feedback,
				.frappe-control input,
				.frappe-control select,
				.control-input,
				.control-input input,
				.link-field .form-control,
				.data-field .form-control,
				.select-field .form-control {
					background-color: #ffffff !important;
					color: #1e293b !important;
					border-color: #81C784 !important;
					outline: none !important;
					box-shadow: none !important;
				}
			}

			// Focused row (field active inside)
			&:focus-within {
				background-color: #EDF7EE !important;
				box-shadow: inset 3px 0 0 #81C784 !important;

				// Keep input fields white and clearly legible inside focused rows
				input,
				select,
				textarea,
				.form-control,
				.input-with-feedback,
				.frappe-control input,
				.frappe-control select,
				.control-input,
				.control-input input,
				.link-field .form-control,
				.data-field .form-control,
				.select-field .form-control {
					background-color: #ffffff !important;
					color: #1e293b !important;
				}
			}
		}

		// ── Fix 1: Body data-row vertical centering (row number + oval + cells) ──
		.data-row {
			display: flex !important;
			flex-wrap: nowrap !important;
			align-items: stretch !important;
			min-height: 38px !important;
			min-width: unset !important;
			width: max-content !important;

			> div,
			.col,
			.grid-static-col,
			.row-index,
			.row-check {
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				padding: 6px 8px !important;
				box-sizing: border-box !important;
				line-height: 1.3 !important;
				margin: 0 !important;
				min-height: 38px !important;
			}

			// Data columns align left
			.col:not(.row-check):not(.row-index) {
				justify-content: flex-start !important;
				text-align: left !important;
				align-items: center !important;
			}

			// Row index badge: perfectly centered number
			.row-index {
				text-align: center !important;

				span {
					display: inline-flex !important;
					align-items: center !important;
					justify-content: center !important;
					width: 22px !important;
					height: 22px !important;
					border-radius: 50% !important;
					background: #E8F5E9 !important;
					color: #2E7D32 !important;
					font-size: 11px !important;
					font-weight: 700 !important;
					line-height: 1 !important;
					margin: 0 auto !important;
					padding: 0 !important;
				}
			}

			// Static area text centering inside data cells
			.static-area,
			.col .static-area {
				display: flex !important;
				align-items: center !important;
				width: 100% !important;
				min-height: unset !important;
				margin: 0 !important;
				padding: 0 !important;
			}
		}
	}
}

// 4b. Form Tabs & Form Buttons Styling (BoxTech Theme)
.form-tabs,
.nav-tabs {
	border-bottom: 2px solid #E2E8F0 !important;

	.nav-item .nav-link,
	.nav-link {
		color: #64748B !important;
		font-weight: 600 !important;
		border: none !important;
		border-bottom: 2.5px solid transparent !important;
		padding: 8px 16px !important;
		transition: all 0.2s ease !important;

		&:hover {
			color: #2E7D32 !important;
			border-bottom-color: #A5D6A7 !important;
			background: transparent !important;
		}

		&.active {
			color: #166534 !important;
			font-weight: 700 !important;
			border-bottom: 2.5px solid #2E7D32 !important;
			background: transparent !important;
		}
	}
}

.grid-add-row,
.grid-add-multiple-rows {
	color: #166534 !important;
	font-weight: 600 !important;
	border-radius: 8px !important;

	&:hover {
		color: #1B4332 !important;
		background: #F0FDF4 !important;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 5. Frappe Reports – Boxtech Green Theme
//    Targets: Query Reports, Script Reports, Standard Reports and any view
//    that renders a Frappe DataTable (.datatable) inside .query-report or
//    .report-wrapper.
//    Does NOT touch .form-grid or .list-view rules above.
// ─────────────────────────────────────────────────────────────────────────────

// 5a. Outer container – border + shadow matching child table style
.query-report,
.report-wrapper,
.datatable-wrapper {

	// Wrap the entire datatable in a themed border
	.datatable {
		border: 1px solid #E2E8F0 !important;
		border-radius: 14px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
		overflow: hidden;
		background: #ffffff !important;

		// ── 5b. Override DataTable CSS variables ──────────────────────────────
		--dt-border-color: #F1F5F9 !important;
		--dt-header-cell-bg: #EAF7EE !important;
		--dt-cell-bg: #ffffff !important;
		--dt-primary-color: transparent !important;
		--dt-selection-highlight-color: #F0FDF4 !important;
		--dt-focus-border-color: #2E7D32 !important;

		// ── 5c. Header section (.dt-header) ──────────────────────────────────
		.dt-header {
			background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
			background-color: #E8F5E9 !important;
			border-top: none !important;
			border-left: none !important;
			border-right: none !important;
			border-bottom: 2px solid #81C784 !important;

			// Every header row
			.dt-row,
			.dt-row-header {
				background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
				background-color: #E8F5E9 !important;
				border: none !important;
			}

			// Header cells and their inner content wrappers
			.dt-cell--header,
			.dt-cell--header .dt-cell__content {
				background: transparent !important;
				background-color: transparent !important;
				color: #1B5E20 !important;
				font-size: 11.5px !important;
				font-weight: 700 !important;
				text-transform: uppercase !important;
				letter-spacing: 0.06em !important;
				border-left: none !important;
				border-right: none !important;
				border-color: transparent !important;
				cursor: pointer !important;
				user-select: none !important;
				transition: background-color 0.15s ease;
			}

			.dt-cell--header:hover {
				background-color: rgba(46, 125, 50, 0.05) !important;
			}

			// Sort indicators (▲ and ▼)
			.sort-indicator,
			.dt-sort-indicator,
			.bx-sort-icon {
				font-size: 11px !important;
				font-weight: 800 !important;
				color: #1B5E20 !important;
				margin-left: 4px !important;
				display: inline-block !important;
				vertical-align: middle !important;
			}

			// Sort / column-menu dropdown toggle (the ▾ icon)
			.dt-dropdown__toggle {
				background-color: transparent !important;
				color: #1B5E20 !important;
				opacity: 0.7;

				svg,
				use,
				.icon {
					stroke: #1B5E20 !important;
					fill: none !important;
				}

				&:hover {
					opacity: 1;
				}
			}

			// Column resize handle – keep it visible
			.dt-cell__resize-handle {
				background-color: #81C784 !important;
				opacity: 0.4;

				&:hover {
					opacity: 1;
					background-color: #2E7D32 !important;
				}
			}

			// Filter row (below header) keeps default styling
			.dt-row[data-is-filter] {
				background-color: #F8FAFC !important;
				border-bottom: 1px solid #E2E8F0 !important;

				.dt-cell,
				.dt-cell__content {
					background-color: #F8FAFC !important;
					color: var(--text-color) !important;
					font-weight: normal !important;
					border: none !important;
					border-bottom: 1px solid #E2E8F0 !important;
				}
			}
		}

		// ── 5d. Scrollable body rows ──────────────────────────────────────────
		.dt-scrollable {
			min-height: 110px !important;

			.dt-row {
				border-bottom: 1px solid #F1F5F9 !important;
				border-top: none !important;
				transition: background-color 0.15s ease;

				// Subtle alternating zebra
				&:nth-child(even) {
					.dt-cell,
					.dt-cell__content {
						background-color: #FAFCFA !important;
					}
				}

				// Row hover – matches clean mint hover
				&:hover {
					.dt-cell,
					.dt-cell__content {
						background-color: #F0FDF4 !important;
					}
				}

				// Highlighted (selected) row
				&.dt-row--highlight {
					.dt-cell,
					.dt-cell__content {
						background-color: #DCFCE7 !important;
					}
				}
			}

			// Individual cell borders — NO harsh vertical borders!
			.dt-cell {
				border-left: none !important;
				border-right: none !important;
				border-bottom: 1px solid #F1F5F9 !important;
				color: #1E293B !important;
				font-size: 13px !important;

				.dt-cell__content {
					color: #1E293B !important;
					font-size: 13px !important;
				}

				a {
					color: #2E7D32 !important;
					font-weight: 600 !important;
					text-decoration: none !important;

					&:hover {
						color: #1B5E20 !important;
						text-decoration: underline !important;
					}
				}
			}

			// Focused cell outline colour
			.dt-cell--focus .dt-cell__content {
				border-color: #43A047 !important;
			}
		}

		// ── 5e. Total / summary row (bold footer row) ─────────────────────────
		.dt-row.dt-row-totalRow {
			background-color: #F1F8E9 !important;
			border-top: 2px solid #81C784 !important;
			border-bottom: none !important;

			.dt-cell,
			.dt-cell__content {
				background-color: #F1F8E9 !important;
				font-weight: 700 !important;
				color: #1B5E20 !important;
			}
		}

		// ── 5f. Column-menu dropdown list (sort / pin menus) ─────────────────
		.dt-dropdown__list {
			border: 1px solid #81C784 !important;
			border-radius: 8px !important;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;

			.dt-dropdown__list-item:hover {
				background-color: #E8F5E9 !important;
				color: #1B5E20 !important;
			}
		}

		// ── 5g. "Freeze" overlay (shown while sorting large datasets) ─────────
		.dt-freeze {
			background-color: rgba(232, 245, 233, 0.7) !important;
		}
	}
}

// 5h. Global Control & Collapse Buttons
.bx-control-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #F1F8E9 !important;
	color: #1B4332 !important;
	border: 1px solid #C8E6C9 !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	user-select: none !important;

	&:hover {
		background: #E8F5E9 !important;
		border-color: #2E7D32 !important;
		color: #2E7D32 !important;
		transform: translateY(-1px) !important;
		box-shadow: 0 2px 6px rgba(46, 125, 50, 0.15) !important;
	}

	i {
		font-size: 12px !important;
		color: #2E7D32 !important;
	}
}

.bx-panel-collapse-btn {
	background: transparent !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 6px !important;
	width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #64748B !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;

	&:hover {
		background: #F1F5F9 !important;
		color: #1E293B !important;
		border-color: #CBD5E1 !important;
	}

	i {
		font-size: 11px !important;
	}
}

// 5i. Ensure the report-wrapper outer chrome also picks up the border radius
.report-wrapper .datatable {
	// Removed overflow: visible !important; to fix squished datatables!
	overflow: hidden !important;
}

// ─────────────────────────────────────────────────────────────────────────────
// 6. Frappe List View Customization (Boxtech Green Theme)
.list-view {
	.frappe-list {

		// Custom List View Header row
		.list-row-head {
			background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
			background-color: #E8F5E9 !important;
			border-top: 1px solid #81C784 !important;
			border-bottom: 2px solid #81C784 !important;
			color: #1B5E20 !important;

			// Make header text, links, counts, and labels green
			&,
			a,
			span,
			.list-row-col,
			.list-subject,
			.level-item,
			.list-count,
			.list-header-meta {
				color: #1B5E20 !important;
				font-weight: 700 !important;
			}

			// Ensure sticky/right-aligned columns also have green background
			.level-right {
				background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
				background-color: #E8F5E9 !important;
				border-left: none !important;
			}

			// Prevent hover/focus states from resetting header backgrounds
			&:hover,
			&:focus {
				background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
				background-color: #E8F5E9 !important;

				.level-right {
					background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
					background-color: #E8F5E9 !important;
				}
			}

			// Make list header like-icon (heart) visible
			.like-icon,
			.like-icon use {
				stroke: #1B5E20 !important;
				fill: none !important;
			}

			// Active liked filter color in header
			.list-liked-by-me.liked {

				.like-icon,
				.like-icon use {
					stroke: #1B5E20 !important;
					fill: #1B5E20 !important;
				}
			}
		}

		// Improve list view table rows with subtle green border
		.list-row {
			border-bottom: 1px solid #C8E6C9 !important;
		}

		// Subtle row hover/focus effect on body rows
		.list-row-container:not(:first-child) {
			transition: background-color 0.15s ease;

			&:hover,
			&:focus {
				background-color: #E8F5E9 !important;

				// Match cell backgrounds and sticky column background
				.list-row,
				.level-right {
					background-color: #E8F5E9 !important;
					border-left-color: #E8F5E9 !important;
				}

				// Smooth out sticky column shadow on hover
				.list-row .level-right {
					box-shadow: -5px 0px 5px #E8F5E9 !important;
				}
			}
		}

		// Boxtech Theme - List View outer borders
		.result-list {
			border: 1px solid #81C784 !important;
			border-radius: var(--border-radius-md) !important;
			overflow: hidden;
			box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
		}

		// Add green left/right borders to every list row
		.list-row-container {
			border-left: 1px solid #81C784 !important;
			border-right: 1px solid #81C784 !important;
		}
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
// 7. Global Sidebar Theme (Exact Match: Clean, Flat, NO BOXES)
// Continuous #254222 background throughout, hover-only pills, smaller text
// ─────────────────────────────────────────────────────────────────────────────

/* Sidebar Main Container */
.body-sidebar {
  background-color: #254222 !important;
  border-right: 1px solid #254222 !important;
  width: 240px !important;
  min-width: 240px !important;
  color: #cae4c5 !important;
}

.body-sidebar-placeholder {
  width: 240px !important;
  min-width: 240px !important;
}

/* Base item link styling */
.body-sidebar .item-anchor {
  color: #cae4c5 !important;
  text-decoration: none !important;
}

/* Sidebar Item Labels — smaller text size (11.5px), clean and sleek */
.body-sidebar .sidebar-item-label {
  color: #cae4c5 !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* ALL containers in sidebar are 100% transparent — NO BOXES */
.body-sidebar .sidebar-item-container,
.body-sidebar .sidebar-item-container.section-item,
.body-sidebar .sidebar-item-container:has(> .nested-container),
.body-sidebar .sidebar-item-container:has(> .nested-container:not(.hidden)),
.body-sidebar .nested-container,
.body-sidebar .sidebar-items,
.body-sidebar .body-sidebar-top {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Normal items: NO background, completely flat with the sidebar */
.body-sidebar .standard-sidebar-item {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  margin: 1px 4px !important;
}

/* Icons — Standard stroke-based Lucide icons (Image 2 style) */
.body-sidebar .sidebar-item-icon {
  color: #cae4c5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.body-sidebar .sidebar-item-icon svg {
  width: 15px !important;
  height: 15px !important;
  color: #cae4c5 !important;
}

.body-sidebar .sidebar-item-icon svg.icon,
.body-sidebar .sidebar-item-icon svg:not(.es-solid):not(.es-icon) {
  fill: none !important;
  stroke: #cae4c5 !important;
  stroke-width: 1.5px !important;
}

.body-sidebar .sidebar-item-control svg {
  width: 13px !important;
  height: 13px !important;
  color: #cae4c5 !important;
  stroke: #cae4c5 !important;
  fill: none !important;
}

/* ONLY ON HOVER: show dark pill (#1a3a1a) with white text */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover,
.body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover {
  background-color: #1a3a1a !important;
  border-radius: 6px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-label,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover span {
  color: #FFFFFF !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg.icon,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg:not(.es-solid):not(.es-icon) {
  stroke: #FFFFFF !important;
  fill: none !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-control svg {
  stroke: #FFFFFF !important;
}

/* Containers NEVER have hover background */
.body-sidebar .sidebar-item-container:hover,
.body-sidebar [data-sidebar-item]:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ACTIVE / Selected Item — Cream pill with dark green text */
body .body-sidebar .standard-sidebar-item.active-sidebar {
  background-color: #ece2b1 !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: none !important;
}

body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
body .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
body .body-sidebar .standard-sidebar-item.active-sidebar span {
  color: #254222 !important;
  font-weight: 600 !important;
}

body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg.icon,
body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg:not(.es-solid):not(.es-icon) {
  stroke: #254222 !important;
  fill: none !important;
}

body .body-sidebar .standard-sidebar-item.active-sidebar div,
body .body-sidebar .standard-sidebar-item.active-sidebar a {
  background: transparent !important;
}

/* Sidebar expanded spacing */
.body-sidebar.expanded .nav-item,
.body-sidebar-container.expanded .nav-item {
  padding: 3px 6px !important;
}

/* ================= DASHBOARD ================= */
.page-content,
.workspace-sidebar-toggle + .layout-main {
  background-color: #FFFFFF !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.layout-main-section {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.widget.card {
  background-color: #ffffff !important;
  border-left: 3px solid #99cc66 !important;
  border-radius: 10px !important;
}

.widget.card.highlighted,
.widget.card[data-active="true"] {
  background-color: #f5efd8 !important;
  border-left: 3px solid #ece2b1 !important;
}

// 8. Sidebar Motivational Promotional Banner
// ─────────────────────────────────────────────────────────────────────────────
.bx-sidebar-banner {
	margin: 6px 4px 8px 4px;
	border-radius: 12px;
	background: linear-gradient(150deg, #F0FDF4 0%, #DCFCE7 100%);
	border: 1px solid #BBF7D0;
	padding: 16px 12px 14px 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: default;
	user-select: none;

	svg.bx-sb-chart {
		width: 90px;
		height: 56px;
	}

	.bx-sb-text {
		font-size: 13px;
		font-weight: 800;
		color: #166534;
		line-height: 1.35;
		margin: 0;
	}

	.bx-sb-sub {
		font-size: 10px;
		color: #4ADE80;
		font-style: italic;
		font-weight: 500;
		margin: 0;
		letter-spacing: 0.01em;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 9. Buttons, Headers & Scrollbars
// ─────────────────────────────────────────────────────────────────────────────
.page-title .title-text,
.page-head h3 {
	font-weight: 800 !important;
	color: #1B4332 !important;
}

.btn-primary {
	background: #2E7D32 !important;
	border-color: #2E7D32 !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;

	&:hover,
	&:focus {
		background: #1B4332 !important;
		border-color: #1B4332 !important;
	}
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: #F8FAFC;
}

::-webkit-scrollbar-thumb {
	background: #A7F3D0;
	border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
	background: #6EE7B7;
}

// ─────────────────────────────────────────────────────────────────────────────
// 10. Strict Isolation Rules
// ─────────────────────────────────────────────────────────────────────────────
body:not([data-route*="Sales%20Team%20KPIs"]):not([data-route*="Sales Team KPIs"]):not([data-route*="sales-team-kpis"]):not([data-route*="Sales%20Opportunity"]):not([data-route*="Sales Opportunity"]):not([data-route*="sales-opportunity"]) {

	.bx-bottom-row,
	.bx-perf-section,
	.bx-dual-chart-row,
	.bx-activity-breakdown-btn,
	.bx-kpi-card {
		display: none !important;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 11. Universal Report Summary Cards (Exact Match to Modern White KPI Cards)
// ─────────────────────────────────────────────────────────────────────────────
.report-summary {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 16px !important;
	margin: 16px 0 24px 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;

	.summary-item {
		background: #ffffff !important;
		border: 1px solid #E2E8F0 !important;
		border-radius: 12px !important;
		padding: 18px 20px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		min-height: 90px !important;
		position: relative !important;
		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
		// Ensure items don't overflow
		overflow: hidden !important;

		&:hover {
			transform: translateY(-2px) !important;
			box-shadow: 0 8px 20px rgba(46, 125, 50, 0.08) !important;
			border-color: #81C784 !important;
		}

		.bx-kpi-top {
			display: flex !important;
			align-items: flex-start !important;
			width: 100% !important;
		}

		.bx-kpi-text {
			display: flex !important;
			flex-direction: column !important;
			min-width: 0 !important;
		}

		.summary-label,
		.summary-item-label,
		span:first-child {
			font-size: 13px !important;
			color: #64748B !important;
			font-weight: 500 !important;
			line-height: 1.4 !important;
			margin-bottom: 4px !important;
			white-space: normal !important;
			overflow: visible !important;
			text-overflow: unset !important;
			word-wrap: break-word !important;
		}

		.summary-value,
		.summary-item-value,
		span:last-child,
		h3,
		.value {
			font-size: 26px !important;
			font-weight: 800 !important;
			color: #0F172A !important;
			line-height: 1.1 !important;
			letter-spacing: -0.02em !important;
			word-wrap: break-word !important;
		}
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 12. Modern Frappe Charts & Dashboard Graphs
// ─────────────────────────────────────────────────────────────────────────────
.frappe-chart,
.chart-container,
.dashboard-chart,
.report-chart {
	background: #ffffff !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	padding: 20px 22px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	margin-bottom: 20px !important;

	.title {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #0F172A !important;
		margin-bottom: 12px !important;
	}

	.grid-line {
		stroke: #F1F5F9 !important;
		stroke-dasharray: 4 !important;
	}

	.bar rect,
	.data-point rect {
		rx: 4px !important;
		ry: 4px !important;
	}

	.line-path {
		stroke-width: 2.5px !important;
	}

	// ── Chart click popup (tooltip) — LIGHT, soft & easy to read ───────────
	// frappe-charts paints both the tooltip body and its little pointer with
	// var(--charts-tooltip-bg). Overriding the variable here (plus hard-setting
	// the elements below) keeps them in sync across the whole portal.
	.graph-svg-tip {
		--charts-tooltip-bg: #F1F5F9;
		--charts-tooltip-title: #64748B;
		--charts-tooltip-label: #334155;
		--charts-tooltip-value: #0F172A;

		background: #F1F5F9 !important; // soft light slate — not harsh white
		color: #0F172A !important; // dark, readable text
		border: 1px solid #CBD5E1 !important;
		border-radius: 10px !important;
		box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12) !important;
		padding: 9px 13px !important;
		font-size: 12px !important;
		font-weight: 600 !important;

		&.comparison .title,
		.title {
			color: #64748B !important;
			font-size: 10.5px !important;
			font-weight: 600 !important;
		}

		.tooltip-label {
			color: #475569 !important;
		}

		.tooltip-value {
			color: #0F172A !important;
			font-weight: 700 !important;
		}

		.tooltip-legend {
			color: #334155 !important;
		}

		// The small arrow under the tooltip follows the same variables.
		.svg-pointer {
			background: #F1F5F9 !important;
			border: 1px solid #CBD5E1 !important;
		}
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 13. Customer Form & List View — Modern Delicate Cards + Charts (BoxTech Theme)
//     Scope: .bx-customer-form (Customer form) and .bx-customer-list (Customer
//     list view) ONLY. This block never targets global Frappe classes, so it is
//     guaranteed not to affect any other DocType, report or page.
// ─────────────────────────────────────────────────────────────────────────────
$bx-radius: 14px;
$bx-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
$bx-shadow-hover: 0 10px 24px rgba(46, 125, 50, 0.10);

.bx-customer-form,
.bx-customer-list {
	.bx-customer-dash {
		padding: 4px 0 12px 0;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	}

	.bx-dash-title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 700;
		color: #1B4332;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin: 0 0 12px 2px;

		i {
			color: #2E7D32;
			font-size: 14px;
		}
	}

	// ── Summary Cards ────────────────────────────────────────────────────
	.bx-cards-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 14px;
		margin-bottom: 18px;
	}

	.bx-card {
		display: flex;
		align-items: center;
		gap: 14px;
		background: #ffffff;
		border: 1px solid #E2E8F0;
		border-radius: $bx-radius;
		padding: 16px 18px;
		box-shadow: $bx-shadow;
		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
			box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
			border-color 0.2s ease;

		&:hover {
			transform: translateY(-2px);
			box-shadow: $bx-shadow-hover;
			border-color: #A5D6A7;
		}
	}

	.bx-card-icon {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
	}

	.bx-card-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.bx-card-label {
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #64748B;
		margin-bottom: 3px;
		white-space: normal;
	}

	.bx-card-value {
		font-size: 20px;
		font-weight: 800;
		color: #0F172A;
		line-height: 1.15;
		letter-spacing: -0.02em;
		word-wrap: break-word;
	}

	// Card colour variants (soft, delicate pastels)
	.bx-card--green .bx-card-icon {
		background: #DCFCE7;
		color: #166534;
	}

	.bx-card--emerald .bx-card-icon {
		background: #D1FAE5;
		color: #059669;
	}

	.bx-card--rose .bx-card-icon {
		background: #FFE4E6;
		color: #E11D48;
	}

	.bx-card--indigo .bx-card-icon {
		background: #E0E7FF;
		color: #4338CA;
	}

	.bx-card--violet .bx-card-icon {
		background: #EDE9FE;
		color: #7C3AED;
	}

	// ── Charts ───────────────────────────────────────────────────────────
	.bx-charts-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
		gap: 16px;
		align-items: stretch;

		@media (max-width: 1100px) {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	.bx-chart-card {
		// A grid item is a block by default, but min-width:0 stops it from
		// inheriting an intrinsic minimum width (critical for chart measuring).
		min-width: 0;
		overflow: visible;
		background: #ffffff;
		border: 1px solid #E2E8F0;
		border-radius: $bx-radius;
		padding: 18px 20px 20px;
		box-shadow: $bx-shadow;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bx-chart-head {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 12.5px;
		font-weight: 700;
		color: #334155;
		margin-bottom: 10px;

		i {
			color: #2E7D32;
		}
	}

	.bx-chart-canvas {
		// Explicit layout box so frappe-charts can measure a real clientWidth.
		display: block;
		width: 100%;
		flex: 1;
		min-height: 250px;
		overflow: visible;

		// The chart library injects its own container; make sure it doesn't get
		// nested card borders, margins, or padding that overflow the card box.
		.chart-container,
		.frappe-chart {
			width: 100% !important;
			background: transparent !important;
			border: none !important;
			border-radius: 0 !important;
			padding: 0 !important;
			margin: 0 !important;
			box-shadow: none !important;
			overflow: visible !important;
		}

		// Let the SVG keep the width/height attributes the chart library
		// computed from the `height` option. Only guard against horizontal
		// overflow — do not force width/height, which squashed the legend and
		// the lower part of the plot.
		svg {
			display: block;
			max-width: 100%;
			overflow: visible;
		}
	}

	.bx-chart-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 320px;
		color: #94A3B8;
		font-size: 12.5px;
		text-align: center;
	}

	// Give the list-view block a little breathing room from the toolbar
	&.bx-customer-list .bx-list-dash {
		margin-top: 4px;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 14. Portal-wide Responsive Tables
//     Goal: every DataTable (reports, query reports, list views) and every
//     child-table grid (.form-grid) fits the available screen width without
//     zooming, and uses the available vertical space instead of a cramped,
//     hard-coded height.
//     Scope: generic Frappe table classes only — no business logic changed.
// ─────────────────────────────────────────────────────────────────────────────

// 14a. Let the DataTable body size itself to the viewport instead of the
//      library default (height: 40vw) or the fixed calc(100vh - 240px).
//      height:auto → grows/shrinks with content; max-height → caps it to the
//      screen and scrolls internally, so the full table is always reachable
//      without zooming in/out.
.datatable .dt-scrollable,
.query-report .datatable .dt-scrollable,
.report-wrapper .datatable .dt-scrollable {
	height: auto !important;
	min-height: 140px !important;
	max-height: calc(100vh - 230px) !important;
	overflow: auto !important;
	-webkit-overflow-scrolling: touch;
}

// 14b. Never let a table (or its themed wrapper) push past the screen width.
//      Horizontal scrolling stays available so no column is ever clipped.
.datatable,
.report-wrapper .datatable,
.query-report .datatable {
	max-width: 100% !important;
}

.report-wrapper,
.query-report {
	max-width: 100% !important;
	overflow-x: auto !important;
}

// 14c. Long cell content wraps inside its column instead of stretching the
//      whole table off-screen.
.dt-cell__content {
	overflow-wrap: anywhere !important;
}

// 14d. List view — relax the fixed / sticky column sizing so rows reflow on
//      narrow screens instead of being squeezed into a tiny strip.
.list-view .frappe-list {
	.result-container {
		overflow-x: auto !important;
	}

	.list-row .level-left,
	.list-row-head .level-left {
		min-width: 0 !important; // was a hard 80% — allow it to shrink
		flex: 1 1 auto !important;
	}
}

// 14d-2. Customer list — the injected summary + charts block sits ABOVE the
//        results, but Frappe's `set_result_height()` still writes a fixed
//        inline height on `.result-container` / `.result`. Because that block
//        now eats ~580px of the viewport, the computed height for the results
//        collapses to a sliver (only one or two rows visible) and list.scss's
//        `.result { overflow-y: hidden }` clips the rest.
//        Fix: let this page grow to its natural content height and scroll the
//        page itself (like every other page), so the whole Customer table is
//        reachable by normal page scrolling — no inner scrollbar, no clipping.
.bx-customer-list {

	.layout-main-section,
	.frappe-list,
	.result-container,
	.result {
		height: auto !important;
		max-height: none !important;
	}

	// The list page's main section is a `frappe-card` with `overflow: hidden`.
	// With a fixed-height result box that clipped the table; now that the box
	// grows naturally, open the wrapper too so nothing is cut off.
	.layout-main-section {
		overflow: visible !important;
	}

	// Keep horizontal scrolling available (wide tables) but never clip
	// vertically.
	.result-container {
		overflow-x: auto !important;
		overflow-y: visible !important;
	}

	.result {
		overflow: visible !important;
	}

	// The header row no longer pins to the top, because the table is not
	// internally scrolled anymore — the whole page scrolls instead. Pinning it
	// inside a non-scrolling box just made it overlap the rows.
	.result .list-row-container:first-child {
		position: static !important;
	}
}

// 14e. Child tables (.form-grid) — keep the grid scrollable inside its themed
//      rounded container.
.form-grid {
	.form-grid-container {
		overflow-x: auto !important;
		max-width: 100% !important;
	}
}

// 14f. Breakpoints — reclaim vertical room for the table as the screen gets
//      smaller, so the full grid is visible without browser zoom.
@media (max-width: 1400px) {

	.datatable .dt-scrollable,
	.query-report .datatable .dt-scrollable,
	.report-wrapper .datatable .dt-scrollable {
		max-height: calc(100vh - 200px) !important;
	}
}

@media (max-width: 991px) {

	.datatable .dt-scrollable,
	.query-report .datatable .dt-scrollable,
	.report-wrapper .datatable .dt-scrollable {
		max-height: calc(100vh - 175px) !important;
	}

	.list-view .frappe-list {

		.result.has-assign-to .list-row .level-right,
		.result.no-assign-to .list-row .level-right {
			flex: 0 0 auto !important;
			width: auto !important;
			min-width: 92px;
		}
	}
}

@media (max-width: 767px) {

	.datatable .dt-scrollable,
	.query-report .datatable .dt-scrollable,
	.report-wrapper .datatable .dt-scrollable {
		max-height: calc(100vh - 150px) !important;
		min-height: 110px !important;
	}

	.list-view .frappe-list {

		.list-row .level-left,
		.list-row-head .level-left {
			min-width: 60% !important;
		}
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 15. Modern Desktop / App Launcher Page (6-column clean layout matching ss 1)
// ─────────────────────────────────────────────────────────────────────────────
.desktop-wrapper {
	background: #FAFAFA !important;
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column !important;

	.desktop-navbar {
		background: #ffffff !important;
		border-bottom: 1px solid #E2E8F0 !important;
		padding: 12px 32px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
	}

	.desktop-search-wrapper {
		max-width: 480px !important;
		margin: 0 auto !important;

		#desktop-navbar-modal-search {
			background: #F1F5F9 !important;
			border: 1px solid #E2E8F0 !important;
			border-radius: 9999px !important;
			padding: 8px 18px !important;
			height: 38px !important;
			color: #64748B !important;
			font-size: 13px !important;
			transition: all 0.2s ease !important;
			box-shadow: none !important;

			&:hover,
			&:focus {
				background: #ffffff !important;
				border-color: #CBD5E1 !important;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
				color: #1E293B !important;
			}

			.desktop-search-icon {
				display: flex !important;
				align-items: center !important;
				gap: 8px !important;
				color: #64748B !important;
				font-size: 13px !important;
				font-weight: 500 !important;

				svg {
					stroke: #64748B !important;
					width: 15px !important;
					height: 15px !important;
				}
			}

			.desktop-keyboard-shortcut {
				background: #E2E8F0 !important;
				color: #475569 !important;
				font-size: 11px !important;
				font-weight: 600 !important;
				padding: 2px 7px !important;
				border-radius: 6px !important;
			}
		}
	}

	.desktop-container {
		flex: 1 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		padding: 48px 24px 60px 24px !important;

		.icons-container {
			margin-top: 0 !important;
			padding: 0 !important;
			max-width: 960px !important;
			width: 100% !important;
		}

		.icons {
			display: grid !important;
			grid-template-columns: repeat(6, 1fr) !important;
			gap: 32px 20px !important;
			justify-items: center !important;
			align-items: start !important;

			@media (max-width: 1024px) {
				grid-template-columns: repeat(4, 1fr) !important;
			}

			@media (max-width: 768px) {
				grid-template-columns: repeat(3, 1fr) !important;
				gap: 24px 16px !important;
			}

			@media (max-width: 480px) {
				grid-template-columns: repeat(2, 1fr) !important;
			}
		}

		.desktop-icon {
			width: 124px !important;
			height: auto !important;
			min-height: 116px !important;
			padding: 10px 6px !important;
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: flex-start !important;
			border-radius: 16px !important;
			background: transparent !important;
			border: 1px solid transparent !important;
			text-decoration: none !important;
			cursor: pointer !important;
			transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;

			&:hover {
				background: rgba(255, 255, 255, 0.95) !important;
				border-color: #E2E8F0 !important;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
				transform: translateY(-4px) !important;

				.icon-container {
					transform: scale(1.06) !important;
					box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14) !important;
				}

				.icon-title {
					color: #0F172A !important;
				}
			}

			.icon-container {
				width: 58px !important;
				height: 58px !important;
				padding: 0 !important;
				border-radius: 18px !important;
				overflow: hidden !important;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
				transition: transform 0.22s ease, box-shadow 0.22s ease !important;

				img,
				svg {
					width: 100% !important;
					height: 100% !important;
					object-fit: contain !important;
				}

				.app-icon {
					width: 58px !important;
					height: 58px !important;
				}
			}

			.icon-caption {
				margin-top: 10px !important;
				width: 100% !important;
				height: auto !important;
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				justify-content: flex-start !important;
			}

			.icon-title {
				font-size: 13px !important;
				font-weight: 600 !important;
				color: #334155 !important;
				text-align: center !important;
				white-space: normal !important;
				overflow: visible !important;
				text-overflow: unset !important;
				line-height: 1.3 !important;
				word-break: break-word !important;
				max-width: 114px !important;
				transition: color 0.15s ease !important;
			}

			.icon-subtitle {
				display: none !important;
			}
		}
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 16. Desktop App Launcher — Color-Coded Card System  (v2)
// ─────────────────────────────────────────────────────────────────────────────
// Pure THEME layer. ZERO functionality change:
//   • No markup / no data / no JS is touched.
//   • Every existing desktop button, shortcut, chart-card and folder keeps
//     working and keeps the SAME name (labels come from the Desktop Icon
//     + Workspace records — never from CSS).
//   • This block only restyles the real Frappe v16 desktop DOM:
//       .desktop-wrapper
//         > .desktop-container
//             > .icons-container
//                 > .icons                      (grid)
//                     > .desktop-icon           (THE CARD)
//                         > .icon-container     (the coloured icon box)
//                             > img.app-icon
//                         > .icon-caption
//                             > .icon-title / .icon-subtitle
//   • Colour groups A (Sky) → B (Amber) → C (Purple) rotate automatically
//     per card position (1,2,3 … 6,7,8) via :nth-of-type, so the launcher
//     reads as a colour-coded system with no markup change at all.
// ─────────────────────────────────────────────────────────────────────────────

:root {
	/* ---- Page surface ---- */
	--bx-desk-bg: #F7FDF9;
	/* soft mint page bg        */
	--bx-desk-card-bg: #FFFFFF;
	/* card surface             */
	--bx-desk-card-border: #BBF7D0;
	/* card resting border      */
	--bx-desk-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

	/* ---- Section header ---- */
	--bx-desk-sec-accent: #2E7D32;
	/* left accent bar          */
	--bx-desk-sec-text: #166534;
	/* section title text       */
	--bx-desk-sec-badge-bg: #DCFCE7;
	/* badge background         */

	/* ---- Interaction ---- */
	--bx-desk-hover-border: #A5D6A7;
	/* card hover border        */
	--bx-desk-hover-shadow: 0 8px 24px rgba(46, 125, 50, 0.10);
	--bx-desk-hover-lift: -3px;
	/* translateY on hover      */

	/* ---- Typography ---- */
	--bx-desk-label: #374151;
	/* card label               */
	--bx-desk-muted: #94A3B8;
	/* counts / secondary       */

	/* ---- Icon group A — Sky ---- */
	--bx-grp-a-bg: #E0F2FE;
	--bx-grp-a-icon: #075985;
	--bx-grp-a-hover: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);

	/* ---- Icon group B — Amber ---- */
	--bx-grp-b-bg: #FEF3C7;
	--bx-grp-b-icon: #92400E;
	--bx-grp-b-hover: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);

	/* ---- Icon group C — Purple ---- */
	--bx-grp-c-bg: #F3E8FF;
	--bx-grp-c-icon: #6B21A8;
	--bx-grp-c-hover: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);

	/* ---- Geometry ---- */
	--bx-desk-card-size: 100px;
	/* card target 100 x 100    */
	--bx-desk-card-radius: 22px;
	/* squircle radius          */
	--bx-desk-icon-size: 52px;
	/* icon box                 */
	--bx-desk-icon-radius: 14px;
	--bx-desk-ease: 0.3s ease;
}

/* Page shell (`.desk-page` kept as an alias) */
.desk-page,
.desktop-wrapper {
	background: var(--bx-desk-bg) !important;
}

.desktop-wrapper {

	/* ── Top bar ─────────────────────────────────────────────────────────── */
	.desktop-navbar {
		background: #FFFFFF !important;
		border-bottom: 1px solid #E8F5E9 !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
	}

	/* ── Grid ────────────────────────────────────────────────────────────── */
	.desktop-container {

		.icons-container {
			max-width: 1000px !important;
		}

		.icons {
			display: grid !important;
			grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
			gap: 18px !important;
			justify-items: center !important;
			align-items: start !important;

			@media (max-width: 1024px) {
				grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			}

			/* Mobile → exactly 2 columns */
			@media (max-width: 768px) {
				grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
				gap: 14px !important;
			}
		}

		/* ── THE CARD ────────────────────────────────────────────────────── */
		.desktop-icon,
		.module-icon,
		.desk-module-icon {
			width: var(--bx-desk-card-size) !important;
			min-width: var(--bx-desk-card-size) !important;
			height: auto !important;
			min-height: var(--bx-desk-card-size) !important;
			padding: 10px 6px !important;
			gap: 6px !important;
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: flex-start !important;

			background: var(--bx-desk-card-bg) !important;
			border: 1px solid var(--bx-desk-card-border) !important;
			border-radius: var(--bx-desk-card-radius) !important;
			box-shadow: var(--bx-desk-card-shadow) !important;
			text-decoration: none !important;
			cursor: pointer !important;

			transition:
				transform var(--bx-desk-ease),
				box-shadow var(--bx-desk-ease),
				border-color var(--bx-desk-ease),
				background var(--bx-desk-ease) !important;

			/* Hover: lift + mint glow + stronger green border */
			&:hover {
				border-color: var(--bx-desk-hover-border) !important;
				box-shadow: var(--bx-desk-hover-shadow) !important;
				transform: translateY(var(--bx-desk-hover-lift)) !important;
				background: var(--bx-desk-card-bg) !important;
			}

			/* ── Icon box (solid colour at rest → gradient on hover) ─────── */
			.icon-container {
				width: var(--bx-desk-icon-size) !important;
				height: var(--bx-desk-icon-size) !important;
				min-height: var(--bx-desk-icon-size) !important;
				padding: 0 !important;
				border-radius: var(--bx-desk-icon-radius) !important;
				overflow: hidden !important;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				box-shadow: none !important;
				transition:
					background var(--bx-desk-ease),
					transform var(--bx-desk-ease) !important;

				img,
				svg,
				.app-icon {
					width: 30px !important;
					height: 30px !important;
					object-fit: contain !important;
					-webkit-user-drag: none !important;
				}
			}

			&:hover .icon-container {
				transform: scale(1.06) !important;
			}

			/* ── Caption / label / count ─────────────────────────────────── */
			.icon-caption {
				margin-top: 8px !important;
				width: 100% !important;
				height: auto !important;
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				justify-content: flex-start !important;
				text-align: center !important;
			}

			.icon-title {
				font-size: 12px !important;
				font-weight: 500 !important;
				/* label weight 500     */
				color: var(--bx-desk-label) !important;
				text-align: center !important;
				white-space: normal !important;
				overflow: visible !important;
				text-overflow: unset !important;
				line-height: 1.25 !important;
				word-break: break-word !important;
				max-width: 92px !important;
				transition: color var(--bx-desk-ease) !important;
			}

			/* Count / secondary line  (e.g. "3 Workspaces") */
			.icon-subtitle {
				display: block !important;
				font-size: 10.5px !important;
				font-weight: 500 !important;
				color: var(--bx-desk-muted) !important;
				line-height: 1.2 !important;
				white-space: nowrap !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				max-width: 92px !important;
			}
		}
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
			Colour-group rotation  A → B → C → A → B → C …
			Only the icon box colour changes; nothing else about the card is altered.
			───────────────────────────────────────────────────────────────────────────── */
.desktop-wrapper .desktop-container .icons .desktop-icon {

	/* ── Group A · Sky ── */
	&:nth-of-type(3n + 1) {
		.icon-container {
			background: var(--bx-grp-a-bg) !important;
			color: var(--bx-grp-a-icon) !important;
		}

		&:hover .icon-container {
			background: var(--bx-grp-a-hover) !important;
		}
	}

	/* ── Group B · Amber ── */
	&:nth-of-type(3n + 2) {
		.icon-container {
			background: var(--bx-grp-b-bg) !important;
			color: var(--bx-grp-b-icon) !important;
		}

		&:hover .icon-container {
			background: var(--bx-grp-b-hover) !important;
		}
	}

	/* ── Group C · Purple ── */
	&:nth-of-type(3n) {
		.icon-container {
			background: var(--bx-grp-c-bg) !important;
			color: var(--bx-grp-c-icon) !important;
		}

		&:hover .icon-container {
			background: var(--bx-grp-c-hover) !important;
		}
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
			Optional section header + stat hooks
			(used if a desktop/workspace layout renders a group heading or a stat strip)
			───────────────────────────────────────────────────────────────────────────── */
.desk-section-header,
.bx-desk-section,
.bx-desk-section-header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding-left: 12px !important;
	border-left: 3px solid var(--bx-desk-sec-accent) !important;
	color: var(--bx-desk-sec-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2px !important;

	.bx-desk-badge,
	.badge {
		background: var(--bx-desk-sec-badge-bg) !important;
		color: var(--bx-desk-sec-text) !important;
		border: none !important;
		border-radius: 9999px !important;
		padding: 2px 10px !important;
		font-size: 11px !important;
		font-weight: 600 !important;
	}
}

.bx-desk-stat,
.bx-desk-stats .stat-item {

	.stat-number,
	.bx-desk-stat-number {
		color: var(--bx-desk-sec-text) !important;
		font-weight: 700 !important;
	}

	.stat-label,
	.bx-desk-stat-label {
		color: var(--bx-desk-muted) !important;
		font-size: 11px !important;
		font-weight: 500 !important;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 17. Desktop App Launcher — SOLID 3-Section Colour System  (v3)
//     Supersedes §16 (the earlier nth-of-type rotation).
// ─────────────────────────────────────────────────────────────────────────────
// THEME LAYER ONLY — zero functional / data / routing / backend change:
//   • No module is added, removed, renamed or re-routed.
//   • The only DOM touch is a presentational `data-bx-section` attribute +
//     CSS `order` used purely for VISUAL grouping (labels, routes, links and
//     click handlers are untouched).
//   • Normal state is SOLID (no gradients). Colour is chosen per section:
//        green  → PEOPLE & HR        (mint / green)
//        sky    → OPERATIONS & SUPPLY
//        amber  → COMMERCIAL
//        accent → purple, small supporting accent only
//   • Hover keeps the solid base and adds a subtle SAME-FAMILY gradient,
//     a soft glow, translateY(-2px) and a 1.04 icon scale in ~220ms.
// ─────────────────────────────────────────────────────────────────────────────

:root {
	/* ── Palette (only these families) ── */
	--bx-mint-50: #F0FDF4;
	--bx-mint-100: #DCFCE7;
	--bx-mint-200: #BBF7D0;
	--bx-green-300: #81C784;
	--bx-green-500: #43A047;
	--bx-green-600: #2E7D32;
	--bx-green-800: #166534;
	--bx-sky-100: #E0F2FE;
	--bx-sky-800: #075985;
	--bx-amber-100: #FEF3C7;
	--bx-amber-800: #92400E;
	--bx-purple-100: #F3E8FF;
	--bx-purple-800: #6B21A8;

	/* ── Surface / text ── */
	--bx-desk-bg: #FFFFFF;
	--bx-desk-ink: #374151;
	--bx-desk-muted: #94A3B8;

	/* ── Geometry / motion ── */
	--bx-desk-tile: 118px;
	--bx-desk-icon: 56px;
	--bx-desk-icon-radius: 16px;
	--bx-desk-ease: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page shell — pure white background */
.desk-page,
.desktop-wrapper {
	background: #FFFFFF !important;
}

.desktop-wrapper {
	min-height: 100vh !important;

	/* ── Existing header — kept, only lightly harmonised ── */
	.desktop-navbar {
		background: #FFFFFF !important;
		border-bottom: 1px solid var(--bx-mint-200) !important;
		box-shadow: 0 1px 2px rgba(22, 101, 52, 0.04) !important;
	}

	.desktop-container {
		flex: 1 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		padding: 56px 32px 72px !important;

		.icons-container {
			margin-top: 0 !important;
			padding: 0 !important;
			max-width: 1120px !important;
			width: 100% !important;
		}

		/* ── Spacious grid, empty space preserved ── */
		.icons {
			display: grid !important;
			grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
			column-gap: 26px !important;
			row-gap: 18px !important;
			justify-items: start !important;
			align-items: start !important;
			align-content: start !important;			grid-auto-rows: max-content !important;

			@media (max-width: 1024px) {
				grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			}

			@media (max-width: 768px) {
				grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
				column-gap: 18px !important;
				row-gap: 26px !important;
			}

			@media (max-width: 480px) {
				grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
			}
		}

		/* ── Module = rounded-square icon box + label. NO card frame. ── */
		.desktop-icon,
		.module-icon,
		.desk-module-icon {
			width: var(--bx-desk-tile) !important;
			min-width: var(--bx-desk-tile) !important;
			height: auto !important;
			min-height: 0 !important;
			padding: 12px 8px !important;
			gap: 10px !important;
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			justify-content: flex-start !important;
			background: transparent !important;
			border: none !important;
			border-radius: 16px !important;
			box-shadow: none !important;
			text-decoration: none !important;
			cursor: pointer !important;
			transition:
				transform var(--bx-desk-ease),
				background var(--bx-desk-ease),
				box-shadow var(--bx-desk-ease) !important;

			&:hover {
				background: rgba(255, 255, 255, 0.85) !important;
				box-shadow: 0 6px 18px rgba(22, 101, 52, 0.07) !important;
				transform: translateY(-2px) !important;
			}

			/* Rounded-square icon box (colour applied per section below) */
			.icon-container {
				width: var(--bx-desk-icon) !important;
				height: var(--bx-desk-icon) !important;
				min-height: var(--bx-desk-icon) !important;
				padding: 0 !important;
				border-radius: var(--bx-desk-icon-radius) !important;
				overflow: hidden !important;
				display: flex !important;
				align-items: center !important;
				justify-content: center !important;
				box-shadow: none !important;
				transition:
					background var(--bx-desk-ease),
					transform var(--bx-desk-ease),
					box-shadow var(--bx-desk-ease) !important;

				img,
				svg,
				.app-icon {
					width: 30px !important;
					height: 30px !important;
					object-fit: contain !important;
					-webkit-user-drag: none !important;
				}
			}

			&:hover .icon-container {
				transform: scale(1.04) !important;
			}

			.icon-caption {
				margin-top: 0 !important;
				width: 100% !important;
				height: auto !important;
				display: flex !important;
				flex-direction: column !important;
				align-items: center !important;
				justify-content: flex-start !important;
				text-align: center !important;
			}

			.icon-title {
				font-size: 12.5px !important;
				font-weight: 600 !important;
				color: var(--bx-desk-ink) !important;
				line-height: 1.3 !important;
				white-space: normal !important;
				overflow: visible !important;
				text-overflow: unset !important;
				word-break: break-word !important;
				max-width: 104px !important;
				transition: color var(--bx-desk-ease) !important;
			}

			.icon-subtitle {
				display: none !important;
			}
		}
	}
}

/* ── Section colouring — SOLID at rest, subtle same-family gradient on hover ── */
.desktop-wrapper .desktop-container .icons .desktop-icon {

	/* ── PEOPLE & HR · green / mint ── */
	&[data-bx-section="green"] {
		.icon-container {
			background: var(--bx-mint-100) !important;
			color: var(--bx-green-800) !important;
		}

		&:hover .icon-container {
			background: linear-gradient(135deg, var(--bx-mint-100) 0%, var(--bx-mint-200) 100%) !important;
			box-shadow: 0 8px 20px rgba(46, 125, 50, 0.18) !important;
		}

		&:hover .icon-title {
			color: var(--bx-green-800) !important;
		}
	}

	/* ── OPERATIONS & SUPPLY · sky / blue ── */
	&[data-bx-section="sky"] {
		.icon-container {
			background: var(--bx-sky-100) !important;
			color: var(--bx-sky-800) !important;
		}

		&:hover .icon-container {
			background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%) !important;
			box-shadow: 0 8px 20px rgba(7, 89, 133, 0.16) !important;
		}

		&:hover .icon-title {
			color: var(--bx-sky-800) !important;
		}
	}

	/* ── COMMERCIAL · amber ── */
	&[data-bx-section="amber"] {
		.icon-container {
			background: var(--bx-amber-100) !important;
			color: var(--bx-amber-800) !important;
		}

		&:hover .icon-container {
			background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%) !important;
			box-shadow: 0 8px 20px rgba(146, 64, 14, 0.16) !important;
		}

		&:hover .icon-title {
			color: var(--bx-amber-800) !important;
		}
	}

	/* ── Small supporting accent only · purple ── */
	&[data-bx-section="accent"] {
		.icon-container {
			background: var(--bx-purple-100) !important;
			color: var(--bx-purple-800) !important;
		}

		&:hover .icon-container {
			background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%) !important;
			box-shadow: 0 8px 20px rgba(107, 33, 168, 0.16) !important;
		}
	}
}

/* ── Section headings — left aligned, thin vertical accent bar, no borders ── */
.desktop-wrapper .desktop-container .icons>.bx-desk-sec-title {
	grid-column: 1 / -1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 24px 0 -12px !important;
	padding: 2px 0 2px 12px !important;
	border-left: 3px solid var(--bx-green-600) !important;
	background: transparent !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	color: var(--bx-green-800) !important;
	line-height: 1.2 !important;

	&:first-child {
		margin-top: 0 !important;
	}

	&[data-sec="sky"] {
		border-left-color: var(--bx-sky-800) !important;
		color: var(--bx-sky-800) !important;
	}

	&[data-sec="amber"] {
		border-left-color: var(--bx-amber-800) !important;
		color: var(--bx-amber-800) !important;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 17b. Folder tiles (e.g. "Accounting") — thumbnail sizing correction
//      §17 above sizes EVERY `.desktop-icon` AND `.icon-container` for the
//      launcher tiles. A Folder tile nests a second desktop grid *inside* its
//      icon box, so those same rules were re-applied to the mini thumbnails:
//        • the inner mini-grid inherited `grid-template-columns: repeat(6,1fr)`
//        • each mini tile inherited `width: 118px`
//        • each mini icon box inherited the 56px box
//      Result: the thumbnails overflowed the 56px box and were clipped by
//      `overflow:hidden` → the Accounting tile rendered broken.
//      This restores the compact thumbnail geometry for FOLDER tiles ONLY,
//      leaving every normal (non-folder) tile completely untouched.
//      Theme-only: no DOM / data / route / icon-type change.
// ─────────────────────────────────────────────────────────────────────────────
.desktop-wrapper .desktop-container .icons .desktop-icon:has(> .icon-container.folder-icon) {
	>.icon-container.folder-icon {
		overflow: hidden !important;

		// DesktopIconGrid renders  .icons-container > .icons  inside this box.
		// Keep that inner mini-grid compact (do NOT inherit repeat(6, 1fr)).
		>.icons-container {
			padding: 0 !important;
			margin: 0 !important;
			height: 100% !important;
			overflow: hidden !important;

			>.icons {
				grid-template-columns: repeat(3, auto) !important;
				grid-template-rows: auto !important;
				gap: 3px !important;
				place-content: center !important;
				place-items: center !important;

				// Mini tiles: reset to their compact size.
				>.desktop-icon {
					width: auto !important;
					min-width: 0 !important;
					height: auto !important;
					padding: 0 !important;
					gap: 0 !important;
					border: none !important;
					background: transparent !important;
					box-shadow: none !important;
					transform: none !important;
					pointer-events: none !important;

					&:hover {
						background: transparent !important;
						box-shadow: none !important;
						transform: none !important;
					}

					// Mini icon box: small rounded square that fits the 56px tile.
					>.icon-container {
						width: 16px !important;
						height: 16px !important;
						min-width: 0 !important;
						min-height: 0 !important;
						padding: 0 !important;
						border-radius: 4px !important;
						background: transparent !important;
						box-shadow: none !important;
						transform: none !important;
						overflow: hidden !important;

						img,
						svg,
						.app-icon,
						.icon {
							width: 16px !important;
							height: 16px !important;
							object-fit: contain !important;
							transform: none !important;
						}
					}

					>.icon-caption {
						display: none !important;
					}
				}
			}
		}
	}

	// Hovering the folder must not shrink/blur the mini thumbnails.
	&:hover>.icon-container.folder-icon>.icons-container>.icons>.desktop-icon>.icon-container {
		transform: none !important;
	}
}

// ─────────────────────────────────────────────────────────────────────────────
// 18. Forms Polishing (design-only) — ALL standard Frappe / ERPNext forms
//     Customer form is the showcase (scoped via body class `.bx-customer-form`
//     added by the theme's customer.js). Reuses the §17 palette.
//     -----------------------------------------------------------------------
//     VISUAL ONLY. No field, validation, save, submit, workflow, DB, hooks or
//     patch is touched — purely CSS restyling of the standard form chrome:
//       • section cards + uppercase green accent headings
//       • rounded inputs with a soft green focus ring
//       • pill tabs with a solid-green active state
//       • solid primary actions, outline secondary, gentle hover lift
//       • themed dashboard / sidebar / timeline surfaces
//       • Customer insights cards harmonised to the shared palette
// ─────────────────────────────────────────────────────────────────────────────
:root {
	--bx-form-bg: #F7FDF9;
	--bx-form-card-bg: #FFFFFF;
	--bx-form-card-border: #BBF7D0;
	--bx-form-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	--bx-form-hover-shadow: 0 8px 24px rgba(46, 125, 50, 0.10);
	--bx-form-accent: #2E7D32;
	--bx-form-accent-strong: #166534;
	--bx-form-ink: #374151;
	--bx-form-muted: #94A3B8;
	--bx-form-field-border: #D6E9DB;
	--bx-form-mint-50: #F0FDF4;
	--bx-form-mint-100: #DCFCE7;
	--bx-form-mint-200: #BBF7D0;
	--bx-form-green-300: #81C784;
	--bx-form-green-500: #43A047;
	--bx-form-green-600: #2E7D32;
	--bx-form-green-800: #166534;
	--bx-form-sky-100: #E0F2FE;
	--bx-form-sky-800: #075985;
	--bx-form-amber-100: #FEF3C7;
	--bx-form-amber-800: #92400E;
	--bx-form-radius: 12px;
	--bx-form-field-radius: 8px;
	--bx-form-ease: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

// 18a. Form canvas — kept neutral. Tinting the whole page mint made the form
//      read as a box-inside-a-box, so only the section cards are surfaces now.
.form-layout,
.form-page,
.form-dashboard-wrapper {
	background: transparent !important;
}

// 18b. Section cards — exactly ONE surface per section (no nested/duplicate box)
.form-section,
.form-dashboard-section {
	background: var(--bx-form-card-bg) !important;
	border: 1px solid var(--bx-form-card-border) !important;
	border-bottom: 1px solid var(--bx-form-card-border) !important;
	border-radius: var(--bx-form-radius) !important;
	box-shadow: var(--bx-form-card-shadow) !important;
	padding: 14px 16px !important;
	margin: 0 0 14px 0 !important;
	transition: border-color var(--bx-form-ease), box-shadow var(--bx-form-ease) !important;

	&:hover {
		border-color: var(--bx-form-green-300) !important;
		box-shadow: var(--bx-form-hover-shadow) !important;
	}
}

// Frappe ships its own bottom separators on card sections — fold them into the
// single card border so we never end up with a doubled edge.
.form-section.card-section,
.form-section.card-section.hide-border {
	border-bottom: 1px solid var(--bx-form-card-border) !important;
	padding-bottom: 14px !important;
}

.form-section .section-head,
.form-dashboard-section .section-head {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	// kill Frappe's own section-head padding so it never reads as a 2nd box
	padding: 0 0 8px 0 !important;
	margin: 0 0 12px 0 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--bx-form-accent-strong) !important;
	border-bottom: none !important;
	cursor: default !important;

	// thin left accent bar
	&::before {
		content: "" !important;
		flex: 0 0 auto !important;
		width: 4px !important;
		height: 16px !important;
		border-radius: 3px !important;
		background: var(--bx-form-accent) !important;
	}
}

.form-section .section-head.collapsible {
	cursor: pointer !important;
}

// Remove the extra top gap Frappe adds to a section body (reads as a 2nd box)
.form-section>.section-body,
.form-section>.section-body:first-child,
.form-dashboard-section .section-body,
.form-dashboard-section .section-body:first-child {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

// 18i. Nested-section guard — some custom scripts (e.g. the Customer form's
//      "Recent Activities" block in boxtech_customizations) inject a RAW
//      `<div class="form-section">` INSIDE a real Frappe section. With the
//      card styling above, that rendered as a SECOND box (a white card with a
//      green border) joined under the first — the "do dabby" glitch. A section
//      nested inside a section must never draw its own surface: flatten it and
//      turn its head into a plain sub-heading.
.form-section .form-section,
.form-section .form-dashboard-section,
.form-dashboard-section .form-section,
.form-dashboard-section .form-dashboard-section {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.form-section .form-section>.section-head,
.form-dashboard-section .form-section>.section-head,
.form-section .form-dashboard-section>.section-head,
.form-dashboard-section .form-dashboard-section>.section-head {
	padding: 2px 0 8px 0 !important;
	margin: 0 0 10px 0 !important;
	border-bottom: 1px solid var(--bx-form-mint-200) !important;
	color: var(--bx-form-accent-strong) !important;
	cursor: default !important;

	// the OUTER section already shows the green accent bar — don't double it
	&::before {
		display: none !important;
	}
}

// 18j. Injected "Recent Activities" table (custom_all_activities field). The
//      block ships a solid-green header from boxtech_customizations; re-skin it
//      to the shared form palette. Higher specificity so it beats the
//      runtime-injected <style>. Presentation only — no data/logic touched.
.form-section .customer-activities-table,
.form-dashboard-section .customer-activities-table {
	border: 1px solid var(--bx-form-card-border) !important;
	border-radius: var(--bx-form-field-radius) !important;
	overflow: hidden !important;

	thead th {
		background: var(--bx-form-mint-50) !important;
		background-color: var(--bx-form-mint-50) !important;
		color: var(--bx-form-accent-strong) !important;
		border-color: var(--bx-form-mint-200) !important;
		font-weight: 700 !important;
		font-size: 12px !important;
	}

	tbody tr:hover td {
		background: var(--bx-form-mint-50) !important;
	}
}

// 18k. Pressed / focused highlight for section cards. The boss asked that a
//      section "highlight on press". Previously only :hover was styled, so a
//      click/tap gave no feedback (and on touch there is no hover at all).
//      Give the card a clear pressed state, and a persistent (but calmer)
//      highlight while focus is inside it (any field focused = section active).
//      Presentation only — no markup / logic touched.
.form-section,
.form-dashboard-section {
	&:active {
		border-color: var(--bx-form-accent) !important;
		box-shadow: 0 0 0 3px var(--bx-form-mint-100), var(--bx-form-hover-shadow) !important;
	}

	&:focus-within {
		border-color: var(--bx-form-green-300) !important;
		box-shadow: 0 0 0 3px var(--bx-form-mint-50), var(--bx-form-hover-shadow) !important;
	}

	// A section that currently holds focus in one of its fields keeps the
	// green accent bar solid so the active section is obvious at a glance.
	&:focus-within>.section-head {
		color: var(--bx-form-accent-strong) !important;
	}
}

// The nested (flattened) fake section must never paint a press highlight of
// its own — the OUTER card owns the highlight.
.form-section .form-section,
.form-dashboard-section .form-section,
.form-section .form-dashboard-section,
.form-dashboard-section .form-dashboard-section {

	&:active,
	&:focus-within {
		border-color: transparent !important;
		box-shadow: none !important;
	}
}

// 18c. Field labels, help text, required marker
.frappe-control .control-label,
.frappe-control .control-label label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--bx-form-ink) !important;
	letter-spacing: 0.01em !important;
}

.frappe-control .control-label .reqd,
.frappe-control .reqd {
	color: #E11D48 !important;
	font-weight: 700 !important;
}

.frappe-control .help-box,
.frappe-control .control-value .help-box {
	font-size: 11px !important;
	color: var(--bx-form-muted) !important;
}

// 18d. Inputs / selects / textareas — rounded with a green focus ring
.frappe-control .control-input {

	input.form-control,
	select.form-control,
	textarea.form-control,
	.input-with-feedback,
	.awesomplete>input {
		border: 1px solid var(--bx-form-field-border) !important;
		border-radius: var(--bx-form-field-radius) !important;
		background: #FFFFFF !important;
		color: var(--bx-form-ink) !important;
		min-height: 34px !important;
		box-shadow: none !important;
		transition: border-color var(--bx-form-ease), box-shadow var(--bx-form-ease) !important;

		&:hover {
			border-color: var(--bx-form-green-300) !important;
		}

		&:focus,
		&.focus {
			border-color: var(--bx-form-accent) !important;
			box-shadow: 0 0 0 3px rgba(67, 160, 71, 0.16) !important;
			outline: none !important;
		}
	}
}

// 18d-1. Read-only display area — double-box glitch fix.
//
//        Frappe renders BOTH a live input box and a read-only display box inside
//        every .frappe-control wrapper and toggles them with the `.hide` utility
//        (which maps to `display: none !important`):
//            .control-input             -> the real editable input (white box)
//            .control-value             -> the read-only display box (green box)
//
//        ROOT CAUSE: any `display: X !important` rule on .control-value at
//        specificity >= (0,2,0) beats Frappe's own `.hide` rule at (0,1,0).
//        That kept the green read-only box visible even in edit mode, giving the
//        infamous "two stacked boxes" appearance on every editable field.
//
//        FIX STRATEGY:
//          A) Nuclear hide  — use the highest possible specificity to force
//             `display: none` whenever ANY .hide class is present on .control-value,
//             no matter what other rules exist.  This is the definitive blocker.
//          B) Visible skin  — only applies when .hide is absent (read-only mode).
//             Uses :not(.hide) so the selector automatically loses to rule A.
//        Presentation only — no markup / logic touched.

// A) Nuclear hide — covers ALL .control-value variants Frappe uses:
//    .like-disabled-input, .like-input, .like-data (link fields), and bare
//    .control-value. The .hide.hide double-class trick raises specificity to
//    (0,3,0) so it wins over any (0,2,0) skin rule below.
.frappe-control .control-value.hide,
.frappe-control .control-value.hide.hide,
.frappe-control .control-value.like-disabled-input.hide,
.frappe-control .control-value.like-input.hide,
.frappe-control .control-value.like-data.hide {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: none !important;
	margin: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
}

// B) Skin for visible read-only boxes (shown only when Frappe is in read/print
//    mode and has removed .hide from .control-value). Use :not(.hide) so this
//    rule NEVER matches a hidden box.
.frappe-control .control-value:not(.hide) {
	border: 1px solid var(--bx-form-field-border) !important;
	border-radius: var(--bx-form-field-radius) !important;
	background: var(--bx-form-mint-50) !important;
	min-height: 34px !important;
	align-items: center !important;
	padding: 4px 10px !important;
	color: var(--bx-form-ink) !important;
	// NOTE: do NOT set display:flex here — let Frappe/Bootstrap control display
	// so we never accidentally resurrect a box Frappe wants hidden.
}

// 18e. Tabs — KEEP Frappe's native sticky-bar geometry (no pill, no filled box,
//      no forced padding/margin). Only colours follow the theme, so tab labels
//      — including the Activities tab — stay perfectly aligned. (A previous
//      global `.nav-tabs` pill override here was the cause of the misalignment.)

// The strip itself already draws Frappe's 1px divider — drop the earlier 2px
// theme bar so the tab rail shows a single, straight line.
.form-tabs-list .form-tabs {
	border-bottom: 0 !important;
}

.form-tabs-list .form-tabs .nav-item .nav-link,
.form-tabs .nav-item .nav-link,
.form-tabs .nav-link {
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-weight: 600 !important;
	color: #64748B !important;
	padding: 10px 0 !important;
	margin: 0 var(--margin-md) !important;
	transition: color var(--bx-form-ease), border-color var(--bx-form-ease) !important;

	&:hover {
		color: var(--bx-form-accent) !important;
		border-bottom-color: var(--bx-form-green-300) !important;
		background: transparent !important;
	}

	&.active {
		background: transparent !important;
		color: var(--bx-form-accent-strong) !important;
		border-bottom: 2px solid var(--bx-form-accent) !important;
		padding-bottom: 9px !important;
		box-shadow: none !important;
	}

	&:focus-visible {
		outline: none !important;
	}
}

// 18f. Action buttons on form pages only
.page-container:has(.form-layout) {

	.page-actions .btn,
	.inner-toolbar .btn {
		border-radius: 10px !important;
		font-weight: 600 !important;
		transition: transform var(--bx-form-ease), box-shadow var(--bx-form-ease), background var(--bx-form-ease) !important;
	}

	.page-actions .btn-primary {
		background: var(--bx-form-accent) !important;
		border-color: var(--bx-form-accent) !important;
		color: #FFFFFF !important;

		&:hover,
		&:focus {
			background: linear-gradient(135deg, #43A047 0%, #2E7D32 100%) !important;
			border-color: var(--bx-form-accent) !important;
			box-shadow: 0 8px 20px rgba(46, 125, 50, 0.28) !important;
			transform: translateY(-1px) !important;
		}
	}

	.page-actions .btn-secondary,
	.page-actions .btn-default {

		&:hover,
		&:focus {
			transform: translateY(-1px) !important;
			box-shadow: 0 6px 16px rgba(46, 125, 50, 0.14) !important;
		}
	}
}

// 18g. Dashboard links, form sidebar, timeline surfaces
//      NOTE: `.sidebar-top-section` is the desk app sidebar (not form chrome),
//      so it is intentionally NOT touched here to avoid a global side effect.
.form-dashboard .form-links .document-link,
.form-dashboard .document-link {
	border-radius: 10px !important;
	transition: background var(--bx-form-ease) !important;

	&:hover {
		background: var(--bx-form-mint-50) !important;
	}
}

.form-sidebar {
	background: var(--bx-form-card-bg) !important;
	border: 1px solid var(--bx-form-card-border) !important;
	border-radius: var(--bx-form-radius) !important;
}

.comment-box,
.new-timeline .timeline-item {
	border-radius: 10px !important;
}

// 18h. Customer form showcase — harmonise the read-only insights strip
.bx-customer-form {

	.bx-customer-dash {
		.bx-dash-title {
			font-size: 12px !important;
			font-weight: 800 !important;
			letter-spacing: 0.06em !important;
			text-transform: uppercase !important;
			color: var(--bx-form-accent-strong) !important;
		}

		.bx-card {
			border: 1px solid var(--bx-form-card-border) !important;
			border-radius: var(--bx-form-radius) !important;
			background: var(--bx-form-card-bg) !important;
			transition: transform var(--bx-form-ease), box-shadow var(--bx-form-ease), border-color var(--bx-form-ease) !important;

			&:hover {
				border-color: var(--bx-form-green-300) !important;
				box-shadow: var(--bx-form-hover-shadow) !important;
				transform: translateY(-2px) !important;
			}
		}

		.bx-card--green .bx-card-icon {
			background: var(--bx-form-mint-100) !important;
			color: var(--bx-form-accent-strong) !important;
		}

		.bx-card--emerald .bx-card-icon {
			background: var(--bx-form-mint-200) !important;
			color: var(--bx-form-green-800) !important;
		}

		.bx-chart-canvas {
			border-radius: var(--bx-form-field-radius) !important;
		}
	}

	// Child tables on the Customer form keep the shared grid styling.
	.form-grid {
		border-radius: var(--bx-form-field-radius) !important;
	}
}

// ═════════════════════════════════════════════════════════════════════════════
// 19. BoxTech Premium Modern Redesign — Portal-wide visual upgrade
//     Design-only. Zero functionality / hooks / DB touched.
//     Goals:
//       • Soft gradient background (not harsh white)
//       • Glassmorphism top navbar
//       • Section cards with coloured left accent + depth
//       • Elevated page-head with breadcrumb refinement
//       • Modern badge-style status pills
//       • Refined typography hierarchy
//       • Smooth micro-animations everywhere
// ═════════════════════════════════════════════════════════════════════════════

// ── 19a. Design tokens ────────────────────────────────────────────────────────
:root {
	// Page surface
	--bx-bg-gradient: #ffffff;
	--bx-bg-solid: #ffffff;

	// Navbar glass
	--bx-nav-bg: #ffffff;
	--bx-nav-border: #E2E8F0;
	--bx-nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

	// Card system
	--bx-card-bg: #ffffff;
	--bx-card-border: #E2E8F0;
	--bx-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	--bx-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
	--bx-card-radius: 12px;

	// Accent colours
	--bx-accent-emerald: #059669;
	--bx-accent-green: #254222;
	--bx-accent-lime: #65a30d;
	--bx-accent-sky: #0284c7;
	--bx-accent-violet: #7c3aed;
	--bx-accent-amber: #d97706;
	--bx-accent-rose: #e11d48;

	// Section accent bar colours (rotates per section via nth-child)
	--bx-sec-1: #254222;
	--bx-sec-2: #0284c7;
	--bx-sec-3: #7c3aed;
	--bx-sec-4: #d97706;
	--bx-sec-5: #059669;
	--bx-sec-6: #e11d48;

	// Ease
	--bx-ease: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--bx-ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

// ── 19b. Global page background — pure white ───────────────────────────────────
body,
.page-container,
.main-section,
.container-fluid,
.workspace-page,
.dashboard-view,
.dashboard-graph,
.widget-group,
.frappe-card,
.grid-row,
.widget-box,
.layout-main,
.page-body,
.page-content {
	background: #ffffff !important;
	background-color: #ffffff !important;
}

// ── 19c. Glassmorphism top navbar ─────────────────────────────────────────────
.navbar,
.navbar-main,
.navbar.navbar-expand {
	background: #ffffff !important;
	border-bottom: 1px solid #E2E8F0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	transition: box-shadow var(--bx-ease) !important;

	.navbar-brand img,
	.app-logo {
		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.05)) !important;
	}
}

// ── 19d. Page head ─────────────────────────────────────────────────────────────
.page-head,
.page-header-section {
	background: #ffffff !important;
	border-bottom: 2px solid #254222 !important;
	box-shadow: 0 1px 4px rgba(37, 66, 34, 0.05) !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	box-sizing: border-box !important;
	transition: none !important;

	&::before {
		display: none !important;
	}
}

// Breadcrumb refinement
.breadcrumb-container,
.page-title .breadcrumb,
.page-head .breadcrumb {
	font-size: 12.5px !important;
	color: #64748B !important;

	a {
		color: #64748B !important;
		transition: color var(--bx-ease) !important;

		&:hover {
			color: var(--bx-accent-green) !important;
		}
	}

	.breadcrumb-item.active,
	li:last-child,
	li:last-child a {
		color: var(--bx-accent-green) !important;
		font-weight: 700 !important;
	}
}

// Page title refinement
.page-title .title-text,
.page-head .title-text,
h3.title-text {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #0f172a !important;
	letter-spacing: -0.02em !important;
}

// ── 19e. Form layout wrapper — breathing room ─────────────────────────────────
.form-layout,
.form-page {
	padding: 8px 0 !important;
}

// ── 19f. Section cards — premium elevation + coloured left accent per section ─
//         Each .form-section gets a unique accent colour based on its position
//         in the DOM, giving the form a rich coloured-card system at zero
//         extra markup cost.
.form-section,
.form-dashboard-section {
	background: var(--bx-card-bg) !important;
	border: 1px solid var(--bx-card-border) !important;
	border-radius: var(--bx-card-radius) !important;
	box-shadow: var(--bx-card-shadow) !important;
	padding: 16px 18px 14px 18px !important;
	margin: 0 0 14px 0 !important;
	position: relative !important;
	overflow: hidden !important;
	transition:
		border-color var(--bx-ease),
		box-shadow var(--bx-ease),
		transform var(--bx-ease) !important;

	// Soft left accent bar — colour rotates per section
	&::before {
		content: "" !important;
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 4px !important;
		border-radius: 14px 0 0 14px !important;
		background: var(--bx-sec-1) !important;
	}

	// Give each section a different accent colour
	&:nth-child(6n+1)::before { background: var(--bx-sec-1) !important; }
	&:nth-child(6n+2)::before { background: var(--bx-sec-2) !important; }
	&:nth-child(6n+3)::before { background: var(--bx-sec-3) !important; }
	&:nth-child(6n+4)::before { background: var(--bx-sec-4) !important; }
	&:nth-child(6n+5)::before { background: var(--bx-sec-5) !important; }
	&:nth-child(6n+6)::before { background: var(--bx-sec-6) !important; }

	&:hover {
		border-color: rgba(129, 199, 132, 0.7) !important;
		box-shadow: var(--bx-card-shadow-hover) !important;
		transform: translateY(-1px) !important;
	}

	&:active {
		transform: translateY(0) !important;
	}

	// Section heading — refined
	.section-head,
	&>.section-head {
		padding-left: 8px !important;
	}
}

// Nested sections must never get the accent treatment
.form-section .form-section,
.form-dashboard-section .form-section,
.form-section .form-dashboard-section {
	&::before {
		display: none !important;
	}

	&:hover {
		transform: none !important;
	}
}

// ── 19g. Field label upgrade ──────────────────────────────────────────────────
.frappe-control .control-label,
.frappe-control .control-label label {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	margin-bottom: 4px !important;
}

// ── 19h. Input fields — clean, rounded, modern ────────────────────────────────
.frappe-control .control-input {
	input.form-control,
	select.form-control,
	textarea.form-control,
	.input-with-feedback,
	.awesomplete>input {
		border: 1.5px solid #d1fae5 !important;
		border-radius: 8px !important;
		background: #fafffe !important;
		color: #1e293b !important;
		font-size: 13.5px !important;
		min-height: 36px !important;
		padding: 6px 10px !important;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) inset !important;
		transition: border-color var(--bx-ease), box-shadow var(--bx-ease), background var(--bx-ease) !important;

		&:hover {
			border-color: #86efac !important;
			background: #ffffff !important;
		}

		&:focus,
		&.focus {
			border-color: #2E7D32 !important;
			background: #ffffff !important;
			box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12) !important;
			outline: none !important;
		}
	}
}

// ── 19i. Status / indicator badges — pill-style ───────────────────────────────
.indicator,
.indicator-pill,
.badge {
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 3px 10px !important;
	letter-spacing: 0.02em !important;
}

// ── 19j. Page actions — polished button bar ───────────────────────────────────
.page-actions,
.inner-toolbar {
	.btn {
		border-radius: 10px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		padding: 7px 16px !important;
		transition:
			background var(--bx-ease),
			box-shadow var(--bx-ease),
			transform var(--bx-ease) !important;

		&:hover {
			transform: translateY(-1px) !important;
		}

		&:active {
			transform: translateY(0) !important;
		}
	}

	.btn-primary {
		background: linear-gradient(135deg, #2E7D32 0%, #43A047 100%) !important;
		border: none !important;
		box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3) !important;
		color: #fff !important;

		&:hover {
			background: linear-gradient(135deg, #1b5e20 0%, #2E7D32 100%) !important;
			box-shadow: 0 8px 20px rgba(46, 125, 50, 0.38) !important;
		}
	}

	.btn-default,
	.btn-secondary {
		background: #ffffff !important;
		border: 1.5px solid #bbf7d0 !important;
		color: #2E7D32 !important;

		&:hover {
			background: #f0fdf4 !important;
			border-color: #86efac !important;
			box-shadow: 0 4px 12px rgba(46, 125, 50, 0.12) !important;
		}
	}
}

// ── 19k. Document status tag (Not Saved / Saved / Submitted) ─────────────────
.page-head .tag-draft,
.page-head .tag-not-saved,
.indicator.orange,
.indicator.red {
	border-radius: 999px !important;
}

// ── 19l. Tab navigation — clean underline style ───────────────────────────────
.form-tabs-list,
.form-tabs-list.form-tabs-sticky-up,
.form-tabs-list.form-tabs-sticky-down,
.form-tabs-sticky-up,
.form-tabs-sticky-down {
	position: sticky !important;
	top: 48px !important;
	z-index: 99 !important;
	background: #FFFFFF !important;
	background-color: #FFFFFF !important;
	border-bottom: 1.5px solid #e2e8f0 !important;
	padding: 0 4px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	/* Ensure sticky tabs never show content bleeding through */
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transition: none !important;
}

.form-tab-content {
	scroll-margin-top: 104px !important;
}

// ── 19m. Form sidebar card ────────────────────────────────────────────────────
.layout-side-section {
	.form-sidebar {
		background: var(--bx-card-bg) !important;
		border: 1px solid var(--bx-card-border) !important;
		border-radius: var(--bx-card-radius) !important;
		box-shadow: var(--bx-card-shadow) !important;
		padding: 14px 12px !important;
	}

	.sidebar-image-section {
		border-radius: 12px !important;
		overflow: hidden !important;
	}
}


// ── 19n. Timeline / Comments section — card style ─────────────────────────────
.timeline,
.new-timeline {
	.timeline-item {
		background: var(--bx-card-bg) !important;
		border: 1px solid var(--bx-card-border) !important;
		border-radius: 10px !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
		margin-bottom: 10px !important;
		padding: 12px 14px !important;
		transition: box-shadow var(--bx-ease) !important;

		&:hover {
			box-shadow: 0 4px 14px rgba(46, 125, 50, 0.09) !important;
		}
	}
}

.comment-box {
	background: var(--bx-card-bg) !important;
	border: 1.5px solid #d1fae5 !important;
	border-radius: 10px !important;
	box-shadow: 0 2px 8px rgba(46, 125, 50, 0.06) !important;
	padding: 14px 16px !important;

	// Comments heading — give it breathing room from border
	.comment-input-header {
		padding-left: 4px !important;
		margin-bottom: 12px !important;

		.comment-title {
			font-size: 15px !important;
			font-weight: 600 !important;
		}
	}

	// Avatar + input row
	.comment-input-container {
		display: flex !important;
		align-items: flex-start !important;
		gap: 10px !important;
		padding-left: 4px !important;

		// Shrink avatar slightly for better proportion
		.avatar {
			height: 28px !important;
			width: 28px !important;
			min-width: 28px !important;
			margin-top: 4px !important;
			flex-shrink: 0 !important;
		}

		// Input box padding from border
		.frappe-control {
			flex: 1 !important;
			padding-right: 0 !important;

			.ql-editor {
				background-color: var(--control-bg) !important;
				border: 1px solid var(--border-color) !important;
				border-radius: 8px !important;
				min-height: 38px !important;
				padding: 8px 12px !important;
				font-size: 13px !important;
			}
		}
	}
}


// ── 19o. Layout main section (the white content area) ─────────────────────────
.layout-main-section,
.layout-main-section-wrapper {
	background: transparent !important;
	border-radius: 16px !important;
}

// ── 19p. Frappe card (dashboard cards, quick access) ─────────────────────────
.frappe-card {
	background: var(--bx-card-bg) !important;
	border: 1px solid var(--bx-card-border) !important;
	border-radius: var(--bx-card-radius) !important;
	box-shadow: var(--bx-card-shadow) !important;
	transition: box-shadow var(--bx-ease), transform var(--bx-ease) !important;

	&:hover {
		box-shadow: var(--bx-card-shadow-hover) !important;
		transform: translateY(-2px) !important;
	}
}

// ── 19q. Smooth page load fade-in ─────────────────────────────────────────────
.page-container {
	animation: bx-fade-in 0.3s ease both !important;
}

@keyframes bx-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

// ── 19r. Dashboard / home page cards ─────────────────────────────────────────
.desk-page .widget,
.widget.widget-shadow,
.dashboard-widget-box {
	background: var(--bx-card-bg) !important;
	border: 1px solid var(--bx-card-border) !important;
	border-radius: var(--bx-card-radius) !important;
	box-shadow: var(--bx-card-shadow) !important;
	transition: box-shadow var(--bx-ease), transform var(--bx-ease) !important;

	&:hover {
		box-shadow: var(--bx-card-shadow-hover) !important;
		transform: translateY(-2px) !important;
	}
}

// ── 19s. Dropdown menus — elevated glass ─────────────────────────────────────
.dropdown-menu {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(187, 247, 208, 0.7) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(46, 125, 50, 0.08) !important;
	padding: 6px !important;

	.dropdown-item {
		border-radius: 8px !important;
		font-size: 13px !important;
		padding: 7px 12px !important;
		transition: background var(--bx-ease), color var(--bx-ease) !important;
		color: #374151 !important;

		&:hover,
		&:focus {
			background: #f0fdf4 !important;
			color: #166534 !important;
		}
	}
}

// ── 19t. Search modal — glass card ───────────────────────────────────────────
.modal-content{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(20px)!important;border:1px solid rgba(187,247,208,.5)!important;border-radius:16px!important;box-shadow:0 20px 60px rgba(0,0,0,.15)!important}.desktop-wrapper .desktop-container .icons>.desktop-icon[data-bx-section=green],.desktop-wrapper .desktop-container .icons>.desktop-icon[data-bx-section=sky]{transform:translateY(-70px)!important}.desktop-wrapper .desktop-container .icons>.desktop-icon[data-bx-section=green]:hover,.desktop-wrapper .desktop-container .icons>.desktop-icon[data-bx-section=sky]:hover{transform:translateY(-72px)!important}


/* ═════════════════════════════════════════════════════════════════════════════
   Sales Team KPIs & Activity Breakdown Popup Layout Fixes
   ═════════════════════════════════════════════════════════════════════════════ */
.sales-kpi-report-view .bx-chart-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
}

.sales-kpi-report-view .bx-chart-controls {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
	margin-left: auto !important;
}

.sales-kpi-report-view .bx-chart-box,
.sales-kpi-report-view .bx-chart-box-full {
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.sales-kpi-report-view .bx-donut-in-dialog {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 28px !important;
	padding: 16px 16px 16px 12px !important;
	position: relative !important;
	overflow: visible !important;
	width: 100% !important;
}

.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-chart-area {
	flex: 0 0 240px !important;
	width: 240px !important;
	max-width: 240px !important;
	height: 240px !important;
	margin-left: -20px !important;
	margin-right: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	z-index: 1 !important;
}

.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-total {
	position: absolute !important;
	top: 46% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	text-align: center !important;
	z-index: 5 !important;
	pointer-events: none !important;
}

.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-total .bx-donut-total-label {
	font-size: 9px !important;
	color: #64748B !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	line-height: 1 !important;
	margin-bottom: 2px !important;
}

.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-total .bx-donut-total-count {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0F172A !important;
	line-height: 1.1 !important;
	white-space: nowrap !important;
}

.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-legend {
	flex: 1 1 auto !important;
	min-width: 240px !important;
	position: relative !important;
	z-index: 10 !important;
	padding-left: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 9px !important;
}

.sales-kpi-report-view .bx-legend-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
}

.sales-kpi-report-view .bx-legend-dot {
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	position: relative !important;
	z-index: 15 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}


/* DONUT DIALOG DOTS OVERLAY FIX */
.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-chart-area,
.sales-kpi-report-view .bx-donut-in-dialog .frappe-chart,
.sales-kpi-report-view .bx-donut-in-dialog .chart-container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-right: 28px !important;
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
}
.sales-kpi-report-view .bx-donut-in-dialog .bx-donut-legend {
    position: relative !important;
    z-index: 25 !important;
    margin-left: 20px !important;
    padding-left: 12px !important;
}
.sales-kpi-report-view .bx-donut-in-dialog .bx-legend-dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 35 !important;
    margin-right: 8px !important;
}



/* ============================================================
   BOXTECH COMPLETE PORTAL REDESIGN & THEME OVERRIDES (EXACT IMAGE MATCH)
   ============================================================ */

/* 1. Global Portal Background - Pure White */
body[data-route],
.page-container,
.desk-body,
.layout-main,
.main-section,
.page-body,
.form-page,
.standard-sidebar-section {
    background-color: #FFFFFF !important;
}

/* 2. Top Navbar / Header */
.navbar,
.page-head {
    background: #FFFFFF !important;
    border-bottom: 2px solid #254222 !important;
}

/* 3. Left Sidebar (White with Green Active State, Clean Text Wrapping) */
.desk-sidebar,
.layout-side-section {
    background: #254222 !important;
    border-right: 1px solid #254222 !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

.sidebar-item-label,
.item-anchor,
.standard-sidebar-item {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    color: #374151 !important;
}

.standard-sidebar-item .item-anchor {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 8px !important;
    color: #374151 !important;
}

.standard-sidebar-item {
    border-radius: 8px !important;
    padding: 2px 4px !important;
    margin-bottom: 3px !important;
    transition: background 0.15s !important;
}

.active-sidebar {
    background: #ece2b1 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.active-sidebar .item-anchor,
.active-sidebar .sidebar-item-label,
.active-sidebar span,
.active-sidebar svg,
.active-sidebar a {
    color: #1B4332 !important;
    fill: #1B4332 !important;
    font-weight: 700 !important;
}

/* Dark bottle-green hover — matches reference image */
.standard-sidebar-item:not(.active-sidebar):hover {
    background: #1a3a1a !important;
    border-radius: 6px !important;
}

.standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-label,
.standard-sidebar-item:not(.active-sidebar):hover .item-anchor,
.standard-sidebar-item:not(.active-sidebar):hover span {
    color: #FFFFFF !important;
}
.standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg {
    stroke: #FFFFFF !important;
    fill: none !important;
}

/* HIDE ALL PROMOTIONAL BANNERS & MOTIVATIONAL CARDS */
.bx-sidebar-banner,
.bx-bottom-row,
.bx-mot-panel,
.bx-ra-panel,
.bx-tp-panel,
.bx-mot-card {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 4. Form Tabs Navigation */
.form-tabs .nav-tabs,
.nav-tabs {
    border-bottom: 2px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    gap: 4px;
}

.form-tabs .nav-link,
.nav-tabs .nav-link {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    padding: 10px 18px !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
}

.form-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    color: #1B5E20 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #2E7D32 !important;
    background: transparent !important;
}

.form-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
    color: #2E7D32 !important;
}

/* 5. Form Sections & Container Cards */
.form-section,
.form-dashboard-section,
.form-tab {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    border: 1px solid #E8F5E9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    padding: 20px 24px !important;
    margin-bottom: 20px !important;
}

.section-head,
.form-section-heading {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 14px !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: center !important;
}

/* Section Title Left Indicator Bars (Image 2) */
.section-head:has([data-label*="CONTACT"]),
.section-head:has([data-label*="Contact"]),
div[data-fieldname*="contact"] .section-head,
.section-head[data-label*="CONTACT"],
.section-head[data-label*="Contact"] {
    border-left: 3.5px solid #2563EB !important;
    padding-left: 8px !important;
    color: #1E3A8A !important;
}

.section-head:has([data-label*="TECHNICAL"]),
.section-head:has([data-label*="Technical"]),
div[data-fieldname*="technical"] .section-head,
.section-head[data-label*="TECHNICAL"],
.section-head[data-label*="Technical"] {
    border-left: 3.5px solid #7C3AED !important;
    padding-left: 8px !important;
    color: #4C1D95 !important;
}

.section-head:has([data-label*="SHIPPING"]),
.section-head:has([data-label*="Shipping"]),
.section-head:has([data-label*="ADDRESS"]),
.section-head:has([data-label*="Address"]),
div[data-fieldname*="shipping"] .section-head,
div[data-fieldname*="address"] .section-head,
.section-head[data-label*="SHIPPING"],
.section-head[data-label*="Shipping"] {
    border-left: 3.5px solid #16A34A !important;
    padding-left: 8px !important;
    color: #166534 !important;
}

.section-head:has([data-label*="STATS"]),
.section-head:has([data-label*="Stats"]),
.section-head[data-label*="STATS"],
.section-head[data-label*="Stats"],
.form-dashboard-section .section-head {
    border-left: 3.5px solid #16A34A !important;
    padding-left: 8px !important;
    color: #166534 !important;
}

/* 6. Connections Tab Pill Boxes (Image 1) */
.document-link,
.badge-link,
.count-link,
.open-notification {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
}

.document-link:hover,
.badge-link:hover,
.count-link:hover {
    border-color: #81C784 !important;
    background-color: #F1FBF3 !important;
    color: #1B5E20 !important;
}

.document-link .badge,
.count-link .badge {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.document-link:hover .badge,
.count-link:hover .badge {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
}

.document-link .btn-new {
    color: #64748B !important;
}

.document-link:hover .btn-new {
    color: #16A34A !important;
}

/* 7. Form Controls, Inputs & Textareas */
.form-control,
.frappe-control input,
.frappe-control select,
.frappe-control textarea {
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
    color: #1E293B !important;
    box-shadow: none !important;
}

.form-control:focus,
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
    border-color: #2EA26A !important;
    box-shadow: 0 0 0 3px rgba(46, 162, 106, 0.15) !important;
    outline: none !important;
}

.frappe-control .control-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 5px !important;
}

/* 8. Right Sidebar Customer Info Card */
.form-sidebar {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    border: 1px solid #E8F5E9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    padding: 20px !important;
}

.form-sidebar .sidebar-image-section .avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    border: 1px solid #E2E8F0 !important;
}

.form-sidebar .sidebar-item {
    font-size: 12.5px !important;
    color: #475569 !important;
}

/* 9. Action Buttons */
.btn-primary,
.page-head .btn-primary {
    background: #16A34A !important;
    border-color: #16A34A !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.3) !important;
}

.btn-primary:hover,
.page-head .btn-primary:hover {
    background: #15803D !important;
    border-color: #15803D !important;
}

.page-head .btn-default {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.page-head .btn-default:hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
}

/* 10. Performance Table Sortable Headers */
.bx-perf-table th.bx-sortable-th:hover {
    background-color: #E2F4E7 !important;
    color: #15803D !important;
}
.bx-sort-icon {
    font-size: 11px;
    color: #16A34A;
}

.sales-opportunity-report-view .report-wrapper,
.sales-opportunity-report-view .datatable-wrapper,
.sales-opportunity-report-view .report-data,
.sales-opportunity-report-view .datatable,
.sales-opportunity-report-view .grid-report,
.sales-opportunity-report-view .dt-scrollable {
    display: none !important;
}

/* ============================================================
   11. DESKTOP HERO SECTION REDESIGN & CLEAN GRID (SS 1 MATCH)
   ============================================================ */

/* ============================================================
   11. DESKTOP & PAGE BACKGROUND — PURE WHITE CANVAS
   ============================================================ */

.desktop-wrapper,
.page-desktop,
.desk-page,
#page-desktop,
.frappe-app,
.page-container,
.layout-main,
.layout-main-section,
.layout-main-section-wrapper,
.page-body,
.page-content,
.workspace-page,
.dashboard-view,
.dashboard-graph,
.widget-group,
.grid-row,
.widget-box,
div.page,
body[data-route="desktop"],
body[data-route=""],
body[data-route] {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* Hide Redundant Top Header on Desktop Page (Keep Only Hero Navbar) */
#page-desktop .page-head,
body[data-route="desktop"] .page-head,
body[data-route=""] .page-head {
    display: none !important;
}

/* ============================================================
   12. UNIVERSAL HERO SECTION / PAGE HEADER DESIGN (IMAGE 2 STYLE)
   Applies cleanly to CRM, Selling, HR, Workspaces, Reports, and Documents
   ============================================================ */

/* Page Header Bar / Hero Container */
.page-head,
.page-header,
.workspace-header,
.hero-section,
.layout-main-section-wrapper > .page-head,
.page-container > .page-head {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-bottom: 2px solid #254222 !important;
    box-shadow: 0 1px 4px rgba(37, 66, 34, 0.05) !important;
    padding: 0 24px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    transition: none !important;
}

/* Ensure inner container stretches full width */
.page-head .container,
.page-head .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.page-head-content,
.page-head .page-head-content,
.page-head .row.page-head-content,
.page-head .flex.justify-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Desktop Navbar Hero Banner (on Desktop screen) */
.desktop-navbar.navbar-container,
.desktop-navbar {
    height: 78px !important;
    min-height: 78px !important;
    padding: 12px 32px !important;
    background: #FFFFFF !important;
    border-bottom: 2px solid #254222 !important;
    box-shadow: 0 2px 6px rgba(37, 66, 34, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
}

/* Brand Logo inside Hero Navbar */
.navbar-home {
    display: flex !important;
    align-items: center !important;
}

#brand-logo,
.navbar-home img,
.navbar-brand img {
    height: 56px !important;
    max-height: 58px !important;
    width: auto !important;
    max-width: 280px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04)) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#brand-logo:hover,
.navbar-brand img:hover {
    transform: scale(1.03) !important;
}

/* 1. HIDE ALL HOME / SIDEBAR-TOGGLE / MENU ICONS in page header */
.page-head .sidebar-toggle-btn,
.page-head .sidebar-toggle-btn.navbar-brand,
.page-head .sidebar-toggle-placeholder,
.page-head .sidebar-toggle-icon,
.page-head .page-icon-group,
.page-head .home-btn,
.page-head .home-icon,
.page-head .breadcrumb-home,
.page-head .page-icon,
.page-head svg[use*="home"],
.page-head .icon-home,
.page-head .icon-menu,
.page-head .es-line-sidebar-collapse {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. PAGE TITLE & HERO WRAPPER — Single Dark Green Vertical Accent (Image 3 match) */
.page-head .page-title,
.workspace-header .page-title,
.page-title-container,
.hero-title-wrap {
    display: inline-flex !important;
    align-items: center !important;
    border-left: 4.5px solid #254222 !important;
    padding-left: 14px !important;
    margin: 0 !important;
    gap: 0 !important;
    min-height: 28px !important;
}

.page-head .title-area {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. HIDE INTERMEDIATE BREADCRUMBS (like CRM, Workspace) — only show active page name */
.page-head .navbar-breadcrumbs li:not(:last-child),
.page-head .breadcrumb li:not(:last-child),
.page-head .breadcrumb .breadcrumb-item:not(:last-child),
.page-head .breadcrumb-container li:not(:last-child) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. REMOVE ALL SLASHES ( / ) AND DIVIDERS */
.page-head .navbar-breadcrumbs a:before,
.page-head .navbar-breadcrumbs a::before,
.page-head .navbar-breadcrumbs li:before,
.page-head .navbar-breadcrumbs li::before,
.page-head .navbar-breadcrumbs a:after,
.page-head .navbar-breadcrumbs a::after,
.page-head .breadcrumb li::before,
.page-head .breadcrumb .breadcrumb-item::before,
.page-head .breadcrumb li::after,
.page-head .breadcrumb .breadcrumb-item::after,
.page-head .breadcrumb .divider,
.page-head .breadcrumb-item + .breadcrumb-item::before {
    display: none !important;
    content: "" !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. TITLE TEXT FORMATTING — Bold 24px Image 3 Match */
.page-head .navbar-breadcrumbs,
.page-head .breadcrumb,
.page-head .breadcrumb-container {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    border: none !important;
    border-left: none !important;
}

.page-head .navbar-breadcrumbs li,
.page-head .navbar-breadcrumbs li:last-child,
.page-head .breadcrumb li,
.page-head .breadcrumb li:last-child {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.page-head .navbar-breadcrumbs li:last-child a,
.page-head .navbar-breadcrumbs li:last-child span,
.page-head .navbar-breadcrumbs a,
.page-head .title-text,
.page-head h1,
.page-head h2,
.page-head h3,
.hero-heading,
.page-head .page-title .ellipsis,
.page-head .breadcrumb li a,
.page-head .breadcrumb .breadcrumb-item a,
.page-head .breadcrumb .breadcrumb-item.active,
.page-head .breadcrumb li:last-child,
.page-head .breadcrumb li:last-child a {
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    display: inline-block !important;
    cursor: default !important;
    pointer-events: auto !important;
}

/* Actions in header */
.page-head .standard-actions,
.page-head .page-actions,
.page-head .custom-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Hero Centered Search Pill */
.desktop-search-wrapper {
    max-width: 480px !important;
    margin: 0 auto !important;
    flex: 1 1 480px !important;
}

.desktop-navbar-modal-search {
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 24px !important;
    height: 40px !important;
    padding: 0 16px !important;
    color: #1E293B !important;
    font-size: 13.5px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.desktop-navbar-modal-search:hover,
.desktop-navbar-modal-search:focus {
    background-color: #FFFFFF !important;
    border-color: #254222 !important;
    box-shadow: 0 0 0 3px rgba(37, 66, 34, 0.12) !important;
}

.desktop-search-icon {
    font-weight: 500 !important;
    color: #254222 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.desktop-search-icon > svg {
    stroke: #254222 !important;
    width: 17px !important;
    height: 17px !important;
}

/* ============================================================
   13. DESKTOP ICONS LAUNCHER — IMAGE 3 DESIGN RESTORATION
   Spacious Grid, Section Headers, Rounded-Square Colored Boxes
   ============================================================ */

/* ============================================================
   13. DESKTOP ICONS LAUNCHER — IMAGE 3 DESIGN RESTORATION
   Spacious Grid, Section Headers, Rounded-Square Colored Boxes
   ============================================================ */

.desktop-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px 32px 64px 32px !important;
    display: flex !important;
    justify-content: flex-start !important;
    background: #FFFFFF !important;
}

.icons-container {
    margin-top: 0 !important;
    padding: 0 !important;
    max-width: 1120px !important;
    width: 100% !important;
}

/* Outer Icons Container */
.desktop-wrapper .desktop-container .icons,
.icons-container .icons,
#page-desktop .icons {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 !important;
}

/* Distinct Section Wrapper */
.bx-desk-sec-wrap {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Section Headings with Distinct Accent Bars (Image 3 match) */
.bx-desk-sec-title,
.desktop-wrapper .desktop-container .icons > .bx-desk-sec-title,
.desktop-wrapper .module-category,
.desktop-wrapper .category-title,
.desktop-wrapper .desktop-category-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 2px 0 2px 10px !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    width: 100% !important;
}

/* Category: People & HR */
.bx-desk-sec-title[data-sec="green"],
.bx-desk-sec-wrap[data-sec="green"] .bx-desk-sec-title {
    border-left: 3.5px solid #254222 !important;
    color: #1B4332 !important;
}

/* Category: Operations & Supply */
.bx-desk-sec-title[data-sec="sky"],
.bx-desk-sec-wrap[data-sec="sky"] .bx-desk-sec-title {
    border-left: 3.5px solid #0284c7 !important;
    color: #0369A1 !important;
}

/* Category: Commercial */
.bx-desk-sec-title[data-sec="amber"],
.bx-desk-sec-wrap[data-sec="amber"] .bx-desk-sec-title {
    border-left: 3.5px solid #d97706 !important;
    color: #92400E !important;
}

/* Clean Responsive Desktop Icons Grid inside each section */
.bx-desk-sec-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 22px !important;
    justify-items: start !important;
    align-items: start !important;
    width: 100% !important;

    @media (max-width: 1024px) {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    @media (max-width: 768px) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
        row-gap: 20px !important;
    }

    @media (max-width: 480px) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Desktop Icon Tile */
.desktop-icon,
.module-icon,
.desk-module-icon,
.desktop-item,
.frappe-card.desktop-icon {
    width: 108px !important;
    min-width: 108px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 6px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease !important;

    &:hover {
        background: #F8FAFC !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    }

    /* Rounded-Square Icon Box */
    .icon-container,
    .desktop-icon-box {
        width: 58px !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #DCFCE7 !important;
        color: #166534 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease !important;

        img,
        svg,
        .app-icon {
            width: 30px !important;
            height: 30px !important;
            object-fit: contain !important;
        }
    }

    &:hover .icon-container,
    &:hover .desktop-icon-box {
        transform: scale(1.06) !important;
        box-shadow: 0 8px 20px rgba(37, 66, 34, 0.16) !important;
    }

    .icon-title,
    .icon-label,
    .desktop-icon-label,
    .app-title,
    .desktop-item-title {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #374151 !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-align: center !important;
        margin-top: 6px !important;
        max-width: 100px !important;
        word-break: break-word !important;
        transition: color 0.2s ease !important;
    }

    &:hover .icon-title,
    &:hover .desktop-icon-label,
    &:hover .app-title {
        color: #166534 !important;
    }

    .icon-subtitle {
        display: none !important;
    }
}

/* Section Colors for Desktop Icon Containers */
.desktop-wrapper .desktop-container .icons .desktop-icon,
#page-desktop .icons .desktop-icon {
    &[data-bx-section="green"] .icon-container,
    &[data-bx-section="green"] .desktop-icon-box {
        background: #DCFCE7 !important;
        color: #166534 !important;
    }

    &[data-bx-section="sky"] .icon-container,
    &[data-bx-section="sky"] .desktop-icon-box {
        background: #E0F2FE !important;
        color: #075985 !important;
    }

    &[data-bx-section="amber"] .icon-container,
    &[data-bx-section="amber"] .desktop-icon-box {
        background: #FEF3C7 !important;
        color: #92400E !important;
    }

    &[data-bx-section="purple"] .icon-container,
    &[data-bx-section="purple"] .desktop-icon-box,
    &[data-bx-section="accent"] .icon-container,
    &[data-bx-section="accent"] .desktop-icon-box {
        background: #F3E8FF !important;
        color: #6B21A8 !important;
    }
}

/* ============================================================
   14. CRITICAL FORCE OVERRIDES — LOADED LAST WITH HIGHEST SPECIFICITY
   ============================================================ */

/* FORCE sidebar text visibility + smaller text size */
.body-sidebar .standard-sidebar-item .sidebar-item-label,
.body-sidebar .standard-sidebar-item span,
.body-sidebar .standard-sidebar-item a {
  color: #cae4c5 !important;
  font-size: 12px !important;
  opacity: 1 !important;
}
.body-sidebar .standard-sidebar-item .sidebar-item-icon svg {
  opacity: 1 !important;
}
.body-sidebar .standard-sidebar-item .sidebar-item-icon svg.icon,
.body-sidebar .standard-sidebar-item .sidebar-item-icon svg:not(.es-solid):not(.es-icon) {
  fill: none !important;
  stroke: #cae4c5 !important;
}

.body-sidebar {
  background-color: #254222 !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

/* Normal items: NO BOXES, transparent background identical to sidebar */
.body-sidebar .sidebar-item-container,
.body-sidebar .sidebar-item-container.section-item,
.body-sidebar .sidebar-item-container:has(> .nested-container),
.body-sidebar .nested-container,
.body-sidebar .standard-sidebar-item:not(.active-sidebar) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Smaller font size across all sidebar items */
.body-sidebar .sidebar-item-label {
  font-size: 11.5px !important;
}

/* FORCE hover — dark bottle-green pill bg + white text */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover,
.body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover {
  background-color: #1a3a1a !important;
  border-radius: 6px !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-label,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover span,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover a {
  color: #FFFFFF !important;
}
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg.icon,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg:not(.es-solid):not(.es-icon) {
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* FORCE selected/active item — warm cream bg + dark readable text */
body .body-sidebar .standard-sidebar-item.active-sidebar {
  background-color: #ece2b1 !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: none !important;
}
body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
body .body-sidebar .standard-sidebar-item.active-sidebar span,
body .body-sidebar .standard-sidebar-item.active-sidebar a {
  color: #1B4332 !important;
  font-weight: 600 !important;
}
body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg.icon,
body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg:not(.es-solid):not(.es-icon) {
  stroke: #1B4332 !important;
  fill: none !important;
}

/* RELOAD BUTTON — fix invisible icon in top-right page header */
.page-icon-group .icon-btn svg use,
.page-icon-group .icon-btn svg,
.page-icon-group svg use,
.page-head .page-icon-group svg,
.page-head .page-icon-group svg use {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke: currentColor !important;
}
.page-icon-group .icon-btn,
.page-icon-group button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* PAGE BACKGROUND — force pure white across entire app */
.page-container,
.layout-main,
.layout-main-section,
.layout-main-section-wrapper,
.frappe-app,
.page-body,
.page-content,
.workspace-page,
.dashboard-view,
.dashboard-graph,
.widget-group,
.grid-row,
.widget-box,
div.page {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Body sidebar placeholder — keep 240px in sync */
.body-sidebar-placeholder {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

/* ============================================================
   15. ACTIVITY DETAILS RESULT NOTE HOVER POPUP
   ============================================================ */

#bx-result-floating-tooltip.bx-result-tooltip {
    position: fixed !important;
    z-index: 999999 !important;
    background: #FFFFFF !important;
    border: 1.5px solid #254222 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(37, 66, 34, 0.08) !important;
    padding: 10px 14px !important;
    max-width: 380px !important;
    min-width: 180px !important;
    pointer-events: none !important;
    animation: bxTooltipFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes bxTooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bx-result-tooltip-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 5px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.bx-result-tooltip-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #254222 !important;
}

.bx-result-tooltip-body {
    font-size: 13px !important;
    color: #1E293B !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}




/* ============================================================
   16. UNIVERSAL FIXES: ROW INDEX CENTERING, SINGLE-LINE TOOLTIP,
       DASHBOARD OVERFLOW CONTAINMENT & TABLE ALIGNMENT
   ============================================================ */

// ── FIX 1 & 4: Universal Table Row Number & Oval Centering ───────────
.grid-row,
.form-grid,
.frappe-control[data-fieldtype="Table"],
.table {
	.row-index {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		height: 100% !important;
		min-height: 38px !important;
		padding: 0 !important;
		margin: 0 !important;

		span {
			display: inline-flex !important;
			align-items: center !important;
			justify-content: center !important;
			text-align: center !important;
			width: 22px !important;
			height: 22px !important;
			min-width: 22px !important;
			min-height: 22px !important;
			max-width: 22px !important;
			max-height: 22px !important;
			border-radius: 50% !important;
			background: #E8F5E9 !important;
			color: #2E7D32 !important;
			font-size: 11px !important;
			font-weight: 700 !important;
			line-height: 22px !important;
			margin: auto !important;
			padding: 0 !important;
			box-sizing: border-box !important;
			flex-shrink: 0 !important;
		}
	}

	.row-check {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 100% !important;
		min-height: 38px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.data-row {
		display: flex !important;
		align-items: center !important;
		min-height: 38px !important;
		width: max-content !important;
		min-width: unset !important;

		> div,
		.col,
		.grid-static-col {
			display: flex !important;
			align-items: center !important;
			min-height: 38px !important;
			box-sizing: border-box !important;
		}

		.col:not(.row-check):not(.row-index) {
			justify-content: flex-start !important;
			text-align: left !important;
			align-items: center !important;
			padding: 6px 8px !important;
		}

		.static-area,
		.col .static-area {
			display: flex !important;
			align-items: center !important;
			width: 100% !important;
			min-height: unset !important;
			margin: 0 !important;
			padding: 0 !important;
		}
	}
}

// ── FIX 2: Universal Compact Single-Line Chart Hover Tooltip ─────────
.graph-svg-tip,
.graph-svg-tip.comparison,
body .graph-svg-tip,
.chart-container .graph-svg-tip {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 4px 10px !important;
	font-size: 11px !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	min-width: unset !important;
	max-width: max-content !important;
	border-radius: 6px !important;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important;
	background: #1E293B !important;
	color: #F8FAFC !important;
	border: 1px solid #334155 !important;
	gap: 8px !important;
	z-index: 999999 !important;
	pointer-events: none !important;

	.title,
	&.comparison .title {
		display: inline-flex !important;
		align-items: center !important;
		padding: 0 8px 0 0 !important;
		margin: 0 !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		color: #E2E8F0 !important;
		text-transform: none !important;
		line-height: 1 !important;
		border-right: 1px solid #475569 !important;

		strong {
			color: #FFFFFF !important;
			font-weight: 700 !important;
		}
	}

	ul,
	ul.data-point-list,
	ul.tooltip-grid,
	ol {
		display: inline-flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		grid-template-columns: none !important;
	}

	li,
	li.data-point-notify,
	.data-point-value {
		display: inline-flex !important;
		align-items: center !important;
		flex-direction: row !important;
		padding: 0 !important;
		margin: 0 !important;
		min-width: unset !important;
		gap: 4px !important;
		font-size: 11px !important;
		line-height: 1 !important;
		white-space: nowrap !important;

		.tooltip-legend {
			display: inline-block !important;
			width: 8px !important;
			height: 8px !important;
			border-radius: 50% !important;
			margin: 0 4px 0 0 !important;
			flex-shrink: 0 !important;
		}

		.tooltip-label {
			margin: 0 !important;
			font-size: 11px !important;
			color: #94A3B8 !important;
			display: inline !important;
			line-height: 1 !important;
			max-width: unset !important;
		}

		.tooltip-value {
			margin: 0 0 0 3px !important;
			font-size: 11px !important;
			font-weight: 700 !important;
			color: #38BDF8 !important;
			display: inline !important;
			line-height: 1 !important;
		}
	}

	.svg-pointer {
		display: none !important;
	}
}

// ── FIX 3: Dashboard & Home Graph Overflow & Box Boundary Containment ──
.dashboard-widget-box,
.widget.widget-charts,
.desk-page .widget,
.widget.dashboard-widget-box,
.widget-group .widget {
	border: 1.5px solid #81C784 !important;
	border-radius: 12px !important;
	background: #FFFFFF !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;

	.widget-head {
		border-bottom: 1px solid #E2E8F0 !important;
		padding: 8px 14px !important;
	}

	.widget-body {
		padding: 10px 14px !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	.chart-container,
	.frappe-chart {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		box-sizing: border-box !important;

		svg.frappe-chart,
		svg {
			max-width: 100% !important;
			width: 100% !important;
			height: auto !important;
			overflow: hidden !important;
		}
	}
}

// Global chart containment across any page/section
.chart-container,
.frappe-chart-container,
.frappe-chart {
	max-width: 100% !important;
	box-sizing: border-box !important;

	svg.frappe-chart,
	svg {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

// ── FIX 4: Complete Table Visibility & Alignment Across Whole Portal ──
.form-grid-container {
	overflow-x: auto !important;
	overflow-y: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
	-webkit-overflow-scrolling: touch !important;
}

.form-grid {
	overflow-x: visible !important;
	overflow-y: hidden !important;
	width: max-content !important;
	min-width: unset !important;
	max-width: none !important;
	display: inline-block !important;

	.grid-heading-row,
	.grid-body {
		min-width: unset !important;
		width: max-content !important;
		overflow: visible !important;
	}

	.grid-row {
		min-width: unset !important;
		width: max-content !important;
	}

	.row-check,
	.row-index,
	.grid-heading-row .row-check,
	.grid-heading-row .row-index,
	.grid-body .data-row .row-check,
	.grid-body .data-row .row-index {
		position: relative !important;
		left: auto !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
	  SIDEBAR HOVER TEXT — GUARANTEED VISIBLE (top-level AND collapsible/nested)
	  -----------------------------------------------------------------------------
	  Frappe renders child items inside `.nested-container`, which is itself inside
	  `.body-sidebar`. Therefore the existing rule
	    .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover span
	  ALREADY matches nested items by plain descendant matching — wrapping it with
	  `.nested-container` does not add coverage, it only changes specificity.
	  The only way hover text can turn invisible (same colour as the #1a3a1a pill)
	  is a competing rule winning on specificity/cascade, so this block re-asserts
	  white text with a `body` prefix (higher specificity) and `-webkit-text-fill
	  -color`, for BOTH top-level and nested items. Written as FLAT CSS so it is
	  valid in the directly-included stylesheet as well as the compiled bundle.
	  ───────────────────────────────────────────────────────────────────────────── */
body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover,
body .body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover {
	 background-color: #1a3a1a !important;
	 border-radius: 6px !important;
}

body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-label,
body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor,
body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover span,
body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover a,
body .body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-label,
body .body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover .item-anchor,
body .body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover span,
body .body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover a {
	 color: #FFFFFF !important;
	 -webkit-text-fill-color: #FFFFFF !important;
}

body .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg,
body .body-sidebar .nested-container .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-icon svg {
	 stroke: #FFFFFF !important;
	 fill: none !important;
}

/* Active item must stay dark & readable — never inherit the hover white */
body .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
body .body-sidebar .standard-sidebar-item.active-sidebar span,
body .body-sidebar .standard-sidebar-item.active-sidebar a,
body .body-sidebar .nested-container .standard-sidebar-item.active-sidebar .sidebar-item-label,
body .body-sidebar .nested-container .standard-sidebar-item.active-sidebar span,
body .body-sidebar .nested-container .standard-sidebar-item.active-sidebar a {
	 color: #1B4332 !important;
	 -webkit-text-fill-color: #1B4332 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOXTECH — CONFIGURE COLUMNS DIALOG & GRID FOOTER BUTTON FIX
   ● Fixes: settings gear icon not clickable in grid header's last column
   ● Fixes: Add Row / Add Multiple Rows buttons not responding
   ● Fixes: table alignment breaks when new column is added
   ● Design: Premium styled 
/* ===========================================================================
   BOXTECH configure-columns-dialog and grid-footer button fix
   =========================================================================== */

/* 1. Configure-Columns Gear Icon — strict 32px, never grows */
.grid-heading-row .data-row .col.grid-static-col.pointer,
.grid-heading-row .data-row div.grid-static-col.pointer {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 32px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.grid-heading-row .data-row .col.grid-static-col.pointer a,
.grid-heading-row .data-row div.grid-static-col.pointer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: background 0.15s ease !important;
}
.grid-heading-row .data-row .col.grid-static-col.pointer a:hover,
.grid-heading-row .data-row div.grid-static-col.pointer a:hover {
    background: rgba(46,125,50,0.12) !important;
}
.grid-heading-row .data-row .col.grid-static-col.pointer a svg,
.grid-heading-row .data-row .col.grid-static-col.pointer a .icon,
.grid-heading-row .data-row div.grid-static-col.pointer a svg,
.grid-heading-row .data-row div.grid-static-col.pointer a .icon {
    stroke: #2E7D32 !important;
    opacity: 0.65 !important;
    filter: none !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, stroke 0.15s ease !important;
}
.grid-heading-row .data-row .col.grid-static-col.pointer a:hover svg,
.grid-heading-row .data-row .col.grid-static-col.pointer a:hover .icon,
.grid-heading-row .data-row div.grid-static-col.pointer a:hover svg,
.grid-heading-row .data-row div.grid-static-col.pointer a:hover .icon {
    stroke: #1B5E20 !important;
    opacity: 1 !important;
}

/* 2. Grid Footer Add Row Buttons */
.grid-footer {
    display: block !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 8px 10px !important;
    border-top: 1px solid #C8E6C9 !important;
    background: linear-gradient(180deg,#F8FDF8 0%,#F0FDF4 100%) !important;
    border-radius: 0 0 var(--border-radius-md,6px) var(--border-radius-md,6px) !important;
}
.grid-footer .flex.justify-between {
    display: flex !important;
    align-items: center !important;
    pointer-events: auto !important;
}
.grid-footer .grid-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    pointer-events: auto !important;
}
.grid-add-row,
.grid-add-multiple-rows {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 12px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1B5E20 !important;
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
    position: relative !important;
    z-index: 3 !important;
}
.grid-add-row:hover,
.grid-add-multiple-rows:hover {
    background: #C8E6C9 !important;
    border-color: #81C784 !important;
    box-shadow: 0 2px 6px rgba(46,125,50,0.14) !important;
    color: #1B4332 !important;
}
.grid-add-row:active,
.grid-add-multiple-rows:active {
    background: #A5D6A7 !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}

/* 3. Configure Columns Dialog Premium Style */
.modal .modal-body .form-group .selected-fields .fields_order,
.modal .modal-body .form-group .selected-fields .control-input.fields_order {
    border: 1px solid #C8E6C9 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg,#FAFFFE 0%,#F5FBF5 100%) !important;
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    cursor: grab !important;
}
.modal .modal-body .form-group .selected-fields .fields_order:hover,
.modal .modal-body .form-group .selected-fields .control-input.fields_order:hover {
    border-color: #81C784 !important;
    box-shadow: 0 2px 8px rgba(46,125,50,0.08) !important;
}
.modal .modal-body .form-group .selected-fields .fields_order .column-width {
    border: 1px solid #A5D6A7 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #1B5E20 !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 2px 6px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.modal .modal-body .form-group .selected-fields .fields_order .column-width:focus {
    border-color: #2E7D32 !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.12) !important;
    outline: none !important;
}
.modal .modal-body .form-group .selected-fields .fields_order .remove-field svg,
.modal .modal-body .form-group .selected-fields .fields_order .remove-field .icon {
    stroke: #B0BEC5 !important;
    transition: stroke 0.15s ease !important;
}
.modal .modal-body .form-group .selected-fields .fields_order .remove-field:hover svg,
.modal .modal-body .form-group .selected-fields .fields_order .remove-field:hover .icon {
    stroke: #E53935 !important;
}
.modal .modal-body .form-group > .row b,
.modal .modal-body .form-group > .row strong {
    color: #1B5E20 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
}
.modal .modal-body .form-group p.help-box a.add-new-fields,
p.help-box.small.text-muted a.add-new-fields,
a.add-new-fields {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 14px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2E7D32 !important;
    background: #E8F5E9 !important;
    border: 1px solid #A5D6A7 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
    margin-top: 4px !important;
}
.modal .modal-body .form-group p.help-box a.add-new-fields:hover,
p.help-box.small.text-muted a.add-new-fields:hover,
a.add-new-fields:hover {
    background: #C8E6C9 !important;
    border-color: #66BB6A !important;
    box-shadow: 0 2px 6px rgba(46,125,50,0.12) !important;
    color: #1B4332 !important;
    text-decoration: none !important;
}
.modal .modal-footer .btn.btn-primary {
    background: linear-gradient(135deg,#2E7D32 0%,#388E3C 100%) !important;
    border-color: #2E7D32 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 7px 20px !important;
    transition: background 0.15s ease, box-shadow 0.15s ease !important;
}
.modal .modal-footer .btn.btn-primary:hover {
    background: linear-gradient(135deg,#1B5E20 0%,#2E7D32 100%) !important;
    box-shadow: 0 3px 10px rgba(46,125,50,0.3) !important;
}
.modal .modal-footer .btn.btn-secondary {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    border: 1px solid #A5D6A7 !important;
    color: #2E7D32 !important;
    background: #F0FDF4 !important;
    transition: background 0.15s ease !important;
}
.modal .modal-footer .btn.btn-secondary:hover {
    background: #E8F5E9 !important;
    border-color: #81C784 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL TABLE ALIGNMENT + GEAR ICON FIX
   Ensures all child tables remain aligned and gear icon stays visible
   regardless of how many columns are added dynamically.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. flex-nowrap on ALL table data-rows (global) */
.form-grid .grid-heading-row .data-row,
.form-grid .grid-body .data-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    min-width: unset !important;
    width: max-content !important;
}

/* 2. All columns — no shrink, fixed box model */
.form-grid .grid-heading-row .data-row > .col,
.form-grid .grid-body .data-row > .col {
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    min-height: 38px !important;
}

/* 3. Gear icon (configure columns in header) & Pencil icon (edit row in body)
   STRICT 32px, NEVER GROWS, perfectly aligned vertically across every table. */
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer,
.form-grid .grid-body .data-row > .col:has(.btn-open-row),
.form-grid .grid-body .data-row > .col.btn-open-row,
.form-grid .grid-body .data-row > div:has(.btn-open-row) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 10 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer {
    cursor: pointer !important;
    pointer-events: auto !important;
}
.form-grid .grid-body .data-row .btn-open-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. Gear icon inner <a> and svg — always clickable */
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer > a,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: background 0.15s ease !important;
}
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer > a:hover,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer > a:hover {
    background: rgba(46,125,50,0.12) !important;
}
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer > a svg,
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer > a .icon,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer > a svg,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer > a .icon {
    stroke: #2E7D32 !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, stroke 0.15s ease !important;
}
.form-grid .grid-heading-row .data-row > .col.grid-static-col.pointer > a:hover svg,
.form-grid .grid-heading-row .data-row > div.grid-static-col.pointer > a:hover svg {
    stroke: #1B5E20 !important;
    opacity: 1 !important;
}

/* 5. Horizontal scroll container */
.form-grid-container {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* 6. Header row global theme color — applies to container AND inner rows
   so background covers ALL columns including dynamically added ones. */
.form-grid .grid-heading-row {
    background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
    border-bottom: 2px solid #81C784 !important;
    color: #1B5E20 !important;
    width: max-content !important;
    min-width: unset !important;
}
.form-grid .grid-heading-row .grid-row,
.form-grid .grid-heading-row .data-row {
    background: linear-gradient(180deg, #F1FBF3 0%, #E2F4E7 100%) !important;
    width: max-content !important;
    min-width: unset !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOXTECH — CHILD TABLE FULL-WIDTH FILL (FINAL OVERRIDE)
   Table always spans the full available width. Leftover space is
   absorbed by the DATA columns (they stretch), never by the gear /
   pencil column, which stays a fixed 32px. When many columns are
   added, each data column keeps its minimum width and the table
   scrolls horizontally instead of squeezing.
   ═══════════════════════════════════════════════════════════════════ */
.form-grid-container .form-grid,
.form-grid {
    display: block !important;
    width: 100% !important;
    min-width: min-content !important;
    max-width: none !important;
}
.form-grid .grid-heading-row,
.form-grid .grid-body,
.form-grid .grid-heading-row .grid-row,
.form-grid .grid-body .grid-row,
.form-grid .grid-heading-row .grid-row .data-row,
.form-grid .grid-body .grid-row .data-row {
    width: 100% !important;
    min-width: min-content !important;
    max-width: none !important;
}

/* Data columns: fixed minimum basis (by column size), grow to fill */
.form-grid .grid-row .data-row > .grid-static-col[class*="col-xs-"] {
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    max-width: none !important;
}
.form-grid .grid-row .data-row > .grid-static-col.col-xs-1  { flex-basis: 120px !important; width: 120px !important; min-width: 120px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-2  { flex-basis: 160px !important; width: 160px !important; min-width: 160px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-3  { flex-basis: 200px !important; width: 200px !important; min-width: 200px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-4  { flex-basis: 240px !important; width: 240px !important; min-width: 240px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-5  { flex-basis: 280px !important; width: 280px !important; min-width: 280px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-6  { flex-basis: 320px !important; width: 320px !important; min-width: 320px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-7  { flex-basis: 360px !important; width: 360px !important; min-width: 360px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-8  { flex-basis: 400px !important; width: 400px !important; min-width: 400px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-9  { flex-basis: 450px !important; width: 450px !important; min-width: 450px !important; }
.form-grid .grid-row .data-row > .grid-static-col.col-xs-10 { flex-basis: 500px !important; width: 500px !important; min-width: 500px !important; }

/* Gear (header) + pencil (body): fixed 32px, never grows */
.form-grid .grid-heading-row .grid-row .data-row > .grid-static-col.pointer,
.form-grid .grid-body .grid-row .data-row > .col:has(.btn-open-row) {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
}
/* Undo the earlier ":last-child = 32px" rule for grids without a pencil column */
.form-grid .grid-body .grid-row .data-row > .grid-static-col[class*="col-xs-"]:last-child {
    overflow: hidden !important;
}

/* BOXTECH — header labels wrap only between words */
.form-grid .grid-heading-row .grid-row .data-row > .grid-static-col[class*="col-xs-"],
.form-grid .grid-heading-row .grid-row .data-row > .grid-static-col[class*="col-xs-"] * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}
/* Body cells: never break inside a word either (dates, "Phone Call", pills) */
.form-grid .grid-body .grid-row .data-row > .grid-static-col[class*="col-xs-"] .static-area {
    word-break: normal !important;
    overflow-wrap: normal !important;
}