body {
    background-color: black;
    color: whitesmoke;
    margin: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.half-section {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    padding: 8px;
}

code {
    display: block;
    white-space: pre;
    overflow-y: scroll;
    padding: 8px;
    height: 50vh;
}

code:focus {
    outline: 1px solid white;
}

#logs {
    white-space: pre-wrap;
    overflow-y: scroll;
    height: max-content;
}

.log-entry {
    margin: 2px 0;
}

.tab-content {
    display: none;
}

:has(#tab-cargo-toml:checked) #cargo-toml-content,
:has(#tab-lib-rs:checked) #lib-rs-content {
    display: block;
}

.loading::after {
    content: '';
    animation: dots 2s steps(4, end) infinite;
}

@keyframes dots {
    0% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
    100% {
        content: '';
    }
}

.spreadsheet-container {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
}

th, td {
    min-width: 6rem;
    border-bottom: 1px solid lightgray;
    border-right: 1px solid lightgray;
}

th:last-child, td:last-child {
    border-right: none;
}

tr:last-child td {
    border-bottom: none;
}

/* Sticky first column */
tbody td:first-child,
thead th:first-child {
    position: sticky;
    left: 0;
    background-color: black;
}

td { 
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    max-width: 12rem;
    box-sizing: border-box;
}

td:first-child {
    text-align: center;
}

td.selected-top {
    border-top: 3px solid white;
}

td.selected-bottom {
    border-bottom: 3px solid white;
}

td.selected-left {
    border-left: 3px solid white;
}

td.selected-right {
    border-right: 3px solid white;
}

td.selected-anchor {
    border: 3px solid red;
}

td:focus {
    outline: none;
    border: 3px solid red !important;
    overflow: visible;
    border-right: none !important;
}

td:focus ~ td {
    color: transparent;
    border-left: none;
    border-right: none;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
}

td:focus ~ td:last-child {
    border-right: 3px solid red !important;
}

td:hover:not(:empty):not(:focus):not(:first-child) {
    overflow: visible;
    border-right: none;
}

td:hover:not(:empty):not(:focus):not(:first-child) ~ td {
    color: transparent;
    border-left: none;
    border-right: none;
}

#spreadsheet {
    font-size: 15px;
}

thead th:first-child,
tbody td:first-child {
    min-width: 4rem;
    max-width: 6rem;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.indicator.green { background-color: greenyellow; }
.indicator.red { background-color: red; }
.indicator.orange { background-color: orange; }

#api-key {
    display: none;
    max-width: 4rem;
}

#api-key.blurred {
    display: block;
    filter: blur(3px);
    overflow: clip;
    text-overflow: clip;
    white-space: nowrap;
}

#api-key.blurred:hover {
    text-overflow: ellipsis;
    filter: none;
    cursor: none;
}

button, input[type="submit"] {
    cursor: pointer;
}