/* Brains tokens over the desk, website/login and CRM. Fonts: OFL, see fonts/OFL-*.txt */
@font-face {
	font-family: "Space Grotesk";
	src: url(/assets/brains/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	src: url(/assets/brains/fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url(/assets/brains/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
	font-weight: 100 800;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url(/assets/brains/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2");
	font-weight: 100 800;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Arabic: IBM Plex Sans Arabic (OFL 1.1, fonts/OFL-IBMPlexSansArabic.txt), Arabic codepoints only; Latin stays Space Grotesk */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(/assets/brains/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(/assets/brains/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");
	font-weight: 500;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(/assets/brains/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");
	font-weight: 600;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(/assets/brains/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");
	font-weight: 700;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
	--brains-ink: #06090b;
	--brains-sky: #8fd4ff;
	--brains-blue: #34a8f0;
	--brains-slate: #9bb0b8;
	--brains-sans: "Space Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
	--brains-mono: "JetBrains Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;

	/* desk + website */
	--font-stack: var(--brains-sans);
	--primary: var(--brains-ink);
	--primary-color: var(--brains-ink);
	--btn-primary: var(--brains-ink);
	--border-primary: var(--brains-ink);
	--sidebar-select-color: rgb(143 212 255 / 0.28);
	--checkbox-focus-shadow: 0 0 0 2px var(--brains-sky);
	--focus-default: 0 0 0 2px var(--brains-sky);

	/* CRM (frappe-ui tokens) */
	--surface-gray-7: var(--brains-ink);
	--surface-selected: #fff;
}

/* CRM ships Inter; the desk reads --font-stack */
html body,
#app,
.font-sans {
	font-family: var(--brains-sans);
}

/* numbers */
.number-widget-box .widget-content .number,
.list-row .list-row-col.text-right,
.frappe-chart text,
[data-fieldtype="Currency"] .control-value,
[data-fieldtype="Currency"] input,
.grid-static-col[data-fieldtype="Currency"],
.grid-static-col[data-fieldtype="Float"],
#app [data-column] > a > .flex-col > :first-child > .truncate.text-base:not(:has(*)),
.font-mono {
	font-family: var(--brains-mono);
	font-variant-numeric: tabular-nums;
}

/* login: ink page, white card */
body[data-path="login"],
body[data-path="login"] .page-content-wrapper {
	background: var(--brains-ink);
}
body[data-path="login"] .page-card-head h4 {
	color: #fff;
	font-weight: 600;
	letter-spacing: -0.01em;
}
body[data-path="login"] .page-card-head .app-logo {
	width: 48px;
	height: 48px;
}
body[data-path="login"] footer,
body[data-path="login"] .web-footer {
	background: var(--brains-ink);
	color: var(--brains-slate);
	border: 0;
}
body[data-path="login"] footer a {
	color: var(--brains-sky);
}

/* website navbar wordmark */
.brains-wordmark {
	font-weight: 700;
	letter-spacing: -0.02em;
	vertical-align: middle;
}
body[data-path="login"] .navbar {
	background: var(--brains-ink);
	border: 0;
}
body[data-path="login"] .navbar .navbar-brand,
body[data-path="login"] .navbar .nav-link {
	color: #fff;
}
/* the login navbar has no links to open */
body[data-path="login"] .navbar-toggler {
	display: none;
}
body[data-path="login"] .login-content.page-card {
	padding-top: 24px;
}
body[data-path="login"] .form-control::placeholder {
	color: #6b6b6b; /* 4.8:1 on the #f3f3f3 field (measured) */
}
body[data-path="login"] .toggle-password {
	color: var(--brains-ink) !important;
}
body[data-path="login"] .forgot-password-message a {
	display: inline-block;
	padding: 14px 0;
	color: var(--brains-ink) !important;
}

/* apps screen: one glyph per app, sky stroke on ink (upstream logo paths are fixed in upstream hooks) */
.app-logo[app-name] img {
	content: url(/assets/brains/images/brains-mark.svg);
	width: 100%;
	height: 100%;
}
.app-logo[app-name="erpnext"] img {
	content: url(/assets/brains/images/app-erp.svg);
}
.app-logo[app-name="crm"] img {
	content: url(/assets/brains/images/app-crm.svg);
}
.app-logo[app-name="brains"] img {
	content: url(/assets/brains/images/app-command.svg);
}
.apps .app-icon {
	gap: 10px;
}
/* phones keep the white card on grey, as on a laptop */
body:has(.apps-container),
.container:has(> .apps-container) {
	background: #f3f3f3;
}
.apps-container {
	border: 1px solid #ededed;
	max-width: calc(100vw - 32px);
}
/* default-app badge: sky check on ink */
.app-logo .set-default svg {
	display: none;
}
.app-logo .set-default::after {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2306090B'/%3E%3Cpath d='M5 8.2l2 2 4-4.4' fill='none' stroke='%238FD4FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* CRM: upstream help panel opens empty once the checklist is done, and its Help row then does nothing */
#app .fixed.right-0.w-80.shadow-2xl.bg-surface-elevation-2,
#app [data-slot="sidebar-item"]:has(path[d^="M14.25 8C14.25 11.4518"]) {
	display: none !important;
}

/* desk page heads on phones: the title takes what the buttons leave (upstream fixes it at 7 of 12 and caps it at 90px); the search is one word (see en.csv) */
@media (max-width: 767px) {
	.page-head .page-title .title-area,
	.page-head .page-title .title-area > div {
		min-width: 0;
	}
	.page-head .page-title .title-text {
		max-width: none;
	}
	.page-head .page-title {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}
	.page-head .page-actions {
		flex: 0 0 auto;
		width: auto;
	}
	.page-head .title-area .indicator-pill:empty {
		display: none;
	}
}

/* CRM page header: the slot beside the menu button may shrink, so long names truncate instead of pushing buttons off screen */
#app-header {
	min-width: 0;
}

/* record activity: the add menu reads "Add" (upstream "New" is also the lead status word) */
#app .justify-between.sm\:mx-10.sm\:mb-4 > button[aria-haspopup="menu"] > .truncate {
	font-size: 0;
}
#app .justify-between.sm\:mx-10.sm\:mb-4 > button[aria-haspopup="menu"] > .truncate::after {
	content: "Add";
	font-size: 14px;
}
[dir="rtl"] #app .justify-between.sm\:mx-10.sm\:mb-4 > button[aria-haspopup="menu"] > .truncate::after {
	content: "إضافة";
}

/* notes and comments break between words (upstream breaks anywhere, "De-ntal"); only a long link or email splits */
#app .prose-f {
	word-break: normal;
	overflow-wrap: anywhere;
}

/* a note in Latin keeps its own direction in Arabic (the full stop stays at its end) */
[dir="rtl"] #app .prose-f > *,
[dir="rtl"] [role="dialog"] .w-full.cursor-pointer.rounded.border :is(div, p) {
	unicode-bidi: plaintext;
}

/* CRM on phones */
@media (max-width: 639px) {
	/* record header: status button sits beside the name instead of over it (the wrapper adds 12px, 4 + 12 = 16px gutter) */
	#app header.relative.justify-between {
		padding-inline-end: 4px;
	}
	/* record pages: the parent crumb gives its room to the record name (the menu button still leads back) */
	#app header:has(a[aria-current] > .truncate[title]) a:not([aria-current]),
	#app header:has(a[aria-current] > .truncate[title]) a:not([aria-current]) + [aria-hidden] {
		display: none;
	}
	/* in RTL the wrapper's 12px (pr-3, physical) sits on the menu side, so the end side carries all 16px */
	[dir="rtl"] #app header.relative.justify-between {
		padding-inline-end: 16px;
	}
	#app header.relative.justify-between > .absolute.right-0 {
		position: static;
		flex-shrink: 0;
	}
	/* activity header: 16px gutters */
	#app .justify-between.sm\:mx-10.sm\:mb-4 {
		margin: 12px 16px;
	}
	/* scrolling tab row: fade at the far edge says there is more, last tab clears it at the end */
	#app [role="tablist"] {
		padding-inline-end: 40px !important;
		mask-image: linear-gradient(to left, transparent, #000 40px);
	}
	[dir="rtl"] #app [role="tablist"] {
		mask-image: linear-gradient(to right, transparent, #000 40px);
	}
	/* kanban: one full column per screen, the next one peeks, columns snap */
	#app .overflow-x-auto:has(> .sm\:mx-2\.5) {
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 8px;
	}
	#app .min-w-72.w-72.rounded-lg {
		width: calc(100vw - 64px);
		min-width: calc(100vw - 64px);
		scroll-snap-align: start;
	}
}

/* CRM in Arabic: upstream spaces the sidebar with physical classes (pl-2, ml-2) and never mirrors its arrows */
[dir="rtl"] #app [data-slot="sidebar-item"] > * {
	padding-inline: 0.5rem 0;
}
[dir="rtl"] #app [data-slot="sidebar-item"] .ml-2 {
	margin-left: 0;
	margin-right: 0.5rem;
}
[dir="rtl"] #app [data-slot="sidebar-item"] svg.duration-300,
[dir="rtl"] #app .lucide-chevron-right {
	scale: -1 1;
}
/* a Latin name inside an Arabic header keeps its own order, so truncation cuts its end, not its start */
[dir="rtl"] #app header .truncate {
	unicode-bidi: plaintext;
}

/* primary actions are ink everywhere (desk and website read different variables) */
html body .btn.btn-primary,
html body .btn.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--brains-ink);
	border-color: var(--brains-ink);
	color: #fff;
}
html body .btn.btn-primary:hover {
	background-color: #1b252c;
}

/* radius by role: fields 6, cards 10, dialogs and sheets 16 */
.form-control,
#app [data-slot="control"]:not([type="checkbox"]),
#app button.form-input {
	border-radius: 6px;
}
.widget,
.frappe-card,
#app .min-w-72.w-72.rounded-lg,
#app [data-column] > * {
	border-radius: 10px;
}
.modal-content,
#app [role="dialog"] > .rounded-xl,
#app [role="dialog"].rounded-xl {
	border-radius: 16px;
}

