keuangan/resources/scss/plugin/datatables.scss

@import "@coreui/coreui/scss/variables";
@import "@coreui/coreui/scss/mixins";
@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css";

// DataTables Theme Overrides
table.dataTable {
    font-family: var(--cui-font-sans-serif);
    font-size: var(--cui-body-font-size);
    color: var(--cui-body-color);
    border-collapse: collapse !important;
    border-color: var(--cui-border-color);

    // Header cells
    thead {
        th,
        td {
            font-weight: 500;
            font-size: var(--cui-font-size-sm);
            color: var(--cui-secondary-color);
            background: var(--cui-tertiary-bg);
            border-bottom: 1px solid var(--cui-border-color) !important;
            padding: 0.625rem 0.75rem;
            white-space: nowrap;
        }

        // Sort icons
        th.sorting,
        th.sorting_asc,
        th.sorting_desc {
            cursor: pointer;

            &::before,
            &::after {
                opacity: 0.4;
                color: var(--cui-secondary-color);
            }

            &.sorting_asc::before,
            &.sorting_desc::after {
                opacity: 1;
                color: var(--cui-primary);
            }
        }
    }

    // Body cells
    tbody {
        td {
            padding: 0.625rem 0.75rem;
            vertical-align: middle;
            border-top: 1px solid var(--cui-border-color);
        }

        tr {
            transition: background-color 0.15s;

            &:hover > td {
                // Safe runtime transparency generation via color-mix()
                background-color: color-mix(in srgb, var(--cui-primary) 4%, transparent);

                &.dtfc-fixed-left,
                &.dtfc-fixed-right {
                    background-color: color-mix(in srgb, var(--cui-primary) 4%, var(--cui-body-bg));
                }
            }

            &.selected > td {
                background-color: color-mix(in srgb, var(--cui-primary) 10%, transparent);
                color: var(--cui-emphasis-color);

                &.dtfc-fixed-left,
                &.dtfc-fixed-right {
                    background-color: color-mix(in srgb, var(--cui-primary) 10%, var(--cui-body-bg));
                }
            }
        }
    }

    // Footer cells
    tfoot {
        th,
        td {
            border-top: 2px solid var(--cui-border-color);
            font-weight: 500;
            color: var(--cui-emphasis-color);
        }
    }

    // Striped rows
    &.table-striped {
        > tbody > tr:nth-child(odd) > td {
            background-color: var(--cui-table-striped-bg);

            &.dtfc-fixed-left,
            &.dtfc-fixed-right {
                background-color: color-mix(in srgb, var(--cui-tertiary-bg) 60%, var(--cui-body-bg));
            }
        }
    }
}

// Wrapper lengths control
.dataTables_wrapper {
    font-family: var(--cui-font-sans-serif);
    font-size: var(--cui-body-font-size);
    color: var(--cui-body-color);

    // Length (items per page) select
    .dataTables_length {
        label {
            font-size: var(--cui-font-size-sm);
            color: var(--cui-secondary-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        select {
            font-family: var(--cui-font-sans-serif);
            font-size: var(--cui-font-size-sm);
            border: 1px solid var(--cui-border-color);
            border-radius: 0.5rem;
            padding: 0.25rem 2.25rem 0.25rem 0.75rem;
            color: var(--cui-body-color);
            background-color: var(--cui-body-bg);
            min-width: 80px;

            &:focus {
                border-color: var(--cui-primary);
                outline: 0;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent);
            }
        }
    }

    // Search input
    .dataTables_filter {
        label {
            font-size: var(--cui-font-size-sm);
            color: var(--cui-secondary-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        input {
            font-family: var(--cui-font-sans-serif);
            font-size: var(--cui-font-size-sm);
            border: 1px solid var(--cui-border-color);
            border-radius: 0.5rem;
            padding: 0.375rem 0.75rem;
            color: var(--cui-body-color);
            background-color: var(--cui-body-bg);

            &:focus {
                border-color: var(--cui-primary);
                outline: 0;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--cui-primary) 12%, transparent);
            }
        }
    }

    // Info text
    .dataTables_info {
        font-size: var(--cui-font-size-sm);
        color: var(--cui-secondary-color);
        padding-top: 0.5rem;
    }

    // Pagination
    .dataTables_paginate {
        .paginate_button {
            font-family: var(--cui-font-sans-serif);
            font-size: var(--cui-font-size-sm);
            border-radius: 0.5rem !important;
            border: 1px solid transparent !important;
            color: var(--cui-body-color) !important;
            padding: 0.3rem 0.65rem;
            transition: all 0.15s;

            &:hover {
                background: color-mix(in srgb, var(--cui-primary) 8%, transparent) !important;
                color: var(--cui-primary) !important;
                border-color: transparent !important;
                box-shadow: none !important;
            }

            &.current,
            &.current:hover {
                background: var(--cui-primary) !important;
                color: var(--cui-white) !important;
                border-color: var(--cui-primary) !important;
                box-shadow: none !important;
                font-weight: 500;
            }

            &.disabled,
            &.disabled:hover {
                color: var(--cui-secondary-color) !important;
                background: transparent !important;
                cursor: not-allowed;
            }
        }
    }

    // Processing indicator
    .dataTables_processing {
        font-family: var(--cui-font-sans-serif);
        font-size: var(--cui-font-size-sm);
        border: 1px solid var(--cui-border-color);
        border-radius: 0.5rem;
        background: var(--cui-body-bg);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        color: var(--cui-body-color);

        > div:last-child > div {
            background: var(--cui-primary);
        }
    }
}

.dt-length {
    select {
        min-width: 70px !important;
    }
}

// Scoped CoreUI Theme High Contrast Shadows
[data-coreui-theme="dark"] {
    .dataTables_wrapper .dataTables_processing {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    }
}