/* Global reusable list grid. Screens configure it through window.AppListGrid.enhance(). */
.hrms-list-controls{display:flex;justify-content:flex-end;margin:8px 0;position:relative}.hrms-list-controls>button{padding:7px 14px;border:1px solid #2575fc;border-radius:8px;background:#fff;color:#174ec9;font-weight:700;cursor:pointer}.hrms-list-reorder{position:absolute;right:0;top:42px;z-index:1200;width:260px;padding:12px;background:#fff;border:1px solid #d6e0ef;border-radius:9px;box-shadow:0 10px 25px rgba(15,23,42,.18)}.hrms-list-reorder>div{display:flex;gap:6px;align-items:center;padding:5px 0}.hrms-list-reorder span{flex:1}.hrms-list-reorder button{border:1px solid #c9d6ea;background:#fff;border-radius:4px;cursor:pointer}.hrms-list-sort,.hrms-list-filter{margin-left:6px;border:0;background:transparent;color:inherit;cursor:pointer;font-size:16px}.hrms-list-filter-popover{position:fixed;z-index:1300;padding:9px;background:#fff;border:1px solid #d6e0ef;border-radius:7px;box-shadow:0 8px 20px rgba(15,23,42,.2)}.hrms-list-filter-popover input{width:190px;padding:6px}.hrms-list-filter-popover button{margin-left:6px;padding:6px}
.app-list-grid {
    --alg-font-size: var(--font-size-base, 12px);
    font-size: var(--alg-font-size);
    color: var(--ink, #172033);
}

/* Consistent identity treatment for Created By, Modified By and approval columns. */
.app-list-grid td[data-audit-employee-column="true"] { min-width: 170px; }
.app-list-grid .audit-avatar-cell { display:flex; align-items:center; gap:6px; min-width:112px; }
.app-list-grid .audit-avatar { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; font-size:9px; font-weight:400; letter-spacing:.03em; box-shadow:0 1px 3px rgba(30,64,175,.14); }
.app-list-grid .audit-avatar-name { color:#555d6f; font-size:var(--font-size-base, 12px); font-weight:400; line-height:1.2; }
.app-list-grid .audit-avatar-code { color:#5b6272; font-family:monospace; font-size:var(--font-size-sm, 11px); line-height:1.2; }
.app-list-grid .audit-avatar-empty { color:#a8adb8; line-height:1; }

/* Legacy screens declare different table font sizes.  The root font token is
   authoritative for every reusable grid at every selected size. */
html[data-app-list-font-size] .app-list-grid .app-list-grid-table th {
    font-size: var(--table-header-font-size, var(--font-size-base, 12px)) !important;
}

html[data-app-list-font-size] .app-list-grid .app-list-grid-table td {
    font-size: var(--table-body-font-size, var(--font-size-base, 12px)) !important;
}

html[data-app-list-font-size] .app-list-grid .app-list-grid-toolbar {
    font-size: var(--filter-label-font-size, var(--font-size-base, 12px)) !important;
}

html[data-app-list-font-size] .app-list-grid .app-list-grid-pagination,
html[data-app-list-font-size] .app-list-grid .app-list-grid-pagination button,
html[data-app-list-font-size] .app-list-grid .app-list-grid-pagination select {
    font-size: var(--pagination-font-size, var(--font-size-base, 12px)) !important;
}

.app-list-grid {
    padding-bottom: 0;
}

/* Saved column settings are loaded asynchronously. Reserve the list area
   without exposing the server's default column order for a single frame. */
.app-list-grid.alg-column-layout-pending .alg-table-viewport,
.app-list-grid.alg-column-layout-pending .app-list-grid-pagination {
    visibility: hidden;
}
    /* CommonList alignment only: never alter screen-owned columns, actions or forms. */
    .app-list-grid, .app-list-grid .alg-table-viewport, .app-list-grid-toolbar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

.app-list-grid-toolbar {
    clear: both;
}

.header-font-control {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    min-height: 36px;
    padding: 3px 5px 3px 10px;
    color: var(--header-txt, #334155);
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    white-space: nowrap;
}

    .header-font-control .header-font-label {
        color: #475569;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .01em;
    }

    .header-font-control .material-icons {
        line-height: 1;
    }

    .header-font-control select {
        height: 30px;
        min-width: 82px;
        padding: 0 24px 0 8px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        background: #fff;
        color: #1e293b;
        font: 600 13px/30px inherit;
        cursor: pointer;
    }

    .header-font-control .app-font-size-picker {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        background: #fff;
        z-index: 20;
    }

    .header-font-control .app-font-size-picker button {
        width: 30px;
        min-width: 30px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 5px;
        background: transparent;
        color: #334155;
        font: 600 12px/1 inherit;
        cursor: pointer;
    }

    .header-font-control .app-font-size-picker .material-symbols-outlined {
        display: block;
        font-size: 18px;
        line-height: 28px;
    }

    .header-font-control .app-font-size-picker button:hover,
    .header-font-control .app-font-size-picker button:focus-visible {
        background: #e8f0ff;
        color: #1d6ff2;
        outline: none;
    }

    .header-font-control .app-font-size-picker button.is-selected {
        background: #1d6ff2;
        color: #fff;
    }

    .header-font-control .app-font-size-picker button.is-selected .material-symbols-outlined {
        color: #fff !important;
    }


.app-list-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border, #dfe5ef);
    border-radius: 10px;
    background: var(--surface, #fff);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    .app-list-grid-toolbar > * {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .app-list-grid-toolbar .alg-spacer {
        flex: 1 1 auto;
    }

    .app-list-grid-toolbar button, .app-list-grid-toolbar select, .app-list-grid-toolbar input {
        font: inherit;
        border: 1px solid var(--border, #cfd8e6);
        border-radius: 7px;
        background: var(--field-bg, #fff);
        color: inherit;
        padding: 5px 9px;
    }

.app-list-grid-toolbar button {
    cursor: pointer;
    font-weight: 600;
}

/* Always leave an obvious way back to the full list after a column-value
   filter is applied.  The shared grid toggles this control on every page. */
.alg-clear-active-filters {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    color: #475569 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-weight: 600;
}

.alg-clear-active-filters:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.alg-clear-active-filters[hidden] {
    display: none !important;
}

        .app-list-grid-toolbar button:hover {
            border-color: var(--brand, #2575fc);
            color: var(--brand, #2575fc);
        }

.alg-filter {
    width: clamp(170px, 20vw, 280px);
    max-width: 100%;
    min-width: 0;
    font-weight: 400;
}

.alg-columns {
    position: relative;
}

.alg-column-panel {
    position: fixed;
    z-index: 1050;
    top: calc(100% + 6px);
    right: 0;
    width: 310px;
    max-height: 420px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--border, #dfe5ef);
    border-radius: 9px;
    background: var(--surface, #fff);
    box-shadow: 0 10px 25px rgba(15,23,42,.14);
}

    .alg-column-panel[hidden] {
        display: none;
    }

.alg-column-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-radius: 6px;
    cursor: grab;
}

    .alg-column-item span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .alg-column-item select {
        width: 78px;
        padding: 3px;
        border: 1px solid var(--border,#dfe5ef);
        border-radius: 5px;
        background: #fff;
    }

    .alg-column-item:hover {
        background: var(--hover-bg, #f5f8fc);
    }

.alg-dragging {
    opacity: .45;
}

.app-list-grid table {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: 0;
}

.app-list-grid .alg-table-viewport {
    position: relative;
    /* The list itself owns both scrollbars.  Page scrolling must never be
       required to reach off-screen columns or additional detail rows. */
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    /* Column-filter popups and toolbar clicks can trigger a table reflow.
       Do not let the browser scroll-anchor the horizontal viewport while
       those unrelated DOM changes are measured. */
    overflow-anchor: none;
}

.setlistscreenscroll.alg-list-scroll-host .alg-table-viewport .app-list-grid-table {
    /* CommonList tables may contain many business columns.  Do not compress
       their headers/cells into unreadable widths; expose a horizontal bar in
       the viewport instead. */
    min-width: 100% !important;
    max-width: none !important;
}

.setlistscreenscroll.alg-list-scroll-host {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.app-list-grid .alg-table-viewport .app-list-grid-table thead th {
    background: #2575FC;
}

/* The server initially emits a legacy title/action layout, then the shared
   grid applies the final CommonList layout. Keep the entire content hidden
   during that very short setup so users never see the old layout flash. */
.commonlist-index-page.commonlist-initializing {
    visibility: hidden !important;
}
/* Keep legacy tables as one native table so headers and detail rows always share
   the same column widths. */
.app-list-grid .alg-table-viewport .app-list-grid-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 4;
    background: #2575FC !important;
}

.app-list-grid .app-list-grid-table thead.Headerfreeze {
    top: auto !important;
}

.app-list-grid th, .app-list-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
}

    .app-list-grid th[style*="display:none"], .app-list-grid td[style*="display:none"] {
        display: none !important;
    }

.app-list-grid th {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.app-list-grid td {
    /* A list row represents one record.  Keep it a stable, single-line
       unit; the viewport provides horizontal scrolling and the full value is
       available from the native title/column width controls. */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.app-list-grid .app-list-grid-table thead th {
    height: 35px !important;
    min-height: 35px;
    padding: 7px 6px !important;
    vertical-align: middle;
    line-height: 1.15;
}

.app-list-grid .app-list-grid-table tbody td {
    padding: 2px 8px !important;
    line-height: 16px !important;
    vertical-align: middle;
}

/* Empty audit fields must still show the same row separator as populated
   fields. This is especially visible in the final Modified columns. */
.app-list-grid .app-list-grid-table tbody tr > td {
    border-bottom: 1px solid #dfe5ef !important;
}

/* A blank audit value should remain visibly part of its row. */
.app-list-grid .app-list-grid-table tbody td:empty::before {
    /* Keep the empty-cell marker ASCII so it renders correctly even when a
       legacy static-file response omits a charset. */
    content: "-";
    color: #94a3b8;
}

.app-list-grid .alg-action-cell {
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center;
    white-space: nowrap;
}

.app-list-grid .alg-action-group {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
}

    .app-list-grid .alg-action-group > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 28px;
    }

    .app-list-grid .alg-action-group button {
        padding: 0;
        background: transparent;
        border: 0;
    }

.commonlistmargin > .app-list-grid-toolbar {
    flex: 1 1 440px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Regularization's filters and the shared Search/Columns controls share one
   row. Keep their lower edges aligned and give the row equal vertical space
   above and below the table area. */
.regularization-filter-row {
    align-items: flex-end !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    gap: 16px;
}

.regularization-filter-row > div:first-child {
    align-items: flex-end !important;
    gap: 16px !important;
}

.regularization-filter-row .custom-submit-button {
    margin-top: 0 !important;
    align-self: flex-end;
}

.alg-column-sort-trigger, .alg-column-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-left: 3px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    vertical-align: middle;
    transition: transform .15s ease,filter .15s ease;
}

.alg-column-sort-trigger {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.alg-column-filter-trigger {
    background: transparent;
    color: #fff;
    box-shadow: none;
}

    .alg-column-sort-trigger:hover, .alg-column-filter-trigger:hover {
        transform: translateY(-1px);
        filter: none;
    }

    .alg-column-sort-trigger .material-symbols-outlined, .alg-column-filter-trigger .material-symbols-outlined {
        font-size: 13px;
        line-height: 1;
    }

.alg-value-filter-panel {
    position: fixed;
    z-index: 1200;
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--border,#dfe5ef);
    border-radius: 10px;
    background: var(--surface,#fff);
    color: var(--ink,#172033);
    box-shadow: 0 12px 30px rgba(15,23,42,.2);
}

/* Filter popups are appended directly to body.  Do not let them inherit a
   legacy body/font rule on first open; every text surface uses the same root
   token as the list that opened it. */
.alg-value-filter-panel,
.alg-value-filter-panel :is(.alg-value-filter-heading, strong, label, input[type="search"], .alg-value-option-text, .alg-value-actions button) {
    font-size: var(--alg-value-filter-font-size, var(--font-size-base, 12px)) !important;
}

    .alg-value-filter-panel strong, .alg-value-filter-panel label, .alg-value-filter-panel input, .alg-value-filter-panel button {
        color: var(--ink,#172033);
    }

.alg-value-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.alg-value-close {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #475569 !important;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

    .alg-value-close:hover {
        background: #f1f5f9;
        color: #dc2626 !important;
    }

.alg-value-filter-panel .alg-apply {
    color: #fff;
}

.app-list-grid .app-list-grid-table thead th .alg-value-filter-anchored {
    position: absolute !important;
    z-index: 1300;
    top: calc(100% + 8px) !important;
    left: 0 !important;
}

.app-list-grid .app-list-grid-table th .alg-value-all {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: left !important;
}

.alg-value-filter-panel input[type=search] {
    width: 100%;
    margin: 6px 0;
    padding: 5px 6px;
    border: 1px solid var(--border,#dfe5ef);
    border-radius: 6px;
}

.alg-value-list {
    overflow: auto;
    border: 1px solid var(--border,#dfe5ef);
}

    .alg-value-list label, .alg-value-all {
        display: block;
        padding: 3px 6px;
        margin: 0;
        font-size: var(--pagination-font-size, 12px);
        line-height: 1.25;
    }

.alg-value-list label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-weight: 400 !important;
}

/* Value text stays inside its flex row, but filter values may wrap so a long
   department/component name is readable instead of being truncated. */
.alg-value-list .alg-value-option-text {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.alg-value-all {
    display: flex !important;
    align-items: center;
    gap: 6px;
    /* The value list has a 1px border. Match that inset so its checkbox
       starts on the same vertical line as every filter value. */
    padding-left: 7px !important;
    text-align: left !important;
    font-weight: 400 !important;
}

/* Keep value-filter rows transparent on every reusable table filter popup. */
.alg-value-filter-panel .alg-value-all,
.alg-value-filter-panel .alg-value-list label {
    background: transparent !important;
    cursor: pointer;
}

/* A filter value row is directly selectable. Keep the pointer affordance on
   its checkbox as well, but preserve the normal text cursor in Search. */
.alg-value-filter-panel input[type="checkbox"],
.alg-value-filter-panel input[type="search"],
.alg-value-filter-panel .alg-value-actions button,
.alg-value-filter-panel .alg-value-close {
    cursor: pointer;
}

/* Use the browser's normal checkbox so selecting a value displays one native
   tick only. The filter-popup scope prevents legacy checkbox styles from
   changing its appearance. */
.alg-value-filter-panel input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    box-sizing: border-box;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 16px !important;
    accent-color: var(--brand, #2575fc) !important;
    background-image: none !important;
}

.alg-value-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

.alg-page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.alg-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    color: var(--ink-3, #64748b);
    user-select: none;
}

.alg-page-current {
    background: var(--brand,#2575fc) !important;
    color: #fff !important;
}

.app-list-grid .sortbytooltip {
    display: none !important;
}

.alg-value-actions button {
    min-width: 58px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.alg-value-actions .alg-apply {
    background: var(--brand,#2575fc);
    border: 1px solid var(--brand,#2575fc);
    color: #fff;
}

.alg-value-actions .alg-clear {
    background: #fff;
    border: 1px solid var(--border,#dfe5ef);
    color: var(--ink,#172033);
}

.alg-no-record-row td {
    padding: 24px !important;
    text-align: center;
    font-weight: 400;
    color: var(--ink-3,#64748b);
}

.app-list-grid-toolbar .alg-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: #ecfdf5;
    color: #15803d;
}

    .app-list-grid-toolbar .alg-export:hover {
        background: #dcfce7;
        color: #166534;
    }

    .app-list-grid-toolbar .alg-export .material-symbols-outlined {
        display: block;
        font-size: var(--app-export-icon-size, 18px);
        line-height: 1;
    }

.app-list-grid-pagination .material-symbols-outlined {
    font-size: 20px;
    vertical-align: middle;
}

.app-list-grid-pagination .alg-prev, .app-list-grid-pagination .alg-next {
    width: 34px;
    padding: 3px;
}

.app-list-grid .alg-action-group > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px;
    border-radius: 7px;
    cursor: pointer;
    transition: transform .15s ease,filter .15s ease;
}

    .app-list-grid .alg-action-group > *:hover {
        transform: translateY(-1px);
        filter: brightness(.94);
    }

/* Keep non-destructive list actions visually consistent on every screen.
   Their order differs by screen, so colour is based on the action role rather
   than its position in the column. */
.app-list-grid .alg-action-group > *,
.app-list-grid .alg-action-cell > :is(a, button, i, input, [role="button"]):not([style*="not-allowed"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px;
    border-radius: 7px;
    color: #2563eb !important;
    background: #eff6ff;
}

/* Explicit action roles prevent a screen-specific third action (such as a
   loan receipt) from changing the edit/delete colours. */
.app-list-grid :is(.alg-action-group, .alg-action-cell) .alg-delete-action:not([style*="not-allowed"]) {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* Regularization rows are rebuilt by their server pager. The runtime role
   class can be absent for one render, so keep Delete red from its stable
   native action attribute. */
#regulalist [data-regularization-action="delete"] {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* Employee Master and Salary Setting rows are replaced by their server
   pagers.  Keep only their existing Delete controls red after that redraw;
   this is visual styling only and does not alter their onclick handlers. */
#EmployeeListTable .alg-action-cell button.material-symbols-outlined[onclick*="deleteclick"],
#SalarysettingListTable .alg-action-cell button.material-symbols-outlined[onclick*="deleteclick"] {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* User Master rows are rebuilt by the server pager. Preserve the native
   Delete colour from its stable marker while leaving its existing handler
   unchanged. */
#UserListTable [data-user-master-action="delete"] {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* These two server-paged lists keep their native Edit/Delete icons in a
   compact first cell. The grid's 15px generic icon width clips the wider
   Delete ligature before it can paint; reserve an icon-sized box instead. */
#leaveformtable [data-leave-native-action="delete"],
#loantable [data-loan-native-action="delete"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-family: 'Material Symbols Outlined' !important;
    font-feature-settings: 'liga' !important;
    -webkit-font-feature-settings: 'liga' !important;
}

/* Leave Form keeps two native controls directly in its first Action cell.
   The generic grid gives every data cell text-overflow:ellipsis; that rule
   can paint an ellipsis over the second inline control even though the SVG is
   present.  This cell contains controls, not truncatable text. */
#leaveformtable td.alg-action-cell {
    width: 84px !important;
    min-width: 84px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

#leaveformtable td.alg-action-cell > [data-leave-native-action] {
    display: inline-flex !important;
    box-sizing: border-box;
    flex: 0 0 28px;
}

.alg-native-delete-icon {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
    pointer-events: none;
}

.app-list-grid .alg-action-group .alg-receipt-action {
    flex: 0 0 auto;
    min-width: 0;
    height: 30px;
    padding: 0 10px !important;
    border-radius: 7px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 600;
}

.commonlist-master-filter > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
}

/* The three salary-policy selectors use a compact label/control stack. */
.salary-policy-filter-group {
    gap: 6px !important;
}

.salary-policy-filter-group > .form-label {
    margin: 0 !important;
}

/* Employee Onboard uses a quieter palette so approval state and available
   actions are distinguishable without the list becoming visually harsh. */
#TemempListTable thead th {
    background: #2575FC !important;
    border-color: #A4AAB8 !important;
}

#TemempListTable tbody tr:nth-child(even) td {
    background: #f8fbff;
}

#TemempListTable .onboard-status {
    font-weight: 700;
}

#TemempListTable .onboard-status--pending { color: #1d4ed8 !important; background: #eff6ff !important; }
#TemempListTable .onboard-status--approved { color: #15803d !important; background: #f0fdf4 !important; }
#TemempListTable .onboard-status--hold { color: #a16207 !important; background: #fffbeb !important; }
#TemempListTable .onboard-status--rejected { color: #dc2626 !important; background: #fef2f2 !important; }

#TemempListTable .onboard-progress-action,
#TemempListTable .onboard-preview-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 4px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 19px !important;
}

#TemempListTable .onboard-progress-action { color: #2563eb !important; background: #eff6ff !important; }
#TemempListTable .onboard-preview-action { color: #0f766e !important; background: #f0fdfa !important; }

.commonlist-index-page:has(#TemempListTable) .onboard-approval-filter {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.commonlist-index-page:has(#TemempListTable) .onboard-approval-filter label {
    margin: 0;
    color: #172033;
    font-size: 13px;
    font-weight: 700;
}

.commonlist-index-page:has(#TemempListTable) .onboard-approval-filter .approval-status-field,
.commonlist-index-page:has(#TemempListTable) .onboard-approval-filter .select2-container {
    width: 360px !important;
}

.commondivbox {
    position: relative;
}

.screenheadingcommonlist #commonListCreateHost {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

    .screenheadingcommonlist #commonListCreateHost .icon-circle {
        position: static;
        z-index: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0;
        border: 0 !important;
        border-radius: 50%;
        background: #2563eb;
        color: #fff;
        box-shadow: 0 4px 10px rgba(37,99,235,.24);
        transition: transform .15s ease,box-shadow .15s ease,background .15s ease;
    }

        .screenheadingcommonlist #commonListCreateHost .icon-circle:hover {
            transform: translateY(-1px);
            background: #1d4ed8;
            box-shadow: 0 6px 14px rgba(37,99,235,.32);
        }

        .screenheadingcommonlist #commonListCreateHost .icon-circle .material-symbols-outlined {
            color: #fff !important;
            font-size: 23px;
            line-height: 1;
        }

.app-list-grid .app-list-grid-table th {
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* List headers stay centered on every screen.  Data cells use their value
   type alignment (text left, date/time center, numeric right) independently. */
.app-list-grid .app-list-grid-table th.alg-value-text,
.app-list-grid .app-list-grid-table th.alg-value-right {
    text-align: center !important;
}

.app-list-grid .app-list-grid-table th.alg-datetime-column {
    width: 210px !important;
    min-width: 210px !important;
}

    .app-list-grid .app-list-grid-table th .alg-column-filter-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        margin-left: 4px;
        white-space: nowrap;
    }

    .app-list-grid .app-list-grid-table th > div {
        display: inline-flex !important;
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
/* CommonList headers are single-line. The grid viewport scrolls horizontally
   when the configured columns do not fit, rather than breaking header words. */
.setlistscreenscroll.alg-list-scroll-host .app-list-grid-table thead th {
    white-space: nowrap !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

    .setlistscreenscroll.alg-list-scroll-host .app-list-grid-table thead th > div {
        display: inline-flex !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .setlistscreenscroll.alg-list-scroll-host .app-list-grid-table thead th .alg-column-filter-trigger, .setlistscreenscroll.alg-list-scroll-host .app-list-grid-table thead th .alg-column-sort-trigger {
        flex: 0 0 auto;
    }

.app-list-grid .app-list-grid-table th .alg-value-filter-panel .alg-value-list {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

.app-list-grid .app-list-grid-table th .alg-value-filter-panel .alg-value-all {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    justify-content: flex-start !important;
}

.app-list-grid .app-list-grid-table th .alg-value-filter-panel .alg-value-list label {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    text-align: left !important;
}

/* Keep value choices compact across every table filter. Some screen styles
   add label spacing, which previously made one filter option look like a
   separate oversized row. */
.alg-value-filter-panel .alg-value-all,
.alg-value-filter-panel .alg-value-list label {
    min-height: 24px !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
    box-sizing: border-box;
}

.alg-value-filter-panel .alg-value-all {
    /* Account for the list's 1px border so every checkbox shares one edge. */
    padding-left: 7px !important;
}

.alg-value-filter-panel .alg-value-list {
    row-gap: 0 !important;
}

.app-list-grid .app-list-grid-table th.alg-serial-column {
    width: 52px !important;
    min-width: 52px !important;
    text-align: center !important;
}

.app-list-grid .app-list-grid-table th.alg-action-column {
    width: 82px !important;
    min-width: 82px !important;
}

.app-list-grid .app-list-grid-table th.alg-action-column.alg-action-column-many {
    width: 150px !important;
    min-width: 150px !important;
}

.app-list-grid .app-list-grid-table th.alg-loan-request-column {
    width: 200px !important;
    min-width: 200px !important;
}

.app-list-grid th.alg-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    .app-list-grid th.alg-sortable::after {
        content: ' ↕';
        opacity: .45;
        font-size: .85em;
    }

.app-list-grid th.alg-sort-asc::after {
    content: ' ↑';
    opacity: 1;
}

.app-list-grid th.alg-sort-desc::after {
    content: ' ↓';
    opacity: 1;
}

.app-list-grid .alg-selection-cell {
    width: 38px;
    text-align: center;
}

.app-list-grid .app-list-grid-table td.alg-value-text {
    text-align: left !important;
}

.app-list-grid .app-list-grid-table th.alg-value-text {
    text-align: left !important;
}

.app-list-grid .app-list-grid-table th.alg-value-text > div {
    justify-content: center !important;
}

.app-list-grid .app-list-grid-table td.alg-value-center {
    text-align: center !important;
}

.app-list-grid .app-list-grid-table td.alg-value-right {
    text-align: right !important;
}

.app-list-grid .app-list-grid-table th.alg-value-right {
    text-align: right !important;
}

.app-list-grid .app-list-grid-table th.alg-value-right > div {
    justify-content: center !important;
}
/* Sorting remains available by header click; the old arrow glyphs are intentionally not shown. */
.app-list-grid th.alg-sortable::after, .app-list-grid th.alg-sort-asc::after, .app-list-grid th.alg-sort-desc::after {
    content: '' !important;
}

.app-list-grid .alg-selection-cell input {
    cursor: pointer;
}

.app-list-grid-pagination {
    position: fixed;
    /* Keep the pager above list content but below the global loading surface. */
    z-index: 1000;
    pointer-events: auto !important;
    isolation: isolate;
    /* Keep the footer within the same visual content gutter as CommonList. */
    left: calc(var(--side-w, 72px) + 6px);
    right: 19px;
    bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 12px;
    font-size: inherit;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #dfe5ef);
    border-radius: 9px;
    box-shadow: 0 -3px 12px rgba(15,23,42,.08);
}

.app-list-grid-pagination.alg-pagination-pending {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* A busy screen must not expose an interactive fixed footer beneath its
   loading mask. The footer is restored automatically when loading ends. */
body.app-loading .app-list-grid-pagination {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pagination is mounted on document.body (not inside .main-area), so it
   cannot be targeted through the sidebar/main-area sibling relationship. */
/* Do not use body:has(.side-nav.open) here.  Toggling the menu then makes
   Chrome invalidate and re-evaluate the complete (and sometimes very large)
   list DOM.  The shared menu code already maintains sidebar-open on body. */
body.sidebar-open .app-list-grid-pagination {
    left: calc(var(--side-open, 240px) + 6px);
}

.app-list-grid-pagination .alg-page-info {
    margin-right: auto;
    color: var(--ink-3, #64748b);
}

.app-list-grid-pagination button, .app-list-grid-pagination select {
    font: inherit;
    padding: 4px 9px;
    border: 1px solid var(--border, #cfd8e6);
    border-radius: 7px;
    background: var(--surface, #fff);
    color: inherit;
}

.app-list-grid-pagination button {
    cursor: pointer;
    touch-action: manipulation;
}

.app-list-grid-pagination select.alg-size {
    position: relative !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Row choices are mounted directly on body so they cannot be clipped by the
   table viewport or an ancestor stacking context. */
.alg-page-size-menu {
    position: fixed;
    z-index: 2147483647;
    display: grid;
    min-width: 58px;
    padding: 3px;
    background: #fff;
    border: 1px solid var(--border, #cfd8e6);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .2);
    pointer-events: auto !important;
}

.alg-page-size-menu button {
    min-height: 28px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink, #172033);
    cursor: pointer;
}

.alg-page-size-menu button:hover,
.alg-page-size-menu .alg-size-option-current {
    background: #e8f0ff;
    color: #1d6ff2;
}

    .app-list-grid-pagination button:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

.app-list-grid-pagination {
    min-height: 32px;
    padding: 2px 7px;
    gap: 4px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1;
}

    .app-list-grid-pagination label,
    .app-list-grid-pagination .alg-rows-control {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .app-list-grid-pagination button, .app-list-grid-pagination select {
        min-height: 26px;
        height: 26px;
        padding: 1px 5px;
        border-radius: 5px;
        font-size: 12px;
    }

    .app-list-grid-pagination select {
        min-width: 54px;
        position: relative;
        z-index: 2;
        pointer-events: auto !important;
        cursor: pointer;
        appearance: auto !important;
        -webkit-appearance: menulist !important;
        -moz-appearance: menulist !important;
    }

    .app-list-grid-pagination select.alg-size {
        display: inline-block !important;
        min-width: 54px !important;
        position: relative !important;
        z-index: 4 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .app-list-grid-pagination select.alg-size option {
        color: #172033 !important;
        background: #fff !important;
    }

    .app-list-grid-pagination .alg-size-picker-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 2px;
        min-width: 54px;
        height: 26px;
        padding: 1px 5px;
        cursor: pointer;
    }

    /* Direct page-size choices avoid a popup and make the common operation a
       single, immediately visible click. */
    .app-list-grid-pagination .alg-page-size-options {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px;
        border: 1px solid #c8d7ec;
        border-radius: 6px;
        background: #f8fbff;
    }

    .app-list-grid-pagination .alg-page-size-stepper {
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        border: 1px solid #c8d7ec;
        border-radius: 6px;
        background: #f8fbff;
    }

    .app-list-grid-pagination .alg-page-size-stepper button {
        min-width: 26px;
        padding: 1px 5px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #1d6ff2;
        font-size: 16px;
        font-weight: 700;
    }

    .app-list-grid-pagination .alg-page-size-value {
        min-width: 48px;
        padding-inline: 6px;
        color: #172033;
        font-weight: 700;
        text-align: center;
    }

    .app-list-grid-pagination .alg-rows-label {
        color: #42526a;
        font-weight: 700;
    }

    .app-list-grid-pagination .alg-pagination-nav {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 4px;
        margin-left: 6px;
        padding-left: 8px;
        border-left: 1px solid #d8e1ee;
    }

    .app-list-grid-pagination .alg-rows-control {
        flex: 0 0 auto;
    }

    .app-list-grid-pagination .alg-page-label {
        color: #42526a;
        font-weight: 700;
    }

    .app-list-grid-pagination .alg-page-size-option {
        min-width: 52px;
        padding-inline: 7px;
        border-color: transparent;
        background: #edf3fb;
        color: #42526a;
        font-weight: 600;
    }

    .app-list-grid-pagination .alg-page-size-option.alg-page-size-current {
        border-color: #1d6ff2;
        background: #1d6ff2;
        color: #fff;
        font-weight: 700;
    }

    .app-list-grid-pagination :is(.alg-page-size-option, .alg-page-size-stepper button, .alg-prev, .alg-next, .alg-page-numbers button) {
        touch-action: manipulation;
        transition: transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
    }

    .app-list-grid-pagination :is(.alg-page-size-option, .alg-page-size-stepper button, .alg-prev, .alg-next, .alg-page-numbers button):active:not(:disabled) {
        transform: scale(.96);
    }

    .app-list-grid-pagination .alg-pagination-nav :is(.alg-prev, .alg-next) {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        padding-inline: 7px;
    }

    .alg-page-size-menu {
        position: fixed;
        z-index: 2147483647 !important;
        display: grid;
        min-width: 58px;
        padding: 3px;
        border: 1px solid #b8c8de;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(15,23,42,.24);
        overflow: visible !important;
        isolation: isolate;
    }

    .alg-page-size-menu button {
        display: block !important;
        width: 100% !important;
        min-height: 27px;
        border: 0;
        border-radius: 3px;
        background: #fff !important;
        color: #172033 !important;
        font: inherit !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        opacity: 1 !important;
        visibility: visible !important;
        cursor: pointer;
    }

    .alg-page-size-menu button:hover,
    .alg-page-size-menu .alg-page-size-current {
        background: #e8f0ff;
        color: #1d6ff2;
    }

    .app-list-grid-pagination .alg-size-picker {
        position: relative;
        display: inline-block;
        z-index: 3;
        pointer-events: auto !important;
    }


    .app-list-grid-pagination .alg-size-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 1px;
        min-width: 54px;
        cursor: pointer;
        touch-action: manipulation;
        list-style: none;
        user-select: none;
    }

    .app-list-grid-pagination .alg-size-toggle:focus-visible {
        outline: 2px solid #1d6ff2;
        outline-offset: 1px;
    }

    .alg-size-toggle::-webkit-details-marker {
        display: none;
    }

    .emr-rows-control .alg-size-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        min-width: 58px;
        height: 30px;
        padding: 0 5px 0 7px;
        border: 1px solid #d8e2ef;
        border-radius: 5px;
        background: #fff;
        color: #263b59;
        cursor: pointer;
    }

    .app-list-grid-pagination .alg-size-toggle .material-symbols-outlined {
        font-size: 16px;
    }

    .alg-size-options {
        position: absolute !important;
        right: 0;
        bottom: calc(100% + 4px);
        z-index: 1001 !important;
        display: grid;
        min-width: 54px;
        padding: 3px;
        background: var(--surface, #fff);
        border: 1px solid var(--border, #cfd8e6);
        border-radius: 5px;
        box-shadow: 0 4px 12px rgba(15,23,42,.16);
        font: inherit;
        pointer-events: auto !important;
    }

details.alg-size-picker:not([open]) .alg-size-options,
.alg-size-options[hidden] {
    display: none;
}

    .alg-size-options button {
        min-height: 26px;
        padding: 1px 5px;
        min-width: 46px;
        border: 0;
        border-radius: 3px;
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
    }

    .alg-size-options button:hover,
    .alg-size-options .alg-size-option-current {
        background: #e8f0ff;
        color: #1d6ff2;
    }

    .app-list-grid-pagination .alg-prev, .app-list-grid-pagination .alg-next {
        width: 26px;
        min-width: 26px;
        padding: 0;
    }

.app-list-grid-pagination .alg-page-numbers button {
    width: 26px;
    min-width: 26px;
    padding: 0;
}

/* Keep page navigation compact on every list. The Rows selector remains at
   its existing size so it is still easy to use. */
html[data-app-list-font-size] body .page-content .app-list-grid-pagination :is(.alg-prev, .alg-next, .alg-page-numbers button) {
    /* Number buttons need a forgiving hit target. The former 28×20px box
       made clicks near the digit miss, especially with browser zoom. */
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 3px !important;
}

html[data-app-list-font-size] body .page-content .app-list-grid-pagination select.alg-size {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1 !important;
}

.app-list-grid-pagination .alg-page-numbers button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Keep the chevrons centred even when a screen's button styles override
   line-height or font sizing. */
.app-list-grid-pagination :is(.alg-prev, .alg-next) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.app-list-grid-pagination :is(.alg-prev, .alg-next) .material-symbols-outlined {
    display: block;
    line-height: 1 !important;
}

    .app-list-grid-pagination .material-symbols-outlined {
        font-size: var(--action-icon-size, 16px);
    }

    .app-list-grid-pagination .alg-page-numbers {
        gap: 3px;
    }

/* Column controls are available on every data column.  Utility columns such as
   S.No, ID and Action deliberately receive neither control. */
.app-list-grid .app-list-grid-table th .alg-column-sort-trigger,
.app-list-grid .app-list-grid-table th .alg-column-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px !important;
    min-width: 19px !important;
    max-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    flex: 0 0 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}

/* Header controls already sit in a flex group.  Use only this small gap;
   button margins would make the label, filter, and sort icons look detached. */
.app-list-grid .app-list-grid-table thead th > .alg-header-content {
    gap: 2px !important;
}

/* Header cells use the application blue.  Keep both controls high-contrast
   and do not reintroduce the old light button background when interacted with. */
.app-list-grid .app-list-grid-table thead th .alg-column-sort-trigger,
.app-list-grid .app-list-grid-table thead th .alg-column-filter-trigger,
.app-list-grid .app-list-grid-table thead th .alg-column-sort-trigger .material-symbols-outlined,
.app-list-grid .app-list-grid-table thead th .alg-column-filter-trigger .material-symbols-outlined {
    color: #fff !important;
    background: transparent !important;
    fill: currentColor;
    stroke: currentColor;
}

.app-list-grid .app-list-grid-table thead th .alg-column-sort-trigger:hover,
.app-list-grid .app-list-grid-table thead th .alg-column-filter-trigger:hover,
.app-list-grid .app-list-grid-table thead th .alg-column-sort-trigger:active,
.app-list-grid .app-list-grid-table thead th .alg-column-filter-trigger:active {
    color: #fff !important;
    background: transparent !important;
    filter: brightness(1.2);
}

/* A selected column value is visible from the header without changing row text. */
.app-list-grid .app-list-grid-table thead th.alg-filter-active .alg-column-filter-trigger,
.app-list-grid .app-list-grid-table thead th.alg-filter-active .alg-column-filter-trigger .material-symbols-outlined {
    color: #2575FC !important;
}

/* Keep the selected-filter cue obvious without the previous oversized round
   badge. This compact highlight remains inside the table header. */
.app-list-grid .app-list-grid-table thead th.alg-filter-active .alg-column-filter-trigger {
    width: 19px !important;
    min-width: 19px !important;
    max-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;
    flex: 0 0 19px !important;
    align-self: center !important;
    padding: 0 !important;
    background: #eaf2ff !important;
    border-radius: 5px;
    box-shadow: none !important;
}

/* The blue filter glyph is the active-state cue. Avoid an added badge here:
   compact/legacy headers can position a pseudo-element below the header. */

.app-list-grid .app-list-grid-table thead th .alg-column-sort-trigger:focus-visible,
.app-list-grid .app-list-grid-table thead th .alg-column-filter-trigger:focus-visible {
    color: #fff !important;
    background: transparent !important;
    outline: 1px solid rgba(255, 255, 255, .75);
    outline-offset: 2px;
}

.app-list-grid .app-list-grid-table th > div {
    max-width: none;
}

/* HRMS request/letter screens have many business columns. Keep their labels
   readable and use the table viewport for horizontal scrolling instead of
   squeezing headings into single-letter vertical text. */
.app-list-grid .app-list-grid-table[data-hrms-list-controls="true"] {
    min-width: 1320px !important;
    table-layout: auto !important;
}

.app-list-grid .app-list-grid-table[data-hrms-list-controls="true"] thead th {
    min-width: 130px;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.app-list-grid .app-list-grid-table[data-hrms-list-controls="true"] thead th:first-child,
.app-list-grid .app-list-grid-table[data-hrms-list-controls="true"] tbody td:first-child {
    min-width: 96px;
    width: 96px;
}

.filter-actions > .app-list-grid-toolbar {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.alg-value-filter-panel {
    width: min(320px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(280px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
}

.alg-value-list {
    max-height: 120px;
    min-height: 44px;
}

.alg-value-filter-panel .alg-value-list label {
    min-width: 0 !important;
    overflow: visible;
}

.alg-value-filter-panel .alg-value-option-text {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-list-grid tr.alg-hidden-column-row {
    display: none !important;
}

.alg-settings-bar {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 0;
    margin: 0 0 7px;
}

.commonlistmargin > .alg-settings-bar {
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
}

/* The export and columns controls belong to the actual screen filter row.
   The marker class is added by the shared grid only to that visible row. */
.alg-grid-actions-host {
    display: flex !important;
    align-items: flex-end !important;
    /* A number of CommonList screens add their own wide filters before the
       shared Search / Export / Reorder controls.  Keeping this row rigid
       caused the final Reorder Columns button to render beyond the viewport.
       Wrap only when necessary; wide screens keep the original single row. */
    flex-wrap: wrap !important;
    gap: 12px;
    min-width: 0;
    overflow: visible !important;
}

    .alg-grid-actions-host > .alg-settings-bar,
    .filter-container > .alg-settings-bar {
        margin: 0 !important;
        flex: 0 0 auto;
    }

.alg-list-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.alg-grid-actions-host .alg-commonlist-search {
    margin-left: auto;
    flex: 0 1 190px;
    width: 190px;
    height: 34px;
    padding: 0 11px 0 34px;
    border: 2px solid #5b7da8;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7b93' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") 11px center/16px no-repeat;
    color: #1e293b;
    font: inherit;
    font-weight: 400;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(22,73,128,.16);
}

    .alg-grid-actions-host .alg-commonlist-search:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,.13);
    }

    .alg-grid-actions-host .alg-commonlist-search::placeholder {
        color: #526b8b;
        font-weight: 400;
        opacity: 1;
    }

.alg-column-select-info {
    margin-left: 4px;
    color: #7890b0;
    font-size: 17px;
    cursor: help;
}

.alg-settings-bar .alg-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid #86efac;
    border-radius: 8px;
    background: #f0fdf4;
    color: #15803d;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.alg-export .alg-excel-symbol {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}


    .alg-settings-bar .alg-export:hover {
        background: #dcfce7;
        color: #166534;
    }

    .alg-settings-bar .alg-export .material-symbols-outlined {
        font-size: var(--app-export-icon-size, 18px);
    }

.alg-settings-bar .alg-columns {
    position: relative;
}

.alg-settings-bar .alg-columns-toggle {
    position: relative;
    /* This is a normal toolbar button.  It must remain below application
       overlays such as notifications, drawers and modal dialogs. */
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    min-height: 34px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid #bfdbfe;
    border-radius: 7px;
    background: #eff6ff;
    color: #1d4ed8;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .alg-settings-bar .alg-columns-toggle:hover {
        background: #dbeafe;
    }

    .alg-settings-bar .alg-columns-toggle .material-symbols-outlined {
        font-size: 18px;
    }

.alg-column-settings-panel {
    /* Fixed positioning lets the popup escape the filter toolbar's
       horizontal-overflow container on every CommonList screen. */
    position: fixed;
    /* The pager is fixed at z-index:10001. Keep this shared popup above it so
       its Save/Cancel row is usable on every list screen. */
    z-index: 10003;
    top: auto;
    right: 0;
    width: min(540px, calc(100vw - 24px));
    max-height: min(400px, calc(100vh - 110px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,23,42,.2);
}

.alg-column-settings-title {
    color: #172033;
    font-weight: 700;
    font-size: 15px;
}

.alg-column-settings-help {
    margin: 3px 0 9px;
    color: #64748b;
    font-size: 12px;
}

.alg-column-settings-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

.alg-column-setting-item {
    display: grid;
    grid-template-columns: 18px minmax(120px, 1fr) 18px 58px 108px 122px;
    align-items: center;
    gap: 7px;
    padding: 5px 3px;
    border-top: 1px solid #edf2f7;
    cursor: grab;
}

/* Hidden and locked columns retain the same grid as reorderable rows. Their
   blank shuffle slots keep Width and Align in one vertical line. */
.alg-column-setting-item.alg-column-setting-static {
    cursor: default;
}

/* Catalog fields are intentionally lightweight: their name gets the wide
   first column, rather than being squeezed into the drag-handle slot. */
.alg-column-setting-item.alg-source-column-setting-item {
    grid-template-columns: 18px minmax(202px, 1fr) 110px;
    cursor: default;
}

/* An unchecked field is waiting to be added back.  Show it in the same
   compact form as a source field; width and alignment are meaningful only
   once it is visible again. */
.alg-column-setting-item.alg-source-column-setting-item .alg-column-select-info,
.alg-column-setting-item.alg-source-column-setting-item .alg-column-move,
.alg-column-setting-item.alg-source-column-setting-item .alg-column-width,
.alg-column-setting-item.alg-source-column-setting-item .alg-column-alignment {
    display: none;
}

.alg-column-source-note {
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

    .alg-column-setting-item label {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        color: #475569;
        font-size: 12px;
        white-space: nowrap;
    }

        .alg-column-setting-item .alg-column-width,
        .alg-column-setting-item .alg-column-alignment {
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
            min-width: 0;
        }

    .alg-column-setting-item .alg-column-visible {
        min-width: 0;
        color: #172033;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        overflow: hidden;
        pointer-events: auto !important;
        position: relative;
        z-index: 2;
    }

        .alg-column-setting-item .alg-column-visible span {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .alg-column-setting-item .alg-column-visible input {
            width: auto;
            flex: 0 0 auto;
            accent-color: #2563eb;
            appearance: auto !important;
            -webkit-appearance: checkbox !important;
            pointer-events: auto !important;
            cursor: pointer !important;
            position: relative;
            z-index: 3;
        }

    .alg-column-setting-item input, .alg-column-setting-item select {
        width: 100%;
        min-width: 0;
        padding: 4px 5px;
        border: 1px solid #cbd5e1;
        border-radius: 5px;
        background: #fff;
        color: #172033;
        font: inherit;
        font-size: 12px;
    }

    .alg-column-setting-item input:disabled,
    .alg-column-setting-item select:disabled {
        cursor: not-allowed;
        background: #f8fafc;
        color: #94a3b8;
        opacity: .72;
    }

.alg-column-setting-item .alg-column-width input {
    width: 52px;
    min-width: 52px;
    box-sizing: border-box;
}

.alg-column-setting-item .alg-column-alignment select {
    width: 66px;
    min-width: 66px;
    box-sizing: border-box;
    color: #172033 !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

.alg-column-setting-item .alg-alignment-control {
    position: relative;
    display: inline-flex;
    width: 66px;
    min-width: 66px;
}

.alg-column-setting-item .alg-alignment-control select {
    position: relative;
    z-index: 1;
    width: 66px !important;
    min-width: 66px !important;
    padding-left: 5px !important;
    /* Keep the native control clickable but let the stable label below carry
       the visible selected value. */
    color: transparent !important;
    background: transparent !important;
}

.alg-column-setting-item .alg-alignment-control select option {
    color: #172033 !important;
    background: #fff !important;
}

.alg-column-setting-item .alg-alignment-selected {
    position: absolute;
    /* The label must sit above the transparent native select.  Previously it
       was below the control and Chrome sometimes painted an empty dropdown
       before the label became visible. Pointer events still reach select. */
    z-index: 2;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    color: #172033 !important;
    font-size: 12px !important;
    line-height: 1;
    pointer-events: none;
}

.alg-column-name {
    overflow: hidden;
    color: #172033;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alg-column-drag {
    color: #94a3b8;
    font-size: 18px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.alg-column-drag:active {
    cursor: grabbing;
}

.alg-column-setting-item.alg-drag-over {
    border-top: 2px solid #2878f0;
    background: #eef5ff;
}

.alg-column-setting-item .alg-column-select-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    color: #7890b0;
    font-size: 17px;
    cursor: pointer;
    flex: 0 0 18px;
}

.alg-column-setting-item .alg-column-select-spacer {
    visibility: hidden;
    pointer-events: none;
}

.alg-column-setting-item .alg-column-shuffle-spacer {
    visibility: hidden;
    pointer-events: none;
}

.alg-column-setting-item .alg-column-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 58px;
}

/* Source columns cannot be shuffled until selected.  Their information icon
   occupies the full shuffle-control slot, keeping it centered with the arrow
   pair shown on reorderable columns. */
.alg-column-setting-item .alg-column-move.alg-column-select-info {
    width: 58px;
    min-width: 58px;
    flex: 0 0 58px;
}

.alg-column-setting-item .alg-column-move button {
    width: 26px;
    height: 28px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.alg-column-setting-item .alg-column-move button:hover {
    background: #eff6ff;
    border-color: #60a5fa;
}

.alg-column-settings-actions {
    display: flex;
    flex: none;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 10px;
    padding-top: 9px;
    padding-bottom: 1px;
}

    .alg-column-settings-actions button {
        min-height: 30px;
        padding: 4px 10px;
        border: 1px solid #93c5fd;
        border-radius: 6px;
        background: #fff;
        color: #1d4ed8;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }

    .alg-column-settings-actions .alg-settings-save {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

    /* Keep the primary action visually stable. Some screen-level button
       hover rules otherwise replace the blue Apply & Save surface. */
    .alg-column-settings-actions .alg-settings-save:hover,
    .alg-column-settings-actions .alg-settings-save:focus-visible,
    .alg-column-settings-actions .alg-settings-save:active {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
        box-shadow: none;
    }

    .alg-column-settings-actions .alg-settings-save:focus-visible {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }

    .alg-column-settings-actions .alg-settings-reset {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

        .alg-column-settings-actions .alg-settings-reset .material-symbols-outlined {
            font-size: 15px;
        }

@media (max-width:640px) {
    .alg-column-setting-item {
        grid-template-columns: 18px 1fr;
    }

        .alg-column-setting-item label {
            grid-column: 2;
        }
}

/* Keep CommonList filter controls in the toolbar at every font scale. */
.commonlistmargin.allowance-list-filter-bar {
    gap: 14px;
    min-width: 0;
    max-width: 100%;
}

.allowance-list-filter-bar .commonlist-master-filter,
.allowance-list-filter-bar .commonlist-master-filter > div {
    min-width: 0;
    max-width: 100%;
}

.allowance-list-filter-bar .allowance-name-filter,
.allowance-list-filter-bar .select2-container {
    width: min(320px, 100%) !important;
    max-width: 100% !important;
}

@media (max-width:640px) {
    .allowance-list-filter-bar {
        align-items: stretch !important;
    }

    .allowance-list-filter-bar .allowance-name-filter,
    .allowance-list-filter-bar .select2-container {
        width: 100% !important;
    }
}

@media (max-width:640px) {
    .app-list-grid-toolbar .alg-spacer {
        display: none;
    }

    .alg-filter {
        flex: 1 1 150px;
    }

    .app-list-grid-pagination .alg-page-info {
        flex-basis: 100%;
    }
}

/* Approval request status labels used by the Regularization and Leave Form lists. */
.request-status-cell {
    text-align: center;
}

.request-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.request-status--pending {
    color: #1d4ed8;
    background: #dbeafe;
}

.request-status--rejected {
    color: #b91c1c;
    background: #fee2e2;
}

.request-status--approved {
    color: #15803d;
    background: #dcfce7;
}