<div class="w-full">
    <style>
        /* Make checkboxes indigo with accent-color - override Filament defaults */
        input[type="checkbox"],
        input[type="checkbox"].fi-checkbox-input {
            accent-color: #6366f1 !important;
            color: #6366f1 !important;
            width: 20px !important;
            height: 20px !important;
            cursor: pointer !important;
            border-radius: 4px !important;
        }

        /* Thicker border for unchecked checkboxes */
        input[type="checkbox"]:not(:checked),
        input[type="checkbox"].fi-checkbox-input:not(:checked) {
            border: 1.5px solid #d1d5db !important;
        }

        .fi-ta-checkbox {
            opacity: 1 !important;
        }

        /* Make icons white in bulk action buttons */
        button[class*="bg-indigo"] svg,
        button[class*="bg-indigo"] svg path,
        .bg-indigo-700 svg,
        .bg-indigo-700 svg path,
        [class*="bg-indigo"] svg,
        [class*="bg-indigo"] svg path {
            color: white !important;
            fill: none !important;
            stroke: white !important;
            stroke-width: 2 !important;
        }

        /* Use indigo for table row selection border */
        .fi-ta-row[aria-selected="true"],
        tr[aria-selected="true"],
        .fi-ta-row-selected,
        [aria-selected="true"],
        .fi-ta-row.fi-selected,
        .fi-ta-row.fi-selected > :first-child::before {
            border-left-color: #6366f1 !important;
            border-inline-start-color: #6366f1 !important;
            background-color: rgba(99, 102, 241, 0.05) !important;
        }

        .fi-ta-row.fi-selected > :first-child::before {
            background-color: #6366f1 !important;
        }

        /* Hide column toggle button completely */
        button[aria-label="Toggle columns"],
        [data-dropdown-toggle="column-toggle"],
        .fi-ta-header-ctn button[x-data*="toggle"],
        button.fi-table-column-toggle-trigger {
            display: none !important;
        }

        /* Style the Apply columns button to indigo - override orange */
        .fi-dropdown-panel button[type="submit"],
        .fi-dropdown-panel .fi-btn,
        .fi-dropdown-panel button.fi-btn,
        [x-data*="toggleColumns"] button[type="submit"],
        button[type="submit"].fi-btn,
        .fi-ta-actions button[type="submit"] {
            background-color: rgb(67, 56, 202) !important;
            color: white !important;
            border-color: rgb(67, 56, 202) !important;
        }

        .fi-dropdown-panel button[type="submit"]:hover,
        .fi-dropdown-panel .fi-btn:hover,
        .fi-dropdown-panel button.fi-btn:hover,
        [x-data*="toggleColumns"] button[type="submit"]:hover,
        button[type="submit"].fi-btn:hover,
        .fi-ta-actions button[type="submit"]:hover {
            background-color: rgb(99, 102, 241) !important;
            border-color: rgb(99, 102, 241) !important;
        }

        /* Override any orange/amber button colors */
        button[class*="bg-orange"],
        button[class*="bg-amber"],
        .bg-orange-600,
        .bg-amber-600 {
            background-color: rgb(67, 56, 202) !important;
        }
    </style>

    {{ $this->table }}
</div>
