*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0; /* Combine margin reset for efficiency */
}

body {
    font-family: system-ui;
    margin-inline: auto;
}

img {
    max-width: 100%;
    display: block;
}

.cell-title {
    border: 1px solid #000;
}

.main-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--gap);
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.grid-wrap {
    width:100%;
    border:1px dashed #e2e8f0;
    padding:8px;
    box-sizing:border-box;
    background:white;
}

.entry-wrapper{
    display: grid;
    grid-template-rows: 250px 1fr;
}

.borehole p {
    font-weight: bold;
    text-align: center;
}

.borehole input {
    width: 100%;
    padding: 0.25rem;
}

.tab-header {
    display: flex;
    cursor: pointer;
    border-bottom: 2px solid firebrick;
}

.plotgrid {
    display: grid;
    grid-template-columns: 1220px 200px /* TODO: find a way to keep this dynamic, i just don't want the buttons to cover the graph! */
    /*grid-template-columns: 80% 20%;*/
}

.borehole-properties,
.borehole {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    gap: 0.5rem;
    box-sizing: border-box;
    width: 100%;
}

.button-pair{
    display: grid;
    grid-template-columns: 150px 100px;
    box-sizing: border-box;
    width: 100%;
}
.plotbuttongrid {
    display: grid;
    /*gap: 0.5rem;*/
    box-sizing: border-box;
    grid-template-rows: minmax(auto, 1fr);
    /*padding: 1rem;*/
    /*border-radius: 6px;*/
    height: 100%;

}

.plot-box{
    width: 600px;
    position: absolute;
    top: 8px;
    left: 80px;
    right: 80px;
    bottom: 8px;
}

.tablinks {
    overflow: hidden;
    border: 1px solid #e0e0e0;
    transition: background-color 0.3s; /* Smooth transition */
}

.tablinks.active {
    background-color: aqua;
}

.tabcontent {
    display: none;
    grid-template-columns: repeat(14, 1fr);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    gap: 0.5rem;
    box-sizing: border-box;
    text-align: center;
}

.tabcontent.active {
    display: grid;
}

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
    .main-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .main-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grid-item {
    width: 100%;
    padding: 5px;
}

.button-container {
    margin-top: 10px;
    text-align: center;
}

.button-container button {
    width: 200px; /* Fixed width for uniform size */
    padding: 10px; /* Padding for better clickability */
    margin: 5px; /* Space between buttons */
}

header {
    text-align: center;
}

h1, h3 {
    margin: 1rem 0;
}

/* Style results section */
#results {
    margin: 1rem 0;
}