/* ========================================================
   Full Traceability Timeline Modal — Enhanced design
   Application colors: #00517B (primary blue), #F28C28 (CTA orange),
   #17a2b8 (teal), #28a745 (green), #6f42c1 (purple), #fd7e14 (orange)
   ======================================================== */

/* Modal */
.tl-modal-content {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 81, 123, 0.12);
    max-height: 88vh;
    background: #fff;
}

/* Header */
.tl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, #00517B 0%, #0078B4 100%);
    border-bottom: none;
}

.tl-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tl-header-icon {
    flex-shrink: 0;
    stroke: #fff !important;
}

.tl-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.tl-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 6px;
    line-height: 0;
    transition: all 0.2s;
    color: #fff;
}
.tl-close-btn svg { stroke: #fff; }
.tl-close-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.05);
}

/* Body */
.tl-modal-body {
    padding: 0;
    overflow-y: auto;
    max-height: calc(88vh - 68px);
    background: #fff;
}

/* Loading */
.tl-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

/* Empty state */
.tl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.tl-empty p {
    margin-top: 12px;
    font-size: 14px;
}

/* ========== Sections (accordion) ========== */
.tl-section {
    border-bottom: 1px solid #f0f0f0;
}

.tl-section:last-child {
    border-bottom: none;
}

