/* General Styles */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #f4f4f4;

}



#spreadsheet-container {

    width: 90%;

    height: 90%;

    border: 1px solid #ccc;

    background-color: #fff;

    overflow: auto;

    position: relative;

}



#spreadsheet {

    display: grid;

    grid-template-columns: repeat(27, auto); /* 26 Columns A-Z + row header */

    grid-auto-rows: minmax(20px, auto); /* Variable row height */

}



.cell {

    border: 1px solid #ddd;

    padding: 5px;

    box-sizing: border-box;

    white-space: pre-wrap;

    overflow: hidden;

    user-select: none;

}



.cell[data-header="true"] {

    background-color: #f0f0f0;

    font-weight: bold;

    text-align: center;

}



.cell[data-selected="true"] {

    border-color: #4a90e2;

    outline: 2px solid #4a90e2;

}



#spreadsheet .row-header, #spreadsheet .col-header {

    background-color: #f0f0f0;

    font-weight: bold;

    text-align: center;

}



.hidden {

    display: none;

}



#error-label {

    color: red;

    position: absolute;

    top: 10px;

    left: 10px;

    background-color: #fff;

    padding: 5px 10px;

    border: 1px solid red;

    z-index: 10;

}