/* ============================================================================
   Digit Desk theme — "Digit Chrome".
   A deep-green navbar + sidebar frame around a calm paper workspace, with
   emerald/mint accents applied cohesively across every Desk component.
   Tokens + Frappe-variable bridge live in digit_tokens.css.
   ============================================================================ */

body.digit-desk,
body[data-route],
.page-container,
.page-content,
.page-body {
	background-color: var(--digit-paper) !important;
	color: var(--digit-body) !important;
}

/* ============================================================================
   1. TOP BAR — light surface, ink text, green accents (matches command center)
   ============================================================================ */
.navbar {
	min-height: var(--digit-topbar-height) !important;
	background: var(--digit-card) !important;
	border-bottom: 1px solid var(--digit-border) !important;
	box-shadow: 0 1px 2px rgba(6, 78, 59, 0.05) !important;
}

/* Navbar text + icons read ink on white */
.navbar .navbar-brand,
.navbar .navbar-home,
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .navbar-nav > li > a,
.navbar a,
.navbar .h6,
.navbar svg,
.navbar use {
	color: var(--digit-body) !important;
	fill: currentColor;
	stroke: currentColor;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
	color: var(--digit-brand-deep) !important;
}

.navbar .navbar-icon,
.navbar .icon,
.navbar .es-icon,
.navbar [data-feather] {
	color: var(--digit-muted) !important;
}

/* Search pill: paper surface on the light bar */
.navbar .search-bar,
.navbar .search-bar .form-control,
.navbar .awesomplete > input,
.search-bar .form-control {
	min-height: var(--digit-control-height) !important;
	border-radius: var(--digit-radius-md) !important;
	border: 1px solid var(--digit-border) !important;
	background: var(--digit-paper) !important;
	color: var(--digit-ink) !important;
	box-shadow: none !important;
}

.navbar .search-bar .form-control::placeholder,
.navbar .awesomplete > input::placeholder {
	color: var(--digit-muted) !important;
}

.navbar .search-bar:focus-within,
.navbar .awesomplete > input:focus,
.search-bar .form-control:focus {
	border-color: var(--digit-brand) !important;
	background: var(--digit-card) !important;
	box-shadow: var(--digit-focus) !important;
}

.navbar kbd,
.navbar .frappe-shortcut {
	background: var(--digit-paper) !important;
	color: var(--digit-muted) !important;
	border: 1px solid var(--digit-border) !important;
}

/* Avatar reads as a soft brand chip */
.navbar .avatar,
.navbar .avatar-frame {
	background: var(--digit-brand-soft) !important;
	border: 1px solid rgba(10, 135, 84, 0.3) !important;
	color: var(--digit-brand-deep) !important;
	font-family: var(--digit-font-latin) !important;
	font-weight: 700;
	box-shadow: none !important;
}

/* Dropdown / popovers opened from the navbar stay light & readable */
.navbar .dropdown-menu,
.dropdown-menu {
	background: #ffffff !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-lg) !important;
	box-shadow: 0 24px 60px rgba(6, 78, 59, 0.22) !important;
	padding: 6px !important;
}

.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item {
	color: var(--digit-body) !important;
	border-radius: var(--digit-radius-sm) !important;
	padding: 7px 12px !important;
}

.navbar .dropdown-menu a:hover,
.dropdown-menu .dropdown-item:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}

/* ============================================================================
   2. PAGE HEADER
   ============================================================================ */
.page-head {
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.page-title .title-text,
.page-head h1,
.workspace-title {
	color: var(--digit-ink) !important;
	font-family: var(--digit-font-arabic) !important;
	font-size: 21px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
}

.page-head .sub-heading,
.text-muted,
.help-box,
.small,
small {
	color: var(--digit-muted) !important;
}

/* ============================================================================
   3. SIDEBAR — Frappe v16 `.body-sidebar` as a light identity nav.
   White surface, ink text, soft-green active pill (matches the command center;
   no heavy green chrome).
   ============================================================================ */
.body-sidebar,
.body-sidebar-container,
.standard-sidebar,
.desk-sidebar {
	background: var(--digit-card) !important;
	border: 0 !important;
	box-shadow: inset 1px 0 0 var(--digit-border) !important;
}

/* Brand header at the top of the sidebar */
.body-sidebar .sidebar-header,
.body-sidebar .header-title,
.body-sidebar .sidebar-item-label.header-title {
	color: var(--digit-ink) !important;
	font-weight: 800 !important;
}
.body-sidebar .header-subtitle,
.body-sidebar .sidebar-item-label.header-subtitle {
	color: var(--digit-muted) !important;
}
/* Header logo chip — Digit mark on a brand-soft tile (overrides the inline
   per-workspace background color the template sets). */
.body-sidebar .header-logo .icon-container,
.body-sidebar .sidebar-header .icon-container,
.body-sidebar .sidebar-header .sidebar-item-icon,
html.digit-desk-active .sidebar-header .sidebar-item-icon {
	background: var(--digit-brand-soft) !important;
	border-radius: 10px !important;
	display: grid !important;
	place-items: center !important;
}
.body-sidebar .sidebar-header .header-logo,
html.digit-desk-active .sidebar-header .header-logo {
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: 100% !important;
}
.body-sidebar .sidebar-header .header-logo img,
html.digit-desk-active .sidebar-header .header-logo img {
	width: 18px !important;
	height: 18px !important;
	object-fit: contain !important;
}

/* Nav items + anchors */
.body-sidebar .standard-sidebar-item,
.body-sidebar .item-anchor,
.body-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-label {
	color: var(--digit-body) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

.body-sidebar .item-anchor {
	border-radius: var(--digit-radius-md) !important;
}

/* Nav glyphs sit in a consistent square slot so the icon column aligns. */
.body-sidebar .sidebar-item-icon {
	display: inline-grid !important;
	place-items: center !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 7px !important;
	flex: 0 0 auto !important;
	background: transparent !important;
	transition: background 0.14s ease, color 0.14s ease !important;
}
/* These are lucide OUTLINE icons (stroke-based). Keep them HOLLOW — stroke only,
   no fill — in a light mint, so they read as airy outlines, not solid green
   blobs. (Forcing fill:currentColor here is what made them look filled before.) */
.body-sidebar .sidebar-item-icon,
.body-sidebar .sidebar-item-icon svg,
.body-sidebar .sidebar-item-icon svg.icon,
.body-sidebar .sidebar-item-icon use,
.body-sidebar svg.icon,
.body-sidebar svg.icon use {
	color: var(--digit-mint) !important;
	fill: none !important;
	stroke: var(--digit-mint) !important;
}
.body-sidebar .sidebar-item-icon svg {
	width: 16px !important;
	height: 16px !important;
}

/* The expand/collapse caret stays quieter than the leading glyph. */
.body-sidebar .drop-icon,
.body-sidebar .drop-icon svg,
.body-sidebar .drop-icon use {
	color: var(--digit-muted) !important;
	fill: none !important;
	stroke: currentColor !important;
}

.body-sidebar .item-anchor:hover,
.body-sidebar .standard-sidebar-item > .item-anchor:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
.body-sidebar .item-anchor:hover .sidebar-item-icon,
.body-sidebar .standard-sidebar-item > .item-anchor:hover .sidebar-item-icon {
	background: rgba(255, 255, 255, 0.7) !important;
}
.body-sidebar .item-anchor:hover .sidebar-item-icon svg,
.body-sidebar .item-anchor:hover .sidebar-item-icon use,
.body-sidebar .standard-sidebar-item > .item-anchor:hover .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item > .item-anchor:hover .sidebar-item-icon use {
	stroke: var(--digit-brand) !important;
	fill: none !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.selected,
.body-sidebar .standard-sidebar-item.active-sidebar > .item-anchor,
.body-sidebar .standard-sidebar-item.selected > .item-anchor,
.body-sidebar .item-anchor.selected,
.body-sidebar a.item-anchor.selected {
	/* Soft-green active pill (deep-green text) — calm, not a solid emerald slab. */
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
	font-weight: 700 !important;
	border-radius: var(--digit-radius-md) !important;
	box-shadow: none !important;
}

.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
.body-sidebar .item-anchor.selected .sidebar-item-label {
	color: var(--digit-brand-deep) !important;
}

/* Active glyph lifts onto a white chip inside the green pill — stays hollow
   (stroke-only) but with a deeper brand stroke for contrast on the white chip. */
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-icon,
.body-sidebar .item-anchor.selected .sidebar-item-icon {
	background: #ffffff !important;
	box-shadow: 0 1px 2px rgba(6, 78, 59, 0.12) !important;
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon use,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-icon use,
.body-sidebar .item-anchor.selected .sidebar-item-icon svg,
.body-sidebar .item-anchor.selected .sidebar-item-icon use {
	color: var(--digit-brand-deep) !important;
	fill: none !important;
	stroke: var(--digit-brand-deep) !important;
}

/* Crafted detail: a short brand accent bar at the inline-start of the active
   pill (right edge in RTL) — gives the selection a deliberate, designed feel. */
.body-sidebar .standard-sidebar-item.active-sidebar > .item-anchor,
.body-sidebar .standard-sidebar-item.selected > .item-anchor,
.body-sidebar .item-anchor.selected {
	position: relative !important;
	background-image: linear-gradient(var(--digit-brand), var(--digit-brand)) !important;
	background-size: 3px 18px !important;
	background-position: right center !important;
	background-repeat: no-repeat !important;
}
html.digit-ltr .body-sidebar .standard-sidebar-item.active-sidebar > .item-anchor,
html.digit-ltr .body-sidebar .standard-sidebar-item.selected > .item-anchor,
html.digit-ltr .body-sidebar .item-anchor.selected {
	background-position: left center !important;
}

/* Module hierarchy: top-level module/group rows read a touch stronger than
   their indented children, so the primary modules stand out. */
.body-sidebar .standard-sidebar-item:not(.indent) > .item-anchor > .sidebar-item-label {
	font-weight: 600 !important;
	color: var(--digit-ink) !important;
}
.body-sidebar .standard-sidebar-item.indent > .item-anchor > .sidebar-item-icon {
	color: rgba(6, 78, 59, 0.42) !important;
}
.body-sidebar .standard-sidebar-item.indent > .item-anchor > .sidebar-item-label {
	color: var(--digit-body) !important;
	font-weight: 500 !important;
}

/* Section-break captions ("Reports & Masters" etc.) as refined muted labels. */
.body-sidebar .item-anchor.section-break .sidebar-item-label {
	color: var(--digit-muted) !important;
	font-weight: 700 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

/* Search field inside the sidebar */
.body-sidebar .sidebar-search input,
.body-sidebar input.form-control,
.body-sidebar .search-bar input {
	background: var(--digit-paper) !important;
	border: 1px solid var(--digit-border) !important;
	color: var(--digit-ink) !important;
}
.body-sidebar .sidebar-search input::placeholder {
	color: var(--digit-muted) !important;
}

/* User block at the bottom reads ink on white */
.body-sidebar .user-section,
.body-sidebar .sidebar-user *,
.body-sidebar .dropdown-toggle {
	color: var(--digit-body) !important;
}

/* Notification / dropdown POPOVERS inside the sidebar stay light & readable */
.body-sidebar .dropdown-notifications,
.body-sidebar .notifications-list,
.body-sidebar .notification-list-body,
.body-sidebar .dropdown-menu {
	background: #ffffff !important;
	border-radius: var(--digit-radius-lg) !important;
}
.body-sidebar .dropdown-notifications,
.body-sidebar .dropdown-notifications *,
.body-sidebar .dropdown-menu *,
.body-sidebar .notifications-list * {
	color: var(--digit-body) !important;
}

/* List/form contextual side panels stay light (never darken forms/lists) */
.layout-side-section,
.list-sidebar {
	background: var(--digit-card) !important;
	border-color: var(--digit-border-soft) !important;
	box-shadow: none !important;
}

.layout-side-section .sidebar-menu > li > a:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}

/* ============================================================================
   4. WORKSPACE CARDS / WIDGETS
   ============================================================================ */
.widget,
.widget-box,
.frappe-card,
.shortcut-widget-box,
.links-widget-box,
.number-widget-box,
.dashboard-widget-box,
.workspace-section .card {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-lg) !important;
	box-shadow: var(--digit-shadow-flat) !important;
}

.widget:hover,
.shortcut-widget-box:hover,
.links-widget-box:hover,
.number-widget-box:hover {
	border-color: rgba(10, 135, 84, 0.32) !important;
	box-shadow: var(--digit-shadow-hover) !important;
	transform: translateY(-1px);
}

/* Widget heads get a quiet brand-tinted strip */
.widget-head,
.links-widget-box .widget-head,
.dashboard-widget-box .widget-head {
	border-bottom: 1px solid var(--digit-border-soft) !important;
}

.widget-title,
.widget-head .widget-title,
.card h3,
.section-head {
	color: var(--digit-ink) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
}

/* Shortcut count chips + link hovers */
.shortcut-widget-box .count,
.number-card .card-count {
	min-width: 26px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--digit-mint-soft) !important;
	color: var(--digit-brand-deep) !important;
	font-weight: 700;
}

.links-widget-box .link-item:hover {
	background: var(--digit-emerald-soft) !important;
	color: var(--digit-brand) !important;
}

/* KPI numbers — Archivo, tabular */
.number-widget-box .widget-content .number,
.number-card .number,
.indicator-pill .number {
	color: var(--digit-ink) !important;
	font-family: var(--digit-font-latin) !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	direction: ltr;
}

.number-card .percentage-chart .number-card-loading,
.number-widget-box .widget-content .green {
	color: var(--digit-success) !important;
}

/* ============================================================================
   5. BUTTONS
   ============================================================================ */
.btn,
.btn-default,
.btn-secondary {
	min-height: var(--digit-button-height) !important;
	border-radius: var(--digit-radius-md) !important;
	border-color: var(--digit-border) !important;
	background: var(--digit-card) !important;
	color: var(--digit-body) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}

.btn:hover,
.btn-default:hover,
.btn-secondary:hover {
	background: var(--digit-brand-soft) !important;
	border-color: var(--digit-brand) !important;
	color: var(--digit-brand-deep) !important;
}

.btn-primary,
.btn.btn-primary,
button.btn-primary,
.primary-action {
	background: var(--digit-brand) !important;
	border-color: var(--digit-brand) !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(6, 78, 59, 0.2) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
.primary-action:hover {
	background: var(--digit-brand-deep) !important;
	border-color: var(--digit-brand-deep) !important;
	color: #fff !important;
}

/* Navbar buttons on the light bar */
.navbar .btn-default,
.navbar .btn-secondary {
	background: var(--digit-paper) !important;
	border-color: var(--digit-border) !important;
	color: var(--digit-body) !important;
}

.navbar .btn-default:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}

/* ============================================================================
   6. BADGES / INDICATORS
   ============================================================================ */
.indicator-pill,
.badge,
.label {
	min-height: 20px;
	border-radius: 999px !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}

.indicator-pill.green, .badge-success, .label-success {
	background: var(--digit-success-bg) !important;
	color: var(--digit-success) !important;
}
.indicator-pill.orange, .indicator-pill.yellow, .badge-warning, .label-warning {
	background: var(--digit-warning-bg) !important;
	color: var(--digit-warning) !important;
}
.indicator-pill.red, .badge-danger, .label-danger {
	background: var(--digit-error-bg) !important;
	color: var(--digit-error) !important;
}
.indicator-pill.blue, .badge-info, .label-info {
	background: var(--digit-info-bg) !important;
	color: var(--digit-info) !important;
}

/* ============================================================================
   7. TABLES / LISTS
   ============================================================================ */
.list-row-head,
.dt-header,
.datatable .dt-header,
.report-wrapper .dt-header {
	background: #F1F5F2 !important;
	color: var(--digit-muted) !important;
	border-bottom: 1px solid var(--digit-border) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}

.list-row:hover,
.datatable .dt-row:hover {
	background: var(--digit-emerald-soft) !important;
}

.list-row .list-subject a,
.list-row-col .ellipsis {
	color: var(--digit-ink) !important;
}

.list-row .list-subject a:hover {
	color: var(--digit-brand) !important;
}

/* ============================================================================
   8. OVERLAYS
   ============================================================================ */
.alert,
.msgprint,
.toast-message {
	border-radius: var(--digit-radius-md) !important;
	border: 1px solid var(--digit-border) !important;
	box-shadow: none !important;
}

.modal-content {
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-lg) !important;
	box-shadow: 0 24px 60px rgba(16, 24, 40, 0.2) !important;
}

.modal-header {
	border-bottom: 1px solid var(--digit-border-soft) !important;
}

.modal-title {
	color: var(--digit-ink) !important;
	font-weight: 800 !important;
}

[dir="rtl"] .page-title,
html[dir="rtl"] .page-title,
body.lang-ar .page-title {
	text-align: right;
}

/* ============================================================================
   9. DESK APPS SCREEN (launcher) — branded cards, clear fixed breakpoints
   Card chrome is added by digit_identity.js (.digit-desk-app-card).
   Laptop targets: 1366 / 1440 / 1536 / 1920.
   ============================================================================ */
html.digit-desk-active body:has(.desktop-wrapper),
html.digit-desk-active body.digit-desk-route-home {
	background: var(--digit-paper) !important;
	color: var(--digit-ink) !important;
	font-family: var(--digit-font-arabic) !important;
}

html.digit-desk-active .desktop-wrapper {
	min-height: calc(100vh - var(--digit-topbar-height)) !important;
	background:
		radial-gradient(1200px 400px at 50% -120px, rgba(52, 211, 153, 0.10), transparent 70%),
		var(--digit-paper) !important;
}

/* Launcher navbar — light surface to match the rest of the chrome */
html.digit-desk-active .desktop-navbar,
html.digit-desk-active .navbar-container {
	background: var(--digit-card) !important;
	border-bottom: 1px solid var(--digit-border) !important;
	box-shadow: none !important;
}

html.digit-desk-active .desktop-navbar a,
html.digit-desk-active .desktop-navbar .navbar-icon,
html.digit-desk-active .desktop-navbar svg {
	color: var(--digit-body) !important;
}

html.digit-desk-active .desktop-search-wrapper,
html.digit-desk-active .desktop-navbar-modal-search {
	height: 38px !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-md) !important;
	background: var(--digit-paper) !important;
	box-shadow: none !important;
	color: var(--digit-ink) !important;
}