/* avatars: ink with a sky initial */
.avatar .standard-image,
#app .select-none.uppercase.rounded-full {
	background-color: var(--brains-ink) !important;
	color: var(--brains-sky) !important;
}

/* focus: sky ring with an ink core, visible on paper and on ink */
#app :is(a, button, input, select, textarea, [role="tab"], [tabindex]):focus-visible {
	outline: 2px solid var(--brains-sky);
	outline-offset: 1px;
	box-shadow: 0 0 0 1px var(--brains-ink);
}

/* Command: numbers sit on the page, no card around the cards */
#page-Workspaces .layout-main-section {
	border: 0;
	background: none;
	box-shadow: none;
	padding-top: 0;
}
#page-Workspaces .ce-block:has(.ce-header) > .ce-block__content {
	padding-top: 0;
}
#page-Workspaces .number-widget-box .widget-title {
	text-transform: none;
	font-size: 13px;
	letter-spacing: 0;
	white-space: normal;
}
#page-Workspaces .number-widget-box .widget-title .ellipsis {
	white-space: normal;
}
/* a wrapped label never pushes its figure out of line with the card beside it */
#page-Workspaces .number-widget-box .widget-body {
	margin-top: auto;
}
/* a figure still loading is a quiet bar the size of the figure, not the word "Loading...", in the loaded figure's box
   (upstream pads the loaded figure by --padding-md), so nothing moves when it lands */
