.nav-link.nav-link-disabled{
    pointer-events: none !important;
    cursor: default !important;
    color: gray !important;
}
.card-featured-primary{
    min-height:120px
}
.disabled-section {
    pointer-events: none; /* blocks clicks */
    opacity: 0.5; /* makes it look disabled */
}
body.app-shell {
    min-height: 100vh;
}
.dx-checkbox .dx-checkbox-icon {
    border: 1px solid rgba(100, 116, 139, 0.8)!important;
   /* background-color: #fff;*/
}
.header-nav-main{
    margin:0;
}
.app-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 0 auto;
}

.app-footer {
    margin-top: auto;
    flex-shrink: 0;
}
.period-selector {
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(91, 110, 245, 0.22);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 238, 253, 0.9));
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .period-selector:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    }

    .period-selector .dx-dropdowneditor-field {
        min-height: 44px;
    }

    .period-selector .dx-texteditor-input {
        font-weight: 600;
        letter-spacing: 0.01em;
        font-size: 0.95rem;
        color: #111827;
    }

    .period-selector .dx-placeholder {
        color: #6b7280;
        font-weight: 500;
        font-size: 0.9rem;
    }

    .period-selector .dx-dropdowneditor-icon {
        color: #5b6ef5;
        opacity: 0.75;
    }

.period-selector-grid {
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

    .period-selector-grid .dx-datagrid-rowsview .dx-row {
        transition: background-color 0.2s ease, color 0.2s ease;
        font-weight: 500;
    }

        .period-selector-grid .dx-datagrid-rowsview .dx-row.dx-data-row:hover {
            background: rgba(91, 110, 245, 0.08);
            color: #111827;
        }

        .period-selector-grid .dx-datagrid-rowsview .dx-row.dx-selection {
            background: rgba(91, 110, 245, 0.16);
            color: #111827;
        }

.payslip-grid,
.payroll-tax-grid {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(91, 110, 245, 0.35);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(233, 236, 255, 0.85));
    backdrop-filter: blur(6px);
}
.dx-datagrid-headers .dx-header-row > td,
.dx-datagrid-headers .dx-header-row > td *,
.dx-datagrid-headers .dx-header-row > td * :before {
    background-color: var(--color-bluebg);
    color: white;
}
.readonly-cell {
    background-color: #f0f0f0 !important;
    /* color: #8c8c8c; */
    cursor: not-allowed;
}
    .payslip-grid .dx-datagrid-headers,
    .payroll-tax-grid .dx-datagrid-headers {
        background: linear-gradient(135deg, rgba(91, 110, 245, 0.18), rgba(244, 114, 182, 0.18));
        color: #0f172a;
        letter-spacing: 0.08em;
        font-weight: 600;
        border-bottom: 1px solid rgba(91, 110, 245, 0.15);
    }

        .payslip-grid .dx-datagrid-headers .dx-row > td,
        .payroll-tax-grid .dx-datagrid-headers .dx-row > td {
            font-size: 0.72rem;
            padding: 6px 10px;
        }

    .payslip-grid td,
    .payslip-grid .dx-datagrid-text-content,
    .payslip-grid .dx-row,
    .payroll-tax-grid td,
    .payroll-tax-grid .dx-datagrid-text-content,
    .payroll-tax-grid .dx-row {
        font-size: 0.8rem;
    }
    .payslip-grid .dx-datagrid-text-content,
    .payroll-tax-grid .dx-datagrid-text-content {
        font-size: 0.80rem;
        padding: 0;
        letter-spacing: 0
    }
    .payslip-grid .dx-row,
    .payroll-tax-grid .dx-row {
        font-weight: 500;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .payslip-grid .dx-row.dx-data-row:hover,
        .payroll-tax-grid .dx-row.dx-data-row:hover {
            background: rgba(91, 110, 245, 0.08);
        }

        .payslip-grid .dx-row.dx-data-row.dx-row-alt,
        .payroll-tax-grid .dx-row.dx-data-row.dx-row-alt {
            background: rgba(239, 246, 255, 0.86);
        }

    .payslip-grid .dx-datagrid-total-footer td,
    .payroll-tax-grid .dx-datagrid-total-footer td {
        background: rgba(91, 110, 245, 0.08);
        font-weight: 600;
        color: #0f172a;
    }

.employee-selector {
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(91, 110, 245, 0.22);
    /*  padding: 10px 14px 12px; */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 238, 253, 0.9));
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .employee-selector:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    }

    .employee-selector .dx-dropdowneditor-field {
        min-height: 44px;
    }

    .employee-selector .dx-texteditor-input {
        font-weight: 600;
        letter-spacing: 0.01em;
        font-size: 0.95rem;
        color: #111827;
    }

    .employee-selector .dx-placeholder {
        color: #6b7280;
        font-weight: 500;
        font-size: 0.9rem;
    }

    .employee-selector .dx-dropdowneditor-icon {
        color: #5b6ef5;
        opacity: 0.75;
    }