html.digit-desk-active .desktop-search-wrapper input::placeholder {
	color: var(--digit-muted) !important;
}

html.digit-desk-active .desktop-wrapper .desktop-container {
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 44px 28px 56px !important;
}

html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container {
	width: 100% !important;
}

html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 16px !important;
	width: 100% !important;
	align-items: stretch !important;
	justify-items: stretch !important;
}

html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons > a.desktop-icon {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 58px minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 15px !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 100px !important;
	height: 100px !important;
	margin: 0 !important;
	padding: 18px 20px !important;
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-lg) !important;
	box-shadow: var(--digit-shadow-flat) !important;
	text-align: start !important;
	text-decoration: none !important;
	overflow: hidden !important;
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

/* Top brand hairline that reveals on hover */
html.digit-desk-active .desktop-wrapper a.desktop-icon::after {
	content: "" !important;
	position: absolute !important;
	inset-inline: 0 !important;
	top: 0 !important;
	height: 3px !important;
	background: var(--digit-brand-grad) !important;
	transform: scaleX(0) !important;
	transform-origin: var(--digit-origin, right) !important;
	transition: transform 0.18s ease !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon:hover {
	border-color: rgba(10, 135, 84, 0.40) !important;
	box-shadow: var(--digit-shadow-brand) !important;
	transform: translateY(-2px) !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon:hover::after {
	transform: scaleX(1) !important;
}

/* Branded gradient icon tile with a white glyph */
html.digit-desk-active .desktop-wrapper a.desktop-icon .icon-container {
	width: 58px !important;
	height: 58px !important;
	margin: 0 !important;
	border-radius: 14px !important;
	display: grid !important;
	place-items: center !important;
	background: var(--digit-brand-grad) !important;
	border: 0 !important;
	box-shadow: 0 6px 16px rgba(6, 78, 59, 0.22) !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon .icon-container.folder-icon > .icons-container {
	display: none !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon .app-icon,
html.digit-desk-active .desktop-wrapper a.desktop-icon .icon-container img {
	width: 32px !important;
	height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	object-fit: contain !important;
	/* White glyph on the green tile */
	filter: brightness(0) invert(1) !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon .icon-caption {
	margin: 0 !important;
	min-width: 0 !important;
	text-align: start !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon .icon-title {
	color: var(--digit-brand-deep) !important;
	font-size: 15.5px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	direction: ltr !important;
	text-align: start !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon .digit-desk-app-desc {
	margin-top: 4px !important;
	color: var(--digit-muted) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Clear fixed breakpoints (laptop-first) */
@media (min-width: 1367px) {
	html.digit-desk-active .desktop-wrapper .desktop-container { max-width: 1320px !important; }
	html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 1537px) {
	html.digit-desk-active .desktop-wrapper .desktop-container { max-width: 1440px !important; }
}
@media (min-width: 1800px) {
	html.digit-desk-active .desktop-wrapper .desktop-container { max-width: 1660px !important; }
	html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 991px) {
	:root { --digit-content-pad-x: 16px; }
	.page-title .title-text, .page-head h1, .workspace-title { font-size: 18px !important; }
	html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	html.digit-desk-active .desktop-wrapper .desktop-container { padding: 22px 14px 36px !important; }
	html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================================
   10. ICON RECOLOR — Frappe's two-tone workspace/module/app icons ship with a
   blue (and stray violet) accent baked into the SVG sprite (#all-symbols).
   Map that blue family onto the Digit green family so every icon in the
   sidebar, headers and the Apps grid reads on-brand. (CSS on the sprite paths
   propagates to the rendered <use> clones.)
   ============================================================================ */
html.digit-desk-active [fill="#2d95f0" i],
html.digit-desk-active [fill="#0289f7" i],
html.digit-desk-active [fill="#318ad8" i],
html.digit-desk-active [fill="#0744df" i],
html.digit-desk-active [fill="#6846e3" i],
html.digit-desk-active [fill="#9c45e3" i],
html.digit-desk-active [fill="#928ef5" i] { fill: var(--digit-brand) !important; }

html.digit-desk-active [fill="#50a6f2" i],
html.digit-desk-active [fill="#34bae3" i] { fill: var(--digit-mint) !important; }

html.digit-desk-active [fill="#112b42" i],
html.digit-desk-active [fill="#267a94" i] { fill: var(--digit-brand-deep) !important; }

html.digit-desk-active [stroke="#2d95f0" i],
html.digit-desk-active [stroke="#0289f7" i],
html.digit-desk-active [stroke="#318ad8" i] { stroke: var(--digit-brand) !important; }

/* ============================================================================
   EMBED MODE — desk rendered inside the Digit SPA iframe (DeskFrame.vue).
   Hide the desk's global chrome (navbar, module/workspace sidebar, breadcrumb,
   splash, brand marks) so the user can't wander, while KEEPING the form/list
   side panel (.layout-side-section / .list-sidebar: attachments, assignments,
   comments, connections, filters). The desk self-styles here — no fragile
   in-iframe CSS injection from the SPA needed. Set on <html> by
   digit_identity.js when window.frameElement != null.
   ============================================================================ */
html.digit-embedded .navbar,
html.digit-embedded header.navbar,
html.digit-embedded .navbar-expand,
/* v16 chrome rail (app switcher, search, notifications, module list, user) — the
   whole thing is wrapped in .body-sidebar-container > .body-sidebar. Hide the
   container AND its placeholder spacer so no column width is reserved. */
html.digit-embedded .body-sidebar,
html.digit-embedded .body-sidebar-container,
html.digit-embedded .body-sidebar-placeholder,
html.digit-embedded .body-sidebar-top,
html.digit-embedded .body-sidebar-bottom,
html.digit-embedded .body-sidebar-cards,
html.digit-embedded .sidebar-header,
html.digit-embedded .sidebar-items,
html.digit-embedded .standard-items-sections,
html.digit-embedded .dropdown-notifications,
html.digit-embedded .navbar-search-bar,
html.digit-embedded .sidebar-user-button,
html.digit-embedded .dropdown-navbar-user,
html.digit-embedded .sidebar-resize-handle,
html.digit-embedded .collapse-sidebar-link,
html.digit-embedded .standard-sidebar,
html.digit-embedded .standard-sidebar-section .standard-sidebar,
html.digit-embedded .splash,
html.digit-embedded .centered.splash,
html.digit-embedded #splash,
html.digit-embedded .page-head .breadcrumb,
html.digit-embedded #navbar-breadcrumbs,
html.digit-embedded .navbar-breadcrumbs,
html.digit-embedded .navbar-home,
html.digit-embedded .app-logo,
html.digit-embedded .navbar-brand,
html.digit-embedded img.digit-navbar-mark,
html.digit-embedded img.digit-sidebar-mark {
	display: none !important;
}

/* Collapse the reserved rail column so the form fills the full iframe width.
   v16 lays the body out as [sidebar][main]; with the sidebar gone, zero its
   track and any inline width the JS stamped on the container. */
html.digit-embedded .body-sidebar-container,
html.digit-embedded .body-sidebar-placeholder {
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	flex: 0 0 0 !important;
}

/* Defence in depth: even if a brand mark slips through, never let the 512x512
   SVG render at intrinsic size over the form. */
html.digit-embedded img.digit-navbar-mark,
html.digit-embedded img.digit-sidebar-mark,
html.digit-embedded img[src*="digit-icon"],
html.digit-embedded img[src*="digit-logo"],
html.digit-embedded img[src*="frappe-framework-logo"] {
	max-width: 120px !important;
	max-height: 44px !important;
}

/* Content fills the full width now the global chrome is gone. */
html.digit-embedded .main-section,
html.digit-embedded .layout-main,
html.digit-embedded .container.page-body {
	margin: 0 !important;
	max-width: 100% !important;
}

/* Keep the FORM side panel (attachments / assignments / comments / connections)
   — it carries the rich desk tools the user needs on a document. */
html.digit-embedded .layout-side-section:has(.form-sidebar),
html.digit-embedded .form-sidebar {
	display: block !important;
}

/* BUG 1 — WASTED LIST SIDE GAP. Root cause: Frappe lays the LIST page out as a
   two-column flex row (`.layout-main.layout-two-column > .layout-side-section +
   .layout-main-section-wrapper`, see ui/page.js). The default
   `.layout-main-section-wrapper { flex: 1 0 80%; width: 80% }` (frappe page.scss
   ~L94) confines the list content to 80% and reserves the remaining ~20% for the
   `.layout-side-section` holding the list FILTER sidebar (`.list-sidebar`). On a
   form the `body[data-route^="Form"]` rule reclaims that space, but there is NO
   equivalent for lists — so the unwanted list sidebar column shows as a large
   empty strip next to the Digit shell. We don't want the in-iframe filter sidebar
   in embed, so hide ONLY the list's side section (the one that contains
   `.list-sidebar`) and let the list main section span the full iframe width.
   The form's `.layout-side-section:has(.form-sidebar)` is untouched above. */
html.digit-embedded .layout-main.layout-two-column:has(.list-sidebar) .layout-side-section {
	display: none !important;
}
html.digit-embedded .layout-main.layout-two-column:has(.list-sidebar) .layout-main-section-wrapper {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ----------------------------------------------------------------------------
   EMBED DARK — a few surfaces above hardcode #ffffff and so would stay white in
   dark mode. The rest of this file uses --digit-* tokens, which the dark bridge
   in digit_tokens.css (html.digit-embedded[data-theme="dark"]) already flips.
   Re-skin the remaining hardcoded popovers/dropdowns onto the dark card surface.
   ---------------------------------------------------------------------------- */
html.digit-embedded[data-theme="dark"] .navbar .dropdown-menu,
html.digit-embedded[data-theme="dark"] .dropdown-menu,
html.digit-embedded[data-theme="dark"] .awesomplete > ul {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	color: var(--digit-body) !important;
}

html.digit-embedded[data-theme="dark"] .dropdown-menu .dropdown-item,
html.digit-embedded[data-theme="dark"] .awesomplete > ul > li {
	color: var(--digit-body) !important;
}

html.digit-embedded[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
html.digit-embedded[data-theme="dark"] .awesomplete > ul > li:hover,
html.digit-embedded[data-theme="dark"] .awesomplete > ul > li[aria-selected="true"] {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-ink) !important;
}

/* Sidebar notification popovers also hardcode #ffffff — flip to dark card. */
html.digit-embedded[data-theme="dark"] .body-sidebar .dropdown-notifications,
html.digit-embedded[data-theme="dark"] .body-sidebar .notifications-list,
html.digit-embedded[data-theme="dark"] .body-sidebar .notification-list-body,
html.digit-embedded[data-theme="dark"] .body-sidebar .dropdown-menu {
	background: var(--digit-card) !important;
}

/* List/report DATATABLE — Frappe's frappe-datatable CSS hardcodes white cell,
   row and header backgrounds (core CSS we don't edit). Re-skin the body cells,
   headers and the list-view header onto the dark surface so LIST + REPORT
   content reads dark with legible text and visible row borders. */
html.digit-embedded[data-theme="dark"] .datatable,
html.digit-embedded[data-theme="dark"] .dt-scrollable,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell,
html.digit-embedded[data-theme="dark"] .datatable .dt-row,
html.digit-embedded[data-theme="dark"] .report-wrapper .dt-cell {
	background-color: var(--digit-card) !important;
	color: var(--digit-body) !important;
}

html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header,
html.digit-embedded[data-theme="dark"] .datatable .dt-header,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header .dt-cell__content,
html.digit-embedded[data-theme="dark"] .list-row-head,
html.digit-embedded[data-theme="dark"] .report-wrapper .dt-header {
	background-color: var(--digit-paper) !important;
	color: var(--digit-muted) !important;
}

/* BUG 2 (dark) — match the header's side cells to the dark header base so the
   favorites/like cell doesn't show the lighter --subtle-fg/--digit-muted tint. */
html.digit-embedded[data-theme="dark"] .list-row-head .level-right,
html.digit-embedded[data-theme="dark"] .list-row-head .level-right:hover,
html.digit-embedded[data-theme="dark"] .list-row-head:hover .level-right,
html.digit-embedded[data-theme="dark"] .list-row-head .level-left,
html.digit-embedded[data-theme="dark"] .list-row-head .level-item.select-like {
	background: var(--digit-paper) !important;
}

/* BUG (dark) — DATA-ROW activity cluster: same `--bg-color` + `--highlight-color`
   shaded box on `.level-right`/`.list-row-activity`/`.comment-count`. Make it transparent
   so it inherits the dark card row bg; keep hover highlight on the FULL row only. */
html.digit-embedded[data-theme="dark"] .list-row:not(.list-row-head) .level-right,
html.digit-embedded[data-theme="dark"] .list-row:not(.list-row-head) .level-right:hover,
html.digit-embedded[data-theme="dark"] .list-row:not(.list-row-head):hover .level-right,
html.digit-embedded[data-theme="dark"] .list-row:not(.list-row-head) .list-row-activity,
html.digit-embedded[data-theme="dark"] .list-row:not(.list-row-head) .comment-count {
	background: transparent !important;
	border-left: 0 !important;
	box-shadow: none !important;
}

html.digit-embedded[data-theme="dark"] .datatable .dt-cell--focus,
html.digit-embedded[data-theme="dark"] .datatable .dt-row:hover .dt-cell {
	background-color: var(--digit-brand-soft) !important;
}

html.digit-embedded[data-theme="dark"] .datatable .dt-cell,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header {
	border-color: var(--digit-border) !important;
}

/* List view rows — keep them on the dark card surface with legible subject. */
html.digit-embedded[data-theme="dark"] .list-row,
html.digit-embedded[data-theme="dark"] .list-row-container {
	background-color: var(--digit-card) !important;
}
html.digit-embedded[data-theme="dark"] .list-row .list-subject a,
html.digit-embedded[data-theme="dark"] .list-row-col .ellipsis {
	color: var(--digit-ink) !important;
}

/* Form layout + page-head surfaces (defensive — already token-based, but assert
   here so any core white that bleeds through is darkened). */
html.digit-embedded[data-theme="dark"] .form-layout,
html.digit-embedded[data-theme="dark"] .form-page,
html.digit-embedded[data-theme="dark"] .layout-main-section,
html.digit-embedded[data-theme="dark"] .frappe-card,
html.digit-embedded[data-theme="dark"] .widget {
	background-color: var(--digit-card) !important;
	color: var(--digit-body) !important;
}

/* Modals / dialogs — Frappe's .modal-content hardcodes a light surface. */
html.digit-embedded[data-theme="dark"] .modal-content,
html.digit-embedded[data-theme="dark"] .modal-header,
html.digit-embedded[data-theme="dark"] .modal-body,
html.digit-embedded[data-theme="dark"] .modal-footer {
	background-color: var(--digit-card) !important;
	color: var(--digit-body) !important;
	border-color: var(--digit-border) !important;
}
html.digit-embedded[data-theme="dark"] .modal-title {
	color: var(--digit-ink) !important;
}

/* ============================================================================
   EMBED PREMIUM REFINEMENT (list + report + general) — scoped to
   html.digit-embedded so the standalone desk for admins is untouched.
   Mirrors the Digit SPA design system (frontend/src/blueprint.css +
   index.css): clean bordered surfaces, ~14px container radius, refined
   muted column headers, comfortable rows with a soft brand hover, Digit
   primary "+ New", SPA .filter-input styling for toolbar inputs, brand
   accents replacing leftover ERPNext blue, and thin themed scrollbars.
   All values read the bridged --digit-* tokens, so light AND dark both work.
   ============================================================================ */

/* General embed content surface = paper, tidy padding. */
html.digit-embedded .page-body,
html.digit-embedded .layout-main-section-wrapper {
	background: var(--digit-paper) !important;
}
html.digit-embedded .layout-main-section {
	padding-top: 6px !important;
}

/* LIST container as a clean rounded, bordered card. */
html.digit-embedded .layout-main-section .frappe-list,
html.digit-embedded .result,
html.digit-embedded .report-wrapper,
html.digit-embedded .list-view-container .result {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 14px !important;
	box-shadow: var(--digit-shadow-flat) !important;
	overflow: hidden !important;
}

/* Refined column header: muted, small, letter-spaced, quiet separator. */
html.digit-embedded .list-row-head,
html.digit-embedded .datatable .dt-header,
html.digit-embedded .report-wrapper .dt-header,
html.digit-embedded .datatable .dt-cell--header {
	background: var(--digit-surface-2, #F1F5F2) !important;
	color: var(--digit-muted) !important;
	border-bottom: 1px solid var(--digit-border) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
}

/* BUG 2 — STRAY TINT ON THE FAVORITES/LIKE HEADER CELL. Root cause: Frappe's
   list.scss paints the header's `.level-right` block (which holds the list count +
   the "Liked by me" heart) AND its :hover with `background-color: var(--subtle-fg)`
   as a SEPARATE rule from `.list-row-head` itself (frappe list.scss ~L238-248).
   Digit remaps `--subtle-fg` to `--digit-muted` (a medium gray-green INK color,
   tokens L150/211), so that one cell renders darker/greenish while the rest of the
   header is `--digit-surface-2`. In Digit's RTL layout the heart cell sits on the
   leading edge, which is the "leading column" the user sees. Re-skin the header's
   side cells (and their hover states) to the same `--digit-surface-2` for a uniform
   header bar. Scoped to the LIST header only — does not touch datatable/report. */
html.digit-embedded .list-row-head .level-right,
html.digit-embedded .list-row-head .level-right:hover,
html.digit-embedded .list-row-head:hover .level-right,
html.digit-embedded .list-row-head .level-left,
html.digit-embedded .list-row-head .level-item.select-like {
	background: var(--digit-surface-2, #F1F5F2) !important;
}

/* Comfortable row height + clean separators + soft brand hover. */
html.digit-embedded .list-row {
	padding-top: 11px !important;
	padding-bottom: 11px !important;
	border-bottom: 1px solid var(--digit-border-soft) !important;
	transition: background 0.12s ease !important;
}
html.digit-embedded .list-row:hover,
html.digit-embedded .datatable .dt-row:hover .dt-cell {
	background: var(--digit-emerald-soft) !important;
}
html.digit-embedded .list-row .list-subject a {
	color: var(--digit-ink) !important;
	font-weight: 600 !important;
}
html.digit-embedded .list-row .list-subject a:hover {
	color: var(--digit-brand) !important;
}

/* Amounts / numeric report cells stay Latin + tabular. */
html.digit-embedded .datatable .dt-cell--col-1 .dt-cell__content,
html.digit-embedded .list-row-col.text-right,
html.digit-embedded .datatable .dt-cell .text-right {
	font-family: var(--digit-font-latin) !important;
	font-variant-numeric: tabular-nums !important;
}

/* The primary "+ Add / New" = Digit primary button (already brand via §5, but
   assert radius + soft brand shadow in embed for SPA parity). */
html.digit-embedded .page-actions .btn-primary,
html.digit-embedded .list-paging-area .btn-primary,
html.digit-embedded .primary-action {
	background: var(--digit-brand) !important;
	border-color: var(--digit-brand) !important;
	color: #fff !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 16px -8px var(--digit-brand) !important;
}
html.digit-embedded .page-actions .btn-primary:hover,
html.digit-embedded .primary-action:hover {
	filter: brightness(1.05) !important;
	box-shadow: 0 9px 22px -8px var(--digit-brand) !important;
}

/* List toolbar: filters / sort / search styled like the SPA .filter-input
   (rounded ~9px, translucent border, brand focus ring). */
html.digit-embedded .filter-selector .btn,
html.digit-embedded .sort-selector .btn,
html.digit-embedded .filter-section .btn,
html.digit-embedded .standard-filter-section .form-control,
html.digit-embedded .list-filters .form-control,
html.digit-embedded .filter-box .form-control,
html.digit-embedded .list-paging-area .form-control {
	border: 1px solid var(--digit-border) !important;
	border-radius: 9px !important;
	background: var(--digit-card) !important;
	color: var(--digit-body) !important;
	font-size: 12px !important;
	box-shadow: none !important;
	transition: border-color 0.13s ease, box-shadow 0.13s ease !important;
}
html.digit-embedded .standard-filter-section .form-control:focus,
html.digit-embedded .list-filters .form-control:focus,
html.digit-embedded .filter-box .form-control:focus {
	border-color: var(--digit-brand) !important;
	box-shadow: var(--digit-focus) !important;
}
html.digit-embedded .filter-selector .btn:hover,
html.digit-embedded .sort-selector .btn:hover {
	border-color: rgba(10, 135, 84, 0.4) !important;
	color: var(--digit-brand-deep) !important;
}

/* Applied filter tags read as soft brand chips, not blue. */
html.digit-embedded .filter-pill,
html.digit-embedded .tag-pill,
html.digit-embedded .filter-button-group .btn.btn-default {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
	border-color: rgba(10, 135, 84, 0.22) !important;
	border-radius: 999px !important;
}

/* Sidebar group titles + active row counts inside the list side panel = brand. */
html.digit-embedded .list-sidebar .list-link > a:hover,
html.digit-embedded .layout-side-section .sidebar-menu > li > a:hover {
	color: var(--digit-brand-deep) !important;
}

/* Remove leftover hard ERPNext-blue link/accent in embed → Digit brand.
   Excludes list/grid subjects + cell content, which keep their ink color
   (set above) and only turn brand on hover. */
html.digit-embedded .text-primary,
html.digit-embedded .text-blue,
html.digit-embedded a.btn-open {
	color: var(--digit-brand) !important;
}
html.digit-embedded .list-row-checkbox:checked,
html.digit-embedded input[type="checkbox"]:checked {
	accent-color: var(--digit-brand) !important;
}

/* Thin themed scrollbars inside the embed. */
html.digit-embedded *::-webkit-scrollbar {
	width: 10px !important;
	height: 10px !important;
}
html.digit-embedded *::-webkit-scrollbar-track {
	background: transparent !important;
}
html.digit-embedded *::-webkit-scrollbar-thumb {
	background: var(--digit-border) !important;
	border-radius: 999px !important;
	border: 2px solid transparent !important;
	background-clip: padding-box !important;
}
html.digit-embedded *::-webkit-scrollbar-thumb:hover {
	background: rgba(10, 135, 84, 0.4) !important;
	background-clip: padding-box !important;
}
html.digit-embedded * {
	scrollbar-width: thin !important;
	scrollbar-color: var(--digit-border) transparent !important;
}

/* Report-view datatable cells/headers consistent with the list card. */
html.digit-embedded .report-wrapper .dt-cell,
html.digit-embedded .datatable .dt-cell {
	border-color: var(--digit-border-soft) !important;
}

/* Dark: brand-mint hover border families for the list card + filters. */
html.digit-embedded[data-theme="dark"] .filter-selector .btn:hover,
html.digit-embedded[data-theme="dark"] .sort-selector .btn:hover {
	border-color: rgba(10, 135, 84, 0.4) !important;
}
html.digit-embedded[data-theme="dark"] .list-row:hover,
html.digit-embedded[data-theme="dark"] .datatable .dt-row:hover .dt-cell {
	background: var(--digit-brand-soft) !important;
}

/* ============================================================================
   EMBED · SENIOR-DESIGNER POLISH v22 — TABLES · BADGES · EDGES · SPACING.
   Root-cause fix for "heavy gridlines / cramped cells / tiny headers": rather
   than fighting dozens of .dt-cell selectors with !important, we override
   frappe-datatable's OWN custom properties (--dt-*) at the .datatable scope so
   the change cascades to every rendered cell, header, hover + selection. We
   then convert the full per-cell box into quiet HORIZONTAL-only separators
   (the SPA .dt look). Everything reads bridged --digit-* tokens → light + dark
   both work. Scoped to html.digit-embedded; the standalone admin desk is
   untouched. Mirrors frontend/src/blueprint.css (.dt, .bdg) + index.css.
   ============================================================================ */

/* ---- 1a. Datatable variable bridge (list report view + form child grids) ----
   This is the lever: map every frappe-datatable default onto Digit tokens.
   Quiet border, paper header fill, comfortable cell padding, soft radius,
   brand selection/hover, ink text. */
html.digit-embedded .datatable {
	--dt-border-color: var(--digit-border-soft) !important;
	--dt-cell-bg: var(--digit-card) !important;
	--dt-header-cell-bg: var(--digit-surface-2, #F1F5F2) !important;
	--dt-text-color: var(--digit-body) !important;
	--dt-light-bg: var(--digit-emerald-soft) !important;
	--dt-primary-color: var(--digit-brand) !important;
	--dt-selection-highlight-color: var(--digit-brand-soft) !important;
	--dt-spacer-2: 9px !important;
	--dt-spacer-3: 12px !important;
	--dt-border-radius: 6px !important;
	--dt-focus-border-width: 1px !important;
}

/* Drop the heavy top rule the scrollable adds; let the card border carry it. */
html.digit-embedded .datatable .dt-scrollable {
	border-top: 1px solid var(--digit-border) !important;
}

/* Quiet the gridlines: kill vertical inter-column borders, keep a single 1px
   horizontal separator per row. This removes the "boxed every cell" look. */
html.digit-embedded .datatable .dt-cell {
	border-right: 0 !important;
	border-left: 0 !important;
	border-top: 0 !important;
	border-bottom: 1px solid var(--digit-border-soft) !important;
	background-clip: padding-box !important;
}
html.digit-embedded .datatable .dt-cell:first-child,
html.digit-embedded .datatable .dt-cell:last-child {
	border-left: 0 !important;
	border-right: 0 !important;
}

/* Consistent comfortable row rhythm. */
html.digit-embedded .datatable .dt-cell__content {
	padding: 9px 12px !important;
	min-height: 38px !important;
	display: flex !important;
	align-items: center !important;
	font-size: 12.5px !important;
}

/* Header: small (12px) letter-spaced, surface-2 fill, no harsh bottom rule —
   a single quiet 1px border-bottom. Frappe-datatable bolds headers; we reset to
   a refined 700.
   ROOT-CAUSE FIX (dark greenish header bar in query-reports): Frappe's desk
   scss (frappe_datatable.scss) hardcodes
     .dt-cell--header .dt-cell__content { background-color: var(--subtle-fg); }
   directly on the CONTENT element — and our tokens map --subtle-fg → --digit-muted
   (a mid gray-green INK, not a surface), so the report header content painted a
   solid dark bar with the label (also --digit-muted) the SAME color → invisible.
   The --dt-header-cell-bg bridge only colors .dt-cell--header, never the inner
   .dt-cell__content, so it never reached this. We override the content bg to
   --digit-surface-2 and set a READABLE label color (--digit-body, NOT --digit-muted)
   so labels contrast against the surface in both themes. */
html.digit-embedded .datatable .dt-cell--header {
	background-color: var(--digit-surface-2) !important;
	border-bottom: 1px solid var(--digit-border) !important;
}
html.digit-embedded .datatable .dt-cell--header .dt-cell__content {
	background-color: var(--digit-surface-2) !important;
	color: var(--digit-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
}

/* Numeric cells right-aligned + Archivo tabular (frappe adds .dt-cell--col with
   .text-right; also catch right-aligned content). */
html.digit-embedded .datatable .dt-cell .text-right,
html.digit-embedded .datatable .dt-cell--header .text-right {
	font-family: var(--digit-font-latin) !important;
	font-variant-numeric: tabular-nums !important;
	justify-content: flex-end !important;
}

/* Soft brand row hover (whole row, via the --dt var + an explicit assert). */
html.digit-embedded .datatable .dt-row:hover .dt-cell {
	background-color: var(--digit-emerald-soft) !important;
}

/* ---- 1b. List view (the desk LIST is .list-row, not datatable) ---- */
/* Vertical lane alignment: fixed-width, non-shrinking leading checkbox slot +
   trailing activity slot so every row's icon column + actions line up. */
html.digit-embedded .list-row .level-item.select-like,
html.digit-embedded .list-row-head .level-item.select-like {
	flex: 0 0 24px !important;
	width: 24px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
html.digit-embedded .list-row .list-row-activity {
	flex: 0 0 auto !important;
	min-width: 84px !important;
	justify-content: flex-end !important;
	color: var(--digit-muted) !important;
	font-size: 11.5px !important;
}
/* BUG — STRAY SHADED BOX ON THE DATA-ROW ACTIVITY CLUSTER (heart + comment
   count + age "1د"). Root cause: frappe list.scss paints `.list-row .level-right`
   (the sticky trailing cell holding that cluster) with `background-color: var(--bg-color)`
   + `border-left: 2px solid var(--highlight-color)` (list.scss L155-161), and on
   hover with `var(--highlight-color)` bg + a `-5px box-shadow` lip (L103-105/144-148).
   Digit maps `--bg-color` to `--digit-paper` (a greyish surface) while the row sits
   on white/dark card, and `--highlight-color` is unmapped (grey) — so that cell shows
   as a distinct shaded rectangle with a left border + box-shadow edge, picking up a
   greenish cast from the emerald row hover. Our earlier fix only neutralized the
   HEADER side cells. Neutralize the DATA-ROW activity area to transparent so it inherits
   the row background, drop the border, and keep the hover highlight on the FULL row only
   (no separate tinted/box-shadowed activity box). Scoped to the embedded LIST data rows. */
html.digit-embedded .list-row:not(.list-row-head) .level-right,
html.digit-embedded .list-row:not(.list-row-head) .level-right:hover,
html.digit-embedded .list-row:not(.list-row-head):hover .level-right,
html.digit-embedded .list-row:not(.list-row-head) .list-row-activity,
html.digit-embedded .list-row:not(.list-row-head) .comment-count {
	background: transparent !important;
	border-left: 0 !important;
	box-shadow: none !important;
}
html.digit-embedded .list-row,
html.digit-embedded .list-row-head {
	align-items: center !important;
}
/* Subject + every list column inherit a consistent 12.5px body size (nothing
   below 12px) and vertical centering. */
html.digit-embedded .list-row-col .ellipsis,
html.digit-embedded .list-row .list-subject {
	font-size: 12.5px !important;
	min-height: 20px !important;
}
/* List header: small muted letter-spaced, matches datatable header. */
html.digit-embedded .list-row-head,
html.digit-embedded .list-row-head .list-row-col {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	color: var(--digit-muted) !important;
}
/* List count ("1 of 23") reads as a quiet muted caption. */
html.digit-embedded .list-count {
	color: var(--digit-muted) !important;
	font-size: 12px !important;
	font-family: var(--digit-font-latin) !important;
	font-variant-numeric: tabular-nums !important;
}

/* ---- 2. BADGES / indicators as clean rounded pills (mirrors .bdg) ----
   The list status renders as an .indicator-pill with a colored leading dot
   (::before). Keep the dot but seat it inside a real token-colored pill with
   comfortable padding — never a raw dot on bare text or a hard box. */
html.digit-embedded .indicator-pill,
html.digit-embedded .list-row .indicator-pill,
html.digit-embedded .indicator-pill.ellipsis {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	min-height: 21px !important;
	padding: 2.5px 9px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	border: 0 !important;
}
/* Token color families (ok / warn / err / info / neutral). */
html.digit-embedded .indicator-pill.green,
html.digit-embedded .indicator-pill.darkgreen {
	background: var(--digit-success-bg) !important;
	color: var(--digit-success) !important;
}
html.digit-embedded .indicator-pill.orange,
html.digit-embedded .indicator-pill.yellow {
	background: var(--digit-warning-bg) !important;
	color: var(--digit-warning) !important;
}
html.digit-embedded .indicator-pill.red,
html.digit-embedded .indicator-pill.pink {
	background: var(--digit-error-bg) !important;
	color: var(--digit-error) !important;
}
html.digit-embedded .indicator-pill.blue,
html.digit-embedded .indicator-pill.purple,
html.digit-embedded .indicator-pill.cyan {
	background: var(--digit-info-bg) !important;
	color: var(--digit-info) !important;
}
html.digit-embedded .indicator-pill.gray,
html.digit-embedded .indicator-pill.grey {
	background: var(--digit-surface-2, #F1F5F2) !important;
	color: var(--digit-muted) !important;
}
/* The leading status dot = currentColor (inherits the pill's token fg). */
html.digit-embedded .indicator-pill::before {
	background: currentColor !important;
	width: 6px !important;
	height: 6px !important;
}

/* ---- 3. PAGE-LENGTH selector + Load More as quiet Digit controls ---- */
/* The 20/100/500/2500 group is a .btn-group of .btn-paging (active=.btn-info). */
html.digit-embedded .list-paging-area {
	padding: 12px 14px !important;
	border-top: 1px solid var(--digit-border-soft) !important;
}
html.digit-embedded .list-paging-area .btn-group {
	border: 1px solid var(--digit-border) !important;
	border-radius: 9px !important;
	overflow: hidden !important;
	background: var(--digit-card) !important;
}
html.digit-embedded .list-paging-area .btn-paging,
html.digit-embedded .list-paging-area .btn-more {
	background: var(--digit-card) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--digit-muted) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	font-family: var(--digit-font-latin) !important;
	box-shadow: none !important;
	min-height: 30px !important;
	padding: 4px 12px !important;
}
html.digit-embedded .list-paging-area .btn-group .btn-paging + .btn-paging {
	border-inline-start: 1px solid var(--digit-border-soft) !important;
}
html.digit-embedded .list-paging-area .btn-paging:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
/* Active page length = soft brand pill (frappe stamps .btn-info on it). */
html.digit-embedded .list-paging-area .btn-paging.btn-info {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
html.digit-embedded .list-paging-area .btn-more {
	border: 1px solid var(--digit-border) !important;
	border-radius: 9px !important;
}
html.digit-embedded .list-paging-area .btn-more:hover {
	background: var(--digit-brand-soft) !important;
	border-color: rgba(10, 135, 84, 0.4) !important;
	color: var(--digit-brand-deep) !important;
}

/* ---- 3b. List toolbar grouping: group the Add / Saved Filters / List View
   controls into a single quiet bar with breathing room. ---- */
html.digit-embedded .list-row-head.text-muted {
	border-radius: 0 !important;
}
html.digit-embedded .frappe-list .filter-section,
html.digit-embedded .frappe-list .list-filters {
	gap: 8px !important;
}

/* ---- 4. DARK overrides for the polish above. The --dt var bridge already
   flips with the tokens, but assert the few spots that need a dark-specific
   value. ---- */
html.digit-embedded[data-theme="dark"] .datatable {
	--dt-cell-bg: var(--digit-card) !important;
	--dt-header-cell-bg: var(--digit-paper) !important;
	--dt-text-color: var(--digit-body) !important;
}
html.digit-embedded[data-theme="dark"] .datatable .dt-cell {
	background-color: var(--digit-card) !important;
}
/* Dark report/list header: a present (not invisible) dark surface + readable
   ink. Beats Frappe's hardcoded .dt-cell__content { bg: var(--subtle-fg) }. */
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header .dt-cell__content {
	background-color: var(--digit-paper) !important;
	color: var(--digit-ink) !important;
}
html.digit-embedded[data-theme="dark"] .datatable .dt-row:hover .dt-cell {
	background-color: var(--digit-brand-soft) !important;
}
html.digit-embedded[data-theme="dark"] .list-paging-area .btn-group,
html.digit-embedded[data-theme="dark"] .list-paging-area .btn-paging,
html.digit-embedded[data-theme="dark"] .list-paging-area .btn-more {
	background: var(--digit-card) !important;
}

/* ============================================================================
   5. QUERY-REPORT POLISH — toolbar, filter row, totals, footer.
   Scoped to the report (.report-view / .page-form holding report filters) so
   the desk list view is untouched. Minimalist: quiet bordered controls, sane
   spacing, subtly-emphasized totals, muted tidy footer. All functionality
   (filters, actions, export, drill-down, sort) is preserved — we only restyle.
   ============================================================================ */

/* Filter row: reclaim the empty gap, calm the control bar. The report mounts
   its filters inside .page-form; give it breathing room + a quiet baseline. */
html.digit-embedded .report-view .page-form,
html.digit-embedded .page-form:has(.report-wrapper ~ *),
html.digit-embedded .page-form .standard-filter-section {
	gap: 8px !important;
	row-gap: 8px !important;
	padding: 8px 0 !important;
	align-items: center !important;
}

/* Quiet bordered filter controls, matching the list .filter-input look. */
html.digit-embedded .page-form .form-group .form-control,
html.digit-embedded .page-form .form-group input,
html.digit-embedded .page-form .form-group select,
html.digit-embedded .report-view .form-group .form-control {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 6px !important;
	color: var(--digit-body) !important;
	height: 30px !important;
	font-size: 12.5px !important;
}
html.digit-embedded .page-form .form-group .form-control:focus,
html.digit-embedded .report-view .form-group .form-control:focus {
	border-color: var(--digit-brand) !important;
	box-shadow: 0 0 0 2px var(--digit-brand-soft) !important;
}
/* Filter labels muted + compact (don't shout). */
html.digit-embedded .page-form .form-group .control-label,
html.digit-embedded .report-view .form-group .control-label {
	color: var(--digit-muted) !important;
	font-size: 11px !important;
	letter-spacing: 0.02em !important;
	margin-bottom: 2px !important;
}

/* Toolbar (Actions / refresh / menu "...") — quiet bordered secondary buttons,
   brand-tinted hover. The primary stays the brand button (rule in section 3). */
html.digit-embedded .page-actions .btn-secondary,
html.digit-embedded .page-actions .btn-default,
html.digit-embedded .page-actions .menu-btn-group .btn,
html.digit-embedded .page-actions .standard-actions .btn {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 6px !important;
	color: var(--digit-body) !important;
}
html.digit-embedded .page-actions .btn-secondary:hover,
html.digit-embedded .page-actions .btn-default:hover,
html.digit-embedded .page-actions .menu-btn-group .btn:hover {
	border-color: var(--digit-brand) !important;
	color: var(--digit-brand-deep) !important;
}

/* Totals / closing row: subtle emphasis — surface-2 fill + stronger ink +
   tabular numerics, a quiet top rule to set it off from the data rows. */
html.digit-embedded .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded .datatable .dt-row-totalRow .dt-cell__content {
	background-color: var(--digit-surface-2) !important;
	color: var(--digit-ink) !important;
	font-weight: 700 !important;
	border-top: 1px solid var(--digit-border) !important;
}
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell__content {
	background-color: var(--digit-paper) !important;
	color: var(--digit-ink) !important;
}

/* Report summary band (the figures strip some reports show above the table). */
html.digit-embedded .report-summary {
	border: 1px solid var(--digit-border) !important;
	border-radius: 8px !important;
	background: var(--digit-card) !important;
	padding: 10px 14px !important;
}

/* Footer (execution time / help) — muted, small, tidy. */
html.digit-embedded .report-footer,
html.digit-embedded .report-footer .text-muted,
html.digit-embedded .form-message.small {
	color: var(--digit-muted) !important;
	font-size: 11.5px !important;
	border-top: 1px solid var(--digit-border-soft) !important;
	padding-top: 8px !important;
	margin-top: 8px !important;
}

/* ============================================================================
   6. QUERY-REPORT FULL-TOOLSET VISIBILITY — embed_v26.
   GOAL: the EMBEDDED native Frappe query-report (route `query-report/<Name>`,
   served via /digit/embed) must expose its COMPLETE native toolset — every
   filter + Refresh + the page menu "..." (Print / Export → Excel·CSV / PDF /
   Setup Auto Email / Add Column / User Permissions / Save) + Actions + the
   primary "Generate/Run" button — clearly visible and legible, in light + dark.
   This is FUNCTIONAL COMPLETENESS, not a redesign: we only assert visibility +
   quiet Digit theming; we never hide or restructure a control.

   ROOT-CAUSE this section fixes — the §5 polish above is gated on selectors that
   DON'T exist on the native query-report page (it is `frappe.standard_pages
   ["query-report"]`, a single_column app page — NOT `.report-view`, and its
   filters are added straight into `.page-form` as `.form-group` children, never
   wrapped in `.standard-filter-section`; the `.report-wrapper` is a SIBLING of
   `.page-form`, not a descendant). So `.report-view .page-form`,
   `.page-form:has(.report-wrapper ~ *)` and `.page-form .standard-filter-section`
   all match NOTHING here — the filter BAR got no layout/visibility assertion and
   the toolbar icons (Refresh, "...") were never affirmed legible. The control
   INPUTS were styled (the `.page-form .form-group .form-control` rule matches),
   but the bar + icon controls + control wrappers were not. We target the real
   DOM directly below. Audit confirmed: NO embed rule hides any report control —
   the global-chrome hide block (≈L853) only touches navbar/body-sidebar/
   breadcrumb/sidebar sections, and the list-sidebar hide (≈L939) is scoped
   `:has(.list-sidebar)`, which a query-report's side section never contains.
   Verified against apps/frappe .../ui/page.html + views/reports/query_report.js.
   ============================================================================ */

/* 6a. PAGE HEAD + ACTIONS bar — affirm the whole toolbar is shown. The page-head
   template (ui/page.html) carries the page menu, Actions group, primary action
   and the icon group; the embed global-chrome hide block must never swallow it.
   Defence-in-depth assert (these are NOT in the hide block — this guarantees a
   future hide rule can't clip them). */
html.digit-embedded .page-head,
html.digit-embedded .page-head .standard-items-section,
html.digit-embedded .page-actions,
html.digit-embedded .page-actions .standard-actions,
html.digit-embedded .page-actions .custom-actions,
html.digit-embedded .page-actions .custom-mobile-actions,
html.digit-embedded .page-actions .menu-btn-group,
html.digit-embedded .page-actions .actions-btn-group,
html.digit-embedded .page-actions .page-icon-group,
html.digit-embedded .page-actions .filters {
	visibility: visible !important;
	opacity: 1 !important;
}
/* Let the toolbar WRAP instead of clipping when the iframe is narrow, so no
   action is ever pushed out of view / hidden behind an overflow edge. */
html.digit-embedded .page-head .page-head-content {
	flex-wrap: wrap !important;
	row-gap: 6px !important;
}
html.digit-embedded .page-actions {
	flex-wrap: wrap !important;
	gap: 6px !important;
	overflow: visible !important;
}

/* 6b. The page menu "..." button — the single most important discoverability
   target (it holds Print / Export → Excel·CSV / PDF / Setup / Add Column / Save).
   Frappe renders it as `.menu-btn-group > button.menu-more-button` with a faint
   dot-horizontal glyph. Make it a clearly-bordered, legible Digit control so the
   user can SEE it carries actions (not a ghost icon). */
html.digit-embedded .page-actions .menu-btn-group .btn,
html.digit-embedded .page-actions .menu-more-button {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 6px !important;
	color: var(--digit-body) !important;
	min-height: 30px !important;
	min-width: 34px !important;
	box-shadow: none !important;
}
html.digit-embedded .page-actions .menu-btn-group .btn:hover,
html.digit-embedded .page-actions .menu-more-button:hover {
	border-color: var(--digit-brand) !important;
	color: var(--digit-brand-deep) !important;
	background: var(--digit-brand-soft) !important;
}
html.digit-embedded .page-actions .menu-btn-group .btn .icon,
html.digit-embedded .page-actions .menu-more-button .icon,
html.digit-embedded .page-actions .menu-btn-group .btn use,
html.digit-embedded .page-actions .menu-more-button use {
	stroke: currentColor !important;
	fill: none !important;
	color: inherit !important;
}

/* 6c. The Refresh icon-button (page.add_action_icon → `.page-icon-group .icon-btn`,
   ships as `.text-muted btn btn-default icon-btn`). The native `.text-muted`
   makes the glyph low-contrast; give it the same quiet bordered Digit control
   look + a legible body-ink glyph so Refresh is obviously clickable. */
html.digit-embedded .page-actions .page-icon-group .icon-btn,
html.digit-embedded .page-actions .standard-actions .icon-btn {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 6px !important;
	color: var(--digit-body) !important;
	min-height: 30px !important;
	min-width: 34px !important;
	box-shadow: none !important;
}
html.digit-embedded .page-actions .icon-btn:hover {
	border-color: var(--digit-brand) !important;
	color: var(--digit-brand-deep) !important;
	background: var(--digit-brand-soft) !important;
}
html.digit-embedded .page-actions .icon-btn .icon,
html.digit-embedded .page-actions .icon-btn use {
	stroke: currentColor !important;
	fill: none !important;
}

/* 6d. The page MENU dropdown itself (Print / Export → Excel·CSV / PDF / Setup /
   Add Column / User Permissions / Save). The general `.dropdown-menu` rules
   (§1 + the dark bridge ≈L954) already theme it onto the light/dark card; assert
   comfortable, clearly-labelled items so each native action reads cleanly and is
   easy to hit. We do NOT rebuild the menu — this is Frappe's native dropdown. */
html.digit-embedded .menu-btn-group .dropdown-menu {
	min-width: 200px !important;
	max-height: 70vh !important;
	overflow-y: auto !important;
}
html.digit-embedded .menu-btn-group .dropdown-menu .dropdown-item,
html.digit-embedded .menu-btn-group .dropdown-menu a.grey-link {
	color: var(--digit-body) !important;
	font-size: 12.5px !important;
	padding: 7px 12px !important;
	white-space: nowrap !important;
}
html.digit-embedded .menu-btn-group .dropdown-menu .dropdown-item:hover,
html.digit-embedded .menu-btn-group .dropdown-menu a.grey-link:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
/* The keyboard-shortcut hint Frappe appends to menu items stays quiet but legible. */
html.digit-embedded .menu-btn-group .dropdown-menu .kbd,
html.digit-embedded .menu-btn-group .dropdown-menu kbd {
	background: var(--digit-surface-2, #F1F5F2) !important;
	color: var(--digit-muted) !important;
	border: 1px solid var(--digit-border) !important;
}

/* 6e. FILTER BAR (the rules §5 intended but couldn't reach). Native filters mount
   straight into `.page-form` as `.form-group`/`.frappe-control` children. Give
   the bar real breathing room + assert it is shown (page.show_form removes the
   template's `hide`, but assert against any residual). */
html.digit-embedded .page-form {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 8px 10px !important;
	padding: 10px 2px !important;
	margin-bottom: 4px !important;
}
/* Each filter field: legible wrapper + label, comfortable width so it doesn't
   clip. (add_field stamps `.col-md-2` on the wrapper; let it size to content
   within a sane min/max instead of a rigid 16% column that truncates labels.) */
html.digit-embedded .page-form .frappe-control,
html.digit-embedded .page-form .form-group {
	margin-bottom: 0 !important;
	min-width: 150px !important;
	flex: 0 1 auto !important;
}
html.digit-embedded .page-form .frappe-control .control-label,
html.digit-embedded .page-form .form-group .control-label {
	display: block !important;
	color: var(--digit-muted) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	margin-bottom: 3px !important;
	white-space: nowrap !important;
}
/* All filter input flavours (Data / Select / Link / Date) read as quiet bordered
   Digit controls — covers `.input-with-feedback`, `select`, and the link/date
   inner input that some controls render without `.form-control`. */
html.digit-embedded .page-form .form-control,
html.digit-embedded .page-form .input-with-feedback,
html.digit-embedded .page-form select,
html.digit-embedded .page-form .frappe-control input {
	background: var(--digit-card) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 6px !important;
	color: var(--digit-body) !important;
	height: 30px !important;
	font-size: 12.5px !important;
	box-shadow: none !important;
}
html.digit-embedded .page-form .form-control:focus,
html.digit-embedded .page-form .input-with-feedback:focus,
html.digit-embedded .page-form .frappe-control input:focus {
	border-color: var(--digit-brand) !important;
	box-shadow: 0 0 0 2px var(--digit-brand-soft) !important;
}
html.digit-embedded .page-form .form-control::placeholder,
html.digit-embedded .page-form .frappe-control input::placeholder {
	color: var(--digit-muted) !important;
}
/* Link/Date field affordances (the clear "x" / search / calendar glyph in
   `.link-btn`) stay visible + on-brand on hover, not invisible. */
html.digit-embedded .page-form .link-btn,
html.digit-embedded .page-form .link-btn .btn-open,
html.digit-embedded .page-form .control-value {
	color: var(--digit-muted) !important;
}
html.digit-embedded .page-form .link-btn:hover {
	color: var(--digit-brand) !important;
}

/* 6f. Primary / Actions buttons — the brand primary "Generate/Run/Actions" button
   already brand-styled (§3 / §5 .page-actions .btn-primary). Assert the Actions
   dropdown group button matches the brand primary so it's clearly the call to
   action, and the secondary stays a quiet bordered control. */
html.digit-embedded .page-actions .actions-btn-group .btn-primary {
	background: var(--digit-brand) !important;
	border-color: var(--digit-brand) !important;
	color: #fff !important;
	border-radius: 6px !important;
}
html.digit-embedded .page-actions .actions-btn-group .btn-primary:hover {
	background: var(--digit-brand-deep) !important;
	border-color: var(--digit-brand-deep) !important;
}

/* 6g. DARK — assert legible glyphs on the quiet bordered toolbar controls (the
   token bridge flips the surfaces; these assert the icon contrast). */
html.digit-embedded[data-theme="dark"] .page-actions .menu-btn-group .btn,
html.digit-embedded[data-theme="dark"] .page-actions .menu-more-button,
html.digit-embedded[data-theme="dark"] .page-actions .icon-btn {
	background: var(--digit-card) !important;
	border-color: var(--digit-border) !important;
	color: var(--digit-body) !important;
}
html.digit-embedded[data-theme="dark"] .page-actions .menu-btn-group .btn:hover,
html.digit-embedded[data-theme="dark"] .page-actions .menu-more-button:hover,
html.digit-embedded[data-theme="dark"] .page-actions .icon-btn:hover {
	background: var(--digit-brand-soft) !important;
	border-color: var(--digit-brand) !important;
	color: var(--digit-ink) !important;
}
html.digit-embedded[data-theme="dark"] .menu-btn-group .dropdown-menu .dropdown-item,
html.digit-embedded[data-theme="dark"] .menu-btn-group .dropdown-menu a.grey-link {
	color: var(--digit-body) !important;
}
html.digit-embedded[data-theme="dark"] .menu-btn-group .dropdown-menu .dropdown-item:hover,
html.digit-embedded[data-theme="dark"] .menu-btn-group .dropdown-menu a.grey-link:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-ink) !important;
}

/* ============================================================================
   7. embed_v27 — FIX 1: DISCOVERABLE "SHOW ALL FILTERS" TOGGLE (query-report).
   ROOT CAUSE: for a report with `collapsible_filters: true` (e.g. General Ledger),
   query_report.js `add_collapse_button()` (apps/frappe .../views/reports/
   query_report.js L635) appends a BARE, UNLABELED `<div>` containing only
   `frappe.utils.icon("chevron-down","md")` — i.e. `<div><svg class="icon icon-md">
   <use href="#icon-chevron-down"></use></svg></div>` — into the LAST visible
   filter's `.frappe-control` wrapper inside `.page-form`. It has no class, no
   border and no text, so the control that reveals ALL the report's hidden filters
   (From/To Date, Account, Party, Voucher, …) reads as a faint stray chevron and is
   not discoverable. `toggle_filter_visiblity()` (L615) only swaps the chevron
   direction and removes `.hidden` from the extra filter wrappers — so once expanded
   every filter is just a normal `.frappe-control` (already styled legibly by §6e).

   FIX (CSS only, native control kept): target that bare div precisely —
   `.page-form .frappe-control > div:has(> svg.icon use[href*="chevron"])` — and turn
   it into an OBVIOUS bordered Digit button labeled "الفلاتر / Filters" via `::before`
   content, with the chevron kept on the trailing side. We do NOT rebuild it in JS;
   the same div still fires `toggle_filter_visiblity` on click. */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 30px !important;
	padding: 0 12px !important;
	margin-inline-start: 4px !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 8px !important;
	background: var(--digit-card) !important;
	color: var(--digit-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	transition: border-color 0.13s ease, background 0.13s ease, color 0.13s ease !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"])::before {
	content: "الفلاتر / Filters" !important;
	color: inherit !important;
	font-family: var(--digit-font-arabic) !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]):hover {
	border-color: var(--digit-brand) !important;
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
/* The kept chevron glyph: a legible body-ink stroke (not the faint default), on
   the trailing edge after the label. */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) > svg.icon {
	width: 14px !important;
	height: 14px !important;
	order: 2 !important;
	color: inherit !important;
	stroke: currentColor !important;
	fill: none !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) > svg.icon use {
	stroke: currentColor !important;
	fill: none !important;
}

/* ============================================================================
   8. embed_v27 — FIX 2: NEUTRAL, COMFORTABLE TABLE COLORING (system-wide).
   ROOT CAUSE: table chrome carried a GREEN cast in two ways — (1) header fill used
   `--digit-surface-2` which in light is `#F1F5F2`, a green-grey; (2) every row
   hover (list, report datatable, child grid) used `--digit-emerald-soft`
   (`rgba(10,135,84,0.08)`), a brand-emerald tint. Re-point ALL structural table
   header fills + hovers at the new NEUTRAL tokens (`--digit-table-header` /
   `--digit-table-hover`) so tables read calm/neutral in both themes. Brand color is
   preserved for genuine accents (links, primary buttons, status pills). These rules
   are LAST in the cascade and repeat the earlier selectors verbatim (equal
   specificity → later wins), so they cleanly supersede the green declarations above
   without raising specificity. */

/* --- 8a. Header fill: neutral grey (light) / subtle white film (dark). Covers the
   list header, list datatable, report datatable + its inner content cell (which
   Frappe paints separately via --subtle-fg), and the --dt header bridge var. --- */
html.digit-embedded .datatable {
	--dt-header-cell-bg: var(--digit-table-header) !important;
	--dt-light-bg: var(--digit-table-hover) !important;
}
html.digit-embedded .list-row-head,
html.digit-embedded .datatable .dt-header,
html.digit-embedded .report-wrapper .dt-header,
html.digit-embedded .datatable .dt-cell--header,
html.digit-embedded .datatable .dt-cell--header .dt-cell__content {
	background: var(--digit-table-header) !important;
	background-color: var(--digit-table-header) !important;
}
/* Header side cells (favorites/like + count column) match the neutral header. */
html.digit-embedded .list-row-head .level-right,
html.digit-embedded .list-row-head .level-right:hover,
html.digit-embedded .list-row-head:hover .level-right,
html.digit-embedded .list-row-head .level-left,
html.digit-embedded .list-row-head .level-item.select-like {
	background: var(--digit-table-header) !important;
}

/* --- 8b. Row hover: a VERY subtle neutral tint, not emerald — list + report
   datatable. --- */
html.digit-embedded .list-row:hover,
html.digit-embedded .datatable .dt-row:hover .dt-cell {
	background: var(--digit-table-hover) !important;
	background-color: var(--digit-table-hover) !important;
}

/* --- 8c. Selected / focused report cell: keep a faint neutral, not brand-green,
   on structural selection (brand stays for real accents only). --- */
html.digit-embedded .datatable .dt-cell--focus {
	background-color: var(--digit-table-hover) !important;
}

/* --- 8d. DARK: assert the neutral header + hover (the tokens already flip, but the
   earlier dark blocks hardcoded --digit-paper header + --digit-brand-soft hover —
   supersede them here). --- */
html.digit-embedded[data-theme="dark"] .datatable {
	--dt-header-cell-bg: var(--digit-table-header) !important;
	--dt-light-bg: var(--digit-table-hover) !important;
}
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header .dt-cell__content,
html.digit-embedded[data-theme="dark"] .list-row-head,
html.digit-embedded[data-theme="dark"] .report-wrapper .dt-header {
	background-color: var(--digit-table-header) !important;
	color: var(--digit-ink) !important;
}
html.digit-embedded[data-theme="dark"] .list-row-head .level-right,
html.digit-embedded[data-theme="dark"] .list-row-head .level-right:hover,
html.digit-embedded[data-theme="dark"] .list-row-head:hover .level-right,
html.digit-embedded[data-theme="dark"] .list-row-head .level-left,
html.digit-embedded[data-theme="dark"] .list-row-head .level-item.select-like {
	background: var(--digit-table-header) !important;
}
html.digit-embedded[data-theme="dark"] .list-row:hover,
html.digit-embedded[data-theme="dark"] .datatable .dt-row:hover .dt-cell {
	background: var(--digit-table-hover) !important;
	background-color: var(--digit-table-hover) !important;
}
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--focus {
	background-color: var(--digit-table-hover) !important;
}
/* Totals/closing row keeps its quiet emphasis but on the neutral header surface. */
html.digit-embedded .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded .datatable .dt-row-totalRow .dt-cell__content,
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell__content {
	background-color: var(--digit-table-header) !important;
}

/* ============================================================================
   9. embed_v28 — PREMIUM QUERY-REPORT HEADER (filter toggle + adjacent controls
   + Actions / "..." menu). Builds on §6 + §7. CSS-only, scoped to
   html.digit-embedded, light + dark; no frappe/erpnext core edits. The native
   controls + their JS handlers are untouched — we only restyle.

   DOM (verified against apps/frappe .../ui/page.html + views/reports/
   query_report.js, v16):
   - Filter collapse toggle: a BARE `<div>` (the `$collapse_button` from
     `add_collapse_button()`, L635) containing only `frappe.utils.icon("chevron-
     down","md")`, appended INTO the last visible filter's `.frappe-control`
     wrapper inside `.page-form`. On expand `toggle_filter_visiblity()` (L615)
     flips the inner `<use href>` to `#icon-chevron-up` and `display:flex`-es the
     `.check-filter-area` placeholder in `.page-form`. No label/count node exists.
   - Page menu "...": `.menu-btn-group > button.menu-more-button` (dot-horizontal).
   - Actions: `.actions-btn-group > button.btn-primary` with `.actions-btn-group-
     label` + an `#icon-select` caret. Dropdowns are `.dropdown-menu`.
   - Refresh: `.page-icon-group .icon-btn`.
   There is NO native clear-all / filter-count / bookmark node in the query-report
   page-head (those `.filter-action-buttons`/`.clear-filters` live only in the
   list-view filter popover, filter_list.js) — so for "next-to-filters clarity"
   we make the ONE real adjacent control (the toggle) unmistakable, and label the
   Link-field clear "x" affordance that sits inside each filter.
   ============================================================================ */

/* --- 9a. FILTER TOGGLE → a deliberate, premium pill. Redefine the v27 pill: a
   filled neutral surface, a LEADING funnel glyph (mask-image, inherits
   currentColor), the bilingual label, then the native chevron — all on one calm
   baseline with a refined shadow + crisp focus ring. Later equal-specificity
   rules (vs §7) win, so `::before` is repurposed to the funnel and `::after`
   carries the label. --- */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) {
	gap: 7px !important;
	height: 32px !important;
	padding: 0 13px !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 9px !important;
	background: var(--digit-card) !important;
	color: var(--digit-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	box-shadow: var(--digit-shadow-flat) !important;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease,
		box-shadow 0.16s ease !important;
}
/* Leading funnel glyph (was the v27 label) — a masked SVG so it tints with the
   button ink in both themes. */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"])::before {
	content: "" !important;
	width: 14px !important;
	height: 14px !important;
	flex: 0 0 auto !important;
	order: 0 !important;
	background-color: currentColor !important;
	-webkit-mask: var(--digit-funnel-mask) center / contain no-repeat !important;
	mask: var(--digit-funnel-mask) center / contain no-repeat !important;
}
/* Bilingual label, after the funnel, before the chevron. */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"])::after {
	content: "الفلاتر / Filters" !important;
	order: 1 !important;
	color: inherit !important;
	font-family: var(--digit-font-arabic) !important;
	letter-spacing: 0.01em !important;
	line-height: 1 !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]):hover {
	border-color: var(--digit-brand) !important;
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
	box-shadow: var(--digit-shadow-hover) !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]):focus-visible {
	outline: none !important;
	border-color: var(--digit-brand) !important;
	box-shadow: 0 0 0 3px var(--digit-brand-soft) !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]):active {
	transform: translateY(0.5px) !important;
}
/* EXPANDED state: when JS flips the inner glyph to chevron-up, the whole pill
   reads as "engaged" — a brand-tinted fill + brand border, so the user sees the
   filters are open. */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron-up"]) {
	border-color: var(--digit-brand) !important;
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
/* Animated chevron — keep the native swapped glyph, animate its rotation on the
   trailing edge. (CSS can't read the `use href`, but the rotation + the persistent
   transition makes the open/close read as a smooth turn, and the up-glyph state
   gets an explicit 180° to guarantee the flip is visible.) */
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) > svg.icon {
	width: 13px !important;
	height: 13px !important;
	order: 2 !important;
	margin-inline-start: 1px !important;
	color: inherit !important;
	stroke: currentColor !important;
	fill: none !important;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron-up"]) > svg.icon {
	transform: rotate(180deg) !important;
}
html.digit-embedded .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) > svg.icon use {
	stroke: currentColor !important;
	fill: none !important;
}

/* --- 9b. REVEALED FILTER BAR — when expanded, the formerly-hidden filters lose
   `.hidden` and the `.check-filter-area` placeholder becomes `display:flex`. Give
   that placeholder + the revealed lane a calm aligned rhythm so the opened bar
   reads as one tidy panel rather than a loose sprawl. §6e already styles each
   field; here we tighten the alignment of the freshly-revealed area. --- */
html.digit-embedded .page-form .check-filter-area {
	display: flex !important;
	align-items: flex-end !important;
	gap: 8px 10px !important;
	flex-wrap: wrap !important;
}
/* The funnel-mask token (defined here so it's available regardless of token-file
   load order). A clean outline funnel matching the toggle ink. */
html.digit-embedded {
	--digit-funnel-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
}

/* --- 9c. ACTIONS button → a distinct, labeled Digit control with a clear caret.
   The native Actions group button is a `.btn-primary` inside `.actions-btn-group`;
   §6f already brand-fills it. Elevate: comfortable height, a refined caret, a
   subtle brand shadow so it reads as a real operations menu (not a flat chip). --- */
html.digit-embedded .page-actions .actions-btn-group > .btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 32px !important;
	padding: 0 14px !important;
	border-radius: 8px !important;
	font-weight: 650 !important;
	box-shadow: var(--digit-shadow-flat) !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
html.digit-embedded .page-actions .actions-btn-group > .btn-primary:hover {
	box-shadow: var(--digit-shadow-brand) !important;
}
html.digit-embedded .page-actions .actions-btn-group > .btn-primary:active {
	transform: translateY(0.5px) !important;
}
html.digit-embedded .page-actions .actions-btn-group > .btn-primary .actions-btn-group-label {
	font-size: 12.5px !important;
	letter-spacing: 0.01em !important;
}
/* The caret (#icon-select) — legible, gently animated when the menu is open. */
html.digit-embedded .page-actions .actions-btn-group > .btn-primary .icon {
	width: 13px !important;
	height: 13px !important;
	color: #fff !important;
	stroke: currentColor !important;
	fill: none !important;
	transition: transform 0.18s ease !important;
}
html.digit-embedded .page-actions .actions-btn-group > .btn-primary[aria-expanded="true"] .icon {
	transform: rotate(180deg) !important;
}

/* --- 9d. "..." PAGE MENU → an obvious bordered icon-button (not a ghost glyph).
   §6b borders it; elevate to match the 32px rhythm + a subtle shadow + an
   open-state brand tint so its dropdown anchor is unmistakable. --- */
html.digit-embedded .page-actions .menu-btn-group .menu-more-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 32px !important;
	min-width: 38px !important;
	border-radius: 8px !important;
	box-shadow: var(--digit-shadow-flat) !important;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease,
		box-shadow 0.15s ease !important;
}
html.digit-embedded .page-actions .menu-btn-group .menu-more-button:hover {
	box-shadow: var(--digit-shadow-hover) !important;
}
html.digit-embedded .page-actions .menu-btn-group .menu-more-button[aria-expanded="true"] {
	border-color: var(--digit-brand) !important;
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
html.digit-embedded .page-actions .menu-btn-group .menu-more-button .icon {
	width: 16px !important;
	height: 16px !important;
}

/* --- 9e. ACTIONS dropdown — theme it to match the page menu (§6d only themed the
   `.menu-btn-group` dropdown). Comfortable item spacing, legible labels, brand
   hover, on the Digit card surface in both themes. --- */
html.digit-embedded .actions-btn-group .dropdown-menu {
	min-width: 200px !important;
	max-height: 70vh !important;
	overflow-y: auto !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: 10px !important;
	box-shadow: var(--digit-shadow-hover) !important;
	padding: 5px !important;
}
html.digit-embedded .actions-btn-group .dropdown-menu .dropdown-item,
html.digit-embedded .actions-btn-group .dropdown-menu a.grey-link {
	color: var(--digit-body) !important;
	font-size: 12.5px !important;
	padding: 7px 12px !important;
	border-radius: 6px !important;
	white-space: nowrap !important;
}
html.digit-embedded .actions-btn-group .dropdown-menu .dropdown-item:hover,
html.digit-embedded .actions-btn-group .dropdown-menu a.grey-link:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-brand-deep) !important;
}
/* Match the menu "..." dropdown to the same rounded, padded, item-radiused frame
   for a consistent premium feel. */
html.digit-embedded .menu-btn-group .dropdown-menu {
	border: 1px solid var(--digit-border) !important;
	border-radius: 10px !important;
	box-shadow: var(--digit-shadow-hover) !important;
	padding: 5px !important;
}
html.digit-embedded .menu-btn-group .dropdown-menu .dropdown-item,
html.digit-embedded .menu-btn-group .dropdown-menu a.grey-link {
	border-radius: 6px !important;
}

/* --- 9f. LINK-FIELD CLEAR "x" inside a filter — the one real "clear this filter"
   affordance in the report bar. Make it an obvious, hover-brand control with a
   tooltip-able target (Frappe sets its own title), so its purpose reads. --- */
html.digit-embedded .page-form .frappe-control .link-btn .btn-clear,
html.digit-embedded .page-form .frappe-control .control-input .btn-clear {
	color: var(--digit-muted) !important;
	opacity: 0.85 !important;
	transition: color 0.13s ease, opacity 0.13s ease !important;
}
html.digit-embedded .page-form .frappe-control .link-btn .btn-clear:hover,
html.digit-embedded .page-form .frappe-control .control-input .btn-clear:hover {
	color: var(--digit-brand) !important;
	opacity: 1 !important;
}

/* --- 9g. DARK — assert the premium treatment reads in dark (tokens flip the
   surfaces; these affirm ink/contrast on the new elevations). --- */
html.digit-embedded[data-theme="dark"] .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]) {
	background: var(--digit-card) !important;
	color: var(--digit-body) !important;
	box-shadow: var(--digit-shadow-flat) !important;
}
html.digit-embedded[data-theme="dark"] .page-form .frappe-control > div:has(> svg.icon use[href*="chevron"]):hover,
html.digit-embedded[data-theme="dark"] .page-form .frappe-control > div:has(> svg.icon use[href*="chevron-up"]) {
	background: var(--digit-brand-soft) !important;
	border-color: var(--digit-brand) !important;
	color: var(--digit-ink) !important;
}
html.digit-embedded[data-theme="dark"] .actions-btn-group .dropdown-menu,
html.digit-embedded[data-theme="dark"] .menu-btn-group .dropdown-menu {
	border-color: var(--digit-border) !important;
}
html.digit-embedded[data-theme="dark"] .actions-btn-group .dropdown-menu .dropdown-item,
html.digit-embedded[data-theme="dark"] .actions-btn-group .dropdown-menu a.grey-link {
	color: var(--digit-body) !important;
}
html.digit-embedded[data-theme="dark"] .actions-btn-group .dropdown-menu .dropdown-item:hover,
html.digit-embedded[data-theme="dark"] .actions-btn-group .dropdown-menu a.grey-link:hover {
	background: var(--digit-brand-soft) !important;
	color: var(--digit-ink) !important;
}
html.digit-embedded[data-theme="dark"] .page-actions .menu-btn-group .menu-more-button[aria-expanded="true"] {
	background: var(--digit-brand-soft) !important;
	border-color: var(--digit-brand) !important;
	color: var(--digit-ink) !important;
}

/* ============================================================================
   10. embed_v29 — FORMAL / PLAIN TABLE HEADERS (no fill, light + dark).
   ROOT CAUSE of the user complaint: §8 (v27) repointed every table header at
   `--digit-table-header`, whose DARK value (`rgba(255,255,255,0.04)`) paints a
   muddy dark bar across the report/list header. Frappe applies the header bg on
   the INNER `.dt-cell__content` (via --subtle-fg / --dt-header-cell-bg), so the
   fill survives even when the outer cell is cleared.
   FIX: make ALL embedded table headers FLAT — outer header cell AND inner content
   `background: transparent`, a single strong `1.5px` bottom RULE under the header
   row, and high-contrast strong-weight labels (`--digit-ink`, 700, ≥12px) legible
   in BOTH themes. Matches the SPA `.dt th` formal look. This block is LAST in the
   cascade and repeats §8's selectors at equal-or-higher specificity, so it cleanly
   supersedes the dark fill WITHOUT touching the neutral §8b row hover.
   ============================================================================ */

/* --- 10a. Kill the header-fill bridge vars so Frappe's own .dt-cell__content
   rule (`background: var(--dt-header-cell-bg)`) resolves to transparent. --- */
html.digit-embedded .datatable,
html.digit-embedded[data-theme="dark"] .datatable {
	--dt-header-cell-bg: transparent !important;
}

/* --- 10b. Report datatable header: outer cell + inner content fully transparent,
   one crisp bottom rule, strong readable ink label. --- */
html.digit-embedded .datatable .dt-header,
html.digit-embedded .report-wrapper .dt-header,
html.digit-embedded .datatable .dt-cell--header,
html.digit-embedded .datatable .dt-cell--header .dt-cell__content,
html.digit-embedded[data-theme="dark"] .datatable .dt-header,
html.digit-embedded[data-theme="dark"] .report-wrapper .dt-header,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header .dt-cell__content {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--digit-ink) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
}
/* One strong bottom rule under the whole report header row (drawn on the cell so
   it spans every column without per-column verticals). */
html.digit-embedded .datatable .dt-cell--header,
html.digit-embedded[data-theme="dark"] .datatable .dt-cell--header {
	border-bottom: 1.5px solid var(--digit-border) !important;
}

/* --- 10c. List-view header (.list-row-head): transparent + same bottom rule +
   strong labels; clear the side/like/count lanes too (they inherited the fill). --- */
html.digit-embedded .list-row-head,
html.digit-embedded[data-theme="dark"] .list-row-head {
	background: transparent !important;
	background-color: transparent !important;
	border-bottom: 1.5px solid var(--digit-border) !important;
	color: var(--digit-ink) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
}
html.digit-embedded .list-row-head .list-row-col,
html.digit-embedded[data-theme="dark"] .list-row-head .list-row-col {
	color: var(--digit-ink) !important;
	font-weight: 700 !important;
}
html.digit-embedded .list-row-head .level-right,
html.digit-embedded .list-row-head .level-right:hover,
html.digit-embedded .list-row-head:hover .level-right,
html.digit-embedded .list-row-head .level-left,
html.digit-embedded .list-row-head .level-item.select-like,
html.digit-embedded[data-theme="dark"] .list-row-head .level-right,
html.digit-embedded[data-theme="dark"] .list-row-head .level-right:hover,
html.digit-embedded[data-theme="dark"] .list-row-head:hover .level-right,
html.digit-embedded[data-theme="dark"] .list-row-head .level-left,
html.digit-embedded[data-theme="dark"] .list-row-head .level-item.select-like {
	background: transparent !important;
	background-color: transparent !important;
}

/* --- 10d. Totals / closing row: keep a QUIET emphasis (strong label + a top rule)
   without a dark fill bar — transparent surface, emphasized ink. --- */
html.digit-embedded .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded .datatable .dt-row-totalRow .dt-cell__content,
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell__content {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--digit-ink) !important;
	font-weight: 700 !important;
}
html.digit-embedded .datatable .dt-row-totalRow .dt-cell,
html.digit-embedded[data-theme="dark"] .datatable .dt-row-totalRow .dt-cell {
	border-top: 1.5px solid var(--digit-border) !important;
}

/* ============================================================================
   11. embed_v30 — LIST PRIMARY "ADD" BUTTON (green) + LIST PERCENT PROGRESS BAR.
   CSS-only, scoped to html.digit-embedded, light + dark; no frappe/erpnext core
   edits; standalone desk untouched. This block is LAST in the cascade and
   repeats the real list selectors at high specificity so it cleanly wins.
   ============================================================================ */

/* --- 11a. FIX 1 — PRIMARY "ADD" BUTTON must be BRAND GREEN, not white.
   DOM (apps/frappe .../ui/page.html): the list page-head primary action is
       `.page-actions .standard-actions > button.btn.btn-primary.btn-sm.primary-action`
   (Page.btn_primary, page.js L151). §5 styles `.primary-action` brand-green, but
   §5's later, HIGHER-SPECIFICITY neutralizer
       `html.digit-embedded .page-actions .standard-actions .btn` (≈L1627)
   was written for the secondary/menu/icon buttons that ALSO live in
   `.standard-actions` — and because `.primary-action` IS a `.btn`, that 4-class
   rule (later + more specific than §5's 1-class `.primary-action` and §6's
   `.page-actions .btn-primary`) repainted it to `--digit-card` (white) with a
   grey border. THAT is why the Add button rendered white/outlined.
   FIX: re-assert the brand-green fill on the primary action with a selector that
   out-specifies the neutralizer and is last in the cascade. The secondary
   `btn-default`/`btn-secondary`, the menu "..." and Actions group keep their
   existing styling (their selectors are unchanged). --- */
html.digit-embedded .page-actions .standard-actions .btn.btn-primary.primary-action,
html.digit-embedded .page-actions .standard-actions button.btn-primary.primary-action,
html.digit-embedded .page-actions .btn-primary.primary-action,
html.digit-embedded .standard-actions .primary-action {
	background: var(--digit-brand) !important;
	background-color: var(--digit-brand) !important;
	border: 1px solid var(--digit-brand) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	box-shadow: 0 1px 2px rgba(6, 78, 59, 0.18) !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
html.digit-embedded .page-actions .standard-actions .btn.btn-primary.primary-action:hover,
html.digit-embedded .page-actions .standard-actions button.btn-primary.primary-action:hover,
html.digit-embedded .page-actions .btn-primary.primary-action:hover,
html.digit-embedded .standard-actions .primary-action:hover {
	background: var(--digit-brand-deep) !important;
	background-color: var(--digit-brand-deep) !important;
	border-color: var(--digit-brand-deep) !important;
	color: #fff !important;
	box-shadow: var(--digit-shadow-brand, 0 9px 22px -8px var(--digit-brand)) !important;
}
html.digit-embedded .page-actions .standard-actions .btn.btn-primary.primary-action:active,
html.digit-embedded .standard-actions .primary-action:active {
	transform: translateY(0.5px) !important;
}
/* Clear, on-brand focus ring for keyboard users. */
html.digit-embedded .page-actions .standard-actions .btn.btn-primary.primary-action:focus-visible,
html.digit-embedded .standard-actions .primary-action:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px var(--digit-brand-soft) !important;
}
/* White glyph (the "+" icon some doctypes prepend) on the green fill. */
html.digit-embedded .page-actions .standard-actions .primary-action .icon,
html.digit-embedded .page-actions .standard-actions .primary-action use {
	color: #fff !important;
	stroke: currentColor !important;
	fill: none !important;
}

/* --- 11b. FIX 2 — LIST PERCENT COLUMN must read as a real PROGRESS BAR.
   DOM (apps/frappe .../list/list_view.js L944): a `Percent` field (e.g. Sales
   Order `per_delivered` / `per_billed`) renders as
       `<div class="progress"><div class="progress-bar progress-bar-success"
        style="width:X%"></div></div>`
   inside a `.list-row-col`. Core `.progress`/`.progress-bar` ship with NO themed
   track in embed and the bar is a flat `--green-500` fill, so it looked like a
   bare green LINE next to the heart/comment activity cluster.
   FIX: give the `.progress` track a subtle neutral fill + full radius, size +
   center it in the row, and paint the `.progress-bar` in `--digit-brand` with
   matching radius — so it reads as a deliberate rounded progress indicator in
   both themes. Scoped to the embedded LIST column only. --- */
html.digit-embedded .list-row-col .progress,
html.digit-embedded .list-row .progress {
	position: relative !important;
	height: 7px !important;
	width: 100% !important;
	max-width: 96px !important;
	margin: 0 !important;
	align-self: center !important;
	background: rgba(15, 23, 42, 0.06) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}
html.digit-embedded .list-row-col .progress .progress-bar,
html.digit-embedded .list-row .progress .progress-bar,
html.digit-embedded .list-row-col .progress .progress-bar-success,
html.digit-embedded .list-row .progress .progress-bar-success {
	height: 100% !important;
	background: var(--digit-brand) !important;
	background-color: var(--digit-brand) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}
/* Dark: a subtle light-film track; the bar stays brand (the token flips). */
html.digit-embedded[data-theme="dark"] .list-row-col .progress,
html.digit-embedded[data-theme="dark"] .list-row .progress {
	background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================================
   embed_v31 — SELECTED / ACTIVE ROW = APPROVED LIGHT GREEN (identity fix).
   User report: the embedded table SELECTED/ACTIVE row showed a DARK, annoying
   color. Root cause: (1) frappe-datatable's selection highlight rode
   `--dt-selection-highlight-color` which in DARK resolved to the old teal
   `--digit-brand-soft` (rgba(45,212,167,.16)) — both forbidden and "dark"; and
   (2) frappe list.scss paints the focused/selected `.list-row` with the native,
   UNMAPPED `--highlight-color` (a grey/dark tint), which Digit never themed.
   FIX: pin the genuine SELECTED / ACTIVE / select-all state to the approved
   brand-soft — #E6F3EC in light, the subtle emerald tint rgba(10,135,84,.22) in
   dark (both via --digit-brand-soft, now emerald). This does NOT touch the v27
   NEUTRAL row :hover (§8b / §8d) — only the selected/active state turns green.
   Last in the cascade → wins at equal specificity. ============================ */

/* Datatable: a highlighted (selected) row and the select-all scroll surface. */
html.digit-embedded .datatable {
	--dt-selection-highlight-color: var(--digit-brand-soft) !important;
}
html.digit-embedded .datatable .dt-row--highlight .dt-cell,
html.digit-embedded .datatable .dt-scrollable--highlight-all,
html.digit-embedded .datatable .dt-cell--highlight {
	background-color: var(--digit-brand-soft) !important;
	color: var(--digit-ink) !important;
}

/* List view: a checked or focused (keyboard-selected) row → same light green.
   `.list-row-container:focus .list-row` is frappe's focused-row hook; the
   `:has(.list-row-checkbox:checked)` branch covers a row whose checkbox is
   ticked. Keep text readable on the light-green fill. */
html.digit-embedded .list-row-container:focus .list-row,
html.digit-embedded .list-row-container:has(.list-row-checkbox:checked) .list-row,
html.digit-embedded .list-row-container:has(.list-row-checkbox:checked) .list-row .level-left,
html.digit-embedded .list-row-container:has(.list-row-checkbox:checked) .list-row .level-right {
	background-color: var(--digit-brand-soft) !important;
	color: var(--digit-ink) !important;
}
html.digit-embedded .list-row-container:has(.list-row-checkbox:checked) .list-row a {
	color: var(--digit-brand-deep) !important;
}