/* excel-grid.css */
.excel-table {
    border-spacing: 0;
    border-collapse: collapse;
    /* Width auto ensures table grows to content, activating horizontal scroll */
    width: auto; 
}

.excel-th,
.excel-td {
    padding: 0.5rem;
    border: 1px solid #ccc;
    text-align: left;
    /* Prevents text wrapping, forcing horizontal scroll for long content */
    white-space: nowrap; 
}

.excel-th {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10; /* Must be > 0 to stay on top of rows during vertical scroll */
}

.excel-tr:nth-child(even) {
    background-color: #f9f9f9;
}

.excel-tr:hover {
    background-color: #f3f4f6;
}

/* Editing State */
.excel-tr.is-editing {
    background-color: #fff9c4; /* Yellow-50 equivalent */
}

/* --- Row Handle Styles (Word-like Effect) --- */
.excel-row-handle {
    width: 30px;
    padding: 0 !important;
    border-right: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    
    /* Hidden by default */
    opacity: 0; 
    visibility: hidden;
    
    /* Smooth transition for appearing */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    
    cursor: pointer;
    color: #4b5563; /* gray-600 */
}

/* Show the icon when the parent <tr> is hovered */
.excel-tr:hover .excel-row-handle {
    opacity: 1;
    visibility: visible;
}

/* Interaction feedback */
.excel-row-handle:hover {
    background-color: #e5e7eb;
    color: #2563eb; /* blue-600 */
}

/* --- FIX: Force Visible (To override CSS default hide for "always visible" requirement) --- */
.excel-row-handle.force-visible {
    opacity: 1 !important;
    visibility: visible !important;
}