:root {
    --gt-blue: #5a86c5;
    --gt-active: #ffff66;
    --gt-page: #f4f6f9;
    --gt-header: #d6dce5;
    --gt-line: #b9c1cc;
    --gt-box-title: #ececec;
    --gt-label: #595959;
    --gt-calc: #e4e8ee;
    --gt-key: #ffff66;
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--gt-blue);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- GenoTrac forms: styled after the Access forms ---- */

.gt-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--gt-header);
}

    .gt-page-header h1 {
        font-size: 1.35rem;
        font-weight: 600;
        color: #333;
        margin: 0 0 0.4rem;
    }

    /* A header with buttons (Save, Undo changes) stays at the top of the window while a long page scrolls, so they're
       always in reach. js/fit.js sets the two lengths: where the buttons have wrapped onto their own line (an iPad),
       only that line stays. The page's message ("Saved.", or an error) stays just under it. */
    .gt-page-header:has(> .gt-actions) {
        position: sticky;
        top: var(--gt-header-top, 0px);
        z-index: 30;
        box-shadow: 0 1px 0 var(--gt-line);
    }

    .gt-page-header + .alert {
        position: sticky;
        top: calc(var(--gt-header-shown, 0px) + 0.25rem);
        z-index: 29;
    }

.gt-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gt-label);
}

    .gt-search input {
        width: 16rem;
    }

/* The Plants page's search box: twice the usual width, with the "go to plant" matches hanging under it. */
.gt-plant-search {
    flex-wrap: wrap;
}

    .gt-plant-search input[type=search] {
        width: 32rem;
        max-width: 100%;
    }

.gt-suggest-wrap {
    position: relative;
    max-width: 100%;
}

.gt-suggest {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid var(--gt-line);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

    .gt-suggest a {
        display: flex;
        gap: 0.6rem;
        padding: 0.35rem 0.6rem;
        color: #222;
        text-decoration: none;
    }

        .gt-suggest a b {
            flex: 0 0 5.5rem;
            font-weight: 600;
        }

        .gt-suggest a span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .gt-suggest a.active,
        .gt-suggest a:hover {
            background: #dbe8f7;
        }

    .gt-suggest .gt-suggest-more {
        border-top: 1px solid #e3e6ea;
        color: #1b4f8a;
    }

    .gt-suggest-none {
        padding: 0.35rem 0.6rem;
    }

.gt-include-inactive,
.gt-search-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    white-space: nowrap;
}

    .gt-search .gt-include-inactive input,
    .gt-search .gt-search-check input {
        flex: none;
        width: 1em;
        margin: 0;
    }

/* The plant list scrolls in its own pane, so the column headings stay in view and only the rows in view are drawn.
   Every row is one line high: the list works out which rows to draw from that height. */