.widget.number-widget-box .widget-body .number-card-loading {
	display: block;
	font-size: 20px;
	height: 1.15em;
	margin-top: var(--padding-md);
	overflow: hidden;
	color: transparent !important;
	user-select: none;
}
.widget.number-widget-box .widget-body .number-card-loading::before {
	content: "";
	display: block;
	width: 6em;
	max-width: 100%;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent) no-repeat -100% 0 / 50% 100%, var(--gray-100, #f3f3f3);
	animation: brains-skeleton 1.4s ease-in-out infinite;
}
@keyframes brains-skeleton {
	to {
		background-position: 200% 0, 0 0;
	}
}
#page-Workspaces .ce-block:has(.ce-header) + .ce-block:has([number_card_name]) .number-card-loading {
	height: 1.1em; /* the focal figure's line-height */
}
/* "Go to" sits apart from the charts above it */
#page-Workspaces .ce-block:has(.ce-header) ~ .ce-block:has(.ce-header) > .ce-block__content {
	padding-top: 24px;
}
/* sidebar: one group, its label says nothing */
.desk-sidebar .standard-sidebar-section[data-title="Public"] > .standard-sidebar-label {
	display: none;
}
/* charts: no sync stamp; the empty state reads as a designed slot */
.dashboard-widget-box .widget-subtitle {
	display: none;
}
/* when the axis skips labels, upstream still forces the last one in beside its neighbour: the last bar keeps
   its date, the shown label before it goes */
.frappe-chart .x.axis:has(text:empty):has(> g:last-child > text:not(:empty)) > g:not(:last-child):has(> text:not(:empty)):not(:has(~ g:not(:last-child) > text:not(:empty))) text {
	display: none;
}
.frappe-chart .percentage-bar {
	stroke: none;
}
.frappe-chart .legend-dataset-label {
	font-family: var(--brains-sans);
	font-size: 12px;
	letter-spacing: 0;
}
/* a chart still loading is the same faint block as a loading figure (the first loading state; the second is "No data") */
.dashboard-widget-box .chart-loading-state:not(.chart-loading-state ~ .chart-loading-state) {
	border: 0;
	color: transparent !important;
	user-select: none;
	border-radius: 6px;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent) no-repeat -100% 0 / 50% 100%, var(--gray-100, #f3f3f3);
	animation: brains-skeleton 1.4s ease-in-out infinite;
}
.dashboard-widget-box .chart-loading-state {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 12px;
	border: 1px dashed var(--border-color);
	border-radius: 10px;
	color: var(--text-muted);
	font-size: 13px;
}
@media (min-width: 640px) {
	/* the first card leads (40%, larger figure); the rest share the row */
	#page-Workspaces .ce-block:has([number_card_name]) {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
	}
	#page-Workspaces .ce-block:has(.ce-header) + .ce-block:has([number_card_name]) {
		flex: 0 0 40%;
		max-width: 40%;
	}
	#page-Workspaces .ce-block:has(.ce-header) + .ce-block:has([number_card_name]) :is(.number, .number-card-loading) {
		font-size: 32px;
		line-height: 1.1;
	}
	#page-Workspaces .ce-block:has([number_card_name]) .number {
		white-space: nowrap;
	}
}
@media (max-width: 639px) {
	/* first card is the focal number, the next ones share a 2-column grid */
	#page-Workspaces .ce-block:has([number_card_name]) {
		flex: 0 0 50%;
		max-width: 50%;
	}
	#page-Workspaces .ce-block:has(.ce-header) + .ce-block:has([number_card_name]) {
		flex-basis: 100%;
		max-width: 100%;
	}
	#page-Workspaces .ce-block:has(.ce-header) + .ce-block:has([number_card_name]) :is(.number, .number-card-loading) {
		font-size: 40px;
		line-height: 1.1;
	}
	#page-Workspaces .ce-block:has([number_card_name]) :is(.number, .number-card-loading) {
		font-size: 16px;
		white-space: nowrap;
	}
	/* an odd one out (even card count, the first stands alone) takes the full row, figure at the end */
	#page-Workspaces .ce-block:has([number_card_name]):nth-child(even of .ce-block:has([number_card_name])):not(:has(~ .ce-block [number_card_name])) {
		flex-basis: 100%;
		max-width: 100%;
	}
	#page-Workspaces .ce-block:has([number_card_name]):nth-child(even of .ce-block:has([number_card_name])):not(:has(~ .ce-block [number_card_name])) .widget {
		flex-direction: row;
		align-items: center;
		min-height: 52px;
		padding: 12px;
	}
	#page-Workspaces .ce-block:has([number_card_name]):nth-child(even of .ce-block:has([number_card_name])):not(:has(~ .ce-block [number_card_name])) :is(.widget-content, .widget-title, .number-card-loading) {
		padding-top: 0;
		margin-top: 0;
	}
	#page-Workspaces .ce-block:has([number_card_name]):nth-child(even of .ce-block:has([number_card_name])):not(:has(~ .ce-block [number_card_name])) .widget-head {
		display: contents;
	}
	#page-Workspaces .ce-block:has([number_card_name]):nth-child(even of .ce-block:has([number_card_name])):not(:has(~ .ce-block [number_card_name])) .widget-label {
		flex: 1 1 auto;
		min-width: 0;
	}
	#page-Workspaces .ce-block:has([number_card_name]):nth-child(even of .ce-block:has([number_card_name])):not(:has(~ .ce-block [number_card_name])) .widget-body {
		margin: 0;
		margin-inline-start: 12px;
		order: 2;
	}
	/* the card menu ("...") is a laptop tool */
	#page-Workspaces .number-widget-box .widget-control {
		display: none;
	}
	/* stage chart on a phone: bar up, legend (three rows here) closer to the card edge and allowed below the fixed height */
	.frappe-chart:has(.percentage-chart) {
		overflow: visible;
		margin-bottom: 24px;
	}
	.frappe-chart .percentage-chart {
		transform: translate(50px, 24px);
	}
	.frappe-chart:has(.percentage-chart) .chart-legend {
		transform: translate(16px, 84px);
	}
	.dashboard-widget-box :is(.time-interval-filter, .timespan-filter, .filter-chart) {
		display: none !important;
	}
}

