/*
 * Barrix HRMS shared application typography
 *
 * Presentation only: this file must not control visibility, layout, access,
 * workflow state, or user-role behaviour. It is loaded after module styles so
 * legacy screens share the Attendance screen's compact type hierarchy.
 */

:root {
  --app-type-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-type-page-title: 18px;
  --app-type-display-title: 24px;
  --app-type-page-description: 12px;
  --app-type-section-title: 14px;
  --app-type-card-title: 13px;
  --app-type-body: 12px;
  --app-type-caption: 11px;
  --app-type-label: 10px;
  --app-type-control: 12px;
  --app-type-metric: 22px;
  --app-type-weight-regular: 400;
  --app-type-weight-medium: 500;
  --app-type-weight-semibold: 650;
  --app-type-weight-bold: 700;
  --app-type-line-title: 1.3;
  --app-type-line-body: 1.45;
}

/* One family across every signed-in module and every user type. */
#app-page,
#app-page button,
#app-page input,
#app-page select,
#app-page textarea {
  font-family: var(--app-type-family) !important;
}

/* Preserve intentionally monospaced IDs and technical values. */
#app-page :where(code, pre, kbd, samp, .mono, [class*="monospace"], [class*="code-value"]) {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

/* Shared employee/manager header hierarchy. */
#app-page #page-title {
  font-size: var(--app-type-page-title) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-title) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#app-page #page-title > span:first-child {
  font-size: var(--app-type-page-description) !important;
  font-weight: var(--app-type-weight-medium) !important;
  line-height: var(--app-type-line-title) !important;
}

#app-page #page-title > span:last-child {
  font-size: var(--app-type-page-title) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-title) !important;
}

#app-page #page-designation {
  font-size: var(--app-type-page-description) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-body) !important;
}

#app-page #page-date {
  font-size: var(--app-type-caption) !important;
  font-weight: var(--app-type-weight-regular) !important;
  line-height: var(--app-type-line-body) !important;
}

/* Primary page titles: HRMS, Sales, TA & DA, Marketing and approval views. */
#tab-content :where(
  .page-header > .page-title,
  .ops-att-page-title h2,
  .ops-leave-head h1,
  .ac-head h1,
  .omt-page-head h1,
  .pp-person h1,
  .pp-wizard-head h1,
  .travel-page-intro h2,
  .sr-ep-heading h2,
  .sr-toolbar h2,
  .mobile-launcher-title
) {
  font-size: var(--app-type-page-title) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-title) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Navigation landing-page headings (for example, "Sales") are labels, not bold page titles. */
#tab-content .hrms-nav-tile-page .mobile-launcher-title {
  font-weight: var(--app-type-weight-regular) !important;
}

/* Image-led module heroes remain display headings, but use one shared scale. */
#tab-content :where(
  .bc-field-main-hero .bc-field-hero-copy h2,
  .bc-dealer-main-hero .bc-dealer-hero-copy h2,
  .bc-field-inner-hero > div:last-child h3,
  .bc-dealer-inner-hero > div:last-child h3
) {
  font-size: var(--app-type-display-title) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Page descriptions. */
#tab-content :where(
  .page-header > div > p,
  .ops-att-page-title p,
  .ops-leave-head p,
  .ac-head p,
  .omt-page-head p,
  .pp-person p,
  .pp-wizard-head p,
  .travel-page-intro p,
  .sr-ep-heading p,
  .sr-toolbar p,
  .bc-field-main-hero .bc-field-hero-copy p,
  .bc-dealer-main-hero .bc-dealer-hero-copy p,
  .bc-field-inner-hero > div:last-child p,
  .bc-dealer-inner-hero > div:last-child p
) {
  font-size: var(--app-type-page-description) !important;
  font-weight: var(--app-type-weight-regular) !important;
  line-height: var(--app-type-line-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Section and panel headings. */
#tab-content :where(
  .card-header .card-title,
  .ops-att-panel-head h2,
  .ops-att-calendar-head h2,
  .ops-panel-head h2,
  .ops-requests-head h2,
  .ops-leave-section-head h2,
  .ops-manager-card-head h2,
  .ac-panel-head h2,
  .omt-quick h3,
  .omt-direct-reports > h3,
  .omt-structure > h2,
  .omt-record-card > h3,
  .pp-completion h2,
  .pp-section-title,
  .pp-step-panel h2,
  .travel-daily-head h3,
  .travel-card-head h4,
  .travel-final-submit h4,
  .se-section-title h2,
  .se-panel h2,
  .se-field-table h3,
  .sr-ep-commit h3,
  .sr-ep-activity h3,
  .sr-ep-previous h3,
  .sr-ep-dealers h3,
  .sr-card-head h3,
  .sr-card-head h4,
  .ibd-dash-section-head h4
) {
  font-size: var(--app-type-section-title) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-title) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Repeated card/list titles. */
#tab-content :where(
  .ops-att-action-card h3,
  .ops-action-box h3,
  .ops-upcoming h3,
  .ops-request-copy h3,
  .ac-copy h3,
  .ac-context h3,
  .omt-member strong,
  .omt-identity-card strong,
  .omt-structure-person strong,
  .pp-utility strong,
  .pp-family-toggle strong,
  .pp-review-list strong,
  .travel-step-head h4,
  .travel-step-head h5,
  .se-action strong,
  .se-milestone strong
) {
  font-size: var(--app-type-card-title) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-title) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Normal reading copy. */
