/*--------------------------------------------------------------
# Timeline Page - EliteAdmin
--------------------------------------------------------------*/

.page-timeline {

  /* Page Header */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
  }

  .page-header .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0;
  }

  .page-header .breadcrumb {
    margin: 0;
    font-size: 0.8125rem;
  }

  /* Toolbar */
  .tl-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .tl-sort {
    height: 34px;
    padding: 0 var(--spacing-md);
    font-size: 0.8125rem;
    color: var(--default-color);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);

    &:focus {
      outline: none;
      border-color: var(--input-focus-border);
    }
  }

  /* Timeline Line */
  .timeline {
    position: relative;
    padding-left: 32px;

    &::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--border-color);
    }
  }

  /* Date Separator */
  .tl-date-sep {
    position: relative;
    margin-bottom: var(--spacing-lg);
    margin-left: -32px;
    padding-left: 32px;
  }

  .tl-date-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--accent-color);
    color: var(--contrast-color);
    position: relative;
    z-index: 1;

    &.secondary {
      background: var(--muted-color);
    }
  }

  /* Timeline Item */
  .tl-item {
    position: relative;
    margin-bottom: var(--spacing-lg);

    &:last-child {
      margin-bottom: 0;
    }
  }

  /* Marker */
  .tl-marker {
    position: absolute;
    left: -32px;
    top: 1rem;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--contrast-color);
    z-index: 1;

    i {
      font-size: 0.75rem;
    }
  }

  /* Content Card */
  .tl-content .card {
    margin-bottom: 0;
    transition: box-shadow 0.2s ease;

    &:hover {
      box-shadow: var(--shadow-md);
    }

    .card-body {
      padding: var(--spacing-md) var(--spacing-lg);
    }
  }

  .tl-card-alert {
    border-color: var(--danger-color);
  }

  /* Header */
  .tl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .tl-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
  }

  .tl-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .tl-user-name {
    font-weight: 600;
    color: var(--heading-color);
  }

  .tl-user-action {
    color: var(--muted-color);
  }

  .tl-link {
    font-weight: 500;
    color: var(--accent-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .tl-time {
    font-size: 0.75rem;
    color: var(--light-color);
    white-space: nowrap;
  }

  /* Text */
  .tl-text {
    font-size: 0.875rem;
    color: var(--default-color);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.5;
  }

  /* Quote */
  .tl-quote {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--muted-color);
    padding: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--radius-md);
    line-height: 1.6;
  }

  /* Meta / Badges */
  .tl-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .tl-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    border-radius: var(--radius-full);
  }

  .tl-comment-link {
    font-size: 0.8125rem;
    color: var(--muted-color);
    text-decoration: none;

    &:hover {
      color: var(--accent-color);
    }
  }

  /* Milestone */
  .tl-milestone {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }

  .tl-milestone-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .tl-milestone-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 0.125rem;
  }

  .tl-milestone-desc {
    font-size: 0.8125rem;
    color: var(--muted-color);
    margin: 0;
  }

  /* Files */
  .tl-files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .tl-file {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.375rem 0.75rem;
    background: var(--background-color);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;

    i {
      color: var(--accent-color);
    }
  }

  .tl-file-size {
    color: var(--light-color);
    font-size: 0.75rem;
  }

  /* Alert */
  .tl-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--danger-color-light);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;

    > i {
      color: var(--danger-color);
      font-size: 1.125rem;
      flex-shrink: 0;
      margin-top: 0.125rem;
    }

    strong {
      display: block;
      color: var(--danger-color);
      margin-bottom: 0.25rem;
    }

    p {
      margin: 0;
      color: var(--danger-color);
      opacity: 0.85;
    }
  }

  /* Member Card */
  .tl-member-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--background-color);
    border-radius: var(--radius-md);
  }

  .tl-member-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .tl-member-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--heading-color);
  }

  .tl-member-role {
    font-size: 0.8125rem;
    color: var(--muted-color);
  }

  /* Sidebar Stats */
  .tl-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color-light);

    &:last-child {
      border-bottom: none;
    }
  }

  .tl-stat-label {
    font-size: 0.8125rem;
    color: var(--muted-color);
  }

  .tl-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--heading-color);
  }

  /* Event Types */
  .tl-event-types {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .tl-event-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
  }

  .tl-event-type-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .tl-event-type span:first-of-type {
    flex: 1;
    color: var(--default-color);
  }

  .tl-event-type-count {
    font-weight: 600;
    color: var(--heading-color);
  }

  /* Contributors */
  .tl-contrib-list {
    display: flex;
    flex-direction: column;
  }

  .tl-contrib-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color-light);

    &:last-child {
      border-bottom: none;
    }
  }

  .tl-contrib-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .tl-contrib-info {
    flex: 1;
  }

  .tl-contrib-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--heading-color);
  }

  .tl-contrib-count {
    font-size: 0.75rem;
    color: var(--muted-color);
  }
}

/* Responsive */
@media (max-width: 991.98px) {
  .page-timeline {
    .timeline {
      padding-left: 26px;

      &::before {
        left: 8px;
      }
    }

    .tl-marker {
      left: -26px;
      width: 20px;
      height: 20px;

      i {
        font-size: 0.625rem;
      }
    }

    .tl-date-sep {
      margin-left: -26px;
      padding-left: 26px;
    }
  }
}