/* desk lists: the sidebar held only the Filter By and Save Filter groups (the Filter button above the list does
   that job), so the sidebar and the button that opens it go; the list takes the width */
body[data-route^="List/"] :is(.layout-side-section, .page-head .sidebar-toggle-btn) {
	display: none !important;
}
/* one company (desk.js): its standard filter says nothing */
.brains-one-company .page-form .frappe-control[data-fieldname="company"] {
	display: none !important;
}

/* desk lists: no like hearts, no comment counters (a row's comments open with the row) */
.list-row-activity :is(.comment-count, .comment-count + .mx-2, .list-row-like),
.list-row-head .list-liked-by-me {
	display: none !important;
}

/* desk lists on phones: the Filter button stays, the field row goes; totals show beside the title */
@media (max-width: 767px) {
	.list-paging-area .btn-paging:is([data-value="500"], [data-value="2500"]) {
		display: none;
	}
	.page-form .standard-filter-section {
		display: none !important;
	}
	/* invoices: the total is the reason to open the list (other lists keep upstream columns) */
	body:is([data-route^="List/Sales Invoice"], [data-route^="List/Purchase Invoice"]) .list-row-col.text-right.hidden-xs {
		display: flex !important;
		flex: 0 0 auto;
		justify-content: flex-end;
	}
	/* invoices: no selection boxes on a phone, the customer gets the room */
	body[data-route^="List/Sales Invoice"] :is(.list-row .select-like:has(.list-row-checkbox), .list-row-head .list-check-all) {
		display: none;
	}
	.list-row-head .list-count {
		white-space: nowrap;
	}
	/* invoices: the status keeps its own width (upstream gives it 20% and lets "Overdue" spill), the customer takes
	   what the amount leaves; 8px gaps, 6px pill padding, so "Jounieh Coworking" fits beside "$ 1,000.00" at 360 */
	body[data-route^="List/Sales Invoice"] :is(.list-row, .list-row-head) {
		padding-inline-end: 5px;
	}
	body[data-route^="List/Sales Invoice"] :is(.list-row, .list-row-head) .level-left {
		flex: 1 1 0;
		min-width: 0;
	}
	body[data-route^="List/Sales Invoice"] :is(.list-row, .list-row-head) .level-right {
		flex: 0 0 auto;
		min-width: 68px;
	}
	body[data-route^="List/Sales Invoice"] :is(.list-row, .list-row-head) .list-row-col {
		margin-inline-end: 8px;
	}
	body[data-route^="List/Sales Invoice"] .list-row .level-right .indicator-pill {
		padding-inline: 6px;
	}
	/* the title shrinks to an ellipsis instead of being cut mid-word */
	.list-row .list-subject > span:last-child {
		min-width: 0;
		overflow: hidden;
	}
	.list-row .list-subject > span:last-child > a {
		display: block;
	}
}

