/*!
 * SMMGaza — Cairo Typography System
 * ----------------------------------------------------------------------------
 *  Applies the 'Cairo' Google Font across the whole site and dashboard.
 *  Loaded AFTER every theme/vendor stylesheet so it wins the cascade.
 *
 *  Goals:
 *   - Premium, Arabic-friendly typography (RTL & LTR).
 *   - Stable type scale (400/500/600/700/800).
 *   - Preserve all icon fonts: Font Awesome, Feather, Material Icons,
 *     Glyphicons, LineIcons, ionicons, weather, simple-line-icons, etc.
 *   - Mobile readability between 320–414px.
 *   - No effect on monospace code blocks / CodeMirror / API key fields.
 *
 *  IMPORTANT: We never use a global `*` selector with !important on font.
 *  We target text-bearing selectors explicitly so icon-font rules
 *  (which match specific .fa, .fe, etc. classes) keep their family.
 * ----------------------------------------------------------------------------
 */

/* ===========================================================================
   1) BASE FAMILY — text-bearing elements only
   ========================================================================= */
html,
body,
button,
input,
select,
textarea,
optgroup,
keygen,
table,
caption,
thead, tbody, tfoot, tr, td, th,
h1, h2, h3, h4, h5, h6,
p, span, small, strong, em, b, i,
ul, ol, li, dl, dt, dd,
a, label, legend, fieldset,
blockquote, q, cite, address,
figure, figcaption,
header, footer, main, section, article, aside, nav,
form,
.card, .card-title, .card-subtitle, .card-text,
.card-body, .card-header, .card-footer,
.modal, .modal-title, .modal-body, .modal-header, .modal-footer,
.dropdown, .dropdown-menu, .dropdown-item, .dropdown-header,
.navbar, .navbar-brand, .navbar-text, .navbar-nav,
.nav, .nav-item, .nav-link,
.sidebar, .sidebar-brand, .sidebar-link, .sidebar-nav, .sidebar-text,
.sidebar-toggler, .sidebar-search,
.btn, .btn-group, .btn-toolbar,
.badge, .alert, .toast, .tooltip, .popover, .popover-body, .popover-header,
.breadcrumb, .breadcrumb-item, .pagination, .page-link, .page-item,
.list-group, .list-group-item,
.tab-content, .tab-pane, .tabs,
.form-control, .form-select, .form-label,
.form-check-label, .form-text, .input-group-text,
.dataTables_wrapper, .dataTables_info, .dataTables_filter,
.dataTables_length, .dataTables_paginate,
.select2-container, .select2-results, .select2-selection,
.select2-selection__rendered, .select2-search__field,
.swal2-popup, .swal2-title, .swal2-content, .swal2-html-container,
.swal2-actions, .swal2-styled,
.toast-container, .toast-body, .toast-header,
.text-default, .text-muted, .small, .lead,
.cn-color, .cn-text {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, -apple-system,
                 BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial,
                 sans-serif !important;
}

/* ===========================================================================
   2) BASE TYPE SETTINGS
   ========================================================================= */
html, body {
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* ===========================================================================
   3) TYPOGRAPHY HIERARCHY (Cairo weights 400/500/600/700/800)
   ========================================================================= */
h1, .h1 { font-weight: 800 !important; line-height: 1.22; letter-spacing: -0.012em; }
h2, .h2 { font-weight: 700 !important; line-height: 1.28; letter-spacing: -0.006em; }
h3, .h3 { font-weight: 700 !important; line-height: 1.32; }
h4, .h4 { font-weight: 600 !important; line-height: 1.38; }
h5, .h5 { font-weight: 600 !important; line-height: 1.44; }
h6, .h6 { font-weight: 600 !important; line-height: 1.5;  letter-spacing: 0.01em; }

label,
.form-label,
.form-check-label,
.input-label,
.control-label,
th, thead th, .table thead th,
.card-title,
.nav-link,
.dropdown-header,
.section-label {
    font-weight: 500 !important;
}

.section-title,
.page-title,
.modal-title,
.card-header h1, .card-header h2,
.card-header h3, .card-header h4,
.card-header h5, .card-header h6 {
    font-weight: 700 !important;
}

.btn,
button[type="submit"],
button[type="button"],
.badge,
.btn-icon {
    font-weight: 600 !important;
    letter-spacing: 0;
}

.btn-primary, .btn-success, .btn-danger,
.btn-warning, .btn-info, .btn-dark,
.btn-cta, .btn-lg {
    font-weight: 700 !important;
}

/* Hero headings on landing / theme home */
.hero-title,
.section-hero h1,
.section-hero h2,
.landing-hero h1,
[data-role="hero-title"] {
    font-weight: 800 !important;
    letter-spacing: -0.015em;
}

/* ===========================================================================
   4) MONOSPACE — keep code/API keys looking like code
   ========================================================================= */
code, kbd, samp, pre, tt, var,
.code, .pre,
.api-key, .api-token, .api-docs code, .api-docs pre,
.hljs,
.CodeMirror, .CodeMirror *,
.token, .language-html, .language-php,
.language-javascript, .language-bash {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                 ui-monospace, SFMono-Regular, Menlo, Monaco,
                 Consolas, 'Liberation Mono', 'Courier New', monospace !important;
}