.employee-selector-grid {
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
}

    .employee-selector-grid .dx-datagrid-rowsview .dx-row {
        transition: background-color 0.2s ease, color 0.2s ease;
        font-weight: 500;
    }

        .employee-selector-grid .dx-datagrid-rowsview .dx-row.dx-data-row:hover {
            background: rgba(91, 110, 245, 0.08);
            color: #111827;
        }

        .employee-selector-grid .dx-datagrid-rowsview .dx-row.dx-selection {
            background: rgba(91, 110, 245, 0.16);
            color: #111827;
        }
.Pointer {
    cursor: pointer;
}
.selector-wrapper {
    border-radius: 4px;
    border: 1px solid var(--payroll-card-border);
    background-color: var(--payroll-card-bg);
    box-shadow: var(--payroll-shadow);
    padding: 14px 18px;
    margin: 10px 0 0px;
    position: relative;
    overflow: hidden;
}

    .selector-wrapper::after {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 4px;
        background: radial-gradient(circle at top left, rgba(91, 110, 245, 0.08), transparent 60%);
        pointer-events: none;
    }

    .selector-wrapper > * {
        position: relative;
        z-index: 1;
    }
.selector-wrapper,
.content-card {
    border-radius: 4px;
    border: 1px solid var(--payroll-card-border);
    background-color: var(--payroll-card-bg);
    box-shadow: var(--payroll-shadow);
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
}

    .selector-wrapper::after,
    .content-card::after {
        content: "";
        position: absolute;
        inset: 12px;
        border-radius: 4px;
        background: radial-gradient(circle at top left, rgba(91, 110, 245, 0.08), transparent 60%);
        pointer-events: none;
    }

    .selector-wrapper > *,
    .content-card > * {
        position: relative;
        z-index: 1;
    }
.payroll-reports-page {
    margin-top: 10px;
}

.payroll-reports-card .card-body {
    padding: 1rem 1.5rem;
}

.payroll-reports-section-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.payroll-reports-actions-row {
    margin-top: 0.75rem;
}

.payroll-main-tabs .nav-tabs {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}

.payroll-main-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.payroll-main-cards .widget-summary-col-icon img {
    height: 40px;
    width: 40px;
    padding: 8px;
    object-fit: contain;
}

