@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="card border-0 shadow-xs mb-1" style="background: linear-gradient(135deg, #f8f9fa 0%, #edf1f4 100%); border-radius: 8px;">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-start">
                                            <div style="flex-grow: 1;">
                                                <h6 class="mb-1 text-dark font-weight-bold" style="font-size: 0.875rem;">Petunjuk Approval DKL:</h6>
                                                <p class="mb-0 text-secondary text-xs" style="line-height: 1.6;">
                                                    <span class="d-block mb-1">
                                                        <i class="fas fa-gavel text-warning me-1"></i> Pilih karyawan, lalu klik tombol <strong>Approve</strong> untuk menyetujui atau <strong>Reject</strong> untuk menolak.
                                                    </span>
                                                    <span class="d-block">
                                                        <i class="fas fa-exclamation-circle text-danger me-1"></i> Kolom dengan teks berwarna <span class="text-danger font-weight-bold">Merah</span> menandakan adanya perubahan data antara DKL dengan SPL awal.
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <form id="form-approve-partial" action="{{ route('approval.dkl.approve_partial') }}" method="POST">
                            @csrf
                            <div class="row px-4 py-2 align-items-center">
                                <div class="col-md-12 mb-2 text-end">
                                    @if ($canApprove ?? false)
                                        <span id="selected-count-info" class="me-3 font-weight-bold text-secondary text-sm" style="display: none;">
                                            <span id="selected-count">0</span> karyawan dipilih | <span id="selected-dkl-count">0</span> Surat DKL
                                        </span>
                                        <button type="button" class="btn btn-sm btn-success mb-0 me-2" id="btn-approve-partial" style="display: none;">
                                            <i class="fas fa-check-double me-1"></i> Approve
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger mb-0" id="btn-reject-partial" style="display: none;">
                                            <i class="fas fa-times-circle me-1"></i> Reject
                                        </button>
                                    @endif
                                    <input type="hidden" name="{{ $approvalStage === 'personalia' ? 'catatan_personalia' : 'catatan_atasan' }}" id="catatan_approval">
                                </div>
                            </div>
                            <div class="row px-4 py-2">
                                <div class="table-responsive">
                                    <table class="table display align-items-center" id="list_{{ $dmenu }}">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                @if ($canApprove ?? false)
                                                    <th width="40px" class="text-center font-weight-bolder text-uppercase text-xs" style="color: #344767;">
                                                        <div class="form-check d-inline-block p-0 m-0">
                                                            <input type="checkbox" id="check-all" class="form-check-input m-0 float-none">
                                                        </div>
                                                    </th>
                                                @endif
                                                <th width="50px" class="text-center font-weight-bolder text-uppercase text-xs" style="color: #344767;">No</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Nama</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">No DKL</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Agenda</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Mulai Pekerjaan</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Selesai Pekerjaan</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Istirahat</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Jam</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Jenis</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Tipe</th>
                                                <th class="font-weight-bolder text-uppercase text-xs" style="color: #344767;">Status Pekerjaan</th>
                                                <th width="120px" class="text-center font-weight-bolder text-uppercase text-xs" style="color: #344767;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $currentDkl = null;
                                                $dklGroupIndex = 0;
                                            @endphp
                                            @foreach ($table_detail as $detail)
                                                @php
                                                    $isNewGroup = false;
                                                    if ($currentDkl !== $detail->no_dkl) {
                                                        $currentDkl = $detail->no_dkl;
                                                        $dklGroupIndex++;
                                                        if ($loop->index > 0) {
                                                            $isNewGroup = true;
                                                        }
                                                    }
                                                    $dklRowClass = ($dklGroupIndex % 2 == 1) ? 'dkl-group-even' : 'dkl-group-odd';
                                                @endphp
                                                <tr class="{{ $dklRowClass }} {{ $isNewGroup ? 'dkl-group-border' : '' }}" data-dkl="{{ $detail->no_dkl }}">
                                                    @if ($canApprove ?? false)
                                                        <td class="text-center align-middle">
                                                            <div class="form-check d-inline-block p-0 m-0">
                                                                @php
                                                                    $valStsData = strtolower(trim($detail->pekerjaan_selesai ?? ''));
                                                                    $txtSts = in_array($valStsData, ['sudah', 'selesai', '1']) ? 'SUDAH SELESAI' : (in_array($valStsData, ['tidak', 'tidak selesai', '0']) ? 'TIDAK SELESAI' : 'BELUM SELESAI');
                                                                @endphp
                                                                <input type="checkbox" value="{{ $detail->detail_id }}" 
                                                                    data-nama="{{ $detail->nama_karyawan }}" 
                                                                    data-total-dkl="{{ floatval($detail->dkl_jam_lembur) }} jam" 
                                                                    data-status="{{ $txtSts }}"
                                                                    class="detail-checkbox form-check-input m-0 float-none">
                                                            </div>
                                                        </td>
                                                    @endif
                                                    <td class="text-center align-middle text-xs text-dark font-weight-bold">
                                                        {{ $loop->iteration }}
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        <span class="font-weight-bold text-dark">{{ $detail->nama_karyawan }}</span><br>
                                                        <small class="text-xs text-secondary">{{ $detail->nik }} - {{ $detail->departemen }}</small>
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        <span class="font-weight-bold text-dark">{{ $detail->no_dkl }}</span>
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        @php
                                                            $isAgendaChanged = trim($detail->dkl_agenda) != trim($detail->spl_agenda);
                                                        @endphp
                                                        <span class="text-xs {{ $isAgendaChanged ? 'text-danger font-weight-bold' : 'text-dark' }}" style="white-space: normal; min-width: 150px;">
                                                            {{ $detail->dkl_agenda ?? '-' }}
                                                        </span>
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        @php
                                                            $isMulaiChanged = $detail->dkl_jam_mulai != $detail->spl_jam_mulai;
                                                        @endphp
                                                        <span class="text-xs {{ $isMulaiChanged ? 'text-danger font-weight-bold' : 'text-dark' }}">
                                                            {{ $detail->dkl_jam_mulai ? \Carbon\Carbon::parse($detail->dkl_jam_mulai)->format('Y-m-d H:i:s') : '-' }}
                                                        </span>
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        @php
                                                            $isSelesaiChanged = $detail->dkl_jam_selesai != $detail->spl_jam_selesai;
                                                        @endphp
                                                        <span class="text-xs {{ $isSelesaiChanged ? 'text-danger font-weight-bold' : 'text-dark' }}">
                                                            {{ $detail->dkl_jam_selesai ? \Carbon\Carbon::parse($detail->dkl_jam_selesai)->format('Y-m-d H:i:s') : '-' }}
                                                        </span>
                                                    </td>
                                                    
                                                      <td class="text-sm align-middle">
                                                        @php
                                                            $isAgendaChanged = trim($detail->dkl_jam_lembur) != trim($detail->spl_jam_lembur);
                                                        @endphp
                                                        <span class="text-xs {{ $isAgendaChanged ? 'text-danger font-weight-bold' : 'text-dark' }}" style="white-space: normal; min-width: 150px;">
                                                            {{ $detail->dkl_jam_lembur ?? '-' }}
                                                        </span>
                                                    </td>

                                                        <td class="text-sm align-middle">
    @php
                                                            $isAgendaChanged = trim($detail->dkl_break_jam) != trim($detail->spl_break_jam);
                                                        @endphp
                                                        <span class="text-xs {{ $isAgendaChanged ? 'text-danger font-weight-bold' : 'text-dark' }}" style="white-space: normal; min-width: 150px;">
                                                            {{ $detail->dkl_break_jam ?? '-' }}
                                                        </span>
                             
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        @php
                                                            $isJenisChanged = $detail->dkl_jenis_lembur != $detail->spl_jenis_lembur;
                                                        @endphp
                                                        <span class="text-xs {{ $isJenisChanged ? 'text-danger font-weight-bold' : 'text-dark' }}">
                                                            {{ $detail->dkl_jenis_lembur }}
                                                        </span>
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        @php
                                                            $isTipeChanged = $detail->dkl_tipe_lembur != $detail->spl_tipe_lembur;
                                                        @endphp
                                                        <span class="text-xs {{ $isTipeChanged ? 'text-danger font-weight-bold' : 'text-dark' }}">
                                                            {{ $detail->dkl_tipe_lembur }}
                                                        </span>
                                                    </td>
                                                    <td class="text-sm align-middle">
                                                        @php
                                                            $valSts = strtolower(trim($detail->pekerjaan_selesai ?? ''));
                                                        @endphp
                                                        @if(in_array($valSts, ['sudah', 'selesai', '1']))
                                                            <span class="badge rounded-pill bg-success text-white py-1 px-3" style="font-size: 10px;">SUDAH SELESAI</span>
                                                        @elseif(in_array($valSts, ['tidak', 'tidak selesai', '0']))
                                                            <span class="badge rounded-pill bg-danger text-white py-1 px-3" style="font-size: 10px;">TIDAK SELESAI</span>
                                                        @else
                                                            <span class="badge rounded-pill text-white py-1 px-3" style="background-color: #fb6340 !important; font-size: 10px;">BELUM SELESAI</span>
                                                        @endif
                                                    </td>
                                                    <td class="align-middle">
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-sm btn-info mb-0"
                                                                title="Review Detail"
                                                                onclick="window.location='{{ url($url_menu . '/show/' . encrypt($detail->dkl_id . ':' . $detail->detail_id)) }}'">
                                                                <i class="fas fa-eye me-1"></i> Detail
                                                            </button>
                                                            @if ($canApprove ?? false)
                                                                <button type="button" class="btn btn-sm btn-success mb-0 btn-row-approve"
                                                                    title="Approve 1 Karyawan Ini"
                                                                    data-detail-id="{{ $detail->detail_id }}">
                                                                    <i class="fas fa-check me-1"></i> Approve
                                                                </button>
                                                                <button type="button" class="btn btn-sm btn-danger mb-0 btn-row-reject"
                                                                    title="Reject 1 Karyawan Ini"
                                                                    data-detail-id="{{ $detail->detail_id }}">
                                                                    <i class="fas fa-times me-1"></i> Reject
                                                                </button>
                                                            @endif
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            let canApprove = {{ ($canApprove ?? false) ? 'true' : 'false' }};
            let dklColIndex = canApprove ? 3 : 2;
            let namaColIndex = canApprove ? 2 : 1;
            let nonOrderableTargets = canApprove ? [0, 1, 10] : [0, 9];
            let dklChildIndex = canApprove ? 4 : 3;

            // Inisialisasi DataTable
            let table = $('#list_{{ $dmenu }}').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "pageLength": 50,
                "order": [[dklColIndex, 'desc'], [namaColIndex, 'asc']], // Utama: No DKL (terbaru -> terlama), Kedua: Nama Karyawan A-Z
                "columnDefs": [
                    { "orderable": false, "targets": nonOrderableTargets } // Non-orderable columns
                ],
                "drawCallback": function (settings) {
                    let api = this.api();
                    let rows = api.rows({ page: 'current' }).nodes();
                    let lastDkl = null;
                    let groupIndex = 0;

                    $(rows).each(function (index) {
                        let noDkl = $(this).attr('data-dkl') || $(this).find('td:nth-child(' + dklChildIndex + ')').text().trim();
                        let isNewGroup = false;
                        if (lastDkl !== noDkl) {
                            lastDkl = noDkl;
                            groupIndex++;
                            if (index > 0) {
                                isNewGroup = true;
                            }
                        }
                        $(this).removeClass('dkl-group-even dkl-group-odd dkl-group-border odd even');
                        if (groupIndex % 2 === 1) {
                            $(this).addClass('dkl-group-even');
                        } else {
                            $(this).addClass('dkl-group-odd');
                        }
                        if (isNewGroup) {
                            $(this).addClass('dkl-group-border');
                        }

                        let chk = $(this).find('.detail-checkbox');
                        if (chk.length > 0 && chk.is(':checked')) {
                            $(this).addClass('dkl-row-selected');
                        } else {
                            $(this).removeClass('dkl-row-selected');
                        }
                    });
                }
            });

            function updateSelectedCount() {
                let selectedCheckboxes = table.$('.detail-checkbox:checked');
                let selectedCount = selectedCheckboxes.length;
                let selectedDklSet = new Set();

                table.$('.detail-checkbox').each(function () {
                    let rowDkl = $(this).closest('tr').attr('data-dkl') || $(this).closest('tr').find('td:nth-child(' + dklChildIndex + ')').text().trim();
                    if (this.checked) {
                        $(this).closest('tr').addClass('dkl-row-selected');
                        if (rowDkl) {
                            selectedDklSet.add(rowDkl);
                        }
                    } else {
                        $(this).closest('tr').removeClass('dkl-row-selected');
                    }
                });

                let selectedDklCount = selectedDklSet.size;

                if (selectedCount > 0) {
                    $('#selected-count').text(selectedCount);
                    $('#selected-dkl-count').text(selectedDklCount);
                    $('#selected-count-info').show();
                    $('#btn-approve-partial').show();
                    $('#btn-reject-partial').show();
                    $('.btn-row-approve, .btn-row-reject').hide();
                } else {
                    $('#selected-count-info').hide();
                    $('#btn-approve-partial').hide();
                    $('#btn-reject-partial').hide();
                    $('.btn-row-approve, .btn-row-reject').show();
                }
            }

            // Select all checkboxes for the table
            $('#check-all').on('change', function () {
                let isChecked = this.checked;
                table.$('.detail-checkbox').prop('checked', isChecked);
                updateSelectedCount();
            });

            // Bulk toggle checkboxes per No DKL (Surat)
            $(document).on('change', '.detail-checkbox', function () {
                let isChecked = this.checked;
                let targetDkl = $(this).closest('tr').attr('data-dkl') || $(this).closest('tr').find('td:nth-child(' + dklChildIndex + ')').text().trim();

                if (targetDkl) {
                    table.$('.detail-checkbox').each(function () {
                        let rowDkl = $(this).closest('tr').attr('data-dkl') || $(this).closest('tr').find('td:nth-child(' + dklChildIndex + ')').text().trim();
                        if (rowDkl === targetDkl) {
                            this.checked = isChecked;
                        }
                    });
                }

                updateSelectedCount();

                // Sync status check-all header checkbox
                let totalAll = table.$('.detail-checkbox').length;
                let checkedAll = table.$('.detail-checkbox:checked').length;
                $('#check-all').prop('checked', totalAll > 0 && totalAll === checkedAll);
            });

            // Sync status on table redraw (pagination, search, sorting)
            table.on('draw', function () {
                let totalAll = table.$('.detail-checkbox').length;
                let checkedAll = table.$('.detail-checkbox:checked').length;
                $('#check-all').prop('checked', totalAll > 0 && totalAll === checkedAll);
                updateSelectedCount();
            });

            function getSelectedItemsTableHtml(selectedCheckboxes) {
                let rowsHtml = '';
                selectedCheckboxes.each(function () {
                    let nama = $(this).data('nama') || '-';
                    let totalDkl = $(this).data('total-dkl') || '-';
                    let status = $(this).data('status') || '-';
                    
                    let statusStyle = 'background-color: #fb6340 !important;';
                    if (status === 'SUDAH SELESAI') {
                        statusStyle = 'background-color: #2dce89 !important;';
                    } else if (status === 'TIDAK SELESAI') {
                        statusStyle = 'background-color: #f5365c !important;';
                    }

                    rowsHtml += `
                        <tr>
                            <td class="text-start font-weight-bold text-dark align-middle ps-3">${nama}</td>
                            <td class="text-center align-middle">${totalDkl}</td>
                            <td class="text-center align-middle pe-3">
                                <span class="badge rounded-pill text-white px-2 py-1" style="${statusStyle} font-size: 10px;">${status}</span>
                            </td>
                        </tr>
                    `;
                });

                return `
                    <div class="table-responsive my-3" style="max-height: 200px; overflow-y: auto; border: 1px solid #e9ecef; border-radius: 8px;">
                        <table class="table table-sm align-items-center mb-0" style="font-size: 12px;">
                            <thead class="bg-light sticky-top" style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder ps-3">Nama</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Total DKL</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder pe-3">Status Pekerjaan</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${rowsHtml}
                            </tbody>
                        </table>
                    </div>
                `;
            }

            function processApproval(checkboxCollection, isReject) {
                let selectedCount = checkboxCollection.length;
                
                if (selectedCount === 0) {
                    Swal.fire({
                        title: 'Pilih Karyawan',
                        text: isReject ? 'Silakan centang minimal satu karyawan yang ingin ditolak.' : 'Silakan centang minimal satu karyawan yang ingin disetujui.',
                        icon: 'warning',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                let tableHtml = getSelectedItemsTableHtml(checkboxCollection);
                let title = isReject ? 'Reject DKL' : 'Approve DKL';
                let actionRoute = isReject ? "{{ route('approval.dkl.reject_partial') }}" : "{{ route('approval.dkl.approve_partial') }}";
                let promptText = isReject 
                    ? `Apakah Anda yakin ingin menolak <b>${selectedCount}</b> baris lembur karyawan yang dipilih?` 
                    : `Apakah Anda yakin ingin menyetujui <b>${selectedCount}</b> baris lembur karyawan yang dipilih?`;
                let confirmColor = isReject ? '#fd5c70' : '#2dce89';
                let confirmText = isReject ? 'Ya, Tolak!' : 'Ya, Setujui!';

                let swalHtml = `
                    <p class="text-sm text-secondary mb-2">${promptText}</p>
                    ${tableHtml}
                    <div class="text-start mt-2">
                        <label for="swal-catatan" class="form-label text-xs font-weight-bold mb-1">Catatan ${isReject ? 'Reject <span class="text-danger">*</span>' : 'Approval (opsional)'}:</label>
                        <input id="swal-catatan" class="form-control form-control-sm" placeholder="${isReject ? 'Catatan reject (wajib)...' : 'Masukkan catatan approval (opsional)...'}">
                    </div>
                `;

                Swal.fire({
                    title: title,
                    html: swalHtml,
                    icon: isReject ? 'warning' : 'question',
                    showCancelButton: true,
                    confirmButtonColor: confirmColor,
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: confirmText,
                    cancelButtonText: 'Batal',
                    preConfirm: () => {
                        const val = $('#swal-catatan').val();
                        if (isReject && (!val || !val.trim())) {
                            Swal.showValidationMessage('Catatan wajib diisi!');
                            return false;
                        }
                        return (val || '').trim();
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        let form = $('#form-approve-partial');
                        form.attr('action', actionRoute);
                        
                        $('#catatan_approval').val(result.value || '');
                        
                        form.find('input[name="detail_ids[]"]').remove();
                        checkboxCollection.each(function () {
                            form.append(
                                $('<input>')
                                    .attr('type', 'hidden')
                                    .attr('name', 'detail_ids[]')
                                    .val(this.value)
                            );
                        });

                        form[0].submit();
                    }
                });
            }

            // Quick Approve ONLY 1 specific employee row from Action column (WITHOUT checking checkbox)
            $(document).on('click', '.btn-row-approve', function (e) {
                e.preventDefault();
                let chk = $(this).closest('tr').find('.detail-checkbox');
                processApproval(chk, false);
            });

            // Quick Reject ONLY 1 specific employee row from Action column (WITHOUT checking checkbox)
            $(document).on('click', '.btn-row-reject', function (e) {
                e.preventDefault();
                let chk = $(this).closest('tr').find('.detail-checkbox');
                processApproval(chk, true);
            });

            // Click Handler for Approve Selected (Bulk Header)
            $('#btn-approve-partial').on('click', function () {
                processApproval(table.$('.detail-checkbox:checked'), false);
            });

            // Click Handler for Reject Selected (Bulk Header)
            $('#btn-reject-partial').on('click', function () {
                processApproval(table.$('.detail-checkbox:checked'), true);
            });
        });
    </script>
        <style>
        .text-xxs {
            font-size: 9px !important;
        }

        /* Override DataTables and Bootstrap default odd/even striping */
        table.dataTable tbody tr.odd,
        table.dataTable tbody tr.even,
        table.dataTable tbody tr.odd > td,
        table.dataTable tbody tr.even > td,
        table.dataTable tbody tr > td {
            background-color: transparent !important;
            --bs-table-accent-bg: transparent !important;
            --bs-table-bg: transparent !important;
        }

        tr.dkl-group-even,
        tr.dkl-group-even > td,
        table.dataTable tbody tr.dkl-group-even,
        table.dataTable tbody tr.dkl-group-even > td {
            background-color: #ffffff !important;
            --bs-table-bg: #ffffff !important;
            --bs-table-accent-bg: #ffffff !important;
        }

        tr.dkl-group-odd,
        tr.dkl-group-odd > td,
        table.dataTable tbody tr.dkl-group-odd,
        table.dataTable tbody tr.dkl-group-odd > td {
            background-color: #dbe3ec !important; /* Darker slate/grey for clear group contrast */
            --bs-table-bg: #dbe3ec !important;
            --bs-table-accent-bg: #dbe3ec !important;
        }

        tr.dkl-row-selected,
        tr.dkl-row-selected > td,
        table.dataTable tbody tr.dkl-row-selected,
        table.dataTable tbody tr.dkl-row-selected > td {
            background-color: #FFF3CD !important;
            --bs-table-bg: #FFF3CD !important;
            --bs-table-accent-bg: #FFF3CD !important;
        }

        /* Border tebal pemisah antar surat DKL (Hanya muncul saat fitur bulk / row selected) */
        tr.dkl-row-selected.dkl-group-border > td,
        table.dataTable tbody tr.dkl-row-selected.dkl-group-border > td {
            border-top: 3px solid #344767 !important;
        }
    </style>
@endsection