/* Shared presentation rules for report screens. This file intentionally avoids
   layout and event-related selectors so report behavior remains unchanged. */
html body .report-ui-consistency {
    --report-filter-font-size: var(--font-size-base, 12px);
    --report-control-height: 34px;
    --report-button-font-size: 11px;
    --report-export-icon-size: 28px;
    --report-button-horizontal-padding: 12px;
    --report-export-action-width: 32px;
}

/* Match every report title to one shared heading.  Dedicated report views use
   .report-screen-heading, while PF/ESI/Bonus render their text through the
   CommonList title component.  Keep both paths on identical type metrics. */
html body .report-ui-consistency .report-screen-heading,
html body .report-ui-consistency .commonlist-title-text {
    color: #1d4ed8 !important;
    font-family: var(--font-head, inherit) !important;
    font-size: var(--app-page-heading-size, var(--font-size-base, 14px)) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    /* Report titles are already sized from the early document-head token.
       Do not animate a late legacy style/DOM refresh during page startup. */
    transition: none !important;
}

html body .report-ui-consistency .report-screen-heading {
    min-height: 58px !important;
    margin: 12px 0 6px !important;
    padding: 3px 0 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid #2575fc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body .report-ui-consistency .report-screen-heading::before {
    content: 'list_alt';
    color: #2575fc;
    font-family: 'Material Symbols Outlined', 'Material Icons';
    font-size: var(--app-page-heading-size, var(--font-size-base, 14px));
    font-weight: normal;
    line-height: 1;
}

html[data-app-list-font-size="small"] body .report-ui-consistency {
    --report-filter-font-size: 10px;
    --report-control-height: 30px;
    --report-button-font-size: 10px;
    --report-export-icon-size: 22px;
    --report-button-horizontal-padding: 8px;
    --report-export-action-width: 26px;
}

html[data-app-list-font-size="normal"] body .report-ui-consistency {
    --report-filter-font-size: 11px;
    --report-control-height: 34px;
    --report-button-font-size: 11px;
    --report-export-icon-size: 28px;
    --report-button-horizontal-padding: 12px;
    --report-export-action-width: 32px;
}

html[data-app-list-font-size="large"] body .report-ui-consistency {
    --report-filter-font-size: 13px;
    --report-control-height: 38px;
    --report-button-font-size: 13px;
    --report-export-icon-size: 34px;
    --report-button-horizontal-padding: 16px;
    --report-export-action-width: 38px;
}

html body .report-ui-consistency .form-group,
html body .report-ui-consistency .default-list-filter-field,
html body .report-ui-consistency .emr-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

html body .report-ui-consistency .form-label,
html body .report-ui-consistency .default-list-filter-field > label,
html body .report-ui-consistency .emr-field > label {
    display: block;
    margin: 0 0 4px !important;
    color: #475569 !important;
    font-family: var(--font-body, inherit) !important;
    font-size: var(--report-filter-font-size) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 16px !important;
}

html body .report-ui-consistency select,
html body .report-ui-consistency .multi-select-btn,
html body .report-ui-consistency .checkbox-dropdown-display,
html body .report-ui-consistency .emr-ms-control,
html body .report-ui-consistency .emr-single-control,
html body .report-ui-consistency .select2-container--default .select2-selection--single {
    min-height: var(--report-control-height) !important;
    height: var(--report-control-height) !important;
    box-sizing: border-box;
    font-family: var(--font-body, inherit) !important;
    font-size: var(--report-filter-font-size) !important;
}

html body .report-ui-consistency .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #334155 !important;
    font-family: var(--font-body, inherit) !important;
    font-size: var(--report-filter-font-size) !important;
    line-height: 32px !important;
    padding-left: 10px !important;
}

html body .report-ui-consistency .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--report-control-height) - 2px) !important;
}

