/* Calibration: the state counts above the tracking list, the remaining days, an overdue row, the history of one item and
   the panel on an item's page. The colours follow the legacy bands (green, amber, red). */

.cal-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.cal-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--ft-line);
    border-left-width: 4px;
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
    font-size: 0.82rem;
    color: var(--ft-stencil-soft);
}

.cal-count strong {
    font-family: var(--ft-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ft-stencil);
}

.cal-count--valid {
    border-left-color: var(--ft-clear);
}

.cal-count--duein30days,
.cal-count--duein15days {
    border-left-color: var(--ft-caution);
}

.cal-count--overdue {
    border-left-color: var(--ft-streamer);
    background: rgba(200, 16, 46, 0.05);
}

.cal-count--overdue strong {
    color: var(--ft-streamer);
}

.cal-count--atcalibration {
    border-left-color: var(--ft-altimeter);
}

.cal-days {
    font-variant-numeric: tabular-nums;
}

.cal-days.is-over {
    font-weight: 600;
    color: var(--ft-streamer);
}

.lt__row.is-alert > td:first-child {
    box-shadow: inset 3px 0 0 var(--ft-streamer);
}

/* One item's accepted calibrations, newest first. */
.cal-history {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cal-history li {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 10px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
}

.cal-history__date {
    grid-row: span 3;
    font-family: var(--ft-font-display);
    font-weight: 600;
    color: var(--ft-stencil);
}

.cal-history__company {
    font-weight: 600;
}

.cal-history__meta {
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

.cal-history__note {
    font-size: 0.82rem;
    white-space: pre-line;
}

/* The panel on an item's page: state, dates, link to the tracking screen, then the history. */
.cal-panel {
    display: grid;
    justify-items: start;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .cal-history li {
        grid-template-columns: 1fr;
    }

    .cal-history__date {
        grid-row: auto;
    }
}