/* Cairo font — applied to Arabic / RTL locales only.
 * Files ship under /fonts/Cairo/static/ (static TTFs, one per weight).
 * Kept scoped to html[dir="rtl"] so LTR sessions keep Inter untouched.
 *
 * Added in the i18n follow-on to the R30 locale module — Tareq asked for
 * Cairo specifically for Arabic surfaces; the variable-font TTF ships
 * alongside for future use but static weights keep the @font-face list
 * explicit and readable.
 */

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/Cairo/static/Cairo-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Apply Cairo only under RTL. The broad selector list wins against Tailwind's
 * compiled font-family utilities; icon fonts (.bi, .ki-*, keenicons) target
 * ::before/::after so they keep their own family and are not affected here.
 * Monospace elements still get a mono stack so invoice numbers / codes render
 * correctly — Arabic digits flow fine through the fallback chain. */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button,
html[dir="rtl"] .kt-btn,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .form-label,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .card,
html[dir="rtl"] .card-title,
html[dir="rtl"] .card-body,
html[dir="rtl"] .table,
html[dir="rtl"] .table th,
html[dir="rtl"] .table td,
html[dir="rtl"] .alert,
html[dir="rtl"] .badge,
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-title,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .modal-footer,
html[dir="rtl"] .list-group-item,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] label,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans Arabic', 'Segoe UI Arabic',
                 sans-serif !important;
}

/* Keep numerics + codes in a mono stack inside RTL too. */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] .text-mono-number,
html[dir="rtl"] .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 'Courier New', monospace !important;
}

/* Don't touch icon fonts — redeclare so specificity wars don't pull them in. */
html[dir="rtl"] .bi::before,
html[dir="rtl"] [class^="bi-"]::before,
html[dir="rtl"] [class*=" bi-"]::before {
    font-family: 'bootstrap-icons' !important;
}

html[dir="rtl"] .ki-filled,
html[dir="rtl"] .ki-outline,
html[dir="rtl"] .ki-duotone,
html[dir="rtl"] .ki-solid,
html[dir="rtl"] [class^="ki-"],
html[dir="rtl"] [class*=" ki-"] {
    font-family: 'keenicons-filled', 'keenicons-outline', 'keenicons-duotone',
                 'keenicons-solid' !important;
}