/* ── TCY Shared Timeline ─────────────────────────────────────────────────
   Namespace  : .tcy-tl
   Used by    : TCY.timeline.render (tcy-timeline.js) in TCYFleet, CFund and ERP 2.0.
   Tokens     : CFund/ERP names first, Fleet names second, literal last, so one file serves all three.
   Order      : newest-first (JS sorts descending; first item gets pulse ring)
   Animation  : staggered fade+slide-in via --tl-i custom property per item
────────────────────────────────────────────────────────────────────────── */

/* ── Container ─────────────────────────────────────────────────────────── */
.tcy-tl {
    position: relative;
    padding-left: 2.35rem;
}

/* Connector line — draws downward on open */
.tcy-tl::before {
    content: '';
    position: absolute;
    left: 0.88rem;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--surface-card-border, #e5e7eb);
    border-radius: 1px;
    transform-origin: top center;
    animation: tcy-tl-line 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Each event item ───────────────────────────────────────────────────── */
.tcy-tl__item {
    position: relative;
    display: flex;
    gap: 0;
    padding: 10px 0;
    opacity: 0;
    animation: tcy-tl-item 0.32s ease both;
    animation-delay: calc(var(--tl-i, 0) * 48ms);
}

.tcy-tl__item + .tcy-tl__item {
    border-top: 1px solid var(--surface-card-border, #f0f0f0);
}

/* ── Colored circle icon ───────────────────────────────────────────────── */
.tcy-tl__icon {
    position: absolute;
    left: -2.35rem;
    top: 11px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-sm, .76rem);
    color: var(--text-on-brand, #fff);
    background-color: var(--tl-color, #6b7280);
    box-shadow:
        0 0 0 3px var(--surface-card-bg, #fff),
        0 0 0 4.5px var(--surface-card-border, #e5e7eb);
    z-index: 1;
}

/* Pulse ring on newest (first) item */
.tcy-tl__item:first-child .tcy-tl__icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--tl-color, #6b7280);
    opacity: 0;
    animation: tcy-tl-pulse 2.4s ease 0.8s infinite;
}

/* ── Content area ──────────────────────────────────────────────────────── */
.tcy-tl__body {
    flex: 1;
    min-width: 0;
}

/* Title row */
.tcy-tl__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-weight: 600;
    font-size: var(--fs-md, .855rem);
    color: var(--surface-text-strong, #1f2937);
    line-height: 1.3;
}

/* Meta row */
.tcy-tl__meta {
    font-size: var(--fs-sm, .76rem);
    color: var(--surface-text-muted, #9ca3af);
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Detail key-value panel */
.tcy-tl__detail {
    background: var(--surface-section-header-bg, #f8f9fa);
    border-radius: 4px;
    padding: 5px 10px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tcy-tl__kv {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: var(--fs-sm, .76rem);
}

.tcy-tl__key {
    color: var(--surface-text-muted, #6b7280);
    min-width: 90px;
    flex-shrink: 0;
    font-weight: 500;
}

.tcy-tl__val             { color: var(--surface-text-strong, #374151); }
.tcy-tl__val--ok         { color: var(--color-success, var(--status-success, var(--status-ok, #16a34a))); font-weight: 600; }
.tcy-tl__val--warn       { color: var(--color-warning, var(--status-warning, var(--status-warn, #d97706))); font-weight: 600; }

/* ── Color tokens ──────────────────────────────────────────────────────── */
.tcy-tl--blue   { --tl-color: var(--color-info, var(--status-info, #3b82f6)); }
.tcy-tl--teal   { --tl-color: var(--brand-primary, var(--color-action, #0d9488)); }
.tcy-tl--green  { --tl-color: var(--color-success, var(--status-success, var(--status-ok, #16a34a))); }
.tcy-tl--amber  { --tl-color: var(--color-warning, var(--status-warning, var(--status-warn, #d97706))); }
.tcy-tl--red    { --tl-color: var(--color-danger, var(--status-danger, var(--status-fault, #dc2626))); }
.tcy-tl--purple { --tl-color: var(--tl-purple, var(--status-purple, #7c3aed)); }
.tcy-tl--gray   { --tl-color: var(--surface-text-muted, #6b7280); }

/* ── Dark mode ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .tcy-tl::before {
    background: var(--surface-card-border);
}

[data-bs-theme="dark"] .tcy-tl__item + .tcy-tl__item {
    border-top-color: var(--surface-card-border);
}

[data-bs-theme="dark"] .tcy-tl__icon {
    box-shadow:
        0 0 0 3px var(--surface-card-bg, #1e293b),
        0 0 0 4.5px var(--surface-card-border);
}

[data-bs-theme="dark"] .tcy-tl__detail {
    background: var(--surface-table-head-bg);
}

[data-bs-theme="dark"] .tcy-tl__val { color: var(--surface-text-strong, #e2e8f0); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.tcy-tl-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--surface-text-muted, #9ca3af);
}

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes tcy-tl-item {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes tcy-tl-line {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes tcy-tl-pulse {
    0%   { opacity: 0.5; transform: scale(1); }
    50%  { opacity: 0;   transform: scale(1.5); }
    100% { opacity: 0;   transform: scale(1.5); }
}

/* ── Interactive host (TCY.timeline.render v2) ─────────────────────────── */
/* Toolbar: filter chips, search, order, expand-all */
.tcy-tl-toolbar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2; padding: .35rem 0;
    background: var(--surface-card-bg, #fff);
}
.tcy-tl-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.tcy-tl-chip {
    border: 1px solid var(--surface-card-border, #d1d5db); background: transparent;
    color: var(--surface-text, #374151); border-radius: 999px; padding: .2rem .65rem;
    font-size: var(--fs-sm, .76rem); line-height: 1.4; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.tcy-tl-chip i { margin-right: .2rem; opacity: .8; }
.tcy-tl-chip__n { opacity: .7; margin-left: .2rem; }
.tcy-tl-chip:hover { border-color: var(--brand-primary, var(--color-action, #0d9488)); }
.tcy-tl-chip:disabled { opacity: .45; cursor: default; border-color: var(--surface-card-border, #d1d5db); }
.tcy-tl-chip.is-active {
    background: var(--brand-primary, var(--color-action, #0d9488)); color: var(--text-on-brand, #fff);
    border-color: var(--brand-primary, var(--color-action, #0d9488));
}
.tcy-tl-chip.is-active .tcy-tl-chip__n { opacity: .9; }
.tcy-tl-tools { display: flex; gap: .35rem; align-items: center; }
.tcy-tl-search { position: relative; display: inline-flex; align-items: center; margin: 0; }
.tcy-tl-search i { position: absolute; left: .55rem; font-size: var(--fs-xs, .7rem); color: var(--surface-text-muted, #9ca3af); pointer-events: none; }
.tcy-tl-search input {
    border: 1px solid var(--surface-card-border, #d1d5db); border-radius: 6px;
    padding: .25rem .5rem .25rem 1.6rem; font-size: var(--fs-sm, .76rem); width: 210px;
    background: var(--surface-input-bg, #fff); color: var(--surface-text, #374151);
}
.tcy-tl-tool {
    border: 1px solid var(--surface-card-border, #d1d5db); background: transparent; border-radius: 6px;
    padding: .25rem .55rem; font-size: var(--fs-sm, .76rem); color: var(--surface-text, #374151); cursor: pointer; white-space: nowrap;
}
.tcy-tl-tool:hover { border-color: var(--brand-primary, var(--color-action, #0d9488)); }

/* Day separators stay put while the list scrolls */
.tcy-tl-day {
    position: sticky; top: 0; z-index: 1;
    font-size: var(--fs-xs, .7rem); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--surface-text-muted, #6b7280); background: var(--surface-card-bg, #fff);
    padding: .35rem 0 .25rem; margin-top: .25rem;
}
.tcy-tl-day::after { content: ''; display: block; height: 1px; background: var(--surface-card-border, #e5e7eb); margin-top: .25rem; }
.tcy-tl-toolbar + .tcy-tl-list .tcy-tl-day { top: 2.6rem; }

/* Row head: the click target */
.tcy-tl__head { display: flex; align-items: flex-start; gap: .5rem; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.tcy-tl__head--toggle { cursor: pointer; }
.tcy-tl__head--toggle:hover { background: var(--surface-table-hover, #f3f4f6); }
.tcy-tl__head--toggle:focus-visible { outline: 2px solid var(--brand-primary, var(--color-action, #0d9488)); outline-offset: 2px; }
.tcy-tl__main { flex: 1; min-width: 0; }
.tcy-tl__summary { font-size: var(--fs-sm, .76rem); color: var(--surface-text, #374151); margin-top: 2px; line-height: 1.45; }
.tcy-tl__summary .badge { font-size: var(--fs-2xs, .62rem); vertical-align: 1px; }
.tcy-tl__arrow { color: var(--surface-text-muted, #9ca3af); font-size: var(--fs-xs, .7rem); }
.tcy-tl__dim { color: var(--surface-text-muted, #6b7280); }
.tcy-tl__caret { color: var(--surface-text-muted, #9ca3af); font-size: var(--fs-sm, .76rem); margin-top: 4px; transition: transform .2s; flex-shrink: 0; }
.tcy-tl__item.is-open .tcy-tl__caret { transform: rotate(180deg); }
.tcy-tl__time abbr { text-decoration: none; cursor: help; }
.tcy-tl__role {
    font-size: var(--fs-2xs, .62rem); padding: .1rem .4rem; border-radius: 999px; font-weight: 500;
    background: var(--surface-card-header, #f3f4f6); color: var(--surface-text, #374151);
    border: 1px solid var(--surface-card-border, #e5e7eb);
}
.tcy-tl__flag {
    font-size: var(--fs-2xs, .62rem); padding: .1rem .4rem; border-radius: 999px; font-weight: 600;
    background: var(--surface-warn-bg, #fffbeb); color: var(--surface-warn-text, #92400e);
    border: 1px solid var(--surface-warn-border, #fcd34d);
}
.tcy-tl__mark { background: var(--surface-warn-bg, #fef3c7); color: inherit; padding: 0 1px; border-radius: 2px; }

/* Details fold open without a height hack */
.tcy-tl__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.tcy-tl__details > div { overflow: hidden; }
.tcy-tl__item.is-open .tcy-tl__details { grid-template-rows: 1fr; }
.tcy-tl__key { min-width: 120px; }
.tcy-tl-empty--filter { padding: 1.5rem; font-size: var(--fs-base, .8rem); }

[data-bs-theme="dark"] .tcy-tl-toolbar,
[data-bs-theme="dark"] .tcy-tl-day { background: var(--surface-card-bg, #1e293b); }
[data-bs-theme="dark"] .tcy-tl__head--toggle:hover { background: rgba(255, 255, 255, .05); }

@media (max-width: 640px) {
    .tcy-tl-search input { width: 140px; }
    .tcy-tl-tool span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tcy-tl::before, .tcy-tl__item { animation: none !important; opacity: 1; }
    .tcy-tl__item:first-child .tcy-tl__icon::after { animation: none; }
    .tcy-tl__details, .tcy-tl__caret, .tcy-tl-chip { transition: none; }
}