@media (max-width: 639px) {
	/* CRM lists: no selection column on a phone; the name cell takes its track */
	#app .grid[style*="grid-template-columns: 14px"] > :first-child:has(input[type="checkbox"]) {
		display: none;
	}
	#app .grid[style*="grid-template-columns: 14px"]:has(> :first-child input[type="checkbox"]) > :nth-child(2) {
		grid-column: span 2;
	}
	/* leads list (our default columns, crm_views.py): name, status and organization share the phone width */
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] {
		grid-template-columns: minmax(0, 1.9fr) 100px minmax(0, 1fr) !important;
		gap: 8px;
	}
	/* the empty selection track and its gap go: the name takes the first track */
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"]:has(> :first-child input[type="checkbox"]) > :nth-child(2) {
		grid-column: auto;
	}
	#app .w-max.min-w-full:has(> .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"]),
	#app .w-max.min-w-full:has(> a > .contents > .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"]) {
		width: 100%;
	}
	/* CRM view toolbar: the quick filters go (the Filter button stays) */
	#app .flex.items-center.justify-between.gap-2 > .overflow-x-auto.flex-1,
	#app .flex.items-center.justify-between.gap-2 > .overflow-x-auto.flex-1 + .border-l {
		display: none;
	}
	#app .flex.items-center.justify-between.gap-2:has(> .overflow-x-auto.flex-1) {
		justify-content: flex-end;
	}
	/* leads list: email and last modified are laptop columns */
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] > :nth-child(n + 5) {
		display: none;
	}
}


/* leads list below 430px: status a fixed 88px */
@media (max-width: 429px) {
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] {
		grid-template-columns: minmax(0, 1.9fr) 88px minmax(0, 1fr) !important;
	}
	/* the status dot keeps its size and gives its padding to "Contacted" */
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] > :nth-child(3) > .gap-2 {
		gap: 4px;
	}
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] > :nth-child(3) svg {
		margin-inline: -4px;
	}
}
/* full Gulf names ("Khalid Al Mansoori", 157px with its avatar) come before the organization at every phone width.
   Status stays a fixed track: every row is its own grid, so a content-sized track would put each row's organization
   at a different x */
@media (max-width: 375px) {
	/* 375 and under: the organization goes (header and cells), each row is name and status */
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] {
		grid-template-columns: minmax(0, 1fr) 88px !important;
	}
	#app .grid[style*="grid-template-columns: 14px 14rem 10rem 14rem"] > :nth-child(4) {
		display: none;
	}
}

