/* Microsoft Fluent web scale: caption 12/16, body 14/20, subtitle 16/22,
   section 20/26, title 24/32. Keep typography consistent across modules. */
:root {
    --type-caption: 12px;
    --type-body: 14px;
    --type-subtitle: 16px;
    --type-section: 20px;
    --type-title: 24px;
    --type-metric: 28px;
    --ui-control-height: 36px;
    --ui-control-height-sm: 32px;
}

body.hris-shell, body.hris-login { font-size: var(--type-body); line-height: 20px; font-weight: 400; }
body.hris-shell :is(h1,h2,h3,h4,h5,h6), body.hris-login :is(h1,h2,h3,h4,h5,h6) {
    font-weight: 600; letter-spacing: normal;
}
body.hris-shell .content-body h1,
body.hris-shell .page-heading h1 { font-size: var(--type-title); line-height: 32px; }
body.hris-shell .content-body h2 { font-size: var(--type-section); line-height: 26px; }
body.hris-shell .content-body h3 { font-size: var(--type-section); line-height: 26px; }
body.hris-shell .content-body :is(h4,h5,h6) { font-size: var(--type-subtitle); line-height: 22px; }
body.hris-shell :is(.page-heading p,.dashboard-heading p,.section-copy,.mfa-head p) { font-size: 14px; line-height: 20px; }
body.hris-shell :is(.page-heading-eyebrow,.dashboard-eyebrow) { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; }
body.hris-shell small, body.hris-login small,
body.hris-shell :is(.small,.form-text,.fs-8,.fs-9), body.hris-login .small { font-size: 12px; line-height: 16px; }

body.hris-shell .sidebar .nav-link { font-size: 14px; line-height: 20px; font-weight: 400; }
body.hris-shell .sidebar .nav-link.active { font-weight: 600; }
body.hris-shell .sidebar-brand h5 { font-size: 16px; line-height: 22px; }
body.hris-shell :is(.sidebar-brand small,.tenant-copy small,.tenant-copy strong,.nav-category,.security-status strong,.security-status small,.version-pill,.profile-copy strong,.profile-copy small,.topbar-badge,.app-footer) { font-size: 12px; line-height: 16px; }
body.hris-shell .nav-category { font-weight: 600; letter-spacing: .04em; }
body.hris-shell :is(.dropdown-item,.header-language-select) { font-size: 14px; line-height: 20px; }

body.hris-shell :is(.btn,.btn-sm,.btn-lg,.iam-btn,.mfa-btn,.btn-terminal),
body.hris-login .btn { font-size: 14px !important; line-height: 20px; font-weight: 600; }
body.hris-shell :is(.form-control,.form-select,.form-control-sm,.form-select-sm,.dept-select,.user-search input),
body.hris-login :is(.form-control,.form-select) { font-size: 14px !important; line-height: 20px; }
body.hris-shell :is(.form-control-sm,.form-select-sm,.dept-select,.user-search input) { padding-top: 5px; padding-bottom: 5px; }
body.hris-shell :is(.form-label,.form-check-label), body.hris-login :is(.form-label,.form-check-label) { font-size: 14px !important; line-height: 20px; }
body.hris-shell .form-label, body.hris-login .form-label { font-weight: 600; }
body.hris-shell .form-text { font-size: 12px; line-height: 16px; }
body.hris-shell .select2-container .select2-selection { min-height: 36px !important; height: auto !important; }
body.hris-shell .select2-container .select2-selection__rendered { font-size: 14px !important; line-height: 24px !important; }
body.hris-shell :is(.select2-results__option,.select2-search__field) { font-size: 14px !important; line-height: 20px !important; }

body.hris-shell .table { font-size: 14px; line-height: 20px; }
body.hris-shell .table thead th { font-size: 12px !important; line-height: 16px; font-weight: 600; letter-spacing: .025em; }
body.hris-shell .table tbody td { font-size: 14px; line-height: 20px; }
body.hris-shell :is(.badge,.status-pill,.assigned-role,.manage-role,.state,.direction-pill,.mfa-state,.code-pill,.location-code) { font-size: 12px !important; line-height: 16px; font-weight: 600; }
body.hris-shell :is(.nav-tabs,.iam-tabs,.hris-tab-nav) .nav-link { font-size: 14px !important; line-height: 20px; font-weight: 600; }
body.hris-shell .tab-count { font-size: 12px; line-height: 16px; min-height: 20px; }
body.hris-shell :is(.alert,.accordion-button) { font-size: 14px; line-height: 20px; }

