/* ========================================================================== UBIZIMA+ — PAYROLL CONTROL CENTER PROFESSIONAL UI R5 Dedicated scope only: #aquila-payroll-r1-stage #hrm-payroll-r9-root ========================================================================== */ #aquila-payroll-r1-stage[ data-payroll-professional-ui="r5" ] { box-sizing: border-box; width: 100%; max-width: none; min-height: 0 !important; /* * This is calculated from the ACTUAL floating deck. * Never allow the Payroll header underneath it. */ padding-top: var( --payroll-ui-safe-top, 112px ) !important; padding-right: 18px; padding-bottom: 36px; padding-left: 18px; scroll-padding-top: var( --payroll-ui-viewport-safe-top, 112px ); } #hrm-payroll-r9-root[ data-payroll-professional-ui="r5" ] { box-sizing: border-box; width: min( 100%, 1600px ) !important; max-width: 1600px !important; min-width: 0; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; position: relative !important; inset: auto !important; transform: none !important; } /* -------------------------------------------------------------------------- HEADER -------------------------------------------------------------------------- */ #hrm-payroll-r9-root [data-payroll-ui="header"] { box-sizing: border-box; display: grid; grid-template-columns: minmax( 0, 1fr ) auto; align-items: start; column-gap: 22px; row-gap: 6px; width: 100%; margin: 0 0 16px !important; padding: 0 2px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #hrm-payroll-r9-root [data-payroll-ui="eyebrow"] { margin: 0 0 3px !important; font-size: 11px !important; line-height: 1.3 !important; font-weight: 760 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #64748b !important; } #hrm-payroll-r9-root [data-payroll-ui="title"] { margin: 0 !important; font-size: clamp( 24px, 2vw, 30px ) !important; line-height: 1.14 !important; letter-spacing: -.025em !important; font-weight: 760 !important; color: #172033 !important; } #hrm-payroll-r9-root [data-payroll-ui="subtitle"] { grid-column: 1 / -1; width: min( 100%, 800px ); margin: 1px 0 0 !important; font-size: 12px !important; line-height: 1.55 !important; color: #64748b !important; } #hrm-payroll-r9-root [data-payroll-ui="refresh"] { align-self: start; min-height: 34px; padding: 7px 13px !important; border-radius: 8px !important; white-space: nowrap; } /* -------------------------------------------------------------------------- WORKSPACE NAVIGATION -------------------------------------------------------------------------- */ #hrm-payroll-r9-root [data-payroll-ui="tabs"] { box-sizing: border-box; display: flex !important; align-items: center; gap: 3px !important; width: 100%; margin: 0 0 15px !important; padding: 5px !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba( 15, 23, 42, .025 ) !important; } #hrm-payroll-r9-root [data-payroll-ui="tab"] { flex: 0 0 auto; min-height: 32px; padding: 7px 11px !important; border-radius: 7px !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 650 !important; white-space: nowrap; text-decoration: none !important; } /* -------------------------------------------------------------------------- SUMMARY / KPI CARDS -------------------------------------------------------------------------- */ #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { display: grid !important; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important; gap: 10px !important; width: 100%; margin: 0 0 14px !important; } #hrm-payroll-r9-root [data-payroll-ui="summary-card"] { box-sizing: border-box; min-width: 0; min-height: 86px; padding: 14px 15px !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba( 15, 23, 42, .025 ) !important; } #hrm-payroll-r9-root [data-payroll-ui="summary-card"] :first-child { color: #64748b; } #hrm-payroll-r9-root [data-payroll-ui="summary-card"] :last-child { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- TABLE / DATA PANEL -------------------------------------------------------------------------- */ #hrm-payroll-r9-root [data-payroll-ui="table-panel"] { box-sizing: border-box; width: 100%; margin: 0 !important; padding: 14px 15px 16px !important; overflow: hidden; border: 1px solid #e2e8f0 !important; border-radius: 11px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba( 15, 23, 42, .025 ) !important; } #hrm-payroll-r9-root [data-payroll-ui="table"] { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; font-size: 12px !important; } #hrm-payroll-r9-root [data-payroll-ui="table"] th { padding: 10px 10px !important; font-size: 10px !important; font-weight: 760 !important; letter-spacing: .045em !important; text-transform: uppercase !important; color: #64748b !important; background: #f8fafc !important; } #hrm-payroll-r9-root [data-payroll-ui="table"] td { padding: 11px 10px !important; vertical-align: middle !important; color: #334155 !important; } /* -------------------------------------------------------------------------- ACTIONS -------------------------------------------------------------------------- */ #hrm-payroll-r9-root [data-payroll-ui-action="new-period"] { min-height: 34px; border-radius: 8px !important; font-weight: 680 !important; } #hrm-payroll-r9-root [data-payroll-ui-action="new-run"] { min-height: 34px; border-radius: 8px !important; font-weight: 650 !important; } #hrm-payroll-r9-root [data-payroll-ui-action="open"] { border-radius: 999px !important; padding: 5px 10px !important; font-size: 11px !important; font-weight: 700 !important; } /* -------------------------------------------------------------------------- PREVENT GENERIC R9 FULL-PAGE / BODY FALLBACK BEHAVIOUR -------------------------------------------------------------------------- */ #aquila-payroll-r1-stage > #hrm-payroll-r9-root { display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; min-height: 0 !important; } /* -------------------------------------------------------------------------- TABLET -------------------------------------------------------------------------- */ @media ( max-width: 1024px ) { #aquila-payroll-r1-stage[ data-payroll-professional-ui="r5" ] { padding-right: 14px; padding-left: 14px; padding-bottom: 30px; } #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important; } } /* -------------------------------------------------------------------------- MOBILE -------------------------------------------------------------------------- */ @media ( max-width: 600px ) { #aquila-payroll-r1-stage[ data-payroll-professional-ui="r5" ] { padding-right: 10px; padding-left: 10px; padding-bottom: 24px; } #hrm-payroll-r9-root [data-payroll-ui="header"] { grid-template-columns: minmax( 0, 1fr ); row-gap: 8px; } #hrm-payroll-r9-root [data-payroll-ui="refresh"] { justify-self: start; } #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { grid-template-columns: minmax( 0, 1fr ) !important; gap: 8px !important; } #hrm-payroll-r9-root [data-payroll-ui="summary-card"] { min-height: 74px; } #hrm-payroll-r9-root [data-payroll-ui="table-panel"] { overflow-x: auto; } #hrm-payroll-r9-root [data-payroll-ui="table"] { min-width: 860px; } } /* ========================================================================== UBIZIMA+ — PAYROLL PROFESSIONAL UI R5.2 CANONICAL DECK CLEARANCE OWNERSHIP Layout ownership: - R3 browser-shell JS measures the real floating application deck. - R4.1 browser-shell CSS provides first-paint fallbacks. - R5.2 consumes that canonical safe-top value. - No second geometry controller exists here. This rule is Payroll-only. ========================================================================== */ /* * Keep the visible Payroll stage below the floating deck. * * Hard refresh: * CSS falls back immediately to 112px before JavaScript measurement. * * Normal refresh / resize: * R3 shell updates --aquila-payroll-stage-safe-top. * * Module inter-navigation: * the mounted stage continues consuming the same canonical variable. * * IMPORTANT: * Never set --aquila-payroll-stage-safe-top here. * R3 owns that variable. */ #aquila-payroll-r1-stage[ data-payroll-professional-ui="r5" ] { padding-top: var( --aquila-payroll-stage-safe-top, 112px ) !important; } /* * No secondary margin-based deck workaround. * Geometry belongs to the visible Payroll stage. */ #aquila-payroll-r1-stage > #hrm-payroll-r9-root { margin-top: 0 !important; scroll-margin-top: var( --aquila-payroll-stage-safe-top, 112px ) !important; } /* * Loading, error, empty and data states inherit the same stage safe zone. * No loading transport or lifecycle rule is modified here. */ #aquila-payroll-r1-stage > :first-child { scroll-margin-top: var( --aquila-payroll-stage-safe-top, 112px ); } /* ========================================================================== UBUZIMA+ — PAYROLL PROFESSIONAL WORKSPACE R8.1 ========================================================================== */ #aquila-payroll-r1-stage[data-payroll-professional-ui="r5"] { --payroll-ui-safe-top: 0px !important; --payroll-ui-viewport-safe-top: 0px !important; --aquila-payroll-stage-safe-top: 0px !important; box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; padding-top: 0 !important; padding-right: 20px !important; padding-bottom: 36px !important; padding-left: 20px !important; margin: 0 !important; overflow: visible !important; scroll-padding-top: 0 !important; } #aquila-payroll-r1-stage > #hrm-payroll-r9-root, #hrm-payroll-r9-root[data-payroll-professional-ui="r5"] { box-sizing: border-box !important; display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: 1600px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; z-index: auto !important; } /* * The native Payroll shell is one vertical workspace. */ #hrm-payroll-r9-root .r9-shell { box-sizing: border-box !important; display: block !important; position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #hrm-payroll-r9-root .r9-shell > * { box-sizing: border-box !important; position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; } /* * Header. */ #hrm-payroll-r9-root .r9-top, #hrm-payroll-r9-root [data-payroll-ui="header"] { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; column-gap: 20px !important; row-gap: 6px !important; width: 100% !important; margin: 0 0 16px !important; } /* * Local Payroll navigation. */ #hrm-payroll-r9-root .r9-nav, #hrm-payroll-r9-root [data-payroll-ui="tabs"] { box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 16px !important; overflow-x: auto !important; overflow-y: hidden !important; } /* * Main content. */ #hrm-payroll-r9-root #r9-content { box-sizing: border-box !important; display: block !important; position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* * KPI cards. */ #hrm-payroll-r9-root .r9-grid, #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; margin: 0 0 16px !important; } #hrm-payroll-r9-root .r9-card, #hrm-payroll-r9-root [data-payroll-ui="summary-card"] { box-sizing: border-box !important; min-width: 0 !important; } /* * Panels. */ #hrm-payroll-r9-root .r9-panel, #hrm-payroll-r9-root [data-payroll-ui="table-panel"] { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } #hrm-payroll-r9-root [data-payroll-ui="table-panel"] { overflow-x: auto !important; overflow-y: visible !important; } /* * Preserve readable columns. */ #hrm-payroll-r9-root table, #hrm-payroll-r9-root [data-payroll-ui="table"] { width: 100% !important; min-width: 860px !important; table-layout: auto !important; border-collapse: separate !important; word-break: normal !important; overflow-wrap: normal !important; } #hrm-payroll-r9-root table th, #hrm-payroll-r9-root table td, #hrm-payroll-r9-root [data-payroll-ui="table"] th, #hrm-payroll-r9-root [data-payroll-ui="table"] td { word-break: normal !important; overflow-wrap: normal !important; white-space: normal; } @media (max-width: 1000px) { #aquila-payroll-r1-stage[data-payroll-professional-ui="r5"] { padding-right: 14px !important; padding-left: 14px !important; } #hrm-payroll-r9-root .r9-grid, #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; } } @media (max-width: 640px) { #aquila-payroll-r1-stage[data-payroll-professional-ui="r5"] { padding-right: 10px !important; padding-bottom: 24px !important; padding-left: 10px !important; } #hrm-payroll-r9-root .r9-top, #hrm-payroll-r9-root [data-payroll-ui="header"] { grid-template-columns: minmax(0, 1fr) !important; } #hrm-payroll-r9-root .r9-grid, #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================================== UBUZIMA+ PAYROLL — CANONICAL 12-AREA NAVIGATION R10 ========================================================================== ONE visible Payroll navigation. The underlying R9/R1 controls remain in DOM as business-function adapters. Only their parallel navigation presentation is hidden. ========================================================================== */ #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 { box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 16px !important; padding: 5px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 1px solid #dbe3ec !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important; scrollbar-width: thin; } #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 button { box-sizing: border-box !important; flex: 0 0 auto !important; min-height: 34px !important; padding: 7px 11px !important; border: 1px solid transparent !important; border-radius: 7px !important; background: transparent !important; color: #475569 !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 650 !important; white-space: nowrap !important; cursor: pointer; } #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 button:hover, #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 button:focus-visible { border-color: #cbd5e1 !important; background: #f8fafc !important; color: #0f172a !important; } #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 button[aria-selected="true"] { border-color: rgba(15, 118, 110, 0.28) !important; background: rgba(15, 118, 110, 0.08) !important; color: #0f766e !important; } /* * Exact elements marked by the R10 bridge only. * * No generic HRM or application navigation is hidden. */ #hrm-payroll-r9-root [data-payroll-canonical-source-r10="1"] { display: none !important; } #hrm-payroll-r9-root [data-payroll-canonical-source-nav-r10="1"] { display: none !important; } [data-payroll-legacy-nav-r10="1"] { display: none !important; } @media (max-width: 640px) { #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 { margin-bottom: 12px !important; padding: 4px !important; } #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 button { min-height: 32px !important; padding: 6px 9px !important; } } /* ========================================================================== UBUZIMA+ PAYROLL — NATIVE CONTROL CENTER LAYOUT R11.1 ========================================================================== Authoritative structure: #aquila-payroll-r1-stage > #hrm-payroll-r9-root > .r9-shell No application-global layout selectors are used. ========================================================================== */ /* ================================================================ * STAGE * ================================================================ */ #aquila-payroll-r1-stage { box-sizing: border-box !important; display: block !important; position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding-top: 0 !important; padding-right: 24px !important; padding-bottom: 40px !important; padding-left: 24px !important; overflow: visible !important; float: none !important; transform: none !important; } /* ================================================================ * ROOT * ================================================================ */ #aquila-payroll-r1-stage > #hrm-payroll-r9-root { box-sizing: border-box !important; display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; width: 100% !important; max-width: 1600px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; float: none !important; z-index: auto !important; } /* ================================================================ * NATIVE SHELL — ONE COLUMN ONLY * ================================================================ */ #aquila-payroll-r1-stage > #hrm-payroll-r9-root > .r9-shell { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; grid-auto-columns: minmax(0, 1fr) !important; grid-auto-rows: auto !important; align-items: stretch !important; justify-items: stretch !important; gap: 0 !important; position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; float: none !important; transform: none !important; } #aquila-payroll-r1-stage > #hrm-payroll-r9-root > .r9-shell > * { box-sizing: border-box !important; grid-column: 1 / -1 !important; grid-row: auto !important; min-width: 0 !important; max-width: none !important; float: none !important; } /* ================================================================ * HEADER — TITLE + REFRESH * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-top, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="header"] { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto !important; align-items: start !important; justify-content: stretch !important; column-gap: 20px !important; row-gap: 8px !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 0 18px !important; padding: 0 !important; transform: none !important; overflow: visible !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-top > *, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="header"] > * { box-sizing: border-box !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; transform: none !important; float: none !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-top h1, #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-top h2, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="header"] h1, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="header"] h2 { width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* ================================================================ * CANONICAL R10 NAV * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root #aquila-payroll-canonical-nav-r10 { box-sizing: border-box !important; grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 16px !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; overflow-x: auto !important; overflow-y: hidden !important; } /* * R10 canonical nav is authoritative when present. */ #aquila-payroll-r1-stage #hrm-payroll-r9-root:has( #aquila-payroll-canonical-nav-r10 ) .r9-nav { display: none !important; } /* ================================================================ * NATIVE R9 NAV — FALLBACK * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-nav, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="tabs"] { box-sizing: border-box !important; grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 0 16px !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; transform: none !important; float: none !important; } /* ================================================================ * NOTICE * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root #r9-notice { box-sizing: border-box !important; grid-column: 1 / -1 !important; position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 0 12px !important; } /* ================================================================ * CONTENT * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root #r9-content { box-sizing: border-box !important; grid-column: 1 / -1 !important; display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; float: none !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root #r9-content > * { box-sizing: border-box !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; float: none !important; transform: none !important; } /* ================================================================ * KPI GRID * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-grid, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat( 4, minmax(0, 1fr) ) !important; grid-auto-flow: row !important; gap: 12px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 0 18px !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-grid > *, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] > * { box-sizing: border-box !important; min-width: 0 !important; max-width: none !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; float: none !important; } /* ================================================================ * PANELS * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-panel, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="table-panel"] { box-sizing: border-box !important; display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 0 18px !important; transform: none !important; float: none !important; } /* ================================================================ * TABLES * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="table-panel"], #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-table-wrap { max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root table, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="table"] { width: 100% !important; min-width: 860px !important; table-layout: auto !important; margin: 0 !important; word-break: normal !important; overflow-wrap: normal !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root table th, #aquila-payroll-r1-stage #hrm-payroll-r9-root table td, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="table"] th, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="table"] td { min-width: 0 !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal; } /* ================================================================ * MODAL SLOT * ================================================================ */ #aquila-payroll-r1-stage #hrm-payroll-r9-root #r9-modal-slot { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; } /* ================================================================ * RESPONSIVE * ================================================================ */ @media (max-width: 1000px) { #aquila-payroll-r1-stage { padding-right: 16px !important; padding-left: 16px !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-grid, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; } } @media (max-width: 640px) { #aquila-payroll-r1-stage { padding-right: 10px !important; padding-bottom: 28px !important; padding-left: 10px !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-top, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="header"] { grid-template-columns: minmax(0, 1fr) !important; } #aquila-payroll-r1-stage #hrm-payroll-r9-root .r9-grid, #aquila-payroll-r1-stage #hrm-payroll-r9-root [data-payroll-ui="summary-grid"] { grid-template-columns: minmax(0, 1fr) !important; } }