/* ===================================================================================
   LOCALIZATION (Phase 1) - language-dependent rules that hang off <html lang dir> (App.razor sets both from
   SupportedLanguages). Two blocks:

   1. Arabic body font. For lang="ar" Tajawal becomes the primary UI face instead of the Inter-first stack
      (Inter stays only as a fallback for Latin runs, e.g. brand names). MudBlazor draws all of its text from
      the --mud-typography-*-family variables that MudThemeProvider emits on :root; html[lang="ar"] is more
      specific than :root, so overriding the variables here wins without touching the theme. The Mushaf
      face is NOT affected: .mateen-ayah (app.css) sets its own font-family directly, and nothing below
      targets it.

   2. Reserved for minimum RTL fixes to the landing page. None were needed after checking a headless
      render of / in ar (see the Phase 1 report). The broad physical-to-logical rewrite of app.css
      is deliberately NOT done here (separate design pass) - anything added below must only be what stops the landing
      page visibly breaking when dir="rtl".
   =================================================================================== */

html[lang="ar"] {
    /* 2026-10-12: Thmanyah Sans leads (arabic-fonts.css); Tajawal stays as the fallback and for surah names (.mateen-sura-name). */
    --mateen-ui-font-ar: 'Thmanyah Sans', 'Tajawal', 'Segoe UI', Tahoma, 'Inter', sans-serif;
    --mud-typography-default-family: var(--mateen-ui-font-ar);
    --mud-typography-h1-family: var(--mateen-ui-font-ar);
    --mud-typography-h2-family: var(--mateen-ui-font-ar);
    --mud-typography-h3-family: var(--mateen-ui-font-ar);
    --mud-typography-h4-family: var(--mateen-ui-font-ar);
    --mud-typography-h5-family: var(--mateen-ui-font-ar);
    --mud-typography-h6-family: var(--mateen-ui-font-ar);
    --mud-typography-subtitle1-family: var(--mateen-ui-font-ar);
    --mud-typography-subtitle2-family: var(--mateen-ui-font-ar);
    --mud-typography-body1-family: var(--mateen-ui-font-ar);
    --mud-typography-body2-family: var(--mateen-ui-font-ar);
    --mud-typography-button-family: var(--mateen-ui-font-ar);
    --mud-typography-caption-family: var(--mateen-ui-font-ar);
    --mud-typography-overline-family: var(--mateen-ui-font-ar);
}

/* RTL (Phase 3a). Directional icons (chevrons "go to" arrows) are drawn pointing right; in dir="rtl" they must point
   left. Put the class on the icon: <MudIcon Class="mateen-flip-rtl" />. Everything else that is merely "the other side"
   is handled with logical properties (inline-start/end, ms-/me- utilities) where it lives. */
html[dir="rtl"] .mateen-flip-rtl {
    transform: scaleX(-1);
}

/* MudGrid pulls itself out by its gutter with a physical negative margin-left. In LTR that overshoot is off the
   left edge (never scrollable); in RTL it lands on the left too, which IS scrollable, so every page with a MudGrid
   grew a stray 8-24px horizontal scrollbar. Clipping the sideways overflow of the main area removes it without moving
   anything (the clipped part is the empty gutter). */
html[dir="rtl"] .mud-main-content {
    overflow-x: clip;
}

html[lang="ar"] body,
html[lang="ar"] .mateen-serif {
    font-family: var(--mateen-ui-font-ar);
}

/* Right-hand drawers (UserFormDialog, RoleClaimsDrawer, MistakeManagerDialog, TicketFormDialog; Phase 3b). MudBlazor's
   DialogPosition.CenterRight is "the end of the line", so in dir="rtl" the panel already docks to the LEFT edge; only the
   slide-in has to come from that side too (app.css animates from translateX(100%) = from the right). */
@keyframes mateen-drawer-slide-in-rtl {
    from {
        transform: translateX(-100%);
    }
}

html[dir="rtl"] .mateen-drawer-dialog {
    animation-name: mateen-drawer-slide-in-rtl;
}

@media (prefers-reduced-motion: reduce) {
    html[dir="rtl"] .mateen-drawer-dialog {
        animation: none;
    }
}

/* Table pager "1-10 of 42" (Phase 3c). MudBlazor pins this text to `direction: initial` (= ltr) so the numbers never flip,
   which in Arabic makes "1-10 من 42" read as "42 من 1-10". Restore the page direction; the strings in SharedResource.ar
   wrap each number run in LRI/PDI isolates, so the numbers themselves stay left-to-right. */
html[dir="rtl"] .mud-table-page-number-information {
    direction: rtl;
}

/* Report charts (Phase 3d). MudChart wraps itself in a forced dir="ltr" box and draws absolute coordinates, so in Arabic the
   time axis ran left-to-right and the value axis sat on the left. Mirroring the whole line/bar <svg> reverses the x order
   (the first month / the top-ranked student at the right, the value axis at the right-hand side, the RTL convention); the
   axis and tooltip <text> is flipped back around its own centre so the letters stay readable. Text that carries a real
   rotation (transform="rotate(45 ...)") is left alone, because a CSS transform would replace that attribute; MudChart only
   emits rotate(0 ...) for these charts. Donut/pie charts are not touched (none is used on a Reports page). The legend is
   plain HTML outside the <svg> and already follows the page direction. */
html[dir="rtl"] svg.mud-chart-bar,
html[dir="rtl"] svg.mud-chart-line {
    transform: scaleX(-1);
}

html[dir="rtl"] svg.mud-chart-bar text:not([transform]),
html[dir="rtl"] svg.mud-chart-bar text[transform^="rotate(0 "],
html[dir="rtl"] svg.mud-chart-line text:not([transform]),
html[dir="rtl"] svg.mud-chart-line text[transform^="rotate(0 "] {
    transform: scaleX(-1);
    transform-box: fill-box;
    transform-origin: center;
}

/* Character counters ("0 / 500", Phase 3d). The spaces around the slash are neutrals between two numbers, which the bidi algorithm
   resolves to the page direction, so in Arabic the counter read "500 / 0". Isolating it as a left-to-right run restores "0 / 500". */
html[dir="rtl"] .mud-input-helper-text > .ms-auto {
    direction: ltr;
    unicode-bidi: isolate;
}