/* Section header — base + colored by module */
.tl-section-header {
    display: flex;
    align-items: center;
    padding: 13px 24px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.tl-section-header:hover {
    filter: brightness(0.97);
}

/* Module icon next to header */
.tl-section-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.tl-section-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tl-section-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

.tl-section-dot.request    { background: rgba(255,255,255,0.9); }
.tl-section-dot.esourcing  { background: rgba(255,255,255,0.9); }
.tl-section-dot.orders     { background: rgba(255,255,255,0.9); }
.tl-section-dot.grns       { background: rgba(255,255,255,0.9); }
.tl-section-dot.bills      { background: rgba(255,255,255,0.9); }
.tl-section-dot.payments   { background: rgba(255,255,255,0.9); }
.tl-section-dot.contracts  { background: rgba(255,255,255,0.9); }

/* Section icon (module icon next to label) */
.tl-section-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
}
.tl-section-icon.request    { background: rgba(0, 81, 123, 0.15); color: #00517B; }
.tl-section-icon.esourcing { background: rgba(23, 162, 184, 0.2); color: #17a2b8; }
.tl-section-icon.orders    { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.tl-section-icon.grns      { background: rgba(111, 66, 193, 0.2); color: #6f42c1; }
.tl-section-icon.bills     { background: rgba(253, 126, 20, 0.2); color: #fd7e14; }
.tl-section-icon.payments  { background: rgba(32, 201, 151, 0.2); color: #20c997; }
.tl-section-icon.contracts { background: rgba(102, 16, 242, 0.2); color: #6610f2; }
.tl-section-icon .tl-section-icon-svg,
.tl-section-icon svg { width: 14px; height: 14px; stroke: currentColor; }

.tl-section-label {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
}

/* Colored module headers */
.tl-section-header-request {
    background: linear-gradient(135deg, #00517B 0%, #0078B4 100%);
    color: #fff;
}
.tl-section-header-request .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-request .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-section-header-esourcing {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: #fff;
}
.tl-section-header-esourcing .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-esourcing .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-section-header-orders {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    color: #fff;
}
.tl-section-header-orders .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-orders .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-section-header-grns {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
    color: #fff;
}
.tl-section-header-grns .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-grns .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-section-header-bills {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #fff;
}
.tl-section-header-bills .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-bills .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-section-header-payments {
    background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
    color: #fff;
}
.tl-section-header-payments .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-payments .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-section-header-contracts {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
    color: #fff;
}
.tl-section-header-contracts .tl-section-icon { color: #fff; stroke: #fff; }
.tl-section-header-contracts .tl-chevron { color: rgba(255,255,255,0.85); }

.tl-chevron {
    color: #aaa;
    transition: transform 0.25s ease;
    transform: rotate(180deg);
    flex-shrink: 0;
}

.tl-section-header.collapsed .tl-chevron {
    transform: rotate(0deg);
}

/* Section body — subtle tint by module */
.tl-section-body {
    padding: 0;
}

.tl-section-body-request {
    background: rgba(0, 81, 123, 0.06);
}
.tl-section-body-esourcing {
    background: rgba(13, 148, 136, 0.06);
}
.tl-section-body-orders {
    background: rgba(21, 128, 61, 0.06);
}
.tl-section-body-grns {
    background: rgba(109, 40, 217, 0.06);
}
.tl-section-body-bills {
    background: rgba(194, 65, 12, 0.06);
}
.tl-section-body-payments {
    background: rgba(45, 212, 191, 0.06);
}
.tl-section-body-contracts {
    background: rgba(91, 33, 182, 0.06);
}

/* ========== Event rows ========== */
.tl-event-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 24px 14px 44px;
    border-top: 1px solid #f3f4f6;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

.tl-event-row::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 22px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00517B;
}

/* Status badge — compact pill with entity ID */
.tl-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}

.tl-status-badge.info {
    background: #00517B;
    color: #fff;
}

.tl-status-badge.success {
    background: #16a34a;
    color: #fff;
}

.tl-status-badge.danger {
    background: #dc2626;
    color: #fff;
}

.tl-status-badge.warning {
    background: #d97706;
    color: #fff;
}

.tl-status-badge.primary {
    background: #2563eb;
    color: #fff;
}

.tl-status-badge.secondary {
    background: #6b7280;
    color: #fff;
}

/* User pill */
.tl-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 4px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
}

.tl-user-pill img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.tl-user-pill .tl-user-initials {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

/* Date & Time */
.tl-date, .tl-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.tl-date svg, .tl-time svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #00517B;
}

/* Send reminder button */
.tl-reminder-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}

.tl-reminder-btn:hover {
    opacity: 0.85;
    color: #fff;
}

.tl-reminder-btn svg {
    width: 14px;
    height: 14px;
}

/* Event content area (right side of row) */
.tl-event-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

/* Remarks — approver comment / negotiation message */
.tl-event-remarks {
    width: 100%;
    padding: 12px 16px;
    margin: 10px 0 0 0;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
    line-height: 1.55;
    border-left: 4px solid #00517B;
}
.tl-event-remarks-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #00517B;
    margin-bottom: 6px;
}
.tl-event-remarks.tl-approver-comment { border-left-color: #7c3aed; }
.tl-event-remarks.tl-approver-comment .tl-event-remarks-label { color: #7c3aed; }
.tl-event-remarks.tl-negotiation-message { border-left-color: #17a2b8; }
.tl-event-remarks.tl-negotiation-message .tl-event-remarks-label { color: #17a2b8; }
.tl-event-remarks.tl-reopen-reason { border-left-color: #d97706; background: #fffbeb; }
.tl-event-remarks.tl-reopen-reason .tl-event-remarks-label { color: #d97706; }

/* Approval level tag */
.tl-level-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ede9fe;
    color: #7c3aed;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Actor tags (customer / supplier) */
.tl-level-tag.tl-actor-info {
    background: #dbeafe;
    color: #1d4ed8;
}
.tl-level-tag.tl-actor-warning {
    background: #fef3c7;
    color: #b45309;
}

/* ========== Timeline Trigger Button — Blue (same as Create button) ========== */
.tl-trigger-btn,
.tl-trigger-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #00517B 0%, #0078B4 100%);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

.tl-trigger-btn:hover,
.tl-trigger-btn-cta:hover {
    background: linear-gradient(135deg, #003d5c 0%, #00517B 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 81, 123, 0.4);
    transform: translateY(-1px);
}

.tl-trigger-btn svg,
.tl-trigger-btn-cta svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 576px) {
    .tl-event-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .tl-reminder-btn {
        margin-left: 0;
    }
    .tl-event-row {
        padding: 12px 16px 12px 36px;
    }
    .tl-event-row::before {
        left: 20px;
    }
    .tl-section-header {
        padding: 12px 16px;
    }
}