/*
 * EventPOS control panel typography
 * ---------------------------------
 * One typographic system for every page, deliberately the classic Bootstrap 3
 * stack the original panel used: no web fonts, no Google Fonts requests.
 *
 * This sheet is loaded by base.html AFTER each page's own CSS, so it wins the
 * cascade:
 *   1. it redefines the font variables the modern pages already use
 *      (--sp-font-hd, --rp-font-ui, ...), and
 *   2. it overrides the families hard-coded in older sheets (Inter, Outfit,
 *      DM Sans, Manrope, Plus Jakarta Sans, Work Sans, Bricolage, Clash...).
 *
 * To change the look of the whole panel, edit the three tokens below.
 */
:root {
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

    /* Tokens defined by the per-page sheets; redefined here so they all agree */
    --sp-font-hd: var(--font-display);
    --sp-font-ui: var(--font-body);
    --rp-font-hd: var(--font-display);
    --rp-font-ui: var(--font-body);
    --pr-font-hd: var(--font-display);
    --pr-font-ui: var(--font-body);
    --vp-font-display: var(--font-display);
    --vu-font-hd: var(--font-display);
    --apf-font-display: var(--font-display);
    --apf-font-body: var(--font-body);
    --font-ui: var(--font-body);
    --font-heading: var(--font-display);
}

/* ── Everything that is not an icon or code ──────────────────────────────── */
body,
body :where(:not(i, [class*="fa-"], .fa, .fas, .far, .fab, .glyphicon, code, pre, kbd, samp)) {
    font-family: var(--font-body) !important;
}

/* ── Headings and hero figures: same face, heavier, tighter ──────────────── */
h1, h2, h3, h4,
.right-side h1, .ip-header-left h1, .fp-brand-text h1,
.dashboard-container h3, .invoice-modern-container h3, .users-modern-container h3,
.cp-title, .pu-title, .topup-title, .fpw-title, .fpw-section-title, .fp-card-title,
.info-card-title, .lm-modal-title, .modal-title, .section-header, .section-header-premium,
.nav-header h5, .navbar-brand, .purse-user-title, .user-name, .activity-panel-header,
.sp-title, .pf-title, .uf-section-title, .ap-title, .vd-title, .pb-title, .md-title {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1, .right-side h1, .ip-header-left h1, .fp-brand-text h1 {
    line-height: 1.1;
}

/* Money and counters: numerals line up in columns */
.ip-stat-value, .stat-value, .balance-amount, .purse-balance, .amount-value,
.balance-detail-value, .balance-value-small, .total-item-value, .preview-amount,
.ip-amount, .invoice-info-value.amount, .invoice-table .amount-cell, .activity-item-price,
table td, table th {
    font-variant-numeric: lining-nums tabular-nums;
}

/* ── Monospace: references, dates, codes, PINs, amounts in forms ─────────── */
code, kbd, pre, samp,
.sp-mono, .md-code, .pu-code, .color-hex, .transaction-id, .invoice-table .transaction-id,
.ip-date, .sp-date-range, .transaction-date,
.ap-input--mono, .ap-input--with-prefix, .ap-input-prefix,
.pb-display-value, .pb-info-card-value, .pb-input--currency, .pb-input--percent, .pb-input-suffix,
.sl-amount, .sl-currency-symbol, .sl-input--currency,
.uf-input--pin, #id_pin,
input[type="number"].form-control {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* ── Table headers read as labels ────────────────────────────────────────── */
table thead th,
.sp-table thead th, .ip-table thead th, .invoice-table th {
    font-family: var(--font-body) !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}