/* ─────────────────────────────────────────────────────────────────────────────
   SygdomsTidslinje — vandret ikonbånd (MCP-tool'et sygdoms_tidslinje).

   Ét spor pr. kategori (forløb · undersøgelser · behandling · kontakter), x =
   dato. Hændelser der ligger tættere end ét mærke slås sammen af komponenten
   til ét mærke med antal. Årstallene har deres egen række UNDER sporene, så
   ingen ikoner kan lægge sig oven i dem.

   Hover-kortet er .jtl-hovercard fra journal-timeline.css (fixed på body —
   modalen klipper ellers tooltips), og mærkerne bærer derfor .jtl-note. Denne
   fil skal loades EFTER journal-timeline.css, så .sti-mk kan overstyre de
   .jtl-note-regler der kolliderer. Markup: Components/Shared/SygdomsTidslinje.razor.
   ───────────────────────────────────────────────────────────────────────────── */

.sti {
    margin: 2px 0 14px;
    padding: 10px 14px 6px;
    border: 1px solid rgba(47, 108, 143, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

/* ── Legende: type + antal. Tallene kan læses uden at røre musen ───────────── */
.sti-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-bottom: 10px;
}
.sti-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #5a6f85;
}
.sti-lg b { color: #15405e; font-variant-numeric: tabular-nums; }
.sti-lg-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sti-lg-dot svg { width: 11px; height: 11px; }

/* ── Sporene ──────────────────────────────────────────────────────────────── */
/* Båndet ruller vandret når årene ikke kan være der; sporenes navne bliver
   stående (sticky), så man ikke mister hvilken række man kigger på. */
.sti-rul { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.sti-rul::-webkit-scrollbar { height: 8px; }
.sti-rul::-webkit-scrollbar-thumb { background: rgba(47, 108, 143, 0.25); border-radius: 4px; }
.sti-rul::-webkit-scrollbar-track { background: rgba(47, 108, 143, 0.06); border-radius: 4px; }

.sti-net { display: flex; flex-direction: column; gap: 2px; }

/* Én bane: sporenes navnekolonne er væk, båndet er hele bredden. */
.sti-spor { display: block; }
.sti-bane {
    position: relative;
    height: 34px;
    padding-right: 14px;   /* plads til et mærke der sidder yderst til højre */
}
.sti-akse {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(47, 108, 143, 0.16);
}
/* Årsskifte som svag lodret linje — gør det muligt at læse et mærkes år af */
.sti-gitter {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: rgba(47, 108, 143, 0.09);
}

/* ── Mærkerne ─────────────────────────────────────────────────────────────── */
/* Overskriver .jtl-note (listeknap i venstremenuen) — her er mærket en cirkel. */
.sti-mk {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(47, 108, 143, 0.22);
    cursor: pointer;
    text-align: center;
    transition: transform 130ms ease, box-shadow 130ms ease;
    z-index: 1;
}
.sti-mk svg { width: 14px; height: 14px; }
.sti-mk:hover,
.sti-mk:focus-visible {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 4px 12px rgba(21, 50, 74, 0.22), 0 0 0 1px rgba(47, 108, 143, 0.22);
    outline: none;
    z-index: 4;
}

/* Klynge: flere hændelser bag ét mærke. Tallet er antallet, ikke pynt. */
.sti-mk.er-klynge { box-shadow: 0 0 0 1px rgba(47, 108, 143, 0.22), 2px 2px 0 -1px #fff, 3px 3px 0 -1px rgba(47, 108, 143, 0.22); }
.sti-antal {
    position: absolute;
    right: -5px;
    bottom: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #15405e;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 15px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1.5px #fff;
}

/* ── Årstalsrækken ────────────────────────────────────────────────────────── */
.sti-aarsrad .sti-bane { height: 18px; }
.sti-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.66rem;
    color: #8fa0b2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sti-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(47, 108, 143, 0.16);
    font-size: 0.7rem;
    color: #7d8fa3;
    text-align: center;
}
.sti-note { color: #96a5b6; }

/* ── Andet lag: omtaler uden hændelse (foldet) ────────────────────────────── */
.sti-omtaler { margin-top: 6px; }
.sti-omtaler > summary {
    list-style: none; cursor: pointer;
    font-size: 0.7rem; color: #7d8fa3; text-align: center; padding: 3px 0;
}
.sti-omtaler > summary::-webkit-details-marker { display: none; }
.sti-omtaler > summary::before { content: "B8 "; color: #2f6c8f; }
.sti-omtaler[open] > summary::before { content: "BE "; }
.sti-omtale {
    display: flex; gap: 10px; align-items: baseline; width: 100%;
    border: 0; background: none; cursor: pointer; text-align: left;
    padding: 4px 8px; font-size: 0.74rem; color: #5c6f84;
    border-top: 1px solid rgba(47, 108, 143, 0.10);
}
.sti-omtale:hover { background: rgba(47, 108, 143, 0.05); }
.sti-omtale-dato { color: #8fa0b2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sti-omtale-type { color: #8fa0b2; white-space: nowrap; }
.sti-omtale-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }