/*
 * Per-language typography and direction.
 *
 * MainLayout writes `lang` and `dir` onto <html> whenever the selected language
 * changes, so everything below keys off those two attributes. Using the language
 * attribute (rather than a class) also lets the browser pick correct hyphenation
 * and font fallback for each script.
 *
 * MudBlazor drives its own typography from CSS custom properties, so overriding
 * the --mud-typography-*-family variables reaches components (tables, inputs,
 * dialogs, snackbars) that never see our own selectors.
 */

:root {
    --adex-font-latin: 'Montserrat', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --adex-font-arabic: 'Almarai', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
    --adex-font-urdu: 'Noto Nastaliq Urdu', 'Almarai', 'Noto Naskh Arabic', serif;
    --adex-font-devanagari: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
    --adex-font-bengali: 'Noto Sans Bengali', 'Nirmala UI', 'Vrinda', sans-serif;

    --adex-ui-font: var(--adex-font-latin);
    --adex-line-height: 1.43;
}

/* ---------------------------------------------------------------- language */

html[lang|="ar"] {
    --adex-ui-font: var(--adex-font-arabic);
    --adex-line-height: 1.7;
}

html[lang|="ur"] {
    --adex-ui-font: var(--adex-font-urdu);
    /* Nastaliq cascades diagonally downwards; at the default line-height the
       descenders of one line collide with the line beneath it. */
    --adex-line-height: 2;
}

html[lang|="hi"],
html[lang|="ne"] {
    --adex-ui-font: var(--adex-font-devanagari);
    --adex-line-height: 1.6;
}

html[lang|="bn"] {
    --adex-ui-font: var(--adex-font-bengali);
    --adex-line-height: 1.6;
}

/* ------------------------------------------------------------ application */

html,
body,
.mud-typography,
.mud-input,
.mud-input-label,
.mud-button-label,
.mud-table,
.mud-nav-link,
.mud-dialog,
.mud-snackbar,
.mud-tooltip,
.mud-chip {
    font-family: var(--adex-ui-font);
}

/* MudBlazor ships after the base application styles and some components set a
   concrete Roboto family of their own. Keep the selected script authoritative
   all the way down the component tree. This also makes the Arabic face easy to
   verify in browser developer tools: the computed first family is Almarai. */
html[lang|="ar"] body,
html[lang|="ar"] .mud-typography,
html[lang|="ar"] .mud-input,
html[lang|="ar"] .mud-input-label,
html[lang|="ar"] .mud-button-label,
html[lang|="ar"] .mud-table,
html[lang|="ar"] .mud-nav-link,
html[lang|="ar"] .mud-dialog,
html[lang|="ar"] .mud-snackbar,
html[lang|="ar"] .mud-tooltip,
html[lang|="ar"] .mud-chip,
.adex-arabic,
.adex-arabic * {
    font-family: var(--adex-font-arabic) !important;
}

/* Bilingual contract fields must remain Arabic even while the surrounding UI
   is English, Hindi, or another selected language. */
.adex-arabic {
    direction: rtl;
    line-height: 1.7;
    text-align: right;
}

body {
    /* Reaches MudBlazor components that read the theme variables directly. */
    --mud-typography-default-family: var(--adex-ui-font);
    --mud-typography-h1-family: var(--adex-ui-font);
    --mud-typography-h2-family: var(--adex-ui-font);
    --mud-typography-h3-family: var(--adex-ui-font);
    --mud-typography-h4-family: var(--adex-ui-font);
    --mud-typography-h5-family: var(--adex-ui-font);
    --mud-typography-h6-family: var(--adex-ui-font);
    --mud-typography-subtitle1-family: var(--adex-ui-font);
    --mud-typography-subtitle2-family: var(--adex-ui-font);
    --mud-typography-body1-family: var(--adex-ui-font);
    --mud-typography-body2-family: var(--adex-ui-font);
    --mud-typography-button-family: var(--adex-ui-font);
    --mud-typography-caption-family: var(--adex-ui-font);
    --mud-typography-overline-family: var(--adex-ui-font);
}

/* --------------------------------------------------- script breathing room */

html[lang|="ur"] body,
html[lang|="hi"] body,
html[lang|="ne"] body,
html[lang|="bn"] body,
html[lang|="ar"] body {
    line-height: var(--adex-line-height);
}

html[lang|="ur"] .mud-table-cell,
html[lang|="hi"] .mud-table-cell,
html[lang|="ne"] .mud-table-cell,
html[lang|="bn"] .mud-table-cell {
    line-height: var(--adex-line-height);
    /* Tall scripts clip against MudBlazor's fixed dense row padding. */
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Nastaliq is unreadable at the sizes used for dense finance tables and needs
   both a size bump and vertical room for its sloped baseline. */
html[lang|="ur"] {
    font-size: 1.05rem;
}

html[lang|="ur"] .mud-table-cell,
html[lang|="ur"] .mud-input-label,
html[lang|="ur"] .mud-input,
html[lang|="ur"] .mud-button-label,
html[lang|="ur"] .mud-chip {
    line-height: 2;
}

html[lang|="ur"] .mud-typography-caption {
    line-height: 1.9;
}

html[lang|="ur"] .mud-nav-link,
html[lang|="ur"] .mud-menu-item {
    min-height: 3rem;
}

/* --------------------------------------------------------------- direction */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .mud-table-cell,
html[dir="rtl"] .mud-input-label {
    text-align: right;
}

/* Identifiers, money, dates and codes stay left-to-right inside RTL text.
   Without this, a batch number such as "EXP-2026-014" reorders visually and a
   finance reviewer reads the wrong reference. */
html[dir="rtl"] .adex-ltr,
html[dir="rtl"] .mud-table-cell code,
html[dir="rtl"] time,
html[dir="rtl"] [data-numeric] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
    text-align: left;
}

/* Latin text embedded in an RTL sentence (vendor names, Odoo references) should
   render with the Latin face rather than the Arabic/Urdu fallback. */
html[dir="rtl"] .adex-latin {
    font-family: var(--adex-font-latin);
    direction: ltr;
    unicode-bidi: isolate;
}

/* Mirror the workflow arrows drawn with CSS in the expense approval route. */
html[dir="rtl"] .mud-table-sortlabel .mud-table-sortlabel-icon {
    margin-right: .25rem;
    margin-left: 0;
}