/* NextGen Research Hub look for the desk, the CRM-adjacent pages and the login page.
   Brand: navy #001B32, blue #30A3F4, yellow #FFCF00, white. Font: Cairo (free, Google Fonts);
   The Sans Arabic is used instead when the device has it installed.
   Loaded on every desk page (app_include_css) and website page (web_include_css). */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap");

:root {
	--ng-navy: #001b32;
	--ng-navy-2: #0b2c4a;
	--ng-blue: #30a3f4;
	--ng-yellow: #ffcf00;
	--ng-bg: #f4f7fa;
	--primary: var(--ng-navy);
	--btn-primary: var(--ng-navy);
	--primary-color: var(--ng-navy);
	--navbar-bg: var(--ng-navy);
	--font-stack: "Cairo", "The Sans Arabic", "TheSansArabic", "Segoe UI", Tahoma, sans-serif;
}

body,
.frappe-control,
.navbar,
.page-head,
.form-section,
.widget,
input,
select,
textarea,
button {
	font-family: var(--font-stack) !important;
}

/* ------------------------------------------------------------------ top bar */
.navbar {
	background: var(--ng-navy) !important;
	border-bottom: 3px solid var(--ng-yellow);
	--icon-stroke: #ffffff;
	--text-color: #ffffff;
}
.navbar .app-logo,
.navbar-brand img {
	max-height: 30px !important;
	width: auto !important;
}
.navbar .nav-link,
.navbar .navbar-nav > li > a,
.navbar .dropdown-toggle {
	color: #ffffff !important;
}
.navbar .search-bar .form-control,
.navbar #navbar-search {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.navbar #navbar-search::placeholder {
	color: rgba(255, 255, 255, 0.65) !important;
}
.navbar .search-bar .search-icon svg {
	--icon-stroke: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------------ pages */
body[data-route],
.page-container,
.layout-main-section-wrapper {
	background-color: var(--ng-bg);
}
.page-head {
	background: var(--ng-bg) !important;
}
.page-head .page-title .title-text {
	color: var(--ng-navy);
	font-weight: 800;
}
.layout-main-section,
.frappe-card,
.widget,
.form-page,
.report-wrapper {
	border-radius: 14px !important;
}
.widget.shortcut-widget-box,
.widget.links-widget-box,
.widget.number-widget-box {
	border: 1px solid #e3eaf1 !important;
	box-shadow: 0 4px 16px rgba(0, 27, 50, 0.05);
}
.widget.shortcut-widget-box:hover {
	border-color: var(--ng-blue) !important;
}
.widget .widget-title,
.widget.shortcut-widget-box .widget-title {
	color: var(--ng-navy) !important;
	font-weight: 700;
}

/* sidebar */
.standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.selected {
	background: #fff8d6 !important;
	box-shadow: inset -3px 0 0 var(--ng-yellow);
}
.standard-sidebar-item.selected .sidebar-item-label,
.workspace-sidebar-item.selected .sidebar-item-label {
	color: var(--ng-navy) !important;
	font-weight: 700;
}

/* buttons, links, badges */
.btn-primary,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--ng-navy) !important;
	border-color: var(--ng-navy) !important;
	color: #ffffff !important;
}
.btn-primary:hover {
	background-color: var(--ng-navy-2) !important;
}
a:not(.btn):not(.dropdown-item):hover,
.frappe-control a,
.ql-editor a {
	color: var(--ng-blue);
}
.indicator-pill.blue,
.indicator.blue::before {
	--indicator-color: var(--ng-blue);
}
.list-row-head,
.dt-header .dt-cell {
	background: #eef3f8 !important;
	color: var(--ng-navy) !important;
	font-weight: 700;
}

/* ------------------------------------------------------------------ login page */
body[data-path="login"],
body[data-path="login"] .page-content-wrapper {
	background: linear-gradient(180deg, rgba(0, 27, 50, 0.94), rgba(0, 27, 50, 0.99)),
		url("/assets/nextgen_hub/images/cover.jpg") center / cover fixed !important;
	min-height: 100vh;
}
body[data-path="login"] .navbar,
body[data-path="login"] footer,
body[data-path="login"] .web-footer {
	display: none !important;
}
body[data-path="login"] .page-card {
	border-radius: 18px !important;
	border: 0 !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	border-top: 5px solid var(--ng-yellow) !important;
}
body[data-path="login"] .page-card-head img,
body[data-path="login"] .app-logo {
	max-height: 64px !important;
	width: auto !important;
	background: var(--ng-navy);
	border-radius: 12px;
	padding: 8px 14px;
}
body[data-path="login"] .page-card-head h4 {
	color: var(--ng-navy);
	font-weight: 800;
}
.page-card .btn-primary,
.for-login .btn-primary {
	background-color: var(--ng-navy) !important;
	font-weight: 700;
}