/*
 * Additions on top of Bootstrap, nothing more. Bootstrap's own custom
 * properties are deliberately left alone: this is not a fork of the theme,
 * only the handful of rules the time tracking screens need. Everything here
 * is namespaced with the `tt-` prefix so it can never collide with Bootstrap.
 *
 * Served on /assets/css/app.css, loaded after bootstrap.min.css.
 */

:root {
    /* Colour of a running timer. */
    --tt-running: #198754;
    /* Row highlight under the cursor -- deliberately much weaker than
       .table-hover, the entry list is long and would otherwise flicker. */
    --tt-row-hover: rgba(13, 110, 253, .06);
}

/*
 * Durations in the entry table. Proportional digits make the sums jump
 * horizontally as the seconds tick; tabular figures keep the column still.
 * font-feature-settings is the fallback for browsers that do not honour
 * font-variant-numeric.
 */
.tt-duration {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
}

/* Project colour marker in front of a name. */
.tt-project-dot {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    display: inline-block;
    /* In a flex row the dot must not shrink or stretch with the text. */
    flex: 0 0 auto;
}

.tt-timer-running .tt-duration {
    color: var(--tt-running);
    font-weight: 600;
}

.tt-entry-row {
    transition: background-color .12s ease-in-out;
}

.tt-entry-row:hover {
    background: var(--tt-row-hover);
}

/* Header with the sums stays visible while the entry list scrolls. */
.tt-sticky-totals {
    position: sticky;
    top: 0;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .tt-duration,
    .tt-project-dot,
    .tt-timer-running .tt-duration,
    .tt-entry-row,
    .tt-sticky-totals {
        transition: none;
    }
}