/*
 * timeline.css
 *
 * Generic Timeline widget styles. Paired with
 * WebRoot/javascript/kohezion_core/ui/timeline.js (class Timeline).
 *
 * Renders a chronological list of items as ringed dots along a
 * vertical connector line, with an absolutely-positioned "Now"
 * marker overlay. See the header comment in timeline.js for the
 * data contract and the placement algorithm.
 *
 * All selectors live under the .Timeline root class. Design
 * tokens are declared as CSS custom properties on .Timeline so
 * consumers can re-skin individual instances by overriding them
 * in a parent scope:
 *
 *   .MyCard .Timeline { --tl-accent: #AF52DE; }
 */

.Timeline {
    /* Structural tokens */
    --tl-border:        #DEE0E3;
    --tl-bg-chip-hint:  #EBF2F8;
    --tl-connector:     #EBF2F8;
    --tl-accent:        #249EF5;
    --tl-accent-halo:   #B3D9FC;
    --tl-now:           #FF3B30;

    /* Typography */
    --tl-navy:          #0B3764;
    --tl-slate:         #8C9BB5;
    --tl-meta:          #A0AEC0;
    --tl-family:        Roboto, Arial, sans-serif;

    /* Dot status colors */
    --tl-dot-blue:      #249EF5;
    --tl-dot-blue-halo: #B3D9FC;
    --tl-dot-green:     #34C759;
    --tl-dot-green-halo:#B7EDCA;
    --tl-dot-orange:    #FF9500;
    --tl-dot-orange-halo:#FFD9A3;
    --tl-dot-red:       #FF3B30;
    --tl-dot-red-halo:  #FFB8B3;
    --tl-dot-purple:    #AF52DE;
    --tl-dot-purple-halo:#DDB8F0;
    --tl-dot-yellow:    #F5C518;
    --tl-dot-yellow-halo:#FCEAAB;
    --tl-dot-teal:      #00BCD4;
    --tl-dot-teal-halo: #A6E8F0;
    --tl-dot-pink:      #E91E8C;
    --tl-dot-pink-halo: #F8B4D9;

    position: relative;
    /* Room for the dot + connector line area. The dot halo
     * (12px dot + 2px border + 2px box-shadow = 18px) must
     * fit inside the scroll clip boundary. */
    padding-left: 22px;
    /* flex-basis must be 0 (not auto). With basis:auto the flex
     * item starts at its intrinsic content height, and a parent
     * flex column with one child will let it grow past the
     * container without ever clamping it. basis:0 + min-height:0
     * makes the item start at zero, then grow to fill the
     * container exactly - and CLIP at that height so overflow-y
     * actually triggers a scrollbar. */
    flex: 1 1 0;
    min-height: 0;
    /* The Timeline must also bound its own block-size to the
     * parent box, otherwise consumers that don't put it in a
     * flex container would see the same overflow-grows-the-box
     * behavior. max-height:100% caps the natural height at the
     * containing block, which lets overflow-y:auto activate. */
    max-height: 100%;
    overflow-y: auto;
    font-family: var(--tl-family);
}

/* The vertical connector line that runs down the left side behind
 * all the dots. Rendered via ::before so it does not take part in
 * layout and stretches the full content height. */
.Timeline::before {
    content: '';
    position: absolute;
    /* Centered under the dots at 10px from .Timeline left edge.
     * Dot center = Timeline.paddingLeft + item.marginLeft +
     * dot.left + 6px(half dot). Both clickable (-4 + -14 + 6 = 10
     * with padding 22) and non-clickable (0 + -18 + 6 = 10) align.
     * 2px wide connector centered at 10px -> left = 9. */
    left: 9px; top: 4px; bottom: 4px;
    width: 2px;
    background: var(--tl-connector);
    border-radius: 1px;
}

.Timeline-empty {
    font-size: 11px;
    color: var(--tl-slate);
    padding: 8px 0 0 0;
    font-style: italic;
}

/* ----- One entry in the list (dot + time + title + meta) ----- */
.Timeline-item {
    position: relative;
    padding: 0 0 14px 14px;
}
.Timeline-item:last-child {
    padding-bottom: 0;
}
.Timeline-item--clickable {
    cursor: pointer;
    border-radius: 4px;
    margin-left: -4px;
    padding-left: 18px;
    padding-right: 4px;
    transition: background .12s;
}
.Timeline-item--clickable .Timeline-dot {
    left: -14px;
}
.Timeline-item--clickable:hover {
    background: var(--tl-bg-chip-hint);
}
.Timeline-item--clickable:hover .Timeline-title {
    color: var(--tl-accent);
}

.Timeline-dot {
    position: absolute;
    left: -18px; top: 3px;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--tl-border);
    box-sizing: border-box;
    background: var(--tl-dot-blue);
}
.Timeline-dot--blue   { background: var(--tl-dot-blue);   box-shadow: 0 0 0 2px var(--tl-dot-blue-halo); }
.Timeline-dot--green  { background: var(--tl-dot-green);  box-shadow: 0 0 0 2px var(--tl-dot-green-halo); }
.Timeline-dot--orange { background: var(--tl-dot-orange); box-shadow: 0 0 0 2px var(--tl-dot-orange-halo); }
.Timeline-dot--red    { background: var(--tl-dot-red);    box-shadow: 0 0 0 2px var(--tl-dot-red-halo); }
.Timeline-dot--purple { background: var(--tl-dot-purple); box-shadow: 0 0 0 2px var(--tl-dot-purple-halo); }
.Timeline-dot--yellow { background: var(--tl-dot-yellow); box-shadow: 0 0 0 2px var(--tl-dot-yellow-halo); }
.Timeline-dot--teal   { background: var(--tl-dot-teal);   box-shadow: 0 0 0 2px var(--tl-dot-teal-halo); }
.Timeline-dot--pink   { background: var(--tl-dot-pink);   box-shadow: 0 0 0 2px var(--tl-dot-pink-halo); }

.Timeline-time {
    font-size: 10px;
    font-weight: 600;
    color: var(--tl-slate);
    margin-bottom: 1px;
}
.Timeline-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--tl-navy);
}
.Timeline-meta {
    font-size: 10px;
    color: var(--tl-meta);
}

/* ----- "Now" marker: a 2px red line that spans the full width,
 *       with a red "NOW HH:MM" badge anchored to the line's top
 *       edge so the badge always sits in the empty space above
 *       the line. JS positions the marker's `top` so it is time-
 *       proportional and never overlaps any Timeline-item. ----- */
.Timeline-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    z-index: 2;
}
.Timeline-now::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -1px;
    height: 2px;
    background: var(--tl-now);
    border-radius: 1px;
}
.Timeline-now-lbl {
    position: absolute;
    right: 0;
    bottom: 2px;
    background: var(--tl-now);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
    white-space: nowrap;
}