/**
 * Admin typography. Load last, after style.css, wizard.css and rtl.css.
 * Only text styling belongs here; component geometry and icon fonts stay in
 * their existing sheets. Standalone print documents use literal fallbacks.
 */
:root {
    --font-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --font-en: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-num: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 26px;
    --fs-kpi: 28px;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-ar: 1.65;
    --lh-en: 1.5;
    --lh-tight: 1.3;
    --font-ui: var(--font-en);
    --lh-body: var(--lh-en);

    --type-page-title: var(--fs-xl);
    --type-page-title-weight: var(--fw-semibold);
    --type-section-title: var(--fs-lg);
    --type-section-title-weight: var(--fw-semibold);
    --type-card-title: var(--fs-md);
    --type-card-title-weight: var(--fw-semibold);
    --type-sidebar-nav: var(--fs-base);
    --type-sidebar-nav-weight: var(--fw-medium);
    --type-body: var(--fs-base);
    --type-body-weight: var(--fw-regular);
    --type-form-label: var(--fs-base);
    --type-form-label-weight: var(--fw-medium);
    --type-input: var(--fs-base);
    --type-input-weight: var(--fw-regular);
    --type-table-header: var(--fs-sm);
    --type-table-header-weight: var(--fw-semibold);
    --type-table-cell: var(--fs-sm);
    --type-table-cell-weight: var(--fw-regular);
    --type-button: var(--fs-base);
    --type-button-weight: var(--fw-medium);
    --type-breadcrumb: var(--fs-xs);
    --type-breadcrumb-weight: var(--fw-regular);
    --type-helper: var(--fs-xs);
    --type-helper-weight: var(--fw-regular);
    --type-kpi: var(--fs-kpi);
    --type-kpi-weight: var(--fw-semibold);
    --type-modal-title: var(--fs-lg);
    --type-modal-title-weight: var(--fw-semibold);
    --type-notification: var(--fs-base);
    --type-notification-weight: var(--fw-regular);
    --type-badge: var(--fs-xs);
    --type-badge-weight: var(--fw-semibold);
}

/* Language wins over writing direction. Unlabelled legacy RTL containers and
 * auto-direction user content are fallbacks; explicit lang always wins. */
html[lang|="ar"],
[dir="rtl"]:not([lang]),
[dir="auto"]:not([lang]):dir(rtl),
[lang|="ar"] {
    --font-ui: var(--font-ar);
    --lh-body: var(--lh-ar);
}
[lang|="en"],
[dir="auto"]:not([lang]):dir(ltr) {
    --font-ui: var(--font-en);
    --lh-body: var(--lh-en);
}

/* Rebind aliases at language boundaries: inherited custom properties have
 * already resolved var() references on their parent. */
:root,
[lang],
[dir="rtl"]:not([lang]),
[dir="auto"] {
    --bs-body-font-family: var(--font-ui);
    --bs-body-font-size: var(--fs-base);
    --bs-body-line-height: var(--lh-body);
    --bs-font-sans-serif: var(--font-ui);
}

body,
html[dir] body {
    font-family: var(--font-ui);
    font-size: var(--type-body);
    font-weight: var(--type-body-weight);
    line-height: var(--lh-body);
}

/* Explicit text elements only; an icon carrying lang/dir keeps its font. */
:where(span, p, div, a, b, strong, em, small, label, input, textarea, select,
       button, td, th, li, section, article, blockquote, bdi)[lang],
:where(span, p, div, a, b, strong, em, small, label, input, textarea, select,
       button, td, th, li, section, article, blockquote, bdi)[dir="auto"] {
    font-family: var(--font-ui);
    line-height: var(--lh-body);
}

/* #main-content is the real admin content root. Its specificity wins over
 * the historical component variants without !important. body also covers
 * auth pages and overlays appended outside the admin root. */