html body .report-ui-consistency .custom-submit-button {
    height: var(--report-control-height) !important;
    min-height: var(--report-control-height) !important;
    box-sizing: border-box !important;
    font-size: var(--report-button-font-size) !important;
    line-height: 1 !important;
    padding-left: var(--report-button-horizontal-padding) !important;
    padding-right: var(--report-button-horizontal-padding) !important;
}

html body .report-ui-consistency .emr-btn {
    height: var(--report-control-height) !important;
    min-height: var(--report-control-height) !important;
    padding-left: var(--report-button-horizontal-padding) !important;
    padding-right: var(--report-button-horizontal-padding) !important;
    font-size: var(--report-button-font-size) !important;
}

html body .report-ui-consistency #summaryexcel .material-symbols-outlined,
html body .report-ui-consistency #detailexcel .material-symbols-outlined,
html body .report-ui-consistency #dtlexcel .material-symbols-outlined,
html body .report-ui-consistency #btnExportExcel,
html body .report-ui-consistency .salary-icon-btn,
html body .report-ui-consistency .ot-export-action .material-symbols-outlined {
    font-size: var(--report-export-icon-size) !important;
    line-height: 1 !important;
}

html body .report-ui-consistency #summaryexcel,
html body .report-ui-consistency #detailexcel,
html body .report-ui-consistency #dtlexcel,
html body .report-ui-consistency .ot-export-action {
    min-width: var(--report-export-action-width);
}

/* Report export action visually matches the shared list-grid Excel button,
   without using its .alg-export behavior (which exports a different grid). */
html body .report-ui-consistency .report-grid-excel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--report-control-height);
    min-width: var(--report-control-height);
    height: var(--report-control-height);
    min-height: var(--report-control-height);
    padding: 0 !important;
    border: 1px solid #86efac !important;
    border-radius: 8px;
    background: #f0fdf4 !important;
    color: #15803d !important;
    cursor: pointer;
}

html body .report-ui-consistency .report-grid-excel-action:hover {
    background: #dcfce7 !important;
    color: #166534 !important;
}

html body .report-ui-consistency .report-grid-excel-action .alg-excel-symbol {
    display: block;
    width: var(--app-export-icon-size, 18px);
    height: var(--app-export-icon-size, 18px);
}

/* Select2 menus are mounted beneath body, outside the report container. */
html body .select2-dropdown .select2-results__option,
html body .select2-dropdown .select2-search__field {
    font-family: var(--font-body, inherit);
    font-size: 11px !important;
    line-height: 16px;
}

html body .select2-dropdown .select2-results__option {
    padding: 5px 8px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html body .select2-dropdown .select2-search--dropdown {
    padding: 4px;
}

html[data-app-list-font-size="small"] body .select2-dropdown .select2-results__option,
html[data-app-list-font-size="small"] body .select2-dropdown .select2-search__field {
    font-size: 10px !important;
    line-height: 14px;
}

html[data-app-list-font-size="small"] body .select2-dropdown .select2-results__option {
    padding: 4px 7px;
}

html[data-app-list-font-size="large"] body .select2-dropdown .select2-results__option,
html[data-app-list-font-size="large"] body .select2-dropdown .select2-search__field {
    font-size: 13px !important;
    line-height: 18px;
}

html[data-app-list-font-size="large"] body .select2-dropdown .select2-results__option {
    padding: 7px 9px;
}

html body .report-ui-consistency .multi-select-item,
html body .report-ui-consistency .checkbox-dropdown-item,
html body .report-ui-consistency .emr-ms-option,
html body .report-ui-consistency .emr-single-option {
    font-family: var(--font-body, inherit) !important;
    font-size: var(--report-filter-font-size) !important;
    line-height: 18px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html body .report-ui-consistency .multi-select-item {
    align-items: flex-start !important;
}

/* The attendance report has a two-level, sticky header with rowspan cells;
   its dedicated rules set each row height so the group headers line up. */
html body .report-ui-consistency table:not(.attendance-table) thead th {
    box-sizing: border-box;
    height: 38px !important;
    min-height: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: middle !important;
}