/* Container */
.jek-table-wrapper {
    width: 100%;
    margin-top: 1rem;
    /* Adding -webkit-overflow-scrolling for smoother scrolling on iOS/Safari */
    -webkit-overflow-scrolling: touch; 
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    /* You might sometimes need this for border-radius to display correctly with overflow on Safari/Chrome */
    transform: translateZ(0); 
}

/* Table - No changes needed here */
.jek-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

/* Header - No changes needed here */
.jek-table thead {
    background: #f8fafc;
}

.jek-table th {
    text-align: left;
    padding: 10px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

/* Rows - No changes needed here */
.jek-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* Hover state - No changes needed here */
.jek-set-row:hover {
    background: #f8fafc;
}

/* Inputs - FIXES APPLIED HERE */
.jek-table input,
.jek-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 16px;
    background: #fff;
    
    /* Safari/Webkit-specific fixes for input and select appearance: */
    /* Resets the default inner appearance of inputs and selects */
    -webkit-appearance: none; 
    /* Fixes font rendering in form elements */
    -webkit-font-smoothing: antialiased; 
}

.jek-table input:focus,
.jek-table select:focus {
    /* Ensure the focus styles override default Safari focus ring */
    outline: 2px solid #2563eb;
    border-color: #2563eb;
    /* Adding a basic box-shadow can sometimes help with visibility on different browser stacks */
    box-shadow: 0 0 0 2px #2563eb; 
}

/* Remove button - No changes needed here */
.jek-remove-set {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    /* Resets the default button appearance */
    -webkit-appearance: none;
}

.jek-remove-set:hover {
    background: #fecaca;
}

/* Action buttons - No changes needed here */
.jek-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.jek-btn {
    padding: 8px 14px;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    /* Resets the default button appearance */
    -webkit-appearance: none;
}

.jek-btn:hover {
    background: #1e40af;
}