body {
    overflow-y: scroll;
}

table.table {
    max-width: 1280px;
    margin: 3rem auto;
}

.js-start-stop.btn-danger span:before {
    content: 'Stop';
}

.js-start-stop.btn-primary span:before {
    content: 'Start';
}

.settings-form {
    max-width: 1280px;
    margin: auto;
}

.js-remove,
.js-remove-time {
    padding: 0 6px;
}

.tablesorter thead .disabled {
    display: none;
}

.tablesorter .filtered {
    display: table-row;
    position: absolute;
    left: -9999px;
}

.js-no-start td:first-child {
    background: #faa !important;
}

td.js-segment {
    position: relative;
    /* Reserve room on the left for the always-visible edit pencil so the
       time text doesn't get covered when the row collapses to just the
       pencil at idle. */
    padding-left: 26px !important;
}

/* Action buttons in segment cells: uniform 22x22, 1px gap, right-aligned.
   Slots at right:0/23/46/69 fit up to 4 right-side buttons (X / → / ↻ / 🚫)
   without touching the left-aligned edit pencil. */
.js-segment .js-remove-time,
.js-segment .js-shift-right,
.js-segment .js-unexport,
.js-segment .js-ban-user {
    position: absolute;
    top: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    display: none;
}

.js-segment .js-remove-time { right: 0; }
.js-segment .js-shift-right { right: 23px; }
.js-segment .js-unexport    { right: 46px; }
.js-segment .js-ban-user    { right: 69px; }

.js-segment:hover .js-ban-user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* !important needed to beat Bootstrap's .d-none {display:none!important}
   that the template stamps on .js-remove-time as initial state. */