/* ===========================================================================
   5) PRESERVE ICON FONTS — restore family explicitly
   We re-state the icon family with !important so that even if our
   base rules cascade, icons keep rendering correctly.
   ========================================================================= */

/* Font Awesome (v4, v5, v6) */
.fa, .fas, .far, .fal, .fab, .fad, .fass, .fasr, .fasl, .fa-solid,
.fa-regular, .fa-light, .fa-brands, .fa-duotone, .fa-thin,
i.fa, i.fas, i.far, i.fal, i.fab, i.fad,
[class^="fa-"], [class*=" fa-"],
i[class^="fa-"], i[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
                 "Font Awesome 6 Pro", "Font Awesome 5 Free",
                 "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* Feather icons (Tabler / Feather class .fe) */
.fe, i.fe,
[class^="fe-"]:not(input):not(textarea),
[class*=" fe-"]:not(input):not(textarea),
i[class^="fe-"], i[class*=" fe-"],
.icon-feather, [data-feather] {
    font-family: 'feather' !important;
}

/* Material Icons */
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone {
    font-family: 'Material Icons' !important;
}

/* Glyphicons (Bootstrap 3) */
.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"] {
    font-family: 'Glyphicons Halflings' !important;
}

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

/* Ionicons / Simple line icons / Themify / Weather etc. */
.ion, [class^="ion-"], [class*=" ion-"]            { font-family: 'Ionicons' !important; }
.icon-line, [class^="icon-"]:not(.fa):not(.fe):not(.material-icons):before,
[class*=" icon-"]:not(.fa):not(.fe):not(.material-icons):before {
    /* leave the original ::before rules untouched */
}
.ti, [class^="ti-"], [class*=" ti-"]               { font-family: 'themify' !important; }
.wi, [class^="wi-"], [class*=" wi-"]               { font-family: 'weathericons' !important; }
.simple-icons, [class^="si-"], [class*=" si-"]     { font-family: 'simple-line-icons' !important; }

/* Flag icons (background-image based) — don't touch family */

/* elFinder file manager icons */
.elfinder .elfinder-button-icon,
.elfinder [class*="elfinder-button-icon-"],
.elfinder .ui-icon,
.elfinder [class*="ui-icon-"] {
    /* These use background-image sprites; leave family unchanged */
}

/* ===========================================================================
   6) RTL / LTR — direction-aware refinements
   ========================================================================= */
[dir="rtl"] body,
html[dir="rtl"] body,
body.rtl {
    letter-spacing: 0;
}

[dir="rtl"] .text-end, [dir="rtl"] .text-left,
[dir="rtl"] .text-md-left {
    text-align: right;
}

[dir="ltr"] body { letter-spacing: 0; }

/* Latin runs inside Arabic text — keep numbers consistent in Cairo */
[dir="rtl"] :is(input, .api-key, .api-token, code, kbd) {
    direction: ltr;
    unicode-bidi: embed;
}

/* Tables in RTL: keep numeric cells LTR for clean alignment */
[dir="rtl"] .table td.num,
[dir="rtl"] .table td.numeric,
[dir="rtl"] .table td[data-type="number"] {
    direction: ltr;
    text-align: left;
}

/* ===========================================================================
   7) MOBILE READABILITY (320 / 360 / 375 / 390 / 414)
   ========================================================================= */
@media (max-width: 575.98px) {
    html, body                 { font-size: 14.5px; line-height: 1.62; }
    h1, .h1                    { font-size: 1.75rem; line-height: 1.25; }
    h2, .h2                    { font-size: 1.45rem; line-height: 1.3;  }
    h3, .h3                    { font-size: 1.22rem; line-height: 1.35; }
    h4, .h4                    { font-size: 1.08rem; }
    h5, .h5                    { font-size: 1rem; }
    h6, .h6                    { font-size: 0.92rem; letter-spacing: 0.015em; }
    .btn, .form-control        { font-size: 0.94rem; }
    .small, small              { font-size: 0.82rem; }
    .card-title                { font-size: 1.05rem; }
    .navbar-brand              { font-size: 1.05rem; }
    .modal-title               { font-size: 1.05rem; }
}

@media (max-width: 380px) {
    html, body                 { font-size: 13.75px; }
    h1, .h1                    { font-size: 1.55rem; }
    h2, .h2                    { font-size: 1.3rem;  }
    h3, .h3                    { font-size: 1.12rem; }
}

@media (max-width: 340px) {
    html, body                 { font-size: 13.25px; }
    h1, .h1                    { font-size: 1.4rem; }
    .btn                       { font-size: 0.9rem; }
}

/* Prevent long unbroken strings (API keys, IDs) from overflowing */
.card-body p,
.card-body span,
.modal-body p,
.modal-body span,
.alert,
.table-responsive {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===========================================================================
   8) FORM CONTROL RHYTHM
   ========================================================================= */
.form-control, .form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"],
input[type="tel"], textarea {
    font-weight: 400;
    line-height: 1.5;
}

/* Buttons size readability on small phones */
@media (max-width: 575.98px) {
    .btn { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}

/* ===========================================================================
   9) SAFETY NETS — common 3rd-party widgets used in the panel
   ========================================================================= */
.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container,
.toast-message,
#toast-container > div,
.notyf__message,
.iziToast-message,
.iziToast-title {
    font-family: 'Cairo', sans-serif !important;
}