/* =====================================================================
   Facility Pro Enterprise Typography System v8.2
   Purpose: one predictable type hierarchy across the entire UI.
   Loaded LAST so legacy page-level font declarations do not fragment UX.
   Print/PDF reports keep their dedicated print typography.
   ===================================================================== */

@media screen {
    :root {
        --fp-type-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, Arial, sans-serif;
        --fp-type-family-ltr: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;

        /* Approved desktop enterprise scale */
        --fp-type-2xs: 11px;
        --fp-type-xs: 12px;
        --fp-type-sm: 13px;
        --fp-type-body: 14px;
        --fp-type-md: 15px;
        --fp-type-section: 16px;
        --fp-type-subheading: 18px;
        --fp-type-heading: 20px;
        --fp-type-page: 24px;
        --fp-type-hero: 30px;
        --fp-type-kpi: 28px;

        /* Only these four weights should be visually used in the product. */
        --fp-weight-regular: 400;
        --fp-weight-medium: 500;
        --fp-weight-semibold: 600;
        --fp-weight-bold: 700;

        --fp-line-tight: 1.2;
        --fp-line-title: 1.3;
        --fp-line-body: 1.5;
        --fp-line-relaxed: 1.6;
    }

    /* ---------- Font family / rendering ---------- */
    html,
    body,
    .app-shell,
    .vp-shell,
    .fp-auth-page,
    .saas-page-container,
    .app-content,
    .modal,
    .offcanvas,
    .dropdown-menu,
    .toast,
    .popover,
    .tooltip {
        font-family: var(--fp-type-family) !important;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    html[dir="ltr"] body,
    html[dir="ltr"] .app-shell,
    html[dir="ltr"] .vp-shell,
    html[dir="ltr"] .fp-auth-page {
        font-family: var(--fp-type-family-ltr) !important;
    }

    body {
        font-size: var(--fp-type-body) !important;
        font-weight: var(--fp-weight-regular) !important;
        line-height: var(--fp-line-body) !important;
    }

    button,
    input,
    select,
    textarea,
    option,
    .form-control,
    .form-select,
    .input-group-text,
    .btn,
    .dropdown-item {
        font-family: inherit !important;
    }

    /* ---------- Standard weights ---------- */
    p,
    li,
    dd,
    .app-content p,
    .app-content li,
    .vp-main p,
    .fp-auth-page p {
        font-weight: var(--fp-weight-regular) !important;
    }

    strong,
    b {
        font-weight: var(--fp-weight-semibold) !important;
    }

    .fw-normal { font-weight: var(--fp-weight-regular) !important; }
    .fw-medium { font-weight: var(--fp-weight-medium) !important; }
    .fw-semibold { font-weight: var(--fp-weight-semibold) !important; }
    .fw-bold,
    .fw-bolder { font-weight: var(--fp-weight-bold) !important; }

    /* ---------- Native heading scale ---------- */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
        font-family: inherit !important;
        font-weight: var(--fp-weight-semibold) !important;
        letter-spacing: -0.012em !important;
        line-height: var(--fp-line-title) !important;
    }

    h1 { font-size: var(--fp-type-page) !important; }
    h2 { font-size: var(--fp-type-heading) !important; }
    h3 { font-size: var(--fp-type-subheading) !important; }
    h4 { font-size: var(--fp-type-section) !important; }
    h5 { font-size: var(--fp-type-md) !important; }
    h6 { font-size: var(--fp-type-body) !important; }

    /* Bootstrap fs utilities are normalized to the same product scale. */
    .fs-1 { font-size: var(--fp-type-hero) !important; }
    .fs-2 { font-size: var(--fp-type-page) !important; }
    .fs-3 { font-size: var(--fp-type-heading) !important; }
    .fs-4 { font-size: var(--fp-type-subheading) !important; }
    .fs-5 { font-size: var(--fp-type-section) !important; }
    .fs-6 { font-size: var(--fp-type-body) !important; }

    /* ---------- Product page hierarchy ---------- */
    .fm-page-title,
    [class*="page-title"]:not(.topbar-title):not(.vp-topbar-title),
    [class*="workspace-title"]:not([class*="title-row"]):not([class*="subtitle"]),
    .helpdesk-ticket-title,
    .workflow-admin-title,
    .asset-page-title {
        font-size: var(--fp-type-page) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.24 !important;
        letter-spacing: -0.018em !important;
    }

    .fm-page-subtitle,
    [class*="page-subtitle"],
    [class*="workspace-subtitle"],
    [class*="hero-subtitle"] {
        font-size: var(--fp-type-sm) !important;
        font-weight: var(--fp-weight-regular) !important;
        line-height: var(--fp-line-relaxed) !important;
    }

    /* Section/panel titles */
    .fm-section-title,
    .fm-section-title-text,
    [class*="section-title"]:not([class*="actions"]),
    [class*="section-heading"],
    [class*="drawer-heading"],
    [class*="drawer-title"],
    [class*="profile-section-title"] {
        font-size: var(--fp-type-section) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: var(--fp-line-title) !important;
        letter-spacing: -0.008em !important;
    }

    .fm-section-title span,
    .fm-section-title-text span,
    [class*="section-title"] span,
    [class*="drawer-heading"] span,
    [class*="drawer-title"] span {
        font-weight: var(--fp-weight-semibold) !important;
    }

    /* Card/list item titles: intentionally one step below section titles. */
    [class*="card-title"]:not(.modal-title),
    [class*="item-title"],
    [class*="row-title"],
    [class*="line-title"],
    [class*="ticket-heading"],
    [class*="info-title"] {
        font-size: var(--fp-type-md) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.35 !important;
    }

    [class*="panel-title"] h1,
    [class*="panel-title"] h2,
    [class*="panel-title"] h3,
    [class*="panel-title"] h4,
    [class*="panel-title"] h5,
    [class*="panel-title"] h6,
    [class*="panel-title-text"] {
        font-size: var(--fp-type-md) !important;
        font-weight: var(--fp-weight-semibold) !important;
    }

    /* Generic title classes left in older modules. Specific page/section rules above win. */
    [class*="-title"]:not(.bi):not([class*="icon"]):not([class*="title-row"]):not([class*="title-actions"]):not([class*="page-title"]):not([class*="section-title"]):not([class*="card-title"]),
    [class*="-heading"]:not(.bi):not([class*="icon"]):not([class*="page-heading"]):not([class*="section-heading"]) {
        font-weight: var(--fp-weight-semibold) !important;
    }

    /* Eyebrow/kicker = small navigation/context text, never heavy 800/900. */
    [class*="eyebrow"]:not(.bi),
    [class*="kicker"]:not(.bi),
    [class*="overline"]:not(.bi) {
        font-size: var(--fp-type-2xs) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.35 !important;
        letter-spacing: .065em !important;
    }

    /* Secondary copy */
    [class*="subtitle"]:not([class*="page-subtitle"]):not([class*="workspace-subtitle"]),
    [class*="description"],
    [class*="helper"],
    [class*="hint"] {
        font-size: var(--fp-type-xs) !important;
        font-weight: var(--fp-weight-regular) !important;
        line-height: var(--fp-line-body) !important;
    }

    small,
    .small,
    .form-text,
    [class*="-meta"]:not(.bi),
    [class*="caption"]:not(.bi),
    [class*="timestamp"]:not(.bi),
    [class*="date-note"]:not(.bi) {
        font-size: var(--fp-type-xs) !important;
        font-weight: var(--fp-weight-regular) !important;
        line-height: 1.45 !important;
    }

    /* ---------- Forms ---------- */
    .form-label,
    .form-label-sm,
    .form-check-label,
    .fm-page .form-label,
    .helpdesk-page .form-label,
    .procurement-workspace .form-label,
    [class*="field-label"]:not(.bi) {
        font-size: var(--fp-type-xs) !important;
        font-weight: var(--fp-weight-medium) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
    }

    .form-control,
    .form-select,
    .input-group-text,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: var(--fp-type-body) !important;
        font-weight: var(--fp-weight-regular) !important;
        line-height: 1.4 !important;
    }

    ::placeholder {
        font-size: var(--fp-type-sm) !important;
        font-weight: var(--fp-weight-regular) !important;
    }

    .validation-message,
    .invalid-feedback,
    .valid-feedback {
        font-size: var(--fp-type-xs) !important;
        font-weight: var(--fp-weight-medium) !important;
    }

    /* ---------- Buttons and interactive controls ---------- */
    .btn,
    button:not(.btn-close),
    [role="button"] {
        font-size: var(--fp-type-sm) !important;
        font-weight: var(--fp-weight-medium) !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
    }

    .btn strong,
    button strong,
    .btn span,
    button span {
        font-weight: var(--fp-weight-medium) !important;
    }

    .btn-lg { font-size: var(--fp-type-body) !important; }
    .btn-sm { font-size: var(--fp-type-xs) !important; }

    /* ---------- Navigation / shell ---------- */
    .sidebar-nav .nav-item,
    .sidebar-nav .nav-parent,
    .sidebar-nav .nav-child,
    .sidebar-nav a,
    .sidebar-nav button,
    .vp-nav-link,
    .nav-link,
    .dropdown-item,
    .breadcrumb,
    .pagination .page-link {
        font-size: var(--fp-type-sm) !important;
        font-weight: var(--fp-weight-medium) !important;
    }

    .sidebar-nav .nav-item span,
    .sidebar-nav .nav-parent span,
    .sidebar-nav .nav-child span,
    .vp-nav-link span,
    .nav-link span,
    .dropdown-item span {
        font-weight: var(--fp-weight-medium) !important;
    }

    .nav-section,
    .vp-nav-caption {
        font-size: var(--fp-type-2xs) !important;
        font-weight: var(--fp-weight-semibold) !important;
        letter-spacing: .055em !important;
    }

    .brand-title,
    .topbar-brand-title,
    .vp-brand-name,
    .fp-auth-wordmark {
        font-size: var(--fp-type-section) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.15 !important;
    }

    .brand-title span,
    .brand-title strong,
    .topbar-brand-title span,
    .topbar-brand-title strong,
    .vp-brand-name span,
    .vp-brand-name strong,
    .fp-auth-wordmark span,
    .fp-auth-wordmark strong {
        font-weight: var(--fp-weight-semibold) !important;
    }

    .brand-subtitle,
    .page-heading > span,
    .vp-topbar-subtitle {
        font-size: var(--fp-type-2xs) !important;
        font-weight: var(--fp-weight-regular) !important;
    }

    .page-heading h5,
    .vp-topbar-title {
        font-size: var(--fp-type-body) !important;
        font-weight: var(--fp-weight-semibold) !important;
    }

    .user-info strong,
    .vp-user-name {
        font-size: var(--fp-type-sm) !important;
        font-weight: var(--fp-weight-semibold) !important;
    }

    .user-info span,
    .vp-user-role {
        font-size: var(--fp-type-2xs) !important;
        font-weight: var(--fp-weight-regular) !important;
    }

    /* ---------- Tables / dense registers ---------- */
    .table,
    table,
    .quickgrid,
    .grid {
        font-size: var(--fp-type-sm) !important;
    }

    .table thead th,
    table thead th,
    .quickgrid thead th,
    .grid thead th {
        font-size: var(--fp-type-2xs) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.35 !important;
        letter-spacing: .025em !important;
    }

    .table tbody td,
    table tbody td,
    .quickgrid tbody td,
    .grid tbody td {
        font-size: var(--fp-type-sm) !important;
        font-weight: var(--fp-weight-regular) !important;
        line-height: 1.45 !important;
    }

    .table tbody td strong,
    table tbody td strong,
    .quickgrid tbody td strong,
    .grid tbody td strong {
        font-weight: var(--fp-weight-semibold) !important;
    }

    /* ---------- Status / chips / badges ---------- */
    .badge:not(.bi),
    [class*="badge"]:not(.bi):not(i),
    [class*="pill"]:not(.bi):not(i),
    [class*="chip"]:not(.bi):not(i),
    span[class*="status"]:not(.bi),
    span[class*="state"]:not(.bi),
    .vp-admin-status,
    .asset-health-state,
    [class*="status-tag"]:not(.bi):not(i),
    [class*="state-tag"]:not(.bi):not(i) {
        font-size: var(--fp-type-2xs) !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    /* ---------- KPI / analytics typography ---------- */
    [class*="kpi-title"],
    [class*="kpi-label"],
    [class*="metric-label"],
    [class*="stat-label"] {
        font-size: var(--fp-type-xs) !important;
        font-weight: var(--fp-weight-medium) !important;
        line-height: 1.35 !important;
    }

    [class*="kpi-value"],
    [class*="metric-value"],
    [class*="stat-value"],
    [class*="dashboard-counter"],
    [class*="kpi-amount"] {
        font-size: var(--fp-type-kpi) !important;
        font-weight: var(--fp-weight-bold) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.025em !important;
        font-variant-numeric: tabular-nums;
    }

    [class*="kpi-card"] > strong,
    [class*="metric-card"] > strong,
    [class*="stat-card"] > strong {
        font-weight: var(--fp-weight-bold) !important;
    }

    /* Amounts/totals remain strong but use the approved maximum 700 weight. */
    [class*="amount"]:not(.bi),
    [class*="total"] strong,
    [class*="balance"] strong {
        font-weight: var(--fp-weight-bold) !important;
        font-variant-numeric: tabular-nums;
    }

    /* ---------- Modal / drawer hierarchy ---------- */
    .modal-title,
    .offcanvas-title {
        font-size: var(--fp-type-subheading) !important;
        font-weight: var(--fp-weight-semibold) !important;
    }

    .modal-body,
    .offcanvas-body {
        font-size: var(--fp-type-body) !important;
        font-weight: var(--fp-weight-regular) !important;
    }

    /* ---------- Controlled hero exceptions ----------
       Operational screens remain compact. Only true hero surfaces can exceed page-title size. */
    .fp-auth-hero h1,
    .fp-auth-hero-copy h1 {
        font-size: 34px !important;
        font-weight: var(--fp-weight-semibold) !important;
        line-height: 1.16 !important;
    }

    .fp-auth-card-heading h1,
    .fp-auth-card-heading h2,
    .fp-auth-card-heading h3 {
        font-size: var(--fp-type-heading) !important;
        font-weight: var(--fp-weight-semibold) !important;
    }

    .fm-command-hero h1,
    .fm-dashboard-hero h1,
    .vp-hero h1 {
        font-size: var(--fp-type-hero) !important;
        font-weight: var(--fp-weight-semibold) !important;
    }

    /* ---------- Dense data filter standard ---------- */
    .fm-data-filter-bar,
    [class*="filter-bar"],
    [class*="filter-toolbar"] {
        font-size: var(--fp-type-sm) !important;
    }

    .fm-data-filter-bar .form-control,
    .fm-data-filter-bar .form-select,
    [class*="filter-bar"] .form-control,
    [class*="filter-bar"] .form-select,
    [class*="filter-toolbar"] .form-control,
    [class*="filter-toolbar"] .form-select {
        font-size: var(--fp-type-sm) !important;
    }

    /* ---------- Prevent accidental ultra-heavy legacy typography ---------- */
    [class*="title"]:not(.bi):not(i),
    [class*="heading"]:not(.bi):not(i),
    [class*="label"]:not(.bi):not(i),
    [class*="eyebrow"]:not(.bi):not(i),
    [class*="kicker"]:not(.bi):not(i) {
        font-weight: var(--fp-weight-semibold) !important;
    }

    [class*="subtitle"]:not(.bi):not(i),
    [class*="description"]:not(.bi):not(i),
    [class*="helper"]:not(.bi):not(i),
    [class*="hint"]:not(.bi):not(i),
    [class*="meta"]:not(.bi):not(i) {
        font-weight: var(--fp-weight-regular) !important;
    }

    [class*="counter"]:not(.bi):not(i) {
        font-weight: var(--fp-weight-bold) !important;
    }

    /* Ensure icon glyphs keep their own icon font metrics. */
    i.bi,
    .bi::before,
    .bi::after,
    [class^="bi-"]::before,
    [class*=" bi-"]::before {
        font-family: "bootstrap-icons" !important;
        font-weight: normal !important;
    }

}

/* Compact screens: reduce headings one step, not the body text. */
@media screen and (max-width: 767.98px) {
    h1,
    .fm-page-title,
    [class*="page-title"]:not(.topbar-title):not(.vp-topbar-title),
    [class*="workspace-title"]:not([class*="title-row"]):not([class*="subtitle"]) {
        font-size: var(--fp-type-heading) !important;
    }

    h2 { font-size: var(--fp-type-subheading) !important; }
    h3 { font-size: var(--fp-type-section) !important; }

    .fp-auth-hero h1,
    .fp-auth-hero-copy h1,
    .fm-command-hero h1,
    .fm-dashboard-hero h1,
    .vp-hero h1 {
        font-size: var(--fp-type-page) !important;
    }
}