/* ============================================================================
   Typography — IBM Plex Sans Arabic, self-hosted.

   WHY THIS FILE EXISTS
   Before it, app.css set 'Helvetica Neue', Helvetica, Arial globally. None of
   those fonts contain Arabic glyphs, and this product is Arabic-first. Every
   Arabic character therefore fell through to whatever the operating system
   happened to pick — which differs per machine, and differed per page because
   five separate stacks were competing (app.css, gs-navbar-global.css,
   Login.razor, BuildAccount.razor.css / JournalEntryForm.razor.css, and
   reportPrint.css). That is the real cause of "Arabic renders in a different
   font on every screen".

   WHY SELF-HOSTED, NOT GOOGLE FONTS
   The on-premises server is a laptop on a school Wi-Fi behind a LocalSubnet
   firewall rule. A fonts.googleapis.com link would fail exactly the way the
   unpinned Chart.js CDN does — silently, and only at the school. Everything
   this app needs to render is served from the app itself.

   One family covers Arabic and Latin, so mixed strings (Arabic labels beside
   student codes, emails and IDs) share one set of proportions instead of
   colliding between two unrelated typefaces.

   unicode-range lets the browser download only the subset a page actually
   needs — Latin-only screens never fetch the Arabic files.
   ========================================================================= */

/* ---- Arabic subset ---- */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7E, U+1EE00-1EEFF;
}

/* ---- Latin subset ---- */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ============================================================================
   Application of the family.

   Set on :root and inherited, with an explicit `font: inherit` on form
   controls — browsers do NOT inherit fonts into input/select/textarea/button,
   so without that line every dropdown and text field keeps rendering Arabic in
   the OS fallback while the labels beside them do not. This app is mostly
   forms, so that one rule carries most of the visible improvement.
   ========================================================================= */

:root {
    --font-sans: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;

    /* Data-heavy screens: tabular figures keep columns of numbers aligned. */
    --font-numeric: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html,
body {
    font-family: var(--font-sans);
}

input,
select,
textarea,
button,
optgroup,
option {
    font-family: inherit;
}

/* Money and counts line up column-to-column instead of drifting. */
table td,
table th,
.rg-table td,
.rg-table th {
    font-variant-numeric: tabular-nums;
}