.gt-plant-list {
    max-height: calc(100dvh - 13.5rem);
    overflow: auto;
    border: 1px solid #dee2e6;
}

    .gt-plant-list table {
        margin: 0;
    }

    .gt-plant-list thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 0;
    }

    .gt-plant-list tbody tr {
        height: 30px;
    }

    .gt-plant-list td {
        white-space: nowrap;
        max-width: 24rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gt-plant-list .gt-tick-cell {
        text-align: center;
        font-weight: 700;
    }

/* Matches found only inside a word ("aster" in "Eastern") are shaded and listed after the word-start matches. */
.gt-plant-list tr.gt-inside-word {
    --bs-table-bg: #f6efdc;
}

.gt-suggest a.gt-inside-word:not(.active):not(:hover) {
    background: #f6efdc;
}

.gt-inside-key {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    vertical-align: -0.05em;
    background: #f6efdc;
    border: 1px solid #cdbf95;
}

.gt-sort {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    font: inherit;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    background: none;
    border: none;
}

    .gt-sort:hover {
        background: #dfe3e8;
    }

    .gt-sort.active {
        font-weight: 600;
    }

    .gt-sort span {
        font-size: 0.7em;
    }

    th:last-child:nth-child(6) .gt-sort {
        text-align: center; /* Inactive, over its ticks */
    }

/* Rows and matches tall enough for a finger on a touch screen. */
@media (pointer: coarse) {
    .gt-plant-list tbody tr {
        height: 40px;
    }

    .gt-plant-list td {
        vertical-align: middle;
    }

    .gt-suggest a {
        padding: 0.6rem;
    }
}

/* The buttons at the top right stay together: when the header is too narrow for them, the whole group moves onto its
   own line rather than shrinking and breaking up. Only on a screen narrower than the group do they wrap. */
.gt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

    .gt-page-header > .gt-actions {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .gt-actions .btn {
        min-width: 5.5rem;
        border: 1px solid #7a97c2;
    }

    .gt-actions .btn-light {
        background: #fff;
    }

    .gt-actions .btn:disabled {
        background: #f0f0f0;
        color: #9a9a9a;
        border-color: #c8c8c8;
        opacity: 1;
    }

/* Folder tabs: grey tabs behind, the chosen one white with a blue top edge, joined to the white page below.
   The line under the tabs is an inset shadow, drawn under the tabs, so the chosen tab's white bottom edge
   covers it. On a narrow screen the tabs wrap onto a second row. */
.gt-tabs {
    gap: 3px;
    margin: 0 0.4rem;
    padding: 0.5rem 0.4rem 0;
    background: var(--gt-page);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--gt-line);
    font-size: 0.85rem;
}

    .gt-tabs .nav-link {
        padding: 0.35rem 0.9rem;
        margin: 0;
        color: #555;
        background: #e3e8ef;
        border: 1px solid #c9d0da;
        border-bottom: 1px solid var(--gt-line);
        border-radius: 6px 6px 0 0;
        white-space: nowrap;
    }

        .gt-tabs .nav-link:hover {
            color: #333;
            background: #edf1f6;
        }

        .gt-tabs .nav-link.active {
            padding-top: calc(0.35rem - 2px);
            color: #1b4f8a;
            background: #fff;
            border-color: var(--gt-line);
            border-top: 3px solid #1b6ec2;
            border-bottom-color: #fff;
            font-weight: 600;
        }

    /* A tab with changes that aren't saved yet. */
    .gt-tab-dirty {
        display: inline-block;
        width: 0.55rem;
        height: 0.55rem;
        margin-left: 0.3rem;
        vertical-align: 0.05rem;
        background: #e8730c;
        border-radius: 50%;
    }

    .gt-tab-count {
        display: inline-block;
        min-width: 1.4em;
        margin-left: 0.35rem;
        padding: 0 0.4em;
        font-size: 0.72rem;
        font-weight: 400;
        line-height: 1.35;
        text-align: center;
        color: #33415a;
        background: #d0d7e1;
        border-radius: 0.7em;
    }

        .gt-tabs .nav-link.active .gt-tab-count {
            color: #1b4f8a;
            background: #dbe8f7;
        }

.gt-tab-body {
    margin: 0 0.4rem 1rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--gt-line);
    border-top: none;
    font-size: 0.82rem;
}

    .gt-tab-body.gt-first {
        margin-top: 0.4rem;
        border-top: 1px solid var(--gt-line);
    }

    .gt-tab-body .form-control-sm,
    .gt-tab-body .form-select-sm {
        font-size: 0.8rem;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
        min-height: 0;
        border-radius: 0;
    }

    .gt-tab-body .form-select-sm {
        padding-right: 1.6rem;
        background-position: right 0.3rem center;
    }

.gt-label {
    display: block;
    color: var(--gt-label);
    margin-bottom: 0.15rem;
}

.gt-field {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

    .gt-field > label {
        text-align: right;
        color: var(--gt-label);
        margin: 0;
        line-height: 1.15;
    }

    .gt-field.gt-wide-label {
        grid-template-columns: minmax(8rem, 1.4fr) minmax(5rem, 1fr);
    }

    .gt-field.gt-auto {
        grid-template-columns: auto minmax(0, 1fr);
    }

.gt-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
}

    .gt-inline .form-select {
        width: 8.5rem;
    }

/* Checkboxes lined up under the inputs, past the label column. */
.gt-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    padding-left: 9rem;
}

    .gt-inline > .gt-field {
        margin-bottom: 0;
    }

.gt-code {
    max-width: 5.5rem;
}

.gt-check {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.2rem;
    color: var(--gt-label);
    cursor: pointer;
}

    .gt-check.after {
        justify-content: flex-start;
    }

    .gt-check .form-check-input {
        margin: 0;
        flex-shrink: 0;
        border-color: #767676;
        border-radius: 0.15rem;
    }

