/* ─── Thmanyah Sans (local) ────────────────────────────────────────────
   Every other face here comes from Google Fonts; this one ships with the
   app. It is the typeface the Nova interface at /nova is set in, so
   choosing it from the font manager makes the classic desk and the new
   interface read as one product instead of two.
   ─────────────────────────────────────────────────────────────────────── */
@font-face {
	font-family: "Thmanyah Sans";
	src: url("/assets/arabic_pro/fonts/thmanyahsans-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Thmanyah Sans";
	src: url("/assets/arabic_pro/fonts/thmanyahsans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Thmanyah Sans";
	src: url("/assets/arabic_pro/fonts/thmanyahsans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Thmanyah Sans";
	src: url("/assets/arabic_pro/fonts/thmanyahsans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Thmanyah Sans";
	src: url("/assets/arabic_pro/fonts/thmanyahsans-Black.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════
   Arabic Pro · Font Manager Styles
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CSS Variable (updated dynamically by JS) ─────────────────────── */
:root {
	--ap-font-family: "Thmanyah Sans", "Cairo", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, Arial, sans-serif;
	--ap-font-size: 14px;
}

/* Frappe timeline templates render adjacent inline nodes without whitespace
   (action link, user link, description, and timestamp). Logical margins keep
   those phrases readable in both RTL and LTR without changing copied text. */
.new-timeline .timeline-content > a {
	margin-inline-end: 0.32em;
}

.new-timeline .timeline-content > span {
	margin-inline-start: 0.32em;
}

.new-timeline .timeline-content > span > .frappe-timestamp {
	margin-inline-start: 0.24em;
}

/* ─── Global Font Application ──────────────────────────────────────── */
html,
body,
.frappe-app,
.navbar,
.navbar *,
.sidebar-menu,
.sidebar-menu *,
.desk-sidebar,
.layout-main,
.form-layout,
.form-layout *,
.list-row-container,
.data-pill,
.widget,
.widget *,
.modal-body,
.modal-body *,
.popover,
.dropdown-menu,
.frappe-card,
input,
textarea,
select,
button,
.btn,
.form-control,
.like-disabled-input,
.control-value,
.control-label,
.label-area,
.form-section,
.section-head {
	font-family: var(--ap-font-family) !important;
	font-size: var(--ap-font-size);
}

/* Keep icon fonts intact; applying the Arabic font here turns icons into glyph boxes. */
i.fa,
span.fa,
.fa,
.fa::before,
[class^="fa-"]::before,
[class*=" fa-"]::before {
	font-family: "FontAwesome" !important;
}

/* ─── Opt-out for interfaces that ship their own typeface ───────────────
 *
 * The rules above are deliberately `!important` so they win against Frappe's
 * own stylesheet. That also means an embedded interface with its own type
 * system — a custom SPA, a portal theme, a branded print format — cannot get
 * its font back by any normal means.
 *
 * Mark such a container with `data-ap-font="off"`. Only the element-level
 * selectors are neutralised — the ones above that target `input`, `button` and
 * friends directly and would otherwise beat any normal rule. The `html, body`
 * declarations need no counterpart here: they reach a nested container by
 * inheritance only, and a container that sets its own `font-family` already
 * wins that.
 *
 * Deliberately NOT `[data-ap-font="off"] *`. That also overrides the
 * container's own internal variation — a display face on headings, a monospace
 * face on code — which is exactly the type system the opt-out exists to
 * protect.
 *
 * The FontAwesome guard above stays stronger (`i.fa` is more specific), so
 * icons remain icons inside an opted-out container too.
 */
[data-ap-font="off"] input,
[data-ap-font="off"] textarea,
[data-ap-font="off"] select,
[data-ap-font="off"] button,
[data-ap-font="off"] .btn,
[data-ap-font="off"] .form-control {
	font-family: inherit !important;
}

/* ─── Navbar Font Item ──────────────────────────────────────────────── */
a.ap-navbar-font-item {
	direction: rtl;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

a.ap-navbar-font-item .ap-navbar-icon {
	margin-inline-end: 4px;
}

.ap-navbar-font-label {
	flex: 1;
	text-align: right;
}

.ap-navbar-font-value {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* ─── Font Picker Dialog ────────────────────────────────────────────── */
.ap-font-picker-dialog .modal-dialog {
	max-width: 780px;
}

.ap-font-picker-dialog .modal-header {
	background: linear-gradient(135deg, #1a7f37 0%, #2490ef 100%);
	color: #fff;
	border-radius: 8px 8px 0 0;
}

.ap-font-picker-dialog .modal-header .modal-title,
.ap-font-picker-dialog .modal-header .btn-modal-close {
	color: #fff !important;
}

/* ─── Size Row ──────────────────────────────────────────────────────── */
.ap-size-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 10px;
	border-bottom: 1px solid var(--border-color);
	direction: rtl;
}

.ap-size-row > label {
	font-size: 13px;
	color: var(--text-muted);
	font-weight: 500;
	white-space: nowrap;
	margin: 0;
}

.ap-size-btns {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.ap-size-btn {
	padding: 5px 14px;
	border: 1.5px solid var(--border-color);
	border-radius: 20px;
	cursor: pointer;
	background: none;
	transition: all 0.18s ease;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 4px;
}

.ap-size-btn .ap-size-en {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.7;
}

.ap-size-btn.selected,
.ap-size-btn:hover {
	border-color: var(--primary);
	background: var(--blue-highlight-color, rgba(36, 144, 239, 0.08));
	color: var(--primary);
}

/* ─── Current Font Badge ────────────────────────────────────────────── */
.ap-current-font-info {
	padding: 8px 16px;
	background: var(--subtle-fg, #f5f7fa);
	border-bottom: 1px solid var(--border-color);
	direction: rtl;
	font-size: 12px;
	color: var(--text-muted);
}

.ap-current-font-info span {
	color: var(--primary);
	font-weight: 600;
}

/* ─── Font Grid ─────────────────────────────────────────────────────── */
.ap-font-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px;
	padding: 16px;
	direction: rtl;
	max-height: 420px;
	overflow-y: auto;
}

.ap-font-grid::-webkit-scrollbar {
	width: 5px;
}

.ap-font-grid::-webkit-scrollbar-track {
	background: transparent;
}

.ap-font-grid::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 3px;
}

/* ─── Font Card ─────────────────────────────────────────────────────── */
.ap-font-card {
	border: 2px solid var(--border-color);
	border-radius: 10px;
	padding: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	background: var(--card-bg, #fff);
	position: relative;
	overflow: hidden;
}

.ap-font-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	transition: background 0.2s;
}

.ap-font-card:hover {
	border-color: var(--primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.ap-font-card:hover::before {
	background: var(--primary);
}

.ap-font-card.selected {
	border-color: var(--primary);
	background: var(--blue-highlight-color, rgba(36, 144, 239, 0.05));
	box-shadow: 0 0 0 3px rgba(36, 144, 239, 0.15);
}

.ap-font-card.selected::before {
	background: var(--primary);
}

.ap-font-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.ap-font-name-en {
	font-size: 11px;
	color: var(--text-muted);
	font-family: "Segoe UI", sans-serif !important;
	letter-spacing: 0.3px;
}

.ap-font-name-ar {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 6px;
	text-align: right;
}

.ap-font-sample {
	font-size: 19px;
	line-height: 1.6;
	color: var(--heading-color, #1f272e);
	text-align: right;
	direction: rtl;
}

/* Override the global modal font only for intentional font previews. */
.ap-font-picker-dialog .ap-font-sample,
.ap-font-picker-dialog .ap-font-name-ar,
.ap-font-picker-dialog .ap-font-name-ar b {
	font-family: var(--ap-preview-font) !important;
}

/* ─── Badges ────────────────────────────────────────────────────────── */
.ap-default-badge {
	display: inline-block;
	background: var(--green-highlight-color, rgba(26, 127, 55, 0.12));
	color: var(--green-700, #1a7f37);
	border-radius: 10px;
	font-size: 10px;
	padding: 1px 7px;
	font-weight: 600;
	vertical-align: middle;
}

.ap-selected-badge {
	display: inline-block;
	background: var(--primary);
	color: #fff;
	border-radius: 10px;
	font-size: 10px;
	padding: 1px 7px;
	font-weight: 600;
	vertical-align: middle;
}

/* ─── Admin Section ─────────────────────────────────────────────────── */
.ap-admin-section {
	padding: 14px 16px;
	background: var(--subtle-fg, #f5f7fa);
	border-top: 1px solid var(--border-color);
	direction: rtl;
}

.ap-admin-label {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 600;
	margin-bottom: 10px;
}

.ap-admin-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ─── Locked Overlay ────────────────────────────────────────────────── */
.ap-locked-notice {
	padding: 10px 16px;
	background: var(--yellow-highlight-color, rgba(255, 193, 7, 0.1));
	border-top: 1px solid var(--border-color);
	font-size: 12px;
	color: var(--text-muted);
	direction: rtl;
	text-align: center;
}