/*
 * Leadership Roadmap — Gantt Timeline Scroll Fix
 * Screen-only layout correction.
 *
 * The existing Roadmap JavaScript calculates the correct month count,
 * start/end dates, bar positions and widths. This add-on does not change
 * those calculations. It only gives the generated timeline a real canvas
 * width and lets the viewport scroll horizontally.
 */

@media screen {

  #leadership-roadmap .lr-dashboard-timeline {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-sizing: border-box;
  }

  #leadership-roadmap .lr-dashboard-timeline-inner {
    /*
     * 185px = initiative column.
     * 110px = minimum readable width per month.
     * The timeline therefore grows with the number of months instead of
     * squeezing all months into the card width.
     */
    width: max(780px, calc(185px + (var(--month-count) * 110px))) !important;
    min-width: max(780px, calc(185px + (var(--month-count) * 110px))) !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  #leadership-roadmap .lr-dashboard-month-header,
  #leadership-roadmap .lr-dashboard-timeline-row {
    grid-template-columns:
      185px repeat(var(--month-count), minmax(110px, 1fr)) !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #leadership-roadmap .lr-dashboard-month-header {
    min-width: 0;
  }

  #leadership-roadmap .lr-dashboard-month-header > div,
  #leadership-roadmap .lr-dashboard-timeline-label {
    box-sizing: border-box;
  }

  #leadership-roadmap .lr-dashboard-timeline-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #leadership-roadmap .lr-dashboard-timeline-track {
    min-width: 0;
  }

  /* Make the scroll area visually obvious but unobtrusive. */
  #leadership-roadmap .lr-dashboard-timeline::-webkit-scrollbar {
    height: 9px;
  }

  #leadership-roadmap .lr-dashboard-timeline::-webkit-scrollbar-track {
    background: #edf2f6;
    border-radius: 5px;
  }

  #leadership-roadmap .lr-dashboard-timeline::-webkit-scrollbar-thumb {
    background: #b7c6d2;
    border-radius: 5px;
  }

  /* Smaller screens: keep the month readable and make scrolling touch-friendly. */
  @media (max-width: 767px) {
    #leadership-roadmap .lr-dashboard-timeline-inner {
      width: max(780px, calc(185px + (var(--month-count) * 100px))) !important;
      min-width: max(780px, calc(185px + (var(--month-count) * 100px))) !important;
    }

    #leadership-roadmap .lr-dashboard-month-header,
    #leadership-roadmap .lr-dashboard-timeline-row {
      grid-template-columns:
        185px repeat(var(--month-count), minmax(100px, 1fr)) !important;
    }
  }
}