.sheets-page > h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 16px;
}
.sheets-container { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    background-color: var(--surface); 
    border-radius: var(--md-sys-shape-corner-m); 
    box-shadow: var(--md-sys-elevation-level1); 
    overflow: hidden; 
    border: 1px solid var(--outline);
}
.sheets-toolbar { 
    padding: 8px 16px; 
    background-color: var(--surface-container-low); 
    border-bottom: 1px solid var(--outline); 
    display: flex; 
    gap: 8px; 
    align-items: center; 
    flex-wrap: wrap;
}

/* Table responsive wrapper is in global.css */
#sheetsGrid { 
    width: 100%; 
    border-collapse: collapse; /* Crucial for grid lines */
    table-layout: fixed; 
}

/* Grid Lines Styling */
#sheetsGrid th, 
#sheetsGrid td { 
    border: 1px solid var(--outline); /* Main grid line color */
    padding: 0; /* Padding will be on the input */
    min-width: 100px; 
    height: 36px; 
    text-align: left; 
    vertical-align: middle; 
    position: relative; 
    font-size: 14px;
    box-sizing: border-box; /* Ensure border is part of width/height calculation */
}

/* Column Headers (A, B, C...) */
#sheetsGrid thead th { /* Targeting th in thead specifically */
    background-color: var(--surface-container); 
    font-weight: 500; 
    cursor: pointer; 
    padding: 8px; 
    text-align: center;
    color: var(--on-surface-variant); 
    position: sticky; 
    top: 0;
    z-index: 10; /* Above cells */
    border-left: 1px solid var(--outline);
    border-bottom: 1px solid var(--primary); /* Heavier bottom border for header row */
}
#sheetsGrid thead th:first-child { /* Top-left empty cell */
    background-color: var(--surface-container-high); /* Slightly different for distinction */
    cursor: default;
    z-index: 12; /* Above both row and col headers */
    border-right: 1px solid var(--primary); /* Separator for row numbers */
}

/* Row Headers (1, 2, 3...) - Assuming these are <th> elements in <tbody> or styled specifically */
#sheetsGrid tbody th.row-header { 
    background-color: var(--surface-container);
    min-width: 50px;
    max-width: 50px; /* Fixed width for row numbers */
    text-align: center;
    font-weight: 500;
    color: var(--on-surface-variant);
    position: sticky;
    left: 0;
    z-index: 11; /* Above cells, below top-left corner */
    padding: 8px;
    border-right: 1px solid var(--primary); /* Heavier right border for row header column */
}

#sheetsGrid td input { 
    width: 100%; 
    height: 100%; 
    border: none; 
    outline: none; 
    padding: 0 8px; 
    margin: 0; 
    font: inherit; /* Inherits from td (font-size: 14px) */
    background-color: transparent; 
    color: var(--on-surface); 
}

/* Selected Cell Styling */
#sheetsGrid td.selected { 
    /* Using box-shadow for an inset border effect that doesn't affect layout */
    box-shadow: inset 0 0 0 2px var(--primary); 
    z-index: 1; /* Bring selected cell to front to ensure border is visible */
}
#sheetsGrid td input:focus { 
    /* Input focus styling is handled by the td.selected if input is focused */
    /* This prevents double borders if input focus style is different */
    box-shadow: none; /* Override any default input focus shadow if td is already selected */
}