.payroll-main-cards .card.card-featured,
.payroll-main-cards .card.card-featured-left {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.payroll-main-cards .widget-summary.widget-summary-xs {
    align-items: center;
}

.payroll-main-cards .summary h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.payroll-main-cards .summary p {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.payroll-main-cards .summary-link {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    display: block;
    width: 100%;
    color: #374151;
}

.payroll-main-cards .summary-link:hover {
    text-decoration: none;
    color: #1d4ed8;
}

.payroll-tax-page {
    margin-top: 8px;
    overflow: visible;
}

.payroll-tax-period-panel {
    margin-bottom: 1rem;
}

.payroll-tax-period-panel.selector-wrapper {
    padding: 12px 16px;
}

.payroll-tax-period-panel p {
    margin: 8px 0 0;
}

.payroll-tax-form-card .card-body {
    padding: 1.25rem 1.5rem;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: visible;
}

.payroll-tax-form-card.card {
    overflow: hidden;
}

.payroll-tax-tab-content {
    overflow: visible;
}

.payroll-tax-tab-content > .active {
    display: contents;
}

.payroll-tax-shell .dx-tabpanel-tabs {
    margin-bottom: 12px;
}

.payroll-tax-shell .dx-tabpanel-tabs .dx-tab {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.payroll-tax-shell .dx-multiview-wrapper,
.payroll-tax-shell .dx-tabpanel-container,
.payroll-tax-shell .dx-multiview-item {
    padding-top: 4px;
    height: auto;
    overflow: visible;
}

.payroll-tax-shell,
.payroll-tax-shell .dx-layout-manager,
.payroll-tax-shell .dx-layout-manager .dx-widget,
.payroll-tax-shell .dx-tabpanel,
.payroll-tax-shell .dx-multiview,
.payroll-tax-shell .dx-item-content {
    height: auto;
    overflow: visible;
}

.payroll-tax-shell .dx-field-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

.payroll-tax-shell .dx-field-item-label {
    padding-right: 14px;
}

.payroll-tax-shell .dx-field-item-label-text,
.payroll-tax-shell .dx-field-item-label-content {
    white-space: normal;
    line-height: 1.35;
}

.payroll-tax-shell .dx-field-item-content,
.payroll-tax-shell .dx-field-item-content-wrapper {
    width: 100%;
}

.payroll-tax-shell .dx-texteditor,
.payroll-tax-shell .dx-numberbox,
.payroll-tax-shell .dx-selectbox,
.payroll-tax-shell .dx-datebox,
.payroll-tax-shell .dx-dropdowneditor {
    width: 100%;
    max-width: 240px;
}

.payroll-tax-shell .dx-checkbox,
.payroll-tax-shell .dx-checkbox-container {
    width: auto;
    max-width: none;
}

.payroll-tax-shell .boldLetters .dx-field-item-label-text,
.payroll-tax-shell .boldLetters .dx-texteditor-input {
    font-weight: 600;
}

.payroll-tax-shell .white .dx-texteditor,
.payroll-tax-shell .white .dx-numberbox {
    background-color: #f8fafc;
}

.payroll-tax-shell .highlight {
    background-color: #fef08a;
    height: 100%;
}

.payroll-tax-summary-grid .dx-layout-manager .dx-field-item {
    align-items: start;
}

.payroll-info-item {
    position: relative;
}

.payroll-info-item--card > .card-body {
    padding-right: 3.25rem;
    transition: background-color 0.2s ease;
}

.payroll-info-item--card:hover > .card-body {
    background-color: #f5f5f5;
}

.payroll-info-item--panel {
    border-radius: 12px;
    padding: 0.85rem 3rem 0.85rem 0.85rem;
    transition: background-color 0.2s ease;
}

.payroll-info-item--panel:hover {
    background-color: #f5f5f5;
}

.payroll-info-trigger {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #ffffff;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.payroll-info-trigger:hover,
.payroll-info-trigger:focus {
    background: #e5e7eb;
    color: #1f2937;
    text-decoration: none;
}

.body p {
    font-size: 9px;
    color: #0088cc;
}

.payroll-report-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.payroll-report-icon img {
    height: 40px;
    width: 40px;
    /*         border-radius: 8px;
            background: #e5f0ff; */
    padding: 8px;
    object-fit: contain;
    /*       box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15); */
}

.payroll-report-text-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
    display: inline-block;
}

.payroll-report-text-desc {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.payroll-report-link {
    text-decoration: none;
}

    .payroll-report-link:hover .payroll-report-text-title {
        color: #1d4ed8;
    }
.payroll-reports-page {
    margin-top: 10px;
}

.payroll-reports-card .card-body {
    padding: 1rem 1.5rem;
}

.payroll-reports-section-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.payroll-reports-actions-row {
    margin-top: 0.75rem;
}

.payroll-report-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.payroll-report-icon img {
    height: 40px;
    width: 40px;
    /*         border-radius: 8px;
            background: #e5f0ff; */
    padding: 8px;
    object-fit: contain;
    /*       box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15); */
}

.payroll-report-text-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #111827;
    display: inline-block;
}

.payroll-report-text-desc {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #6b7280;
}

.payroll-report-link {
    text-decoration: none;
}

    .payroll-report-link:hover .payroll-report-text-title {
        color: #1d4ed8;
    }

.dx-form-compact .dx-field-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Reusable DevExtreme compact form classes */
/*.dx-form-compact .dx-texteditor-input,
.dx-form-compact .dx-numberbox input,
dx-form-compact .dx-textarea .dx-texteditor-input,
dx-form-compact .dx-selectbox .dx-texteditor-input,
dx-form-compact .dx-datebox .dx-texteditor-input {
    height: 5px !important;
    line-height: 0.1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.dx-form-compact .dx-texteditor-input-container,
.dx-form-compact .dx-numberbox,
.dx-form-compact.dx-selectbox,
.dx-form-compact .dx-datebox,
.dx-form-compact.dx-dropdowneditor {
    min-height: 28px !important;
}*/



@media (max-width: 768px) {
    .selector-wrapper {
        width: 100%;
    }
    .selector-wrapper,
    .content-card {
        padding: 16px;
    }

    .payroll-tax-form-card .card-body {
        padding: 1rem;
        max-height: calc(100vh - 190px);
    }

    .payroll-tax-shell .dx-texteditor,
    .payroll-tax-shell .dx-numberbox,
    .payroll-tax-shell .dx-selectbox,
    .payroll-tax-shell .dx-datebox,
    .payroll-tax-shell .dx-dropdowneditor {
        max-width: none;
    }
}

/* DevExtreme IR59 tab panel styling aligned with payroll main tabs */
 .dx-tabpanel .dx-tabs {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
    padding-bottom: 0.25rem;
    background: transparent;
    gap: 0.5rem;
}

 .dx-tabpanel .dx-tabs .dx-tabs-wrapper {
    gap: 0.5rem;
}
.dx-tabpanel > .dx-tabpanel-tabs .dx-tab {
    width: unset;
}
.dx-tabpanel .dx-tab {
    border-top: 4px solid transparent;
    border-radius: 5px;
    border-color: transparent;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: var(--color-primary);
    background: transparent;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.dx-tabpanel .dx-tab:hover:not(.dx-state-disabled) {
    border-color:transparent;
    border-top-color: rgba(29, 78, 216, 0.25);
    background: rgba(29, 78, 216, 0.06);
}

.dx-tabpanel .dx-tab.dx-tab-selected {
    color:var(--color-primary);
    border-top-color:var(--color-primary);
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}
.dx-tab-text {
    color: var(--color-primary);
}
 .dx-tabpanel .dx-multiview-wrapper {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    background: #fff;
    padding: 1.5rem;
}

 .dx-tabpanel .dx-multiview-item {
    padding: 0;
}

    .header.header-nav-menu .logo {
        position: relative;
        padding: 15px 20px 0 5px;
    }

@media (max-width: 768px) {
    #form .dx-tabpanel .dx-tabs,
    #form .dx-tabpanel .dx-tabs .dx-tabs-wrapper {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    #form .dx-tabpanel .dx-tab {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    #form .dx-tabpanel .dx-multiview-wrapper {
        padding: 1rem;
    }
}

/* ===== PAYSLIP GRID COLUMN CATEGORIZATION ===== */

/* Employee Details Headers - Override all nested elements */
.payslip-grid .dx-header-row .emp-header,
.payroll-tax-grid .dx-header-row .emp-header {
    background-color: #e8e8f0 !important;
    background: #e8e8f0 !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.payslip-grid .dx-header-row .emp-header > *,
.payroll-tax-grid .dx-header-row .emp-header > * {
    background-color: transparent !important;
    background: transparent !important;
    color: #1f2937 !important;
}

.payslip-grid .dx-header-row .emp-header .dx-text-content,
.payroll-tax-grid .dx-header-row .emp-header .dx-text-content {
    background-color: transparent !important;
    color: #1f2937 !important;
}

    .payslip-grid .dx-header-row .emp-header .dx-header-filter::before,
    .payroll-tax-grid .dx-header-row .emp-header .dx-header-filter::before,
    .payslip-grid .dx-header-row .emp-header .dx-header-filter::after,
    .payroll-tax-grid .dx-header-row .emp-header .dx-header-filter::after {
        background-color: transparent !important;
        background: transparent !important;
        color: #1f2937 !important;
    }

/* Income Headers - Light Green - Override all nested elements */
.payslip-grid .dx-header-row .inc-header,
.payroll-tax-grid .dx-header-row .inc-header {
    background-color: #d1f4d1 !important;
    background: #d1f4d1 !important;
    color: #1f7f1f !important;
    font-weight: 600 !important;
}

.payslip-grid .dx-header-row .inc-header > *,
.payroll-tax-grid .dx-header-row .inc-header > * {
    background-color: transparent !important;
    background: transparent !important;
    color: #1f7f1f !important;
}

.payslip-grid .dx-header-row .inc-header .dx-text-content,
.payroll-tax-grid .dx-header-row .inc-header .dx-text-content {
    background-color: transparent !important;
    color: #1f7f1f !important;
}

.payslip-grid .dx-header-row .inc-header .dx-header-filter,
.payroll-tax-grid .dx-header-row .inc-header .dx-header-filter {
    color: #1f7f1f !important;
     background-color: transparent !important;
}

.payslip-grid .dx-header-row .inc-header .dx-header-filter::before,
.payroll-tax-grid .dx-header-row .inc-header .dx-header-filter::before,
.payslip-grid .dx-header-row .inc-header .dx-header-filter::after,
.payroll-tax-grid .dx-header-row .inc-header .dx-header-filter::after {
    background-color: transparent !important;
    background: transparent !important;
    color: #1f7f1f !important;
}

/* Contribution Headers - Light Blue - Override all nested elements */
.payslip-grid .dx-header-row .con-header,
.payroll-tax-grid .dx-header-row .con-header {
    background-color: #d1e8ff !important;
    background: #d1e8ff !important;
    color: #1f4e8f !important;
    font-weight: 600 !important;
}

.payslip-grid .dx-header-row .con-header > *,
.payroll-tax-grid .dx-header-row .con-header > * {
    background-color: transparent !important;
    background: transparent !important;
    color: #1f4e8f !important;
}

.payslip-grid .dx-header-row .con-header .dx-text-content,
.payroll-tax-grid .dx-header-row .con-header .dx-text-content {
    background-color: transparent !important;
    color: #1f4e8f !important;
}

.payslip-grid .dx-header-row .con-header .dx-header-filter,
.payroll-tax-grid .dx-header-row .con-header .dx-header-filter {
    color: #1f4e8f !important;
     background-color: transparent !important;
}

.payslip-grid .dx-header-row .con-header .dx-header-filter::before,
.payroll-tax-grid .dx-header-row .con-header .dx-header-filter::before,
.payslip-grid .dx-header-row .con-header .dx-header-filter::after,
.payroll-tax-grid .dx-header-row .con-header .dx-header-filter::after {
    background-color: transparent !important;
    background: transparent !important;
    color: #1f4e8f !important;
}

/* Deduction Headers - Light Red - Override all nested elements */
.payslip-grid .dx-header-row .ded-header,
.payroll-tax-grid .dx-header-row .ded-header {
    background-color: #ffd1d1 !important;
    background: #ffd1d1 !important;
    color: #8f1f1f !important;
    font-weight: 600 !important;
}

.payslip-grid .dx-header-row .ded-header > *,
.payroll-tax-grid .dx-header-row .ded-header > * {
    background-color: transparent !important;
    background: transparent !important;
    color: #8f1f1f !important;
}

.payslip-grid .dx-header-row .ded-header .dx-text-content,
.payroll-tax-grid .dx-header-row .ded-header .dx-text-content {
    background-color: transparent !important;
    color: #8f1f1f !important;
}

.payslip-grid .dx-header-row .ded-header .dx-header-filter,
.payroll-tax-grid .dx-header-row .ded-header .dx-header-filter {
    color: #8f1f1f !important;
     background-color: transparent !important;
}

.payslip-grid .dx-header-row .ded-header .dx-header-filter::before,
.payroll-tax-grid .dx-header-row .ded-header .dx-header-filter::before,
.payslip-grid .dx-header-row .ded-header .dx-header-filter::after,
.payroll-tax-grid .dx-header-row .ded-header .dx-header-filter::after {
    background-color: transparent !important;
    background: transparent !important;
    color: #8f1f1f !important;
}

/* Income Cell Styling */
.payslip-grid .inc-cell,
.payroll-tax-grid .inc-cell {
    background-color: rgba(209, 244, 209, 0.3) !important;
}

/* Contribution Cell Styling */
.payslip-grid .con-cell,
.payroll-tax-grid .con-cell {
    background-color: rgba(209, 232, 255, 0.3) !important;
}

/* Deduction Cell Styling */
.payslip-grid .ded-cell,
.payroll-tax-grid .ded-cell {
    background-color: rgba(255, 209, 209, 0.3) !important;
}

/* Color Legend Container */
.payslip-grid-legend {
    display: flex;
    gap: 2rem;
    margin-top: 0;
    padding: 0rem 1rem;
    /*border: 1px solid #e5e7eb;
    border-radius: 6px;*/
    background-color: #f9fafb;
    /*font-size: 0.85rem;*/
}

.payslip-grid-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.payslip-grid-legend-color {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
}

.payslip-grid-legend-emp .payslip-grid-legend-color {
    background-color: #e8e8f0;
}

.payslip-grid-legend-inc .payslip-grid-legend-color {
    background-color: #d1f4d1;
}

.payslip-grid-legend-con .payslip-grid-legend-color {
    background-color: #d1e8ff;
}

.payslip-grid-legend-ded .payslip-grid-legend-color {
    background-color: #ffd1d1;
}