/* ============================================================================
   HR PORTAL — GLOBAL TYPOGRAPHY SYSTEM
   ----------------------------------------------------------------------------
   Single source of truth for all typography across the application.
   Font family : Inter (loaded via Google Fonts <link> in the head partials)
   Do NOT hardcode font-family / font-size / font-weight in views or
   component CSS — always consume the design tokens defined below.
   Load order: after app.min.css, before style.css.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
    /* Font families */
    --app-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --app-font-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* Font sizes — type scale */
    --fs-h1: 2rem;
    /* 32px — page titles            */
    --fs-h2: 1.75rem;
    /* 28px — section titles         */
    --fs-h3: 1.5rem;
    /* 24px — sub-section titles     */
    --fs-h4: 1.25rem;
    /* 20px — widget / panel titles  */
    --fs-h5: 1.125rem;
    /* 18px — modal / card headings  */
    --fs-h6: 1rem;
    /* 16px — minor headings         */
    --fs-body: 0.95rem;
    /* ≈15px — default body text     */
    --fs-sm: 0.8125rem;
    /* 13px — secondary text         */
    --fs-caption: 0.75rem;
    /* 12px — captions, hints, meta  */
    --fs-micro: 0.6875rem;
    /* 11px — dense meta, overlines  */
    --fs-nano: 0.625rem;
    /* 10px — pills, counters, dots  */

    /* Display sizes — large stats / hero numbers only */
    --fs-display-sm: 2.25rem;
    /* 36px — large widget stats     */
    --fs-display: 3rem;
    /* 48px — hero statistics        */
    --fs-display-lg: 3.375rem;
    /* 54px — extra large hero stats */

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Line heights */
    --lh-heading: 1.25;
    /* headings                       */
    --lh-body: 1.6;
    /* comfortable reading            */
    --lh-compact: 1.4;
    /* dense UI (tables, badges)      */
    --lh-none: 1;
    /* stat numbers, icons, pills     */

    /* Letter spacing */
    --ls-tight: -0.02em;
    /* large headings                 */
    --ls-snug: -0.01em;
    /* medium headings                */
    --ls-normal: 0;
    --ls-wide: 0.02em;
    /* small caps / overline text     */
    --ls-caps: 0.04em;
    /* uppercase table headers/labels */
}

/* ----------------------------------------------------------------------------
   2. THEME VARIABLE OVERRIDES (Highdmin theme + Bootstrap)
   Repoints the vendor theme at the Inter stack and the 14px body scale.
   ---------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* Highdmin (app.min.css) */
    --highdmin-font-sans-serif: var(--app-font-sans);
    --highdmin-font-monospace: var(--app-font-mono);
    --highdmin-body-font-family: var(--app-font-sans);
    --highdmin-body-font-size: var(--fs-body);
    --highdmin-body-font-weight: var(--fw-regular);
    --highdmin-body-line-height: var(--lh-body);
    --highdmin-menu-item-font-size: var(--fs-body);

    /* Plain Bootstrap (public pages served from CDN bootstrap) */
    --bs-font-sans-serif: var(--app-font-sans);
    --bs-body-font-family: var(--app-font-sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-font-weight: var(--fw-regular);
    --bs-body-line-height: var(--lh-body);
}

