/**
 * Shared font overrides — applies in BOTH admin and auth layouts.
 *
 * Replaces three previously-duplicated blocks:
 *  - resources/views/layouts/admin.blade.php (ar-only block ~1730-1798)
 *  - resources/views/layouts/auth.blade.php (ar-only block ~351-463)
 *  - resources/views/layouts/invoice-standalone.blade.php inline <style>
 *
 * Rules:
 *  1. In Arabic (html[lang="ar"]) the page body is Cairo.
 *  2. In every other locale (html:not([lang="ar"]), i.e. English) the page
 *     body is ALSO Cairo — overriding the DexTheme default (Nunito Sans body /
 *     Poppins headings) so the whole UI is one family across both languages.
 *  3. Font Awesome icons and the Saudi Riyal SVG wrapper NEVER inherit the body
 *     font — that would render the glyphs in the wrong font.
 *  4. Font Awesome selectors deliberately list each named class instead of
 *     `[class^="fa-"]` because the football-academy dashboard ships titles
 *     prefixed with `fa-dash-*` that would otherwise be hit.
 */

html[lang="ar"] body,
html[lang="ar"] body *:not(select):not(option):not(optgroup) {
    font-family: var(--font-sans, 'Cairo', 'Segoe UI Arabic', 'Tahoma', sans-serif) !important;
}

/* Native <select> must not inherit the universal * font rule — WebKit/macOS then
 * draws the closed menulist label mirrored/upside-down in RTL (admin filter bars). */
html[lang="ar"] body select,
html[lang="ar"] body option,
html[lang="ar"] body optgroup {
    font-family: var(--font-sans, 'Cairo', 'Segoe UI Arabic', 'Tahoma', sans-serif) !important;
    line-height: normal;
    -webkit-appearance: menulist;
    appearance: auto;
    transform: none;
}

html[lang="ar"] body .fa,
html[lang="ar"] body .fas,
html[lang="ar"] body .far,
html[lang="ar"] body .fal,
html[lang="ar"] body .fab,
html[lang="ar"] body .fa-solid,
html[lang="ar"] body .fa-regular,
html[lang="ar"] body .fa-brands,
html[lang="ar"] body .svg-inline--fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

html[lang="ar"] body .saudi-riyal-symbol,
html[lang="ar"] body .saudi-riyal-symbol__svg {
    font-family: inherit !important;
}

html[lang="ar"] body .fa,
html[lang="ar"] body .fas,
html[lang="ar"] body .fa-solid {
    font-weight: 900 !important;
}

html[lang="ar"] body .far,
html[lang="ar"] body .fal,
html[lang="ar"] body .fa-regular {
    font-weight: 400 !important;
}

html[lang="ar"] body .fab,
html[lang="ar"] body .fa-brands {
    font-weight: 400 !important;
}

/* Legacy DexTheme rule (public/theme-related/css/style.css ~14448) forces
 * every <i> inside the sidebar metismenu to use the Material Icons webfont:
 *
 *     .dlabnav .metismenu > li > a i { font-family: "Material Icons"; ... }
 *
 * Since Phase 4.4 of the design-system migration removed the Material Icons
 * <link> (we now map DB icon names to Font Awesome via the @icon directive),
 * Font Awesome glyphs were being drawn with a font that doesn't contain them
 * — producing empty "tofu" squares in the sidebar.
 *
 * Restore the Font Awesome font stack for FA classes anywhere inside the
 * sidebar so the @icon-generated <i class="fas fa-..."></i> tags render the
 * intended glyphs. */
.dlabnav .fa,
.dlabnav .fas,
.dlabnav .far,
.dlabnav .fal,
.dlabnav .fab,
.dlabnav .fa-solid,
.dlabnav .fa-regular,
.dlabnav .fa-brands,
.dlabnav .metismenu > li > a i.fa,
.dlabnav .metismenu > li > a i.fas,
.dlabnav .metismenu > li > a i.far,
.dlabnav .metismenu > li > a i.fal,
.dlabnav .metismenu > li > a i.fab,
.dlabnav .metismenu > li > a i.fa-solid,
.dlabnav .metismenu > li > a i.fa-regular,
.dlabnav .metismenu > li > a i.fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
}

.dlabnav .fa,
.dlabnav .fas,
.dlabnav .fa-solid,
.dlabnav .metismenu > li > a i.fa,
.dlabnav .metismenu > li > a i.fas,
.dlabnav .metismenu > li > a i.fa-solid {
    font-weight: 900 !important;
}

.dlabnav .far,
.dlabnav .fal,
.dlabnav .fa-regular,
.dlabnav .fab,
.dlabnav .fa-brands,
.dlabnav .metismenu > li > a i.far,
.dlabnav .metismenu > li > a i.fal,
.dlabnav .metismenu > li > a i.fa-regular,
.dlabnav .metismenu > li > a i.fab,
.dlabnav .metismenu > li > a i.fa-brands {
    font-weight: 400 !important;
}

html[lang="ar"] body .fa::before,
html[lang="ar"] body .fas::before,
html[lang="ar"] body .far::before,
html[lang="ar"] body .fal::before,
html[lang="ar"] body .fab::before,
html[lang="ar"] body .fa-solid::before,
html[lang="ar"] body .fa-regular::before,
html[lang="ar"] body .fa-brands::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

html[lang="ar"] body .fa::before,
html[lang="ar"] body .fas::before,
html[lang="ar"] body .fa-solid::before {
    font-weight: 900 !important;
}

html[lang="ar"] body .far::before,
html[lang="ar"] body .fal::before,
html[lang="ar"] body .fa-regular::before {
    font-weight: 400 !important;
}

html[lang="ar"] body .fab::before,
html[lang="ar"] body .fa-brands::before {
    font-weight: 400 !important;
}

/* ===========================================================================
 * English (any non-Arabic locale): force Cairo across every screen, same as
 * Arabic. Cairo is loaded for all locales via the font-stack partial; the
 * stack falls back to the system UI font if the webfont fails to load.
 * ======================================================================== */
html:not([lang="ar"]) body,
html:not([lang="ar"]) body *:not(select):not(option):not(optgroup) {
    font-family: 'Cairo', 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif !important;
}

html:not([lang="ar"]) body select,
html:not([lang="ar"]) body option,
html:not([lang="ar"]) body optgroup {
    font-family: 'Cairo', 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif !important;
}

/* Icons / currency glyph must keep their own font, never Cairo. */
html:not([lang="ar"]) body .fa,
html:not([lang="ar"]) body .fas,
html:not([lang="ar"]) body .far,
html:not([lang="ar"]) body .fal,
html:not([lang="ar"]) body .fab,
html:not([lang="ar"]) body .fa-solid,
html:not([lang="ar"]) body .fa-regular,
html:not([lang="ar"]) body .fa-brands,
html:not([lang="ar"]) body .svg-inline--fa,
html:not([lang="ar"]) body .fa::before,
html:not([lang="ar"]) body .fas::before,
html:not([lang="ar"]) body .far::before,
html:not([lang="ar"]) body .fal::before,
html:not([lang="ar"]) body .fab::before,
html:not([lang="ar"]) body .fa-solid::before,
html:not([lang="ar"]) body .fa-regular::before,
html:not([lang="ar"]) body .fa-brands::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

html:not([lang="ar"]) body .saudi-riyal-symbol,
html:not([lang="ar"]) body .saudi-riyal-symbol__svg {
    font-family: inherit !important;
}