/* CRM in Arabic: field values and placeholders keep their own direction (Latin names, emails, "...") */
[dir="rtl"] #app :is(input, textarea, [data-slot="control"], .truncate) {
	unicode-bidi: plaintext;
}
[dir="rtl"] #app input::placeholder {
	unicode-bidi: plaintext;
}
#app input {
	text-overflow: ellipsis;
}
/* upstream selects pin the value left and the chevron right (physical classes) */
[dir="rtl"] #app button > .absolute.text-left.truncate {
	text-align: right;
	padding-right: 0;
	padding-left: 1.75rem;
}
[dir="rtl"] #app button > .absolute.right-2 {
	right: auto;
	left: 0.5rem;
}
/* upstream fades the quick-filter scroller on the right; in Arabic the overflow is on the left */
[dir="rtl"] #app .overflow-x-auto[style*="mask-image"] {
	mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent 100%) !important;
}
/* desk in Arabic: a Latin title keeps its own order, so the ellipsis cuts its end; figures read as in English */
[dir="rtl"] .list-row :is(.list-subject a, .list-row-col:not(.text-right), .list-row-col .ellipsis) {
	unicode-bidi: plaintext;
	text-align: right;
}
[dir="rtl"] .number-widget-box .widget-content .number {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: right;
}

/* empty kanban column */
#app [data-column]:empty::before {
	content: "Nothing here yet";
	display: block;
	padding: 20px 12px;
	border: 1px dashed var(--outline-gray-2, #e2e2e2);
	border-radius: 10px;
	color: #6b6b6b;
	font-size: 13px;
	text-align: center;
}
[dir="rtl"] #app [data-column]:empty::before {
	content: "لا شيء هنا بعد";
}

/* kanban column titles print the raw stage value (upstream skips translation there): Arabic names for the
   standard stages, same words as ar.csv. ponytail: a stage the client adds shows as typed; fixing that needs upstream. */
[dir="rtl"] #app .min-w-72 .text-base > .text-ink-gray-9::after {
	content: var(--stage);
	font-size: 14px;
}
[dir="rtl"] #app .min-w-72:has([data-column="Qualification"]) .text-base > .text-ink-gray-9 { --stage: "التأهيل"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Demo"]) .text-base > .text-ink-gray-9 { --stage: "عرض توضيحي"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Proposal/Quotation"]) .text-base > .text-ink-gray-9 { --stage: "عرض سعر"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Negotiation"]) .text-base > .text-ink-gray-9 { --stage: "تفاوض"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Ready to Close"]) .text-base > .text-ink-gray-9 { --stage: "جاهزة للإغلاق"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Won"]) .text-base > .text-ink-gray-9 { --stage: "رابحة"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Lost"]) .text-base > .text-ink-gray-9 { --stage: "خاسرة"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="New"]) .text-base > .text-ink-gray-9 { --stage: "جديد"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Contacted"]) .text-base > .text-ink-gray-9 { --stage: "تم التواصل"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Nurture"]) .text-base > .text-ink-gray-9 { --stage: "قيد المتابعة"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Qualified"]) .text-base > .text-ink-gray-9 { --stage: "مؤهل"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Unqualified"]) .text-base > .text-ink-gray-9 { --stage: "غير مؤهل"; font-size: 0; }
[dir="rtl"] #app .min-w-72:has([data-column="Junk"]) .text-base > .text-ink-gray-9 { --stage: "غير صالح"; font-size: 0; }

/* list footer counter "6 of 6": frappe-ui prints "of" without translation */
[dir="rtl"] #app .flex.items-center.gap-1.text-base.text-ink-gray-5:has(> :nth-child(3):last-child) > :nth-child(2) {
	font-size: 0;
}
[dir="rtl"] #app .flex.items-center.gap-1.text-base.text-ink-gray-5:has(> :nth-child(3):last-child) > :nth-child(2)::after {
	content: "من";
	font-size: 14px;
}

/* motion: fast ease-out on hover, press and tab changes; nothing moves when the OS asks for less */
.btn,
.standard-sidebar-item,
#app :is(button, a, [role="tab"]) {
	transition-property: background-color, color, border-color, box-shadow, opacity, transform;
}
.btn,
.standard-sidebar-item,
#app :is(button, a, [role="tab"]),
#app .transition-all,
#app .transition-colors,
#app .transition {
	transition-duration: 180ms;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:active,
#app button:active {
	transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.btn:active,
	#app button:active {
		transform: none;
	}
}