.js-segment:hover .js-remove-time {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.js-segment:hover .js-shift-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

tr[data-exported] .js-segment:hover .js-unexport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Rightmost segment (immediately before AG col, whether numbered or 'total')
   has nowhere to shift to. */
.js-segment:has(+ .js-ag) .js-shift-right,
.js-segment[data-segment="total"] .js-shift-right {
    display: none !important;
}

/* Edit pencil pinned to the far left of the cell — fixed position regardless
   of time text width, never collides with the right cluster. Always visible
   (muted) so users don't have to hunt for it. */
.js-segment .js-edit-time {
    position: absolute;
    left: 2px;
    top: 4px;
    width: 20px;
    height: 22px;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    opacity: 0.35;
    transition: opacity 0.15s;
}

.js-segment:hover .js-edit-time {
    opacity: 1;
}

tr[data-exported] .bib::before {
    content: '\f1d8'; /* fa-paper-plane — "exported to site" marker */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 5.5ch;
    color: var(--green);
    opacity: 0.85;
    font-size: 11px;
}

/* Banned users — fully hidden from the runner table. Restore-banned-user
   removes the attribute and the row reappears without a page reload. */
tr[data-banned-user] {
    display: none;
}


.restore-panel {
    max-width: 1280px;
    margin: 1.5rem auto 0;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.restore-panel summary {
    cursor: pointer;
    padding: 0.25rem 0;
}

.restore-panel .restore-section h6 {
    margin-bottom: 0.5rem;
}

.restore-panel ul {
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
}

.js-segm-input::-webkit-outer-spin-button,
.js-segm-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.js-segm-input {
    -moz-appearance: textfield;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 2.5em;
}

.js-points-open {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Points-modal drag-and-drop. The first cell doubles as a grip + row number;
   the whole row is draggable so the user can grab anywhere outside the
   inputs, but the visual handle telegraphs the affordance. */
.js-points-table tbody tr {
    cursor: grab;
}

.js-points-table tbody tr.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.js-points-table .js-point-handle {
    user-select: none;
    white-space: nowrap;
}

.js-points-table .point-grip {
    color: #adb5bd;
    margin-right: 4px;
    cursor: grab;
}

.js-points-table tbody tr.drag-over-top td {
    border-top: 2px solid #007bff;
}

.js-points-table tbody tr.drag-over-bottom td {
    border-bottom: 2px solid #007bff;
}

/* Inputs inside draggable rows shouldn't initiate drag — set them
   non-draggable so click/select still works inside text/number inputs. */
.js-points-table input,
.js-points-table select,
.js-points-table button {
    cursor: auto;
}

.js-segment.js-time-manual {
    background-color: #fff3cd;
}

.js-segment.js-time-manual .js-time {
    font-style: italic;
    color: #856404;
}

.js-time-edit-input {
    width: 9ch;
    padding: 0 4px;
    font-size: inherit;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

.nav-pills {
    background: #fff;
    gap: 1em;
}

.nav-pills,
.tab-content {
    margin: auto;
}

.form-start-type {
    display: none;
}

.form-start-type+label {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--green);
    border-radius: 5px;
    position: relative;
    color: #fff;
}

.form-start-type:checked+label {
    background: var(--gray-dark);
}

.form-start-type+label:after {
    content: 'Chip';
    display: block;
    text-align: center;
    padding-top: 6px;
}

.form-start-type:checked+label:after {
    content: 'Gun';
}

.form-segments-type {
    display: none;
}

.form-segments-type+label {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--blue);
    border-radius: 5px;
    position: relative;
    color: #fff;
}

.form-segments-type:checked+label {
    background: var(--cyan);
}

.form-segments-type+label:after {
    content: 'Sum';
    display: block;
    text-align: center;
    padding-top: 6px;
}

.form-segments-type:checked+label:after {
    content: 'Diff';
}

label[for='delta-start'],
label[for='delta-between'] {
    padding: 0.75ch 0 0 0;
    white-space: nowrap;
}

.distance-actions {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.distance-actions .btn {
    flex: 0 0 auto;
}

.js-distance-stop, .js-distance-remove {
    font-size: 13px;
    line-height: 1.2;
    padding: 0.25rem 0.5rem;
    min-width: 2.2em;
}

.settings-head h5 {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-form .form-segments-type + label,
.settings-form .form-start-type + label {
    min-height: 38px;
    margin-bottom: 0;
    cursor: pointer;
}

.settings-form .form-segments-type + label:after,
.settings-form .form-start-type + label:after {
    padding-top: 8px;
}

.deltas-row .form-control {
    max-width: 90px;
}

.action-stack .btn {
    text-align: center;
}

@keyframes slidein {
    0% {
        transform: translateX(0px) scale(1)
    }
    25% {
        transform: translateX(-5px) scale(0.5)
    }
    50% {
        transform: scale(1)
    }
    75% {
        transform: translateX(5px) scale(0.5)
    }
    100% {
        transform: translateX(0px) scale(1)
    }
}

.bib {
    position: relative;
}

.bib-dns::after,
.bib-run::after,
.bib-fin::after {
    position: absolute;
    right: 0;
    opacity: 0.5;
    min-width: 4ch;
    border-radius: 3px;
    padding: 0 0.5ch;
    color: var(--white);
}

.bib-dns::after {
    content: 'DNS';
    background-color: var(--red);
}

.bib-run::after {
    content: 'RUN';
    background-color: var(--yellow);
}

.bib-fin::after {
    content: 'FIN';
    background-color: var(--green);
}

.bib-totals {
    float: right;
}

.bib-totals-dns {
    color: var(--red);
    margin: 0.5ch;
}

.bib-totals-run {
    color: var(--yellow);
    margin: 0.5ch;
}

.bib-totals-fin {
    color: var(--green);
    margin: 0.5ch;
}

.bib-chip {
    font-size: 10px;
    padding-left: 20px;
}

.nav-buttons {
    position: fixed;
    right: 1em;
    bottom: 5em;
    display: flex;
    flex-direction: column;
}

.nav-btn-up,
.nav-btn-down {
    width: 4em;
    height: 4em;
    display: grid;
    place-items: center;
    color: var(--light);
    background-color: var(--teal);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: color 0.25s, background-color 0.25s;
}

.nav-btn-down {
    margin-top: 1ch;
}

.nav-btn-up:hover,
.nav-btn-down:hover {
    background-color: var(--primary);
}

.nav-btn-up:focus,
.nav-btn-down:focus {
    outline: none;
    border: 2px solid var(--green);
}