/* Digit Desk theme.
   Converts the Blueprint into safe ERPNext Desk styling without replacing Desk
   behavior. Owns: navbar, page head, dark identity sidebar, widgets/cards,
   buttons, badges, modals, and the Desk apps-screen card grid.
   Tokens and the 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;
}

/* ===== Topbar ===== */
.navbar {
	min-height: var(--digit-topbar-height) !important;
	background: rgba(255, 255, 255, 0.97) !important;
	border-bottom: 1px solid var(--digit-border) !important;
	box-shadow: none !important;
}

.navbar .navbar-brand,
.navbar .navbar-home,
.navbar .nav-link,
.navbar .dropdown-toggle {
	color: var(--digit-ink) !important;
	font-weight: 600;
}

.navbar .search-bar,
.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:focus-within,
.navbar .awesomplete > input:focus,
.search-bar .form-control:focus {
	border-color: var(--digit-brand) !important;
	box-shadow: var(--digit-focus) !important;
}

.navbar .avatar,
.avatar-frame {
	background: rgba(52, 211, 153, 0.16) !important;
	border: 1px solid rgba(10, 135, 84, 0.20) !important;
	color: var(--digit-brand-deep) !important;
	font-family: var(--digit-font-latin) !important;
	font-weight: 700;
	box-shadow: none !important;
}

/* ===== 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: 20px !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;
}

/* ===== Desk navigation sidebar: dark green identity ===== */
/* Scoped to the workspace nav sidebar only. List/form side sections stay light
   (see below) so forms and list filters are never darkened. */
.standard-sidebar,
.desk-sidebar,
.standard-sidebar .standard-sidebar-section {
	background: var(--digit-sidebar-bg) !important;
	border: 0 !important;
	box-shadow: none !important;
}

.standard-sidebar .standard-sidebar-item,
.desk-sidebar .standard-sidebar-item {
	min-height: 36px;
	margin: 2px 8px;
	padding: 8px 10px;
	border-radius: var(--digit-radius-md) !important;
	color: var(--digit-sidebar-fg) !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

.standard-sidebar .standard-sidebar-item:hover,
.desk-sidebar .standard-sidebar-item:hover {
	background: var(--digit-sidebar-hover-bg) !important;
	color: var(--digit-sidebar-fg-strong) !important;
}

.standard-sidebar .standard-sidebar-item.selected,
.standard-sidebar .standard-sidebar-item.active,
.desk-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.active {
	background: var(--digit-sidebar-active-bg) !important;
	color: var(--digit-sidebar-fg-strong) !important;
	font-weight: 700 !important;
}

.standard-sidebar .standard-sidebar-item .sidebar-item-icon svg,
.desk-sidebar .standard-sidebar-item svg {
	stroke: currentColor;
}

.standard-sidebar .standard-sidebar-item.selected .sidebar-item-icon,
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-icon {
	color: var(--digit-sidebar-accent) !important;
}

.standard-sidebar-label,
.desk-sidebar .standard-sidebar-section > .section-title {
	margin: 16px 14px 6px;
	color: var(--digit-sidebar-label) !important;
	font-family: var(--digit-font-mono) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
}

/* List/form side sections: keep light (never inherit the dark nav surface). */
.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;
}

/* ===== Workspace widgets / cards ===== */
.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.28) !important;
	box-shadow: var(--digit-shadow-hover) !important;
	transform: translateY(-1px);
}

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

.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: 20px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	direction: ltr;
}

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

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

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

/* ===== 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,
.dropdown-menu {
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-lg) !important;
	box-shadow: 0 24px 60px rgba(16, 24, 40, 0.18) !important;
}

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

/* =========================================================================
   Desk apps screen (home): one icon+title+description card grid.
   Single source of truth for card sizing — clear, fixed breakpoints, no
   auto-fit. 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: var(--digit-paper) !important;
}

html.digit-desk-active .desktop-navbar,
html.digit-desk-active .navbar-container {
	background: rgba(255, 255, 255, 0.97) !important;
	border-bottom: 1px solid var(--digit-border) !important;
	box-shadow: none !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-card) !important;
	box-shadow: none !important;
	color: var(--digit-body) !important;
}

/* Container width is the primary sizing lever; columns step at clear widths. */
html.digit-desk-active .desktop-wrapper .desktop-container {
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 40px 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;
}

/* The card: icon box + text, fixed height, no clipping of content. */
html.digit-desk-active .desktop-wrapper .desktop-container > .icons-container > .icons > a.desktop-icon {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 56px minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 14px !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 96px !important;
	height: 96px !important;
	margin: 0 !important;
	padding: 18px !important;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%) !important;
	border: 1px solid var(--digit-border) !important;
	border-radius: var(--digit-radius-md) !important;
	box-shadow: var(--digit-shadow-flat) !important;
	text-align: start !important;
	text-decoration: none !important;
	overflow: hidden !important;
	transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease !important;
}

html.digit-desk-active .desktop-wrapper a.desktop-icon::before {
	content: "" !important;
	position: absolute !important;
	inset-inline-start: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 4px !important;
	background: var(--digit-brand) !important;
	opacity: 0 !important;
	transition: opacity 0.14s ease !important;
}

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

html.digit-desk-active .desktop-wrapper a.desktop-icon:hover::before {
	opacity: 1 !important;
}

/* Icon box */
html.digit-desk-active .desktop-wrapper a.desktop-icon .icon-container {
	width: 56px !important;
	height: 56px !important;
	margin: 0 !important;
	border-radius: var(--digit-radius-md) !important;
	display: grid !important;
	place-items: center !important;
	background: rgba(10, 135, 84, 0.10) !important;
	border: 1px solid rgba(6, 78, 59, 0.12) !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: 34px !important;
	height: 34px !important;
	max-width: 34px !important;
	max-height: 34px !important;
	object-fit: contain !important;
}

/* Text block: title wraps to 2 lines max (no harsh cut), description clamped. */
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: 15px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	/* English app names read LTR and must not be cut from the start. */
	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 card breakpoints (laptop-first) ===== */
/* ≤1366: 3 columns (default above) */
@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;
	}
}

/* 1537-1799: keep 4 columns, slightly wider container */
@media (min-width: 1537px) {
	html.digit-desk-active .desktop-wrapper .desktop-container {
		max-width: 1440px !important;
	}
}

/* ≥1800: 5 columns, capped container so cards never grow oversized */
@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;
	}
}

/* Tablet / small: graceful reduction */
@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;
	}
}