/* CLIONT NOTE desktop reading scale. Keep the existing controls and data markup. */ #appShell.sidebar-layout { --type-page: 24px; --type-section: 18px; --type-list: 16px; --type-body: 14px; --type-support: 13px; } #appShell.sidebar-layout .sidebar-heading > span, #appShell.sidebar-layout .sidebar-more > summary, #appShell.sidebar-layout .sidebar-children .tabs-role-label { font-size: 13px; font-weight: 600; } #appShell.sidebar-layout .workspace-nav [data-workspace] b, #appShell.sidebar-layout .sidebar-children button { font-size: 14px; font-weight: 600; } #appShell.sidebar-layout .sidebar-group-active .sidebar-children button.active { font-weight: 700; } #appShell.sidebar-layout .sidebar-children button { min-height: 40px; line-height: 1.4; } #appShell.sidebar-layout #appMain .panel { font-size: var(--type-body); } #appShell.sidebar-layout #appMain .section-head h2 { font-size: var(--type-page); font-weight: 700; line-height: 1.3; } #appShell.sidebar-layout #appMain .panel h3 { font-size: var(--type-section); font-weight: 700; line-height: 1.35; } #appShell.sidebar-layout #appMain .panel h4 { font-size: var(--type-list); font-weight: 700; line-height: 1.4; } #appShell.sidebar-layout #appMain :is(label, .managed-item-search) { font-size: var(--type-body); font-weight: 600; } #appShell.sidebar-layout #appMain :is(input, select, textarea) { font-size: var(--type-body); font-weight: 400; } #appShell.sidebar-layout #appMain input::placeholder, #appShell.sidebar-layout #appMain textarea::placeholder { font-size: var(--type-body); } #appShell.sidebar-layout #appMain button { font-size: var(--type-body); font-weight: 600; } #appShell.sidebar-layout #appMain :is(.primary, button.active, button[aria-pressed="true"]) { font-weight: 700; } #appShell.sidebar-layout #appMain :is(b, strong) { font-weight: 700; } #appShell.sidebar-layout #appMain table th { font-size: var(--type-support); font-weight: 700; line-height: 1.35; } #appShell.sidebar-layout #appMain table td { font-size: var(--type-body); line-height: 1.45; } #appShell.sidebar-layout #appMain :is(small, .badge, .status, .requirement, .compliance-tag, .education-selection-badge, .eyebrow, .code) { font-size: var(--type-support); line-height: 1.45; } #appShell.sidebar-layout #appMain :is(.badge, .status, .requirement, .compliance-tag, .education-selection-badge) { font-weight: 600; } #appShell.sidebar-layout #appMain :is(.import-errors, .error, [role="alert"], [data-assurance-message], .inventory-filter-help) { font-size: var(--type-support); line-height: 1.55; } #appShell.sidebar-layout #appMain :is(.field-help, .education-source-details, .assurance-basis, .status-legend) { font-size: var(--type-support); line-height: 1.5; } /* The dense stock table keeps every field scrollable while the item and count stay in view. */ #appShell.sidebar-layout #inventory .inventory-table-wrap { overscroll-behavior-inline: contain; } #appShell.sidebar-layout #inventory .inventory-master-table { min-width: 1960px; } #appShell.sidebar-layout #inventory .inventory-master-table th, #appShell.sidebar-layout #inventory .inventory-master-table td { padding: 12px 13px; } #appShell.sidebar-layout #inventory .inventory-master-table :is(th,td):first-child { position: sticky; left: 0; min-width: 240px; width: 240px; max-width: 240px; white-space: normal; } #appShell.sidebar-layout #inventory .inventory-master-table :is(th,td):nth-child(2) { position: sticky; left: 240px; min-width: 190px; width: 190px; } #appShell.sidebar-layout #inventory .inventory-master-table th:first-child, #appShell.sidebar-layout #inventory .inventory-master-table th:nth-child(2) { z-index: 5; background: var(--navy); box-shadow: 1px 0 #53708f; } #appShell.sidebar-layout #inventory .inventory-master-table td:first-child { z-index: 3; background: #fff; box-shadow: 1px 0 #d8e2ed; font-weight: 600; } #appShell.sidebar-layout #inventory .inventory-master-table td:nth-child(2) { z-index: 3; background: #f1f6ff; box-shadow: 1px 0 #d8e2ed; } #appShell.sidebar-layout #inventory .inventory-master-table .inventory-current { color: #173f75; font-weight: 700; } #appShell.sidebar-layout #inventory .inventory-current > b { display: block; padding: 2px 0; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; } #appShell.sidebar-layout #inventory .inventory-current:has(> .inventory-transfer-action, > .inventory-department-balances) > b { padding-bottom: 10px; border-bottom: 1px solid #c9daf0; } #appShell.sidebar-layout #inventory .inventory-current > .inventory-mismatch-warning { display: block; margin-top: 7px; } #appShell.sidebar-layout #inventory .inventory-current .inventory-department-balances { align-items: stretch; margin-top: 9px; padding: 8px 9px; border: 1px solid #d9e4f1; border-radius: 8px; background: #fff; color: #455c75; text-align: right; white-space: normal; overflow-wrap: anywhere; } #appShell.sidebar-layout #inventory .inventory-current > .inventory-transfer-action { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: center; margin: 9px 0 0 !important; padding: 6px 8px !important; border: 1px solid #c7c6ec !important; border-radius: 8px !important; background: #f0effb !important; color: #443c88 !important; text-align: center; line-height: 1.35; white-space: normal; } #appShell.sidebar-layout #inventory .inventory-current > .inventory-transfer-action:hover, #appShell.sidebar-layout #inventory .inventory-current > .inventory-transfer-action:focus-visible { filter: brightness(.96); outline-offset: 2px; } #appShell.sidebar-layout #inventory .inventory-current.danger { background: #fff0ee !important; } #appShell.sidebar-layout #inventory .inventory-current.danger > b { color: #a5322c; border-bottom-color: #ecc7c1; } #appShell.sidebar-layout #inventory .inventory-master-table td:nth-child(3), #appShell.sidebar-layout #inventory .inventory-master-table td:nth-child(4) { font-weight: 600; } #appShell.sidebar-layout #inventory .inventory-master-table tr:has(.status.low,.status.out) td:first-child { background: #fff8ea; box-shadow: inset 4px 0 #d38a19, 1px 0 #d8e2ed; } #appShell.sidebar-layout #inventory .inventory-master-table tr:has(.status.low,.status.out) td:nth-child(2) { background: #fff3dc; } #appShell.sidebar-layout #inventory .inventory-master-table tr:has(.status.low,.status.out) td:nth-child(3), #appShell.sidebar-layout #inventory .inventory-master-table tr:has(.status.low,.status.out) td:nth-child(4) { color: #8d4b00; } #appShell.sidebar-layout #inventory .category-badge, #appShell.sidebar-layout #inventory .department-badge { font-size: var(--type-support); font-weight: 600; } #appShell.sidebar-layout #inventory .inventory-lot-expiry { font-size: var(--type-support); } #appShell.sidebar-layout #inventory .inventory-transfer-action, #appShell.sidebar-layout #inventory .inventory-department-balances { font-size: var(--type-support) !important; } /* Education: selected state and the next edit stay close to the course title. */ #appShell.sidebar-layout #educationItemList { width: min(100%, 1120px); margin-inline: 0; } #appShell.sidebar-layout #educationItemList .managed-item-row { align-items: flex-start; } #appShell.sidebar-layout #educationItemList .managed-item-row > div:last-child { align-self: center; } #appShell.sidebar-layout #educationItemList .managed-item-title b { font-size: var(--type-list); } #appShell.sidebar-layout #educationItemList .managed-item-row small { font-size: var(--type-support); } #appShell.sidebar-layout #educationItemList .education-selection-badge { border: 1px solid currentColor; } #appShell.sidebar-layout .compliance-row-main p, #appShell.sidebar-layout .compliance-row-main a, #appShell.sidebar-layout .education-proof-row small, #appShell.sidebar-layout .education-proof-file strong { font-size: var(--type-support); } #appShell.sidebar-layout .compliance-row-fields select { font-weight: 700; color: var(--navy); background-color: #f5f9ff; } #appShell.sidebar-layout .compliance-row:has(.compliance-row-fields select option:checked[value="PENDING"]) { border-left: 4px solid #d38a19; } #appShell.sidebar-layout .employee-list [data-education-disclosure-label] { font-size: var(--type-support); } /* Staff examinations: the status and record action have a stronger reading order. */ #appShell.sidebar-layout .staff-assurance :is(p,[data-assurance-message],td small) { font-size: var(--type-support); } #appShell.sidebar-layout .staff-assurance td:nth-child(5) { font-weight: 700; color: #754610; background: #fff7e8; } #appShell.sidebar-layout .staff-assurance td:nth-child(6) { color: #52657b; font-weight: 400; } #appShell.sidebar-layout .staff-assurance td:nth-child(7) button { font-weight: 700; } #appShell.sidebar-layout .staff-assurance .table-scroll table { min-width: 1080px; } #appShell.sidebar-layout .staff-assurance table :is(th,td):first-child { position: sticky; left: 0; z-index: 2; background: #fff; min-width: 120px; } #appShell.sidebar-layout .staff-assurance table th:first-child { z-index: 4; background: #edf3fa; color: var(--navy); } #appShell.sidebar-layout .staff-assurance table :is(th,td):last-child { position: sticky; right: 0; z-index: 2; min-width: 76px; background: #fff; box-shadow: -1px 0 #d8e2ed; } #appShell.sidebar-layout .staff-assurance table th:last-child { z-index: 4; background: #edf3fa; } /* Remaining main-menu surfaces: remove tiny decision text without changing content. */ #appShell.sidebar-layout #appMain :is(.hr-employee-filters label,.hr-employee-filters small,.hr-employee-list-group > p,.hr-employee-list-group > p small,.business-info-group-head span,.business-info-category,.business-info-meta b,.business-info-note,.business-info-password,.home-work-grid > button > small,.home-work-notice,.home-work-updated,.education-ox-hint,.education-ox-legend,.education-plan-toolbar label,.education-ox-toolbar label,.audit-log-row,.audit-log-row small) { font-size: var(--type-support); } #appShell.sidebar-layout #appMain .business-info-note { line-height: 1.6; } #appShell.sidebar-layout #appMain .hr-employee-list-group:first-child > p::before { font-size: var(--type-support); } #appShell.sidebar-layout #appMain :is(.movement-pagination,.monthly-help,.movement-footnote,.order-excluded-count,.education-connection-list) { font-size: var(--type-support); line-height: 1.5; } #appShell.sidebar-layout #hr .salary-result-grid :is(span,small,p), #appShell.sidebar-layout #purchase-prices :is(span,small,p), #appShell.sidebar-layout #statistics :is(span,small,p) { font-size: max(13px, 1em); } #appShell.sidebar-layout #hr .salary-legal-notice p { font-size: var(--type-support); } #appShell.sidebar-layout #mypage :is(.mypage-note,.mypage-export-warning,.mypage-cloud-status,.account-management-summary,.account-management-count), #appShell.sidebar-layout #data-management :is(.mypage-note,.drug-api-status span) { font-size: var(--type-support); } #appShell.sidebar-layout #mypage .mypage-card-head :is(span,small), #appShell.sidebar-layout #data-management .mypage-card-head :is(span,small) { font-size: max(13px, 1em); } #appShell.sidebar-layout #appMain [data-monthly-visible-count], #appShell.sidebar-layout #mypage .mypage-card-head > b, #appShell.sidebar-layout #data-management .mypage-card-head > b, #appShell.sidebar-layout #mypage .account-management-summary strong, #appShell.sidebar-layout #data-management .catalog-summary span, #appShell.sidebar-layout #statistics .statistics-bar-column b { font-size: var(--type-support); } /* Shared reading order across the six work areas: supporting information stays legible. */ #appShell.sidebar-layout #appMain .panel :is(.compliance-notice,.mypage-card-description,.business-info-intro p,.mypage-security-notice p,.usage-editor-status,.opening-debt-help) { font-size: var(--type-support); line-height: 1.55; } #appShell.sidebar-layout #appMain .panel :is(.compliance-notice,.mypage-card-description,.mypage-security-notice p,.usage-editor-status) { color: #475d74; } #appShell.sidebar-layout #appMain .panel .compliance-notice { border: 1px solid #dce5ee; } #appShell.sidebar-layout #appMain .panel .list-count { font-size: var(--type-support); font-weight: 700; color: #355575; } /* Inventory: item labels, stock summaries, movement totals and order sources. */ #appShell.sidebar-layout #appMain #products :is(.product-import-toggle span,.product-inventory-value-summary span,.product-inventory-value-summary small,.stock-level-range-hint,.product-list-heading span) { font-size: var(--type-support); } #appShell.sidebar-layout #appMain #products .product-import-toggle::after { font-size: var(--type-support); font-weight: 700; } #appShell.sidebar-layout #appMain #products .product-inventory-value-summary span { color: #465d75; } #appShell.sidebar-layout #appMain #products :is(.category-badge,.department-badge) { font-size: var(--type-support); font-weight: 600; } #appShell.sidebar-layout #appMain #products :is(.product-filter-readonly,.product-table-scroll-hint) { font-size: var(--type-support); } #appShell.sidebar-layout #appMain #usage .movement-summary { font-size: var(--type-support); color: #465d75; } #appShell.sidebar-layout #appMain #inventory-history :is(.movement-summary,.monthly-department-label,.monthly-unknown,.monthly-export-actions span) { font-size: var(--type-support); } #appShell.sidebar-layout #appMain #inventory-history .movement-summary { color: #465d75; } #appShell.sidebar-layout #appMain #orders :is(.order-source,.order-insurance-code) { font-size: var(--type-support); font-weight: 700; } #appShell.sidebar-layout #appMain #debt .statistics-summary-card > span { font-size: var(--type-support); color: #475d74; } /* Education and examinations: make the reason for follow-up readable. */ #appShell.sidebar-layout #appMain .education-target-result :is(p,details) { font-size: var(--type-support); line-height: 1.55; } #appShell.sidebar-layout #appMain .education-target-result:has(.education-target-missing) { border-left: 4px solid #cb872b; background: #fffdf8; } #appShell.sidebar-layout #appMain .education-target-missing { font-weight: 600; color: #80500c; } #appShell.sidebar-layout #appMain :is(#compliance,#exams) :is(.education-plan > p:first-of-type,.management-board-head p) { font-size: var(--type-support); line-height: 1.55; color: #475d74; } #appShell.sidebar-layout #appMain :is(#compliance,#exams) .managed-item-group-head span { font-size: var(--type-support); font-weight: 700; } /* Dashboard, account setup and operational notes. */ #appShell.sidebar-layout #appMain #dashboard :is(.home-work-heading p,.director-approval-title span,.director-usage-title span,.dashboard-usage-date-picker > span,.dashboard-usage-viewbar > span) { font-size: var(--type-support); } #appShell.sidebar-layout #appMain #dashboard :is(.director-approval-title span,.director-usage-title span,.dashboard-usage-date-picker > span,.dashboard-usage-viewbar > span) { font-weight: 700; } #appShell.sidebar-layout #appMain :is(#data-management,#mypage) .mypage-department-item { font-size: var(--type-support); font-weight: 700; } #appShell.sidebar-layout #appMain :is(#data-management,#mypage) .mypage-department-item small { font-size: var(--type-support); font-weight: 600; } #appShell.sidebar-layout #appMain #mypage .mypage-placeholder-row :is(span,strong) { font-size: var(--type-support); font-weight: 600; } @media (max-width: 1100px) { #appShell.sidebar-layout #inventory .inventory-master-table :is(th,td):first-child { width: 210px; min-width: 210px; max-width: 210px; } #appShell.sidebar-layout #inventory .inventory-master-table :is(th,td):nth-child(2) { left: 210px; } #appShell.sidebar-layout #inventory .list-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 9px; align-items: center; } #appShell.sidebar-layout #inventory .list-toolbar > input { grid-column: 1 / -1; width: 100%; max-width: none; } #appShell.sidebar-layout #inventory .filters { display: flex; min-width: 0; gap: 7px; } #appShell.sidebar-layout #inventory .filters button { flex: 0 0 auto; min-width: 75px; white-space: nowrap; } #appShell.sidebar-layout #inventory #resetInventoryFilters, #appShell.sidebar-layout #inventory #refreshInventory { white-space: nowrap; } } @media (max-width: 620px) { #appShell.sidebar-layout #inventory .list-toolbar { grid-template-columns: 1fr 1fr; } #appShell.sidebar-layout #inventory .filters { grid-column: 1 / -1; } #appShell.sidebar-layout #inventory #resetInventoryFilters, #appShell.sidebar-layout #inventory #refreshInventory { width: 100%; } }