#tab-content :where(
  .ops-att-today-main p,
  .ops-att-today-main div > span,
  .ops-att-action-card p,
  .ops-action-box p,
  .ops-empty,
  .ops-manager-empty,
  .ops-leave-head + p,
  .ops-request-copy p,
  .ac-context p,
  .ac-value,
  .omt-detail-summary p,
  .omt-member-note,
  .omt-info-list span,
  .omt-info-list strong,
  .omt-privacy,
  .pp-completion p,
  .pp-step-hint,
  .pp-same-address,
  .travel-daily-head p,
  .travel-card-head p,
  .travel-final-submit p,
  .se-panel header p,
  .se-action p,
  .se-neutral p,
  .se-period-note,
  .sr-ep-status p,
  .sr-ep-dealers p,
  .sr-muted
) {
  font-size: var(--app-type-body) !important;
  font-weight: var(--app-type-weight-regular) !important;
  line-height: var(--app-type-line-body) !important;
  letter-spacing: 0 !important;
}

/* Supporting metadata and helper copy. */
#tab-content :where(
  .ops-att-action-meta,
  .ops-att-calendar-help,
  .ops-att-history-copy p,
  .ops-att-request-row p,
  .ops-att-field-help,
  .ops-action-meta,
  .ops-upcoming p,
  .ops-request-meta,
  .ops-request-copy small,
  .ac-meta,
  .ac-employee small,
  .omt-member small,
  .omt-manager-group-head small,
  .omt-quick button small,
  .omt-report-flow span,
  .pp-utility small,
  .pp-doc-head p,
  .pp-review-list small,
  .se-metric small,
  .se-activity small,
  .sr-ep-activity small,
  .sr-card-head p
) {
  font-size: var(--app-type-caption) !important;
  font-weight: var(--app-type-weight-regular) !important;
  line-height: var(--app-type-line-body) !important;
  letter-spacing: 0 !important;
}

/* Forms, filters, tables and labelled actions use the same compact scale. */
#tab-content :where(
  .form-label,
  .ops-request-filters label,
  .pp-field-grid .form-label,
  .se-inline-fields label,
  .travel-update-shell label
) {
  font-size: var(--app-type-body) !important;
  font-weight: var(--app-type-weight-medium) !important;
  line-height: var(--app-type-line-body) !important;
  letter-spacing: 0 !important;
}

#tab-content :where(
  .form-control,
  .btn,
  .ops-att-page-title > button,
  .ops-view-link,
  .ops-manager-view,
  .omt-main-tabs button,
  .omt-detail-tabs button,
  .se-panel footer button,
  .se-action button,
  .sr-tabs button,
  .sr-back
) {
  font-size: var(--app-type-control) !important;
  line-height: var(--app-type-line-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#tab-content :where(table, .sr-table, .se-visit-table) {
  font-size: var(--app-type-body) !important;
  line-height: var(--app-type-line-body) !important;
}

#tab-content :where(table th, .sr-table th, .se-visit-table th) {
  font-size: var(--app-type-caption) !important;
  font-weight: var(--app-type-weight-semibold) !important;
  letter-spacing: .02em !important;
}

/* Keep values visually distinct without allowing module-specific inflation. */
#tab-content :where(
  .ops-att-stats strong,
  .ops-stat-value,
  .ops-manager-today-grid strong,
  .ops-manager-donut strong,
  .ops-balance-card strong,
  .se-value,
  .se-ring-body dd,
  .sr-ep-commit-values strong
) {
  font-size: var(--app-type-metric) !important;
  font-weight: var(--app-type-weight-bold) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Status statements are intentionally one step above a section title. */
#tab-content :where(.ops-att-today-main h2, .ops-attendance-copy h2) {
  font-size: 20px !important;
  font-weight: var(--app-type-weight-semibold) !important;
  line-height: var(--app-type-line-title) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

@media (max-width: 700px) {
  :root {
    --app-type-page-title: 18px;
    --app-type-display-title: 22px;
    --app-type-section-title: 14px;
    --app-type-body: 12px;
  }
}