/* CSV to JSON & JSON to CSV Converter */

#cj_csv, #cj_json {
    height: 300px;
    scrollbar-width: thin;
    white-space: pre;
    overflow-wrap: normal;
}

@media (max-width: 768px) {
    #cj_csv, #cj_json {
        height: 200px;
    }
}

/* The status line keeps one line's height while empty, so the buttons don't move */
.cj-status {
    min-height: 1.3125rem;
}

/* Under an error message, an empty status line would only add a gap */
.is-invalid ~ .cj-status:empty {
    display: none;
}

/* The switches share the height of the small fields beside them, so they sit on the fields' centre line */
.cj-switches {
    min-height: calc(0.875rem * 1.5 + 0.5rem + 2 * var(--bs-border-width));
}

#cj_tool .form-switch {
    margin-bottom: 0;
}

#cj_tool .form-switch .form-check-input {
    cursor: pointer;
}

#cj_tool .form-check-label .font-monospace {
    margin-left: 0.25rem;
}

/* The table scrolls inside its box, both ways, rather than widening the page; a long value is cut short. The
   box draws the outer edge, square, and the cells only the lines between them, so no line is doubled */
.cj-table-wrap {
    max-height: 32rem;
    overflow: auto;
    border: var(--bs-border-width) solid var(--ck-border-subtle);
    scrollbar-width: thin;
}

.cj-table {
    --bs-table-bg: var(--ck-surface);
    --bs-table-color: var(--ck-text-1);
    --bs-table-border-color: var(--ck-border-subtle);
    font-size: 0.875rem;
}

.cj-table > thead > tr {
    border-top-width: 0;
}

.cj-table > tbody > tr:last-child,
.cj-table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.cj-table tr > :first-child {
    border-left-width: 0;
}

.cj-table tr > :last-child {
    border-right-width: 0;
}

.cj-table > :not(caption) > * > * {
    padding: 0.375rem 0.625rem;
    max-width: 16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The header row stays in view while the rows scroll. A collapsed border doesn't travel with a sticky cell, so
   the line under the header is a shadow */
.cj-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom-width: 0;
    box-shadow: inset 0 calc(-1 * var(--bs-border-width)) 0 var(--ck-border-subtle);
    font-weight: 500;
}