:is(body, #main-content) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--font-ui);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}
:is(body, #main-content) :is(h1, .h1) { font-size: var(--type-page-title); }
:is(body, #main-content) :is(h2, h3, .h2, .h3) { font-size: var(--type-section-title); }
:is(body, #main-content) :is(h4, h5, h6, .h4, .h5, .h6) { font-size: var(--type-card-title); }

:is(body, #main-content) .page-title {
    font-size: clamp(22px, 2.2vw, var(--type-page-title));
    font-weight: var(--type-page-title-weight);
    line-height: var(--lh-tight);
}
:is(body, #main-content) :is(.section-title, .form-section-title, .review-section-title) {
    font-size: var(--type-section-title);
    font-weight: var(--type-section-title-weight);
    line-height: var(--lh-tight);
}
:is(body, #main-content) :is(.card-title, .card-header h5, .card-header h6,
    .form-card-header h5, .form-card-header h6, .form-card-title,
    .table-card-header h5, .table-card-header h6, .table-title, .table-card-title,
    .info-card-header h5, .info-card-header h6, .chart-card-header h6,
    .filters-card .filters-header h6) {
    font-size: var(--type-card-title);
    font-weight: var(--type-card-title-weight);
    line-height: var(--lh-tight);
}

/* Keep the existing font-size: 0 on collapsed top-level links: it hides text. */
body #sidebar:not(.collapsed) .sidebar-menu .nav-link,
body #sidebar:not(.collapsed) .sidebar-menu .nav-link.active,
body #sidebar:not(.collapsed) .sidebar-menu > .nav-item > .nav-link {
    font-size: var(--type-sidebar-nav);
    font-weight: var(--type-sidebar-nav-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.navbar .nav-link, .navbar .dropdown-item, .dropdown-item,
    .nav-tabs .nav-link, .nav-pills .nav-link, .settings-nav-link) {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.breadcrumb, .breadcrumb-item, .breadcrumb-item a,
    .page-breadcrumb, .page-breadcrumb a) {
    font-size: var(--type-breadcrumb);
    font-weight: var(--type-breadcrumb-weight);
    line-height: var(--lh-body);
}

:is(body, #main-content) :is(label, .form-label, .col-form-label, .form-check-label) {
    font-family: var(--font-ui);
    font-size: var(--type-form-label);
    font-weight: var(--type-form-label-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.form-control, .form-select, .form-select option,
    .input-group-text, .select2-container, .select2-selection,
    .select2-results__option, .select2-selection__rendered, .select2-search__field,
    .select2-selection__choice) {
    font-family: var(--font-ui);
    font-size: var(--type-input);
    font-weight: var(--type-input-weight);
}
/* Do not change Select2's fixed control geometry / rendered line height. */
:is(body, #main-content) :is(.form-control, .form-select, .input-group-text) {
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.form-text, .setting-help, .help-block,
    .invalid-feedback, .valid-feedback, small, .small, .text-xs,
    .notif-time, .stat-label, .stat-desc, .att-stat-label, .att-stat-pct,
    .mini-stat-label, .profile-stat-label, .kpi-change-desc) {
    font-size: var(--type-helper);
    font-weight: var(--type-helper-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.btn, .btn-action) {
    --bs-btn-font-family: var(--font-ui);
    --bs-btn-font-size: var(--type-button);
    --bs-btn-font-weight: var(--type-button-weight);
    font-family: var(--font-ui);
    font-size: var(--type-button);
    font-weight: var(--type-button-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) .btn-sm {
    --bs-btn-font-size: var(--fs-sm);
    font-size: var(--fs-sm);
}

:is(body, #main-content) .table th {
    font-size: var(--type-table-header);
    font-weight: var(--type-table-header-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) .table td {
    font-size: var(--type-table-cell);
    font-weight: var(--type-table-cell-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.dataTables_info, .dataTables_paginate,
    .dataTables_filter, .dataTables_length, .dataTables_filter label,
    .dataTables_length label, .dataTables_filter input, .dataTables_length select,
    .pagination, .page-link) {
    --bs-pagination-font-size: var(--fs-sm);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.badge, .record-count, .notification-bell .badge-count) {
    --bs-badge-font-size: var(--type-badge);
    --bs-badge-font-weight: var(--type-badge-weight);
    font-size: var(--type-badge);
    font-weight: var(--type-badge-weight);
}
:is(body, #main-content) .filters-card {
    font-size: var(--type-body);
    line-height: var(--lh-body);
}

/* These are the numeric value classes used by the admin views. Currency
 * labels and descriptions inherit the UI font; whole tables never use Inter. */
.table td, .table th, .stat-value, .stat-number, .att-stat-number,
.mini-stat-value, .profile-stat-value, .report-stat-value, .currency-val,
.amount-col, .item-amount, .item-discount-amount, .receipt-amount-lg,
.exm-num, .stu-num, .neo-stat-number, .ws-stat-value,
[data-money], input[type="number"], .badge {
    font-variant-numeric: tabular-nums;
}
:is(body, #main-content) :is(.stat-value, .stat-number, .att-stat-number, .mini-stat-value,
    .profile-stat-value, .report-stat-value, .neo-stat-number, .ws-stat-value,
    .fin-kpis .fin-num, .exm-kpis h3.exm-num, .kpi-card .h2,
    .kpi-card .h3, .kpi-card .h4) {
    font-size: clamp(24px, 2.4vw, var(--type-kpi));
    font-weight: var(--type-kpi-weight);
    line-height: var(--lh-tight);
}
/* Numeric leaves only. Some stat values include names/statuses or a currency
 * label, so their container keeps --font-ui; verified numeric values use --font-num.
 * currency-val and amount-col also contain Arabic labels in current views,
 * so they receive tabular figures above, not an English-only family. */
:is(body, #main-content) :is(input[type="number"], .item-amount, .item-discount-amount,
    .att-stat-number, .stat-value[data-count], .stu-num, .exm-num,
    .neo-stat-number, .ws-stat-value, .student-kpis .stat-value,
    .sp-result-stat .stat-value, .kpi-card .h2, .kpi-card .h3, .kpi-card .h4) {
    font-family: var(--font-num);
}

/* Bootstrap .fw-bold uses !important; KPI values still follow their role. */
:is(body, #main-content) .kpi-card :is(.h2, .h3, .h4).fw-bold {
    font-weight: var(--type-kpi-weight) !important;
}

:is(body, #main-content) :is(.modal-title, .swal2-title) {
    font-family: var(--font-ui);
    font-size: var(--type-modal-title);
    font-weight: var(--type-modal-title-weight);
    line-height: var(--lh-tight);
}
:is(body, #main-content) :is(.modal-body, .swal2-html-container) {
    font-family: var(--font-ui);
    font-size: var(--type-body);
    font-weight: var(--type-body-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.toast-message, .toast-title, .notif-title, .notif-message) {
    font-family: var(--font-ui);
    font-size: var(--type-notification);
    font-weight: var(--type-notification-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(.tooltip-inner, .popover, .popover-header, .popover-body) {
    --bs-tooltip-font-size: var(--fs-xs);
    --bs-popover-font-size: var(--fs-xs);
    font-family: var(--font-ui);
    font-size: var(--type-helper);
    font-weight: var(--type-helper-weight);
    line-height: var(--lh-body);
}
:is(body, #main-content) :is(code, pre, kbd, samp) {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}