html,
body {
    font-family: var(--app-font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Form controls & buttons inherit the app font (covers legacy overrides) */
input,
button,
select,
optgroup,
textarea {
    font-family: inherit;
}

/* ----------------------------------------------------------------------------
   3. HEADINGS
   ---------------------------------------------------------------------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--app-font-sans);
    line-height: var(--lh-heading);
    color: inherit;
}

h1,
.h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}

h2,
.h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}

h3,
.h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-snug);
}

h4,
.h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-snug);
}

h5,
.h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
}

h6,
.h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
}

/* Consistent heading → content rhythm */
h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-bottom: 0.75rem;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------------------
   4. BODY, SMALL & CAPTION TEXT
   ---------------------------------------------------------------------------- */
p {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    margin-bottom: 0.75rem;
}

small,
.small {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

.text-caption,
.caption,
figcaption {
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

/* ----------------------------------------------------------------------------
   5. SIDEBAR MENU — 14px / 500, identical for every item
   ---------------------------------------------------------------------------- */
.side-nav .side-nav-item .side-nav-link {
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-medium) !important;
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-compact);
}

.side-nav .sub-menu .side-nav-item .side-nav-link {
    font-size: var(--fs-body) !important;
    font-weight: var(--fw-medium) !important;
}

.side-nav .menu-title {
    font-size: var(--fs-caption) !important;
    font-weight: var(--fw-semibold) !important;
    letter-spacing: var(--ls-wide);
}

/* ----------------------------------------------------------------------------
   6. TOP NAVIGATION — 14px / 500 for every item and dropdown
   ---------------------------------------------------------------------------- */
.app-topbar .nav-link,
.app-topbar .topbar-link,
.app-topbar .dropdown-item,
.app-topbar .breadcrumb-item,
.navbar .nav-link {
    font-family: var(--app-font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.app-topbar .page-title,
.greeting-title {
    font-family: var(--app-font-sans) !important;
    letter-spacing: var(--ls-snug) !important;
}

/* Standard page titles (theme .page-title-box pages) match banner titles */
.page-title-box .page-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    margin-bottom: 0;
}

.dropdown-menu {
    font-size: var(--fs-body);
}

.dropdown-item {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.dropdown-header {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
}

/* ----------------------------------------------------------------------------
   7. BUTTONS — 14px / 600 across all variants
   ---------------------------------------------------------------------------- */
.btn {
    font-family: var(--app-font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-compact);
}

.btn-sm,
.btn-group-sm>.btn,
.btn-lg,
.btn-group-lg>.btn {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.btn i {
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -0.15em;
}

/* ----------------------------------------------------------------------------
   8. FORMS — labels, inputs, placeholders, validation, helper text
   ---------------------------------------------------------------------------- */
.form-label,
label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select,
.input-group-text {
    font-family: var(--app-font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

.form-control::placeholder,
.form-control::-webkit-input-placeholder {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    opacity: 0.65;
}

.form-check-label {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
}

.form-text,
.helper-text {
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

.invalid-feedback,
.valid-feedback,
.error,
.validation-message {
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
}

/* ----------------------------------------------------------------------------
   9. TABLES — headers, rows, pagination, empty states
   ---------------------------------------------------------------------------- */
.table {
    font-size: var(--fs-body);
}

.table>thead th,
.table> :not(caption)>*>th {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-compact);
}

.table>tbody td {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

.table .empty-state,
.table .no-data,
.dataTables_empty {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
}

.pagination .page-link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
}

/* ----------------------------------------------------------------------------
   10. CARDS & DASHBOARD WIDGETS
   ---------------------------------------------------------------------------- */
.card-title,
.card-header .header-title,
.header-title {
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-heading);
    margin-bottom: 0.25rem;
}

.card-subtitle,
.card-description,
.sub-header {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

.card-body {
    font-size: var(--fs-body);
}

/* Statistic figures in dashboard widgets */
.widget-stat,
.stat-value {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-heading);
}

.widget-label,
.stat-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

/* ----------------------------------------------------------------------------
   11. MODALS
   ---------------------------------------------------------------------------- */
.modal-title {
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-heading);
}

.modal-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.modal-footer .btn {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

/* ----------------------------------------------------------------------------
   12. BADGES, CHIPS, TAGS & COUNTERS
   ---------------------------------------------------------------------------- */
.badge,
.chip,
.tag {
    font-family: var(--app-font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
    line-height: 1;
}

/* ----------------------------------------------------------------------------
   13. MISC UI — alerts, breadcrumbs, tooltips, toasts, nav-tabs
   ---------------------------------------------------------------------------- */
.alert {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.breadcrumb {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
}

.tooltip,
.popover-body {
    font-family: var(--app-font-sans);
    font-size: var(--fs-caption);
}

.toast-body {
    font-size: var(--fs-body);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
}

.list-group-item {
    font-size: var(--fs-body);
}

code,
pre,
kbd,
samp {
    font-family: var(--app-font-mono);
    font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------------------
   13b. REUSABLE COMPONENT TYPOGRAPHY CLASSES
   Apply these instead of declaring font styles inside a component.
   ---------------------------------------------------------------------------- */
.text-page-title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-heading);
}

.text-section-title {
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-heading);
}

.text-card-title {
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
}

.text-widget-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-compact);
}

.text-widget-stat {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    line-height: var(--lh-none);
}

.text-body {
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
}

.text-description {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-compact);
}

.text-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-compact);
}

.text-badge {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
}

.text-btn {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-compact);
}

/* ----------------------------------------------------------------------------
   14. RESPONSIVE TYPE SCALE
   Headings step down gracefully on tablet / mobile; body stays at 14px.
   ---------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    :root {
        --fs-h1: 1.75rem;
        /* 28px */
        --fs-h2: 1.5rem;
        /* 24px */
        --fs-h3: 1.375rem;
        /* 22px */
    }
}

@media (max-width: 575.98px) {
    :root {
        --fs-h1: 1.5rem;
        /* 24px */
        --fs-h2: 1.375rem;
        /* 22px */
        --fs-h3: 1.25rem;
        /* 20px */
        --fs-h4: 1.125rem;
        /* 18px */
    }

    body {
        overflow-wrap: break-word;
    }
}