/* Local, complete Arabic + Latin faces. Keep each real weight separate so the
   browser never has to simulate the emphasis in labels, headings or totals. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

html:lang(ar) {
  --erp-font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --erp-font-code: ui-monospace, SFMono-Regular, Consolas, "IBM Plex Sans Arabic", monospace;
  --font-family-primary: var(--erp-font-ui);
  --font-sans: var(--erp-font-ui);
  --font-body: var(--erp-font-ui);
  --font-display: var(--erp-font-ui);
  --default-font-family: var(--erp-font-ui);
  --font-mono: var(--erp-font-code);
  --font-weight-thin: 400;
  --font-weight-extralight: 400;
  --font-weight-light: 400;
  /* Plex's UI weights end at 700. Map heavier utilities to the real bold face. */
  --font-weight-extrabold: 700;
  --font-weight-black: 700;
  font-synthesis: none;
}

html:lang(ar) body {
  font-family: var(--erp-font-ui);
  font-weight: 400;
  line-height: 1.65;
}

html:lang(ar) :is(button, input, select, textarea, optgroup, option,
                  .font-sans, .font-serif, .font-display,
                  [class~="font-['Manrope']"], .tenant-mark,
                  .tenant-heading h1, .login-card__header h2) {
  font-family: var(--erp-font-ui);
}

/* Latin-style tracking squeezes Arabic joins and dots, especially in titles. */
html:lang(ar) :is(h1, h2, h3, h4, h5, h6, label, button, input, select, textarea,
                  [class*="tracking-"],
                  .tenant-heading h1, .login-card__header h2) {
  letter-spacing: normal;
}

html:lang(ar) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  line-height: 1.5;
}

html:lang(ar) :is(.font-mono, code, kbd, pre, samp) {
  font-family: var(--erp-font-code);
}

/* Leave table density controls in charge of rows; give form controls enough
   leading for Arabic dots and diacritics. */
html:lang(ar) :is(.form-row, .inline-field-wrap, .select2-container) {
  line-height: 1.6;
}

html:lang(ar) #content .aligned :is(label, legend) {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.6;
}

html:lang(ar) #content .aligned :is(.required label, label.required) {
  font-weight: 600;
}

html:lang(ar) .mobile-nav [data-app] > .font-display {
  font-size: 0.75rem;
  line-height: 1.45;
}

html:lang(ar) #report-page :is(.rp-label, .report-field > label,
                              .report-table thead th) {
  letter-spacing: normal;
}

/* Keep large sign-in headings clear on both sides of the responsive layout. */
html:lang(ar) :is(.tenant-heading h1, .login-card__header h2) {
  line-height: 1.45;
}

html:lang(ar) :is(input, td, .tabular-nums) {
  font-variant-numeric: tabular-nums;
}