body.hris-shell :is(.iam-panel-header,.matrix-intro,.dashboard-panel-head,.mfa-head) h2 { font-size: 16px !important; line-height: 22px; }
body.hris-shell :is(.iam-panel-header,.matrix-intro,.dashboard-panel-head) p { font-size: 12px !important; line-height: 16px; }
body.hris-shell .user-identity strong { font-size: 14px !important; line-height: 20px; font-weight: 600; }
body.hris-shell :is(.user-identity span,.iam-panel-footer,.role-title small,.role-percentage,.permission-item code,.permission-actions>span) { font-size: 12px !important; line-height: 16px; }
body.hris-shell :is(.role-title strong,.permission-item strong,.permission-module header span) { font-size: 14px !important; line-height: 20px; font-weight: 600; }
body.hris-shell .org-node-name { font-size: 14px !important; line-height: 20px; font-weight: 600 !important; }
body.hris-shell .rec-flow-number { font-weight: 600; }
body.hris-shell :is(.lifecycle-person small,.lifecycle-meta) { font-weight: 400; }
body.hris-shell :is(.kpi-card h2,.kpi-card h4,.pro-kpi strong,.dash-donut-center strong) { font-size: var(--type-metric); line-height: 36px; font-weight: 600; letter-spacing: normal; }
body.hris-shell :is(.kpi-card small,.pro-kpi small,.pro-kpi span,.dash-donut-center span) { font-size: 12px; line-height: 16px; }

body.hris-shell .dashboard-panel-head { flex-wrap: wrap; }
body.hris-shell .dashboard-panel-head > div:first-child { min-width: 0; flex: 1 1 180px; }
body.hris-shell .dash-range-toggle { flex: 0 0 auto; white-space: nowrap; }
body.hris-shell .dash-range-toggle button { flex: 0 0 auto; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow-wrap: normal; min-height: 28px; }

body.hris-shell :is(.modal-title,.modal-header h5) { font-size: 20px !important; line-height: 26px; font-weight: 600; }
body.hris-shell .modal-body { font-size: 14px; line-height: 20px; }
body.hris-shell .portal-logo h1 { font-size: 24px; line-height: 32px; }
body.hris-shell .portal-section-title h2 { font-size: 20px; line-height: 26px; }
body.hris-shell :is(.portal-side-box h3,.portal-side-copy h3,.portal-story-copy h3) { font-size: 16px; line-height: 22px; }
body.hris-shell .news-headline { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: normal; }
body.hris-shell .news-copy { font-size: 16px; line-height: 24px; }
body.hris-shell .news-copy p:first-child:first-letter { float: none; font-size: inherit; line-height: inherit; font-weight: inherit; padding: 0; color: inherit; }
body.hris-shell .portal-rank button { font-size: 14px; line-height: 20px; font-weight: 600; }

body.hris-login h1 { font-size: 20px; line-height: 26px; font-weight: 600 !important; }
body.hris-login .brand-mark { font-weight: 600; }
body.hris-login :is(.form-control,.btn) { min-height: 40px; }

@media (max-width: 767px) {
    body.hris-shell { font-size: 14px; line-height: 20px; }
    body.hris-shell :is(.form-control,.form-select,.form-control-sm,.form-select-sm,.dept-select,.user-search input),
    body.hris-login :is(.form-control,.form-select),
    body.hris-shell :is(.select2-selection__rendered,.select2-search__field) { font-size: 16px !important; }
    body.hris-shell :is(.btn,.btn-sm,.btn-lg,.iam-btn,.form-control,.form-select), body.hris-login .btn { min-height: 40px !important; }
    body.hris-shell :is(.form-control-sm,.form-select-sm,.dept-select,.user-search input) { height: 40px !important; }
    body.hris-shell .content-body :is(h1,h3), body.hris-shell .page-heading h1 { font-size: 20px; line-height: 28px; }
    body.hris-shell .news-headline { font-size: 24px; line-height: 32px; }
    body.hris-shell .dashboard-panel-head { gap: 10px; }
    body.hris-shell .dash-range-toggle button { min-height: 32px; }
    body.hris-shell .topbar-language > i { display: none; }
    body.hris-shell .topbar-language .form-select { width: clamp(166px, 46vw, 200px); padding-inline-start: 12px; padding-inline-end: 28px; }
}