.gt-box {
    border: 1px solid var(--gt-line);
    background: #fff;
    margin-bottom: 0.5rem;
}

    .gt-box > header {
        background: var(--gt-box-title);
        border-bottom: 1px solid var(--gt-line);
        text-align: center;
        color: var(--gt-label);
        padding: 0.1rem 0.5rem;
    }

.gt-box-body {
    padding: 0.5rem 0.6rem;
}

.gt-calc,
.gt-calc[readonly] {
    background: var(--gt-calc);
}

.gt-key,
.gt-key.form-control,
.gt-key.form-select {
    background-color: var(--gt-key);
}

.gt-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
    padding: 0.5rem;
    background: #f7f7f7;
    color: #888;
    text-align: center;
    word-break: break-all;
}

.gt-reference {
    border: 1px solid var(--gt-line);
    padding: 0.5rem 0.75rem;
    color: var(--gt-label);
    align-self: start;
}

    .gt-reference h2 {
        font-size: 0.9rem;
        font-weight: 400;
        margin-bottom: 0.75rem;
    }

    .gt-reference ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .gt-reference li::before {
            content: "- ";
        }

.gt-notice {
    max-width: 44rem;
    border: 1px solid var(--gt-line);
    padding: 1rem;
    background: #f7f7f7;
}

    .gt-notice h2 {
        font-size: 1rem;
        font-weight: 600;
        color: #c00;
        text-align: center;
    }

.gt-login-box {
    width: 22rem;
    max-width: 100%;
}

    .gt-login-box > header {
        font-size: 1rem;
        padding: 0.35rem;
    }

    .gt-login-box .gt-box-body {
        padding: 1.25rem;
    }

.gt-table {
    font-size: 0.8rem;
}

    .gt-table thead th {
        background: var(--gt-box-title);
        font-weight: 400;
        white-space: nowrap;
    }

    /* Headings that sort (.gt-sort buttons) bring their own padding, as in the Plants and Trials lists. */
    .gt-table.gt-sortable thead th {
        padding: 0;
    }

/* ---- Pictures ---- */

.gt-image img {
    display: block;
    max-width: 100%;
    max-height: 9rem;
    object-fit: contain;
}

.gt-pic-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.gt-pic-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gt-seg {
    display: flex;
}

    .gt-seg button {
        height: 2rem;
        padding: 0 1rem;
        border: 1px solid #7a97c2;
        background: #fff;
        color: #262626;
    }

        .gt-seg button:first-child {
            border-radius: 4px 0 0 4px;
        }

        .gt-seg button + button {
            margin-left: -1px;
            border-radius: 0 4px 4px 0;
        }

        .gt-seg button.on {
            background: #24466e;
            border-color: #24466e;
            color: #fff;
        }

.gt-pic-filters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.gt-chips,
.gt-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.gt-chips-label {
    width: 2.75rem;
    color: var(--gt-label);
}

.gt-chip {
    height: 1.85rem;
    padding: 0 0.75rem;
    border: 1px solid var(--gt-line);
    border-radius: 1rem;
    background: #fff;
    color: #333;
    font-size: 0.78rem;
}

    .gt-chip.on {
        background: #24466e;
        border-color: #24466e;
        color: #fff;
    }

    .gt-chip:disabled {
        opacity: 0.6;
    }

/* Flower colors as a dropdown checklist (ColorSelect), on the office Trials screen and the plant's Color box. */
.gt-color-pick {
    position: relative;
}

/* Closed, it shows every chosen color, wrapping onto more lines as needed rather than growing wider. */
.gt-color-select {
    display: block;
    width: 100%;
    min-width: 0;
    text-align: left;
    white-space: normal;
}

.gt-color-item {
    display: inline-block;
    margin-right: 0.6rem;
    white-space: nowrap;
}

.gt-swatch {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.3rem;
    vertical-align: -0.1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.gt-color-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.gt-color-menu {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    min-width: max(100%, 10rem);
    margin-top: 2px;
    padding: 0.2rem 0;
    background: #fff;
    border: 1px solid var(--gt-line);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.gt-color-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.9rem;
    margin: 0;
    padding: 0 0.6rem;
    cursor: pointer;
    white-space: nowrap;
}

    .gt-color-row:hover {
        background: #eef2f8;
    }

    .gt-color-row input {
        margin: 0;
    }

    .gt-color-row .gt-swatch {
        margin-right: 0;
    }

.gt-pic-rows {
    border-top: 1px solid #e3e7ed;
}

.gt-pic-row {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e3e7ed;
}

.gt-pic-row-head {
    width: 10.5rem;
    flex-shrink: 0;
    padding-top: 0.25rem;
}

.gt-pic-row-name {
    font-weight: 600;
    color: #333;
}

.gt-pic-row-count {
    font-size: 0.75rem;
    color: #5f6b78;
}

.gt-pic-empty {
    flex: 1;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--gt-line);
    color: #5f6b78;
}

.gt-pic-tiles {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gt-pic-tile {
    width: 11rem;
    padding: 0;
    border: 1px solid #c9ced6;
    background: #fff;
    color: #333;
    text-align: left;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .gt-pic-tile:hover {
        border-color: #7a97c2;
        color: #333;
    }

.gt-pic-thumb {
    position: relative;
    height: 7.5rem;
    background: #eef1f4;
    display: block;
}

    .gt-pic-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.gt-pic-star {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    padding: 0 0.45rem;
    background: #fff7cc;
    border: 1px solid #c9a800;
    color: #5c4a00;
    font-size: 0.7rem;
    font-weight: 600;
}

.gt-pic-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem 0;
}

.gt-pic-view,
.gt-pic-stage {
    padding: 0 0.4rem;
    background: #e8eef7;
    color: #24466e;
    font-size: 0.7rem;
}

.gt-pic-stage {
    background: #eef3e6;
    color: #3d5424;
}

.gt-pic-trial {
    color: #5f6b78;
    font-size: 0.7rem;
}

.gt-pic-caption {
    display: block;
    padding: 0.2rem 0.5rem 0.45rem;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gt-coverage {
    display: grid;
    border-top: 1px solid var(--gt-line);
    border-left: 1px solid var(--gt-line);
}

    .gt-coverage > div {
        border-right: 1px solid var(--gt-line);
        border-bottom: 1px solid var(--gt-line);
    }

.gt-coverage-head {
    padding: 0.35rem 0.6rem;
    background: var(--gt-box-title);
    color: var(--gt-label);
}

.gt-coverage-stage {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gt-coverage-cell {
    padding: 0.5rem;
}

.gt-coverage-none {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--gt-line);
    color: #5f6b78;
    font-size: 0.75rem;
}

.gt-coverage-pic {
    position: relative;
    display: block;
    width: 100%;
    height: 5rem;
    padding: 0;
    border: 1px solid #c9ced6;
    background: #eef1f4;
}

    .gt-coverage-pic.dim {
        opacity: 0.35;
    }

    .gt-coverage-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.gt-coverage-count {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    min-width: 1.3rem;
    padding: 0 0.35rem;
    background: #24466e;
    color: #fff;
    font-size: 0.7rem;
}

.gt-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(18, 28, 42, 0.62);
}

.gt-viewer {
    width: min(72rem, 100%);
    height: min(46rem, 100%);
    display: flex;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    font-size: 0.82rem;
}

.gt-viewer-image {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e2329;
}

    .gt-viewer-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.gt-viewer-nav {
    position: absolute;
    top: 50%;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gt-viewer-nav.prev { left: 0.85rem; }
    .gt-viewer-nav.next { right: 0.85rem; }

.gt-viewer svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gt-viewer-position {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    color: #d6dce5;
    font-size: 0.75rem;
}

.gt-viewer-side {
    width: 23.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--gt-line);
}

.gt-viewer-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    background: var(--gt-box-title);
    border-bottom: 1px solid var(--gt-line);
    font-size: 0.95rem;
    font-weight: 600;
}

.gt-viewer-close {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: #333;
}

.gt-viewer-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
}

.gt-viewer-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--gt-label);
}

.gt-viewer-trial {
    display: block;
    padding: 0.2rem 0;
}

.gt-viewer-section {
    padding-top: 0.6rem;
    border-top: 1px solid #e3e7ed;
}

.gt-viewer-facts {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: #5f6b78;
    font-size: 0.75rem;
    word-break: break-word;
}

.gt-star {
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--gt-line);
    border-radius: 4px;
    background: #fff;
    color: #333;
}

    .gt-star.on {
        border-color: #c9a800;
        background: #fff7cc;
        color: #5c4a00;
        font-weight: 600;
    }

.gt-viewer-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--gt-line);
}

    .gt-viewer-footer > .d-flex {
        flex-wrap: wrap;
    }

/* Adding pictures */

.gt-upload {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid #7a97c2;
    background: #f7f9fc;
}

.gt-upload-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.gt-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 0.75rem;
    border: 2px dashed #7a97c2;
    background: #fff;
    text-align: center;
    cursor: pointer;
}

    .gt-drop:hover,
    .gt-drop:focus-within {
        border-color: #24466e;
        background: #eef2f8;
    }

    .gt-drop.busy {
        cursor: progress;
    }

    /* The file input covers the whole area, so clicking or dropping files anywhere on it works. */
    .gt-drop input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.gt-drop-text strong {
    color: #1f5fa8;
}

.gt-upload-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: var(--gt-label);
}

    .gt-upload-all select {
        width: auto;
    }

.gt-upload-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.gt-upload-item {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem;
    border: 1px solid #c9ced6;
    background: #fff;
}

    .gt-upload-item.has-error {
        border-color: #b3261e;
    }

.gt-upload-preview {
    width: 7.5rem;
    height: 5.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f4;
}

    .gt-upload-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.gt-upload-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gt-upload-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

    .gt-upload-name span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.gt-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

    .gt-upload-grid select.needs {
        border-color: #c9a800;
        background-color: #fffbe6;
    }

.gt-upload-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.gt-outline {
    border: 1px solid #7a97c2;
    background: #fff;
}

.gt-box-header-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.6rem !important;
}

.gt-lists {
    align-items: start;
}

.gt-list-row {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) 5.5rem 3.5rem 2.25rem;
    align-items: center;
    gap: 0 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eef1f5;
}

    .gt-list-row.gt-list-head {
        color: #5f6b78;
        font-size: 0.75rem;
    }

.gt-icon-btn {
    width: 1.85rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid #c9ced6;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gt-icon-btn svg {
        width: 0.9rem;
        height: 0.9rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .gt-icon-btn.danger {
        border-color: #b3261e;
        color: #b3261e;
    }

    .gt-icon-btn:disabled {
        border-color: #dcdfe4;
        background: #f5f6f8;
        color: #a6adb5;
    }

@media (max-width: 760px) {
    .gt-pic-row {
        flex-direction: column;
        gap: 0.4rem;
    }

    .gt-pic-row-head {
        width: auto;
    }

    .gt-pic-tile {
        width: calc(50% - 0.375rem);
    }

    .gt-coverage {
        overflow-x: auto;
    }

    .gt-viewer-backdrop {
        padding: 0;
    }

    .gt-viewer {
        height: 100%;
        flex-direction: column;
    }

    .gt-viewer-image {
        flex: 0 0 40%;
    }

    .gt-viewer-side {
        width: auto;
        flex: 1;
        min-height: 0;
        border-left: none;
    }
}

/* Grids for the tab layouts. They stack into one column on narrow screens. */

.gt-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 2rem;
}

.gt-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.gt-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1rem;
}

.gt-zones {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 0.75rem;
    align-items: center;
    color: var(--gt-label);
}

/* The plant's Description tab: Traits, then Color, USDA Zones, Native Information and Broadcast stacked in one
   column (area-mid), then the pictures over the growing regions. minmax(0, …) keeps a column from growing to fit
   its contents, such as a long list of chosen colors. */
.gt-desc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "traits mid bloomimg habitimg"
        "traits mid usreg    canreg";
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
    align-items: start;
}

    .gt-desc-grid > .gt-box { margin-bottom: 0; }
    .gt-desc-grid .area-traits { grid-area: traits; }
    .gt-desc-grid .area-mid {
        grid-area: mid;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        .gt-desc-grid .area-mid > .gt-box { margin-bottom: 0; }

    .gt-desc-grid .area-bloomimg { grid-area: bloomimg; }
    .gt-desc-grid .area-habitimg { grid-area: habitimg; }
    .gt-desc-grid .area-usreg { grid-area: usreg; }
    .gt-desc-grid .area-canreg { grid-area: canreg; }

/* Marketing tab: the tick boxes in two columns, then (under the comments) Access's two reference lists side by side,
   the long Key Benefits list flowing in columns. */
.gt-mkt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.gt-mkt-reference {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0.75rem;
}

    .gt-mkt-reference .gt-reference {
        align-self: stretch;
    }

    .gt-mkt-reference .gt-ref-cols {
        column-count: 3;
        column-gap: 1.5rem;
    }

@media (max-width: 1100px) {
    .gt-mkt-reference .gt-ref-cols {
        column-count: 2;
    }
}

@media (max-width: 760px) {
    .gt-mkt-reference {
        grid-template-columns: minmax(0, 1fr);
    }

    .gt-mkt-reference .gt-ref-cols {
        column-count: 1;
    }
}

.gt-agro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

/* Seed Set Characteristic over Harvest Method. Side by side, an iPad left the seed set dropdown too narrow for its
   choices, so the field gets a row of its own, wide enough for the longest choice but not stretched across the box. */
.gt-harvest-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

    .gt-harvest-grid > .gt-field {
        max-width: 28rem;
    }

.gt-clean-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1rem;
    align-items: start;
}

.gt-trial-plant,
.gt-trial-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    text-align: center;
}

    .gt-trial-plant > div,
    .gt-trial-row > div {
        flex: 1 1 8rem;
    }

    .gt-trial-plant > .gt-narrow {
        flex: 0 1 5rem;
    }

    /* A plant code is at most 10 characters, so its column is narrower than the rest. */
    .gt-trial-row > .gt-trial-code {
        flex: 0 1 7rem;
    }

/* On a saved trial the plant code is a link to the plant, drawn in a box like the fields around it. */
.gt-code-link {
    text-align: left;
    text-decoration: underline;
    color: #006bb7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .gt-code-link:hover {
        color: #004c82;
    }

/* The plant's names and sizes under the trial header, on one line that wraps between its parts. */
/* A saved trial's number, year, location and tag are locked; a tap on any opens the Change number box. A small
   pencil at the right says so. (Placed after .gt-calc, whose background shorthand would otherwise clear the image.) */
.gt-number-tap.form-control {
    cursor: pointer;
    padding-right: 1.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a86c5'%3E%3Cpath d='M12.1 1.3a1.5 1.5 0 0 1 2.1 0l.5.5a1.5 1.5 0 0 1 0 2.1L5.6 13 2 14l1-3.6 9.1-9.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 0.8rem;
}

    .gt-number-tap.form-control:hover {
        border-color: #7a97c2;
    }

/* A small box over the page (the trial number's Change… box), with the page dimmed behind it. */
.gt-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.35);
}

.gt-modal {
    position: fixed;
    z-index: 1070;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(26rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #b9c7dd;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

    .gt-modal h2 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 0.5rem;
    }

    .gt-modal-number {
        margin-top: 0.5rem;
    }

    .gt-modal-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-top: 1rem;
    }

/* The Trials screen's header box: label-left fields in four columns, two on narrower screens, one on a phone. */
.gt-trial-head {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 1.25rem;
}

@media (max-width: 1100px) {
    .gt-trial-head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .gt-trial-head {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gt-trial-plant-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    font-size: 0.9rem;
}

    .gt-trial-plant-line > i {
        font-weight: 600;
    }

    .gt-trial-plant-line .gt-sep {
        color: var(--gt-line);
    }

    .gt-trial-plant-line .gt-k {
        color: var(--gt-label);
    }

    .gt-trial-plant label,
    .gt-trial-row label {
        display: block;
        color: var(--gt-label);
        margin-bottom: 0.15rem;
    }

.gt-trial-grid3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem 1rem;
}

