.quickgrid {
 
}

.quickgrid {
    position: relative;
    overflow-x: auto;
    border-radius: 0.5rem; /* Equivalent to sm:rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Equivalent to shadow-md */
    width: 100%;
    font-size: 0.875rem; /* 14px, text-sm */
    text-align: left;
    color: var(--color-text-secondary);
    border-collapse: collapse; /* Ensures borders are clean */
}

    .quickgrid thead {
        font-size: 0.75rem; /* 12px, text-xs */
        text-transform: uppercase;
        color: var(--color-text-primary);
        background-color: var(--color-bg-primary);
    }

    .quickgrid th {
        padding: 0.75rem 1.5rem; /* px-6 py-3 */
        font-weight: 600; /* Headers are bold */
        text-align: left;
    }
    .quickgrid th div{
        text-align: left;
    }
    .quickgrid tbody tr {
        background-color: var(--color-bg-secondary);
        border-bottom: 1px solid var(--color-border);
    }

        .quickgrid tbody tr:last-of-type {
            border-bottom: none; /* Remove border from the last row */
        }

    .quickgrid td {
        padding: 1rem 1.5rem !important; /* px-6 py-4 */
        text-align:left;
    }

 

    .quickgrid td a {
        font-weight: 500; /* font-medium */
        color: var(--color-primary);
        text-decoration: none;
    }

        .quickgrid td a:hover {
            text-decoration: underline;
            color: var(--color-primary-hover);
        }
    .quickgrid tbody tr:has(td:empty) {
        display: none;
    }

    /*
 * ==================================================
 * 6a. Action Icon Styling
 * ==================================================
 */
    .quickgrid .icon {
        display: inline-block;
        width: 1.25rem; /* 20px */
        height: 1.25rem; /* 20px */
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        vertical-align: middle;
        transition: opacity 0.2s;
    }

        .quickgrid .icon:hover {
            opacity: 0.75;
        }

    .quickgrid .icon-edit {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2360A5FA'%3e%3cpath d='M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z' /%3e%3cpath fill-rule='evenodd' d='M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z' clip-rule='evenodd' /%3e%3c/svg%3e");
    }

    .quickgrid .icon-delete {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23F87171'%3e%3cpath fill-rule='evenodd' d='M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z' clip-rule='evenodd' /%3e%3c/svg%3e");
    }

    /*
 * ==================================================
 Pagination Styling (Based on actual QuickGrid HTML)
 * ==================================================
 */
     .paginator {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        font-size: 0.875rem;
        color: var(--color-text-secondary);
        background-color: var(--color-bg-secondary);
        border-top: 1px solid var(--color-border);
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        margin-top:10px;
        padding-left:10px !important;
    }

        .paginator .summary {
            color: var(--color-text-primary);
        }

         .paginator nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

         .paginator .pagination-text {
            margin: 0 0.5rem;
        }

         .paginator button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            background-color: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
            color: var(--color-text-secondary);
        }

             .paginator button:hover:not(:disabled) {
                background-color: var(--color-bg-primary);
                color: var(--color-text-primary);
            }

             .paginator button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            /* SVG Icons for pagination buttons */