/* ═══════════════════════════════════════════════════════════
   Timeline — an ordered history of what happened to a record.

   ScanEasy's orders carry a History collection and inventory carries
   transactions; both are "who did what, when" against one record. That's a
   different shape from .tn-list (pickable rows) and from .tn-record (one
   card per entity): here the ORDER is the meaning, and the entries are
   read, not chosen.

   The rail and markers exist to make the sequence readable at a glance —
   which is the one place numbered/positional structure genuinely encodes
   something rather than decorating. Don't reach for this for a list that
   happens to be sorted; use it where the sequence itself is the story.

     <ol class="tn-timeline">
       <li class="tn-timeline-item is-current">
         <span class="tn-timeline-marker"><i class="bi bi-box-seam"></i></span>
         <div class="tn-timeline-body">
           <div class="tn-timeline-head">
             <p class="tn-timeline-title">Plockning påbörjad</p>
             <time class="tn-timeline-time">12 aug 09:41</time>
           </div>
           <p class="tn-timeline-text">Anna Lind · 9 av 14 rader</p>
         </div>
       </li>
     </ol>
   ═══════════════════════════════════════════════════════════ */

.tn-timeline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tn-timeline-item {
    position: relative;
    display: flex;
    gap: var(--tn-space-md);
    padding-bottom: var(--tn-space-lg);
}

/* The connecting rail. Drawn from the marker down, and stopped on the last
   entry so the line doesn't trail into empty space below the history. */
.tn-timeline-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: var(--tn-border);
}

.tn-timeline-item:last-child {
    padding-bottom: 0;
}

.tn-timeline-item:last-child::before {
    display: none;
}

.tn-timeline-marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tn-bg-card);
    border: 2px solid var(--tn-border);
    color: var(--tn-text-muted);
    font-size: 0.8rem;
}

.tn-timeline-body {
    flex: 1;
    min-width: 0;
    padding-top: 5px;
}

.tn-timeline-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tn-space-md);
    flex-wrap: wrap;
}

.tn-timeline-title {
    margin: 0;
    font-size: var(--tn-font-size-base);
    font-weight: 600;
    color: var(--tn-text-primary);
}

.tn-timeline-time {
    flex-shrink: 0;
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-muted);
    font-variant-numeric: tabular-nums;
}

.tn-timeline-text {
    margin: 2px 0 0;
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
    overflow-wrap: anywhere;
}

/* Anything attached to an entry — a note, a photo, a quantity change. */
.tn-timeline-detail {
    margin-top: var(--tn-space-sm);
    padding: var(--tn-space-sm) var(--tn-space-md);
    background: var(--tn-bg-page);
    border-radius: var(--tn-radius);
    font-size: var(--tn-font-size-sm);
    color: var(--tn-text-secondary);
}

/* ── States. Each pairs colour with a distinct marker treatment, so the
   sequence still reads if the colour doesn't. ── */
.tn-timeline-item.is-done .tn-timeline-marker {
    background: var(--tn-accent);
    border-color: var(--tn-accent);
    color: var(--tn-accent-contrast, #fff);
}

.tn-timeline-item.is-done::before {
    background: var(--tn-accent);
}

.tn-timeline-item.is-current .tn-timeline-marker {
    border-color: var(--tn-accent);
    color: var(--tn-accent);
    box-shadow: 0 0 0 4px rgba(var(--tn-accent-rgb), 0.15);
}

.tn-timeline-item.is-error .tn-timeline-marker {
    border-color: var(--tn-danger);
    color: var(--tn-danger);
}

.tn-timeline-item.is-error .tn-timeline-title {
    color: var(--tn-danger-text, var(--tn-danger));
}

/* Upcoming/not-yet-reached entries recede rather than disappear */
.tn-timeline-item.is-pending .tn-timeline-title,
.tn-timeline-item.is-pending .tn-timeline-text {
    color: var(--tn-text-muted);
}

/* ── Compact variant — for a history embedded in a panel or card, where
   the full rhythm would dominate the container. ── */
.tn-timeline--compact .tn-timeline-item {
    padding-bottom: var(--tn-space-md);
}

.tn-timeline--compact .tn-timeline-marker {
    width: 22px;
    height: 22px;
    font-size: 0.62rem;
}

.tn-timeline--compact .tn-timeline-item::before {
    left: 10px;
    top: 22px;
}

.tn-timeline--compact .tn-timeline-body {
    padding-top: 1px;
}

@media (max-width: 640px) {
    .tn-timeline-head {
        gap: var(--tn-space-xs);
    }

    /* Timestamp drops under the title rather than being squeezed beside it */
    .tn-timeline-time {
        flex-basis: 100%;
    }
}