.gt-trial-boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .gt-desc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-template-areas:
            "traits mid"
            "bloomimg habitimg"
            "usreg canreg";
    }

    .gt-mkt-grid,
    .gt-trial-grid3,
    .gt-agro-grid,
    .gt-trial-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .gt-grid-2,
    .gt-mkt-grid,
    .gt-agro-grid,
    .gt-harvest-grid,
    .gt-clean-grid,
    .gt-trial-grid3,
    .gt-trial-boxes,
    .gt-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .gt-desc-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "traits" "mid" "bloomimg" "habitimg" "usreg" "canreg";
    }

    .gt-search input {
        width: 100%;
    }

    .gt-tab-body {
        padding: 0.6rem;
    }
}
/* ---- Office screens added for the first release (plant tabs, trials, pictures, reports) ---- */

/* The fields Access's Trials form colors yellow, in a lighter yellow: Plant Code, Trial Number, Trial Complete,
   Trial Status and Trial Decision (E2). The office screens color nothing else yellow, as Access doesn't. */
.gt-fill.form-select,
.gt-fill.form-control {
    background-color: #fff8c5;
}

/* QC and Other trials show their bloom traits greyed, as in Access: the entry boxes turn gray (Access's
   RGB 231, 230, 230) and stay editable, while the box itself and the worked-out day counts keep their colors. */
.gt-greyed .form-control:not(.gt-calc),
.gt-greyed .form-select {
    background-color: #e7e6e6;
}

.gt-trial-filters {
    flex-wrap: wrap;
    gap: 0.35rem;
}

    .gt-trial-filters .form-control {
        min-width: 16rem;
    }

    .gt-trial-filters .form-select {
        width: auto;
    }

.gt-new-plant,
.gt-report-form {
    max-width: 34rem;
}

.gt-image {
    flex-direction: column;
    gap: 0.25rem;
}

.gt-pic-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

    .gt-pic-upload .form-select {
        width: auto;
    }

.gt-pic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.gt-pic-card {
    margin: 0;
    padding: 0.4rem;
    border: 1px solid var(--gt-line);
    background: #fff;
}

    .gt-pic-card img {
        display: block;
        width: 100%;
        height: 10rem;
        object-fit: contain;
        background: #f7f7f7;
    }

    .gt-pic-card figcaption {
        margin-top: 0.35rem;
        font-size: 0.8rem;
    }

.gt-pic-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    margin: 0.25rem 0;
}

    .gt-pic-buttons .btn {
        font-size: 0.78rem;
    }

/* An upload that waits for Save: dashed, with its "Not saved" badge. */
.gt-pic-card.gt-pic-pending {
    border: 1px dashed #c69500;
    background: #fffbea;
}

.gt-pic-heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--gt-line);
}

.gt-pic-trial {
    margin: 0.6rem 0 0.35rem;
    font-size: 0.85rem;
}

/* The plant's picture roles (Bloom, Habit…): one slot per role, each showing its picture or Choose…. */
.gt-role-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.gt-role-slot {
    width: 7.5rem;
    text-align: center;
}

.gt-role-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 6rem;
    padding: 0;
    border: 1px solid #7a97c2;
    background: #f7f7f7;
    overflow: hidden;
}

    .gt-role-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gt-role-pic:disabled {
        border-color: var(--gt-line);
        opacity: 1;
    }

.gt-role-empty {
    color: #1b6ec2;
    font-size: 0.85rem;
}

.gt-role-pic:disabled .gt-role-empty {
    color: #888;
}

.gt-role-name {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--gt-label);
}

/* The role picker: the plant pictures as buttons. */
.gt-modal.gt-modal-wide {
    width: min(46rem, calc(100vw - 2rem));
    max-height: 76vh;
    overflow-y: auto;
}

.gt-pick-grid {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.gt-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem;
    border: 1px solid var(--gt-line);
    background: #fff;
    text-align: center;
    overflow-wrap: anywhere;
}

    .gt-pick img {
        width: 100%;
        height: 6.5rem;
        object-fit: contain;
        background: #f7f7f7;
    }

    .gt-pick:hover {
        border-color: #7a97c2;
    }

    .gt-pick.gt-pick-current {
        border: 2px solid #198754;
    }

/* ---- Lists and Users (admin pages) ---- */

.gt-admin {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 0.4rem;
    margin: 0.4rem 0.4rem 1rem;
    font-size: 0.82rem;
}

.gt-admin-menu {
    background: #fff;
    border: 1px solid var(--gt-line);
    padding: 0.4rem 0;
    align-self: start;
}

    .gt-admin-menu a {
        display: block;
        padding: 0.15rem 0.75rem;
        color: #333;
        text-decoration: none;
    }

        .gt-admin-menu a:hover {
            background: #eef3fa;
        }

        .gt-admin-menu a.active {
            background: #d9e5f5;
            font-weight: 600;
        }

.gt-admin-menu-head {
    margin: 0.5rem 0 0.15rem;
    padding: 0 0.75rem;
    color: #5f6b78;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .gt-admin-menu-head:first-child {
        margin-top: 0;
    }

.gt-admin-body {
    background: #fff;
    border: 1px solid var(--gt-line);
    padding: 1rem;
    min-width: 0;
    overflow-x: auto;
}

.gt-admin-table {
    width: auto;
    min-width: 100%;
}

    .gt-admin-table td {
        vertical-align: middle;
    }

    .gt-admin-table .form-control-sm {
        font-size: 0.8rem;
        padding: 0.1rem 0.35rem;
        min-height: 0;
        border-radius: 0;
        min-width: 9rem;
    }

    .gt-admin-table .gt-admin-sort,
    .gt-admin-table .gt-admin-num {
        width: 4.5rem;
        min-width: 0;
    }

    .gt-admin-table .gt-admin-two {
        width: 3rem;
        min-width: 0;
        text-transform: uppercase;
    }

    .gt-admin-table input.gt-admin-code {
        width: 8rem;
        min-width: 0;
    }

.gt-admin-code {
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    white-space: nowrap;
}

.gt-admin-uses {
    text-align: right;
    white-space: nowrap;
}

.gt-admin-saved {
    color: #6c757d;
    font-size: 0.75rem;
    white-space: nowrap;
}

.gt-admin-row-actions {
    white-space: nowrap;
}

    .gt-admin-row-actions .btn {
        font-size: 0.78rem;
    }

.gt-admin-hidden td {
    color: #8a8f96;
}

    .gt-admin-hidden td input:not([type=checkbox]) {
        color: #8a8f96;
        font-style: italic;
    }

.gt-admin-dirty td {
    background: #fff8e1;
}

.gt-admin-new td {
    background: #f6f8fb;
    border-top: 2px solid var(--gt-line);
}

.gt-type-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.75rem;
    max-width: 32rem;
}

@media (max-width: 767.98px) {
    .gt-admin {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Trials list and trial stepping (1.3.0) ---- */

/* The Trials list scrolls in its own pane like the plant list; its header is taller, with the filters and quick views. */
.gt-trials-list {
    max-height: calc(100dvh - 15.5rem);
}

/* A click anywhere on the row opens the trial. */
.gt-click-row {
    cursor: pointer;
}

.gt-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

    .gt-quick .btn {
        border: 1px solid #b9c6d8;
        border-radius: 1rem;
        background: #fff;
        padding: 0.1rem 0.7rem;
    }

        .gt-quick .btn.active {
            background: #1b5aa8;
            border-color: #1b5aa8;
            color: #fff;
        }

.gt-trial-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

/* Touch screens (the iPad): fields, buttons and rows big enough for a finger. Text in a field is at least 16px,
   because Safari on the iPad zooms the page in whenever a field with smaller text is tapped; the !important beats
   the smaller sizes the office screens set on their fields. A saved trial's plant code (a link) and the Flower Color
   checklist (a button) are drawn as fields, so they get the same size. */
@media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea,
    .gt-code-link,
    .gt-color-select {
        font-size: 16px !important;
    }

    .form-control-sm,
    .form-select-sm,
    .gt-tab-body .form-control-sm,
    .gt-tab-body .form-select-sm {
        min-height: 40px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 0.4rem 0.8rem;
    }

    .gt-quick .btn {
        min-height: 36px;
        padding: 0.3rem 0.9rem;
    }

    .gt-table tr.gt-click-row {
        height: 44px;
    }

        .gt-table tr.gt-click-row td {
            vertical-align: middle;
        }

    .gt-sort {
        padding: 0.6rem 0.5rem;
    }

    .form-check-input {
        width: 1.35em;
        height: 1.35em;
    }
}

/* Wide enough on a PC to show the whole hint, "Trial number, tag, plant code, name or ASCO lot". */
@media (min-width: 761px) {
    .gt-trial-filters input[type=search] {
        width: 21rem;
    }
}