@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/*
 * Etqan Theme — bilingual (AR/EN) desk theme for ERPNext v15.
 *
 * Compatibility rules this file must always respect, because Frappe's own
 * components depend on them:
 *
 *  1. NEVER set `overflow` on .form-grid / .form-grid-container / .grid-body.
 *     Frappe keeps them overflow-visible on purpose so Link/Select dropdowns
 *     (Awesomplete) can escape the child table. Clipping them makes the item
 *     dropdown disappear.
 *  2. --bg-color must stay WHITE: Awesomplete's listbox and the link "->"
 *     button both paint themselves with it.
 *  3. --control-bg must stay a LIGHT GRAY, never white: --awesomplete-hover-bg
 *     derives from it, so white would make the highlighted option invisible.
 *  4. --subtle-fg is a LIGHT header background (list / grid / report headers).
 *     Never give it a dark value, or header labels turn black-on-dark.
 *  5. Header rows carry the same class as body rows (.list-row / .grid-row),
 *     so body text rules must exclude the header explicitly.
 */

:root {
	--etqan-navy: #0b3a5b;
	--etqan-blue: #1565a8;
	--etqan-blue-dark: #0d4f85;
	--etqan-blue-soft: #e8f1f8;
	--etqan-head-bg: #eef2f7;
	--etqan-text: #14181f;
	--etqan-line: #dfe4ea;
	--etqan-line-input: #c8d0d9;

	/* Brand */
	--primary-color: #1565a8;
	--brand-color: #1565a8;
	--btn-primary: #1565a8;
	--navbar-bg: #0b3a5b;

	/* Text */
	--text-color: #14181f;
	--heading-color: #0b3a5b;
	--text-muted: #4b5563;
	--text-light: #6b7280;

	/* Surfaces — keep Frappe's semantics */
	--bg-color: #ffffff;
	--fg-color: #ffffff;
	--card-bg: #ffffff;
	--modal-bg: #ffffff;
	--popover-bg: #ffffff;
	--subtle-fg: #eef2f7;
	--subtle-accent: #f6f8fa;
	--control-bg: #eef1f5;
	--control-bg-on-gray: #e3e8ee;
	--awesomplete-hover-bg: #d9e8f5;
	--fg-hover-color: #eef2f7;

	/* Lines */
	--border-color: #dfe4ea;
	--table-border-color: #e3e7ec;
	--dt-border-color: #e3e7ec;
	--dt-header-cell-bg: #eef2f7;
	--dt-text-color: #14181f;

	/* Type */
	--weight-regular: 500;
	--text-base: 14px;
	--text-sm: 13px;
	--font-stack: "Cairo", "IBM Plex Sans", "Tahoma", "Segoe UI", sans-serif;

	--border-radius-tiny: 3px;
	--border-radius-sm: 4px;
	--border-radius: 5px;
	--border-radius-md: 6px;
	--border-radius-lg: 8px;
	--border-radius-xl: 10px;
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                 */
/* -------------------------------------------------------------------------- */
html, body, button, input, textarea, select,
.page-container, .form-control, .control-value, .like-disabled-input,
.datatable, .list-row, .grid-row, .modal, .awesomplete, .dropdown-menu {
	font-family: var(--font-stack) !important;
}

body {
	color: var(--etqan-text);
	background-color: #f5f7fa;
	-webkit-font-smoothing: antialiased;
}

[dir="rtl"] body {
	font-family: "Cairo", "IBM Plex Sans", "Tahoma", sans-serif !important;
}

h1, .h1 { font-size: 1.2rem !important; font-weight: 700; color: var(--etqan-navy); }
h2, .h2 { font-size: 1.08rem !important; font-weight: 700; color: var(--etqan-navy); }
h3, .h3 { font-size: 1rem !important; font-weight: 700; color: var(--etqan-navy); }
h4, h5, h6, .h4, .h5, .h6 { font-size: 0.94rem !important; font-weight: 700; color: var(--etqan-navy); }

.page-title .title-text,
.title-area .title-text {
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--etqan-navy) !important;
	max-width: min(70vw, 820px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.form-section .section-head,
.section-head,
.card-head .card-title,
.widget-title,
.widget .widget-head .widget-label span {
	font-weight: 700 !important;
	font-size: 0.94rem !important;
	color: var(--etqan-navy) !important;
}

/* -------------------------------------------------------------------------- */
/* Navbar                                                                     */
/* -------------------------------------------------------------------------- */
.navbar.navbar-expand {
	background-color: var(--etqan-navy) !important;
	border-bottom: 1px solid #082a43;
}

.navbar-nav .icon,
.navbar .navbar-nav .nav-link,
#navbar-breadcrumbs a,
#navbar-breadcrumbs li.disabled a {
	color: #ffffff !important;
}
.navbar-nav .icon { stroke: #ffffff !important; }
#navbar-breadcrumbs a::before { border-color: #ffffff; }
.navbar .navbar-nav .nav-link:hover { color: #cfe6ff !important; }

.navbar .search-bar .form-control,
.navbar-form .form-control {
	background-color: #ffffff !important;
	color: #14181f !important;
	border: 1px solid #b9c6d2 !important;
}
.navbar .search-bar .form-control::placeholder {
	color: #5b6673 !important;
}

.etqan-company-switcher {
	display: flex;
	align-items: center;
	margin-inline: 4px;
}
.etqan-company-switcher__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: min(280px, 32vw);
	height: 34px;
	padding: 0 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #ffffff !important;
	font-weight: 700;
	line-height: 1;
}
.etqan-company-switcher__btn:hover,
.etqan-company-switcher.show .etqan-company-switcher__btn {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.4);
	color: #ffffff !important;
}
.etqan-company-switcher__icon,
.etqan-company-switcher__caret {
	display: inline-flex;
	flex-shrink: 0;
	color: #ffffff;
}
.etqan-company-switcher__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
}
.etqan-company-switcher__menu {
	min-width: 280px;
	max-width: 360px;
	padding: 8px 0 6px;
}
.etqan-company-switcher__search {
	padding: 6px 10px 8px;
}
.etqan-company-switcher__list {
	max-height: 280px;
	overflow: auto;
	padding: 0 4px 4px;
}
.etqan-company-switcher__item {
	border-radius: 6px;
	white-space: normal;
}
.etqan-company-switcher__item.is-active {
	background-color: var(--etqan-blue-soft) !important;
	color: var(--etqan-navy) !important;
}
.etqan-company-switcher__empty {
	color: #6b7280;
	font-size: 12px;
	padding: 8px 12px;
}
@media (max-width: 575.98px) {
	.etqan-company-switcher__name,
	.etqan-company-switcher__caret {
		display: none;
	}
	.etqan-company-switcher__btn {
		width: 34px;
		max-width: 34px;
		padding: 0;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                    */
/* -------------------------------------------------------------------------- */
.desk-sidebar,
.layout-side-section {
	border-inline-end: 1px solid var(--etqan-line);
}

.desk-sidebar .standard-sidebar-item {
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	color: var(--etqan-text);
	font-weight: 600;
}
.desk-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item:hover {
	background-color: var(--etqan-blue-soft) !important;
	color: var(--etqan-navy) !important;
	border-color: #b6d2e8;
}
.desk-sidebar .standard-sidebar-item.selected .icon,
.desk-sidebar .standard-sidebar-item:hover .icon {
	stroke: var(--etqan-navy) !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.btn {
	font-weight: 600 !important;
	border-radius: 6px !important;
}
.btn-default,
.btn-secondary {
	background-color: #ffffff !important;
	color: var(--etqan-navy) !important;
	border: 1px solid var(--etqan-line-input) !important;
}
.btn-default:hover,
.btn-secondary:hover {
	background-color: var(--etqan-blue-soft) !important;
	border-color: var(--etqan-blue) !important;
}
.btn-primary,
.btn-primary.primary-action {
	background-color: var(--etqan-blue) !important;
	border: 1px solid var(--etqan-blue-dark) !important;
	color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary.primary-action:hover {
	background-color: var(--etqan-blue-dark) !important;
	color: #ffffff !important;
}
.grid-buttons .btn,
.grid-footer .btn {
	background-color: #ffffff !important;
	color: var(--etqan-navy) !important;
	border: 1px solid var(--etqan-line-input) !important;
	font-weight: 600 !important;
}
.grid-buttons .btn:hover {
	background-color: var(--etqan-blue-soft) !important;
	border-color: var(--etqan-blue) !important;
}

/* -------------------------------------------------------------------------- */
/* Workspace cards + shortcuts                                                */
/* -------------------------------------------------------------------------- */
.widget.shortcut-widget-box .indicator-pill { display: none !important; }
.ce-block:has(.widget.shortcut-widget-box) {
	width: auto !important;
	flex: 0 1 auto !important;
}
.widget.shortcut-widget-box {
	display: inline-flex !important;
	align-items: center;
	background: #ffffff;
	border: 1px solid var(--etqan-line);
	padding: 6px 12px !important;
}
.widget.shortcut-widget-box .widget-body { white-space: nowrap; font-weight: 600; }

.widget,
.widget-group .widget,
.dashboard-widget-box,
.card {
	border: 1px solid var(--etqan-line);
	border-radius: var(--border-radius-lg);
	background: #ffffff;
}
.widget.links-widget-box,
.widget.card-widget-box {
	border: 1px solid var(--etqan-line);
	padding: 10px 12px;
}
.widget:hover { border-color: #b6d2e8; }
.widget-group { margin-bottom: 20px; }
.widget.links-widget-box .link-item { padding: 3px 4px; font-weight: 600; }

/* -------------------------------------------------------------------------- */
/* Form controls                                                              */
/* -------------------------------------------------------------------------- */
.page-head { border-bottom: 1px solid var(--etqan-line); }

.form-page .form-layout .form-section:not(:last-child) {
	border-bottom: 1px solid #eaeef2;
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.form-control,
.input-with-feedback,
.control-input input,
.control-input textarea,
.control-input select {
	border: 1px solid var(--etqan-line-input);
	background-color: #ffffff;
	color: #14181f;
	font-weight: 600;
}
.form-control:focus,
.input-with-feedback:focus {
	border-color: var(--etqan-blue);
	box-shadow: 0 0 0 2px rgba(21, 101, 168, 0.15);
}
.like-disabled-input {
	background-color: #f4f6f9;
	color: #14181f;
	font-weight: 600;
}
.form-layout .control-value {
	color: #14181f;
	font-weight: 600;
}
.form-label,
.control-label,
.label-area {
	color: #333b45 !important;
	font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Dropdowns / popovers — MUST stay opaque, above content, readable.          */
/* Covers: Link + Select (Awesomplete), Menu/Actions (dropdown-menu),         */
/* date picker, popovers and modals.                                          */
/* -------------------------------------------------------------------------- */

/* Never clip a dropdown that opens from inside a child table.
   .form-grid-container is deliberately left alone: Frappe toggles its
   overflow per breakpoint to drive horizontal scrolling on small screens. */
.form-grid,
.grid-body,
.grid-body .grid-row {
	overflow: visible;
}

.awesomplete > ul,
.awesomplete > [role="listbox"] {
	background-color: #ffffff !important;
	border: 1px solid var(--etqan-line-input) !important;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(11, 58, 91, 0.16) !important;
	z-index: 1030 !important;
}
.awesomplete > ul > li,
.awesomplete > [role="listbox"] > li {
	color: #14181f !important;
	background-color: transparent;
}
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"],
.awesomplete > [role="listbox"] > li:hover,
.awesomplete > [role="listbox"] > li[aria-selected="true"] {
	background-color: var(--awesomplete-hover-bg) !important;
	color: var(--etqan-navy) !important;
}
.awesomplete > ul > li .link-option,
.awesomplete mark {
	color: #14181f !important;
	background: transparent;
	font-weight: 700;
}

.dropdown-menu {
	background-color: #ffffff !important;
	border: 1px solid var(--etqan-line-input) !important;
	box-shadow: 0 6px 18px rgba(11, 58, 91, 0.16) !important;
	z-index: 1035;
}
.dropdown-menu .dropdown-item,
.dropdown-menu li > a {
	color: #14181f !important;
	font-weight: 600;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu li > a:hover {
	background-color: var(--etqan-blue-soft) !important;
	color: var(--etqan-navy) !important;
}

.datepicker,
.datepicker--nav,
.datepicker.active {
	background-color: #ffffff !important;
	border: 1px solid var(--etqan-line-input) !important;
	box-shadow: 0 6px 18px rgba(11, 58, 91, 0.16) !important;
	z-index: 1035 !important;
	color: #14181f;
}
.datepicker--cell.-current- { color: var(--etqan-blue) !important; }
.datepicker--cell.-selected- {
	background-color: var(--etqan-blue) !important;
	color: #ffffff !important;
}

.popover,
.modal-content {
	background-color: #ffffff !important;
	border: 1px solid var(--etqan-line-input) !important;
}
.modal-header { border-bottom: 1px solid var(--etqan-line); }
.modal-footer { border-top: 1px solid var(--etqan-line); }

/* -------------------------------------------------------------------------- */
/* List view — light header, dark body text                                   */
/* -------------------------------------------------------------------------- */
.list-row-head {
	background-color: var(--etqan-head-bg) !important;
	border: 1px solid var(--etqan-line) !important;
	height: 34px;
}
.list-row-head,
.list-row-head .list-row-col,
.list-row-head .list-row-col a,
.list-row-head .list-subject,
.list-row-head .list-subject a,
.list-row-head .list-count,
.list-row-head .level-item {
	color: var(--etqan-navy) !important;
	font-weight: 700 !important;
}

.list-row-container {
	border-bottom: 1px solid #edf0f4;
}
.list-row-container > .list-row:not(.list-row-head) .list-row-col,
.list-row-container > .list-row:not(.list-row-head) .list-subject a {
	color: #14181f !important;
	font-weight: 600;
}
.list-row-container > .list-row:not(.list-row-head) .list-row-col a {
	color: var(--etqan-blue) !important;
}

.filter-section .form-control,
.list-filters .form-control,
.filter-box .form-control {
	border: 1px solid var(--etqan-line-input);
	background: #ffffff;
	color: #14181f;
}

.indicator-pill { font-weight: 700 !important; }

/* -------------------------------------------------------------------------- */
/* Child table (Items grid)                                                   */
/* -------------------------------------------------------------------------- */
.form-grid {
	border: 1px solid var(--etqan-line);
	border-radius: 6px;
}
.grid-heading-row {
	background-color: var(--etqan-head-bg) !important;
	border-bottom: 1px solid var(--etqan-line) !important;
}
.grid-heading-row,
.grid-heading-row .grid-row,
.grid-heading-row .grid-static-col,
.grid-heading-row .row-index,
.grid-heading-row .static-area,
.grid-heading-row > .grid-row .col {
	color: var(--etqan-navy) !important;
	font-weight: 700 !important;
}
.grid-heading-row .icon,
.grid-heading-row svg {
	stroke: var(--etqan-navy) !important;
}
.grid-heading-row .filter-row .col,
.grid-heading-row .filter-row .static-area {
	background-color: #f8fafc !important;
	font-weight: 500 !important;
}
.grid-heading-row .filter-row .form-control {
	background-color: #ffffff !important;
	border: 1px solid var(--etqan-line-input) !important;
	color: #14181f !important;
	font-weight: 500 !important;
}

.grid-body { background: #ffffff; }
.grid-body .grid-row {
	border-bottom: 1px solid #edf0f4;
}
.grid-body .grid-row .col,
.grid-body .grid-static-col,
.grid-body .static-area,
.grid-body .row-index {
	color: #14181f;
	font-weight: 600;
}
.grid-body .grid-row a,
.grid-body .static-area a {
	color: var(--etqan-blue) !important;
	font-weight: 600;
}
/* Inline editors inside the grid stay white so typed text is readable */
.grid-body .editable-row .form-control {
	background-color: #ffffff !important;
	color: #14181f !important;
}

/* -------------------------------------------------------------------------- */
/* Reports / DataTable                                                        */
/* -------------------------------------------------------------------------- */
.datatable {
	border: 1px solid var(--etqan-line);
	--dt-header-cell-bg: #eef2f7 !important;
	--dt-border-color: #e3e7ec !important;
	--dt-text-color: #14181f !important;
	--dt-cell-bg: #ffffff !important;
}
.datatable .dt-header,
.datatable .dt-header .dt-cell,
.datatable .dt-header .dt-cell__content,
.datatable .dt-row-header,
.datatable .dt-row-header .dt-cell,
.datatable .dt-row-header .dt-cell__content,
.datatable .dt-cell--header,
.datatable .dt-cell--header .dt-cell__content {
	background-color: #eef2f7 !important;
	color: var(--etqan-navy) !important;
	font-weight: 700 !important;
}
.datatable .dt-row-filter,
.datatable .dt-row-filter .dt-cell,
.datatable .dt-row-filter .dt-cell__content {
	background-color: #f8fafc !important;
	color: #14181f !important;
	font-weight: 500 !important;
}
.datatable .dt-scrollable .dt-cell,
.datatable .dt-scrollable .dt-cell__content,
.datatable .dt-body .dt-cell,
.datatable .dt-body .dt-cell__content {
	color: #14181f !important;
	font-weight: 600;
}
.datatable .dt-scrollable .dt-cell a,
.datatable .dt-body .dt-cell a {
	color: var(--etqan-blue) !important;
}

.page-form {
	background: #f7f9fb !important;
	border-bottom: 1px solid var(--etqan-line) !important;
}
.page-form .form-control {
	border: 1px solid var(--etqan-line-input);
	background: #ffffff;
	color: #14181f;
	font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* Links, tabs, print                                                         */
/* -------------------------------------------------------------------------- */
a { color: var(--etqan-blue); }
a:hover { color: var(--etqan-blue-dark); }

.form-tabs-list,
.form-tabs {
	border-bottom: 1px solid var(--etqan-line) !important;
}
.form-tabs .nav-link {
	font-weight: 600;
	color: var(--etqan-navy) !important;
}
.form-tabs .nav-link.active {
	border-bottom: 2px solid var(--etqan-blue) !important;
	color: var(--etqan-blue) !important;
}

.print-format,
.print-format * {
	font-family: var(--font-stack) !important;
	color: #14181f !important;
}