/*
 * MarsaINTLS — Unified site font (Tajawal + Cairo) served LOCALLY.
 *
 * Strategy (3 layers — order matters):
 *   1. @font-face declarations pointing to /public/fonts/{family}/*.woff2
 *      No external network calls. Works offline.
 *   2. Universal selector forces inheritance of Tajawal/Cairo on every
 *      element + pseudo-element. Beats Tailwind's compiled body Inter rule
 *      and any inline font-family classes.
 *   3. Icon font-families are re-asserted with !important AFTER the universal
 *      rule so icons keep their glyph fonts (tabler-icons, bootstrap-icons,
 *      remix, font-awesome, boxicons, line-awesome, feather).
 */

/* ─── 1. LOCAL @font-face — Tajawal (Arabic) ─────────────────────────── */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/tajawal/tajawal-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/tajawal/tajawal-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/tajawal/tajawal-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/tajawal/tajawal-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/tajawal/tajawal-900.woff2') format('woff2');
}

/* ─── 1. LOCAL @font-face — Cairo (Latin / English) ─────────────────── */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/cairo/cairo-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cairo/cairo-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/cairo/cairo-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/cairo/cairo-700.woff2') format('woff2');
}

/* ─── 2. UNIFIED font on body + everything inherits ─────────────────── */
html,
body,
html[lang="ar"] body,
[dir="rtl"] {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

html[lang="en"] body,
[dir="ltr"] {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Universal force-inherit: every element + pseudo-element picks up the body
 * font instead of Tailwind's `font-inter` defaults, font-sans utility classes,
 * or any inline Ynex font-family. */
*,
*::before,
*::after {
    font-family: inherit !important;
}

/* ─── 2b. EXPLICIT overrides for form/table/Ynex classes that win on specificity ─── */
/* Form elements (browsers don't inherit font by default). */
button,
input,
select,
textarea,
optgroup,
.ti-btn,
.ti-btn-soft,
.ti-form-input,
.ti-form-select,
.ti-form-checkbox,
.ti-form-label,
.ti-form-help,
.form-control,
.btn {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Tables — Ynex's custom-table and generic table elements. */
.ti-custom-table,
.ti-custom-table th,
.ti-custom-table td,
table,
thead,
tbody,
tfoot,
tr,
th,
td {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Override Tailwind's `font-inter` / `font-sans` utility classes wherever they
 * are sprinkled across the codebase (e.g. footers, headers, dashboards). */
.font-inter,
.font-sans,
.font-default,
.font-system {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* LTR mirror — Cairo. */
[dir="ltr"] button,
[dir="ltr"] input,
[dir="ltr"] select,
[dir="ltr"] textarea,
[dir="ltr"] optgroup,
[dir="ltr"] .ti-btn,
[dir="ltr"] .ti-btn-soft,
[dir="ltr"] .ti-form-input,
[dir="ltr"] .ti-form-select,
[dir="ltr"] .ti-form-checkbox,
[dir="ltr"] .ti-form-label,
[dir="ltr"] .ti-form-help,
[dir="ltr"] .form-control,
[dir="ltr"] .btn,
[dir="ltr"] .ti-custom-table,
[dir="ltr"] .ti-custom-table th,
[dir="ltr"] .ti-custom-table td,
[dir="ltr"] table,
[dir="ltr"] thead,
[dir="ltr"] tbody,
[dir="ltr"] tfoot,
[dir="ltr"] tr,
[dir="ltr"] th,
[dir="ltr"] td,
[dir="ltr"] .font-inter,
[dir="ltr"] .font-sans,
[dir="ltr"] .font-default,
[dir="ltr"] .font-system {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* ─── 3. RE-ASSERT icon fonts (after the universal rule above) ──────── */
/* Tabler */
i.ti,
.ti,
[class^="ti-"],
[class*=" ti-"] {
    font-family: 'tabler-icons' !important;
}

/* Bootstrap Icons */
i.bi,
.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-family: 'bootstrap-icons' !important;
}

/* Remix Icon */
i.ri,
.ri,
[class^="ri-"],
[class*=" ri-"] {
    font-family: 'remixicon' !important;
}

/* Font Awesome (4, 5, 6) */
.fa,
.fas,
.far,
.fab,
.fal,
.fa-solid,
.fa-regular,
.fa-brands,
.fa-light,
[class^="fa-"],
[class*=" fa-"] {
    font-family: 'Font Awesome 6 Free', 'FontAwesome', sans-serif !important;
}

/* Boxicons */
.bx,
.bxs,
[class^="bx-"],
[class*=" bx-"] {
    font-family: 'boxicons' !important;
}

/* Line Awesome */
.la,
.las,
.lar,
.lab,
[class^="la-"],
[class*=" la-"] {
    font-family: 'Line Awesome Free', 'Line Awesome Brands' !important;
}

/* Feather */
.fe,
[class^="fe-"],
[class*=" fe-"] {
    font-family: 'feather' !important;
}