/* Data Grid Component */

/* Sparse grid visualization for CI jobs, test results, etc.
   Renders a 2D matrix with sticky row names and scrollable columns.
   Uses icon-based status indicators (checkmark, X, etc.). */

@layer components {
  /* ============================================================================
   * FULL-SCROLL LAYOUT MODIFIER
   * When applied to .app-shell, enables browser-level scrolling instead of
   * container scrolling. The sidebar sticks to the viewport.
   * ========================================================================= */

  .app-shell--full-scroll .app-shell__content {
    overflow-y: visible;
  }

  /* Only apply sticky sidebar on desktop — on mobile the sidebar is an overlay
     and making it sticky + 100vh creates a huge empty gap above content. */
  @media (width >= 1025px) {
    .app-shell--full-scroll .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      align-self: flex-start;
      overflow-y: auto;
    }
  }

  /* ============================================================================
   * GRID WRAPPER
   * ========================================================================= */

  .data-grid {
    width: 100%;

    --header-day-height: 33px;
    --header-time-height: 25px;
    --header-hash-height: 29px;
  }

  .data-grid__scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    /* Cap height so horizontal scrollbar is always reachable */
    max-height: 80vh;
  }

  /* ============================================================================
   * TABLE
   * ========================================================================= */

  .data-grid__table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: var(--font-size-sm);
  }

  /* ============================================================================
   * STICKY FIRST COLUMN (row names + corner cells)
   * ========================================================================= */

  .data-grid__corner,
  .data-grid__row-name {
    position: sticky;
    left: 0;
    z-index: 2; /* Above regular cells but below header intersections */
    background-color: var(--color-bg-main);
    border-right: 2px solid var(--color-gray-2);
    padding: var(--space-xxs) var(--space-sm);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 250px;
    max-width: 400px;
  }

  .data-grid__row-name {
    font-size: var(--font-size-sm);
    color: var(--color-dark);
    font-weight: var(--font-weight-normal);
    vertical-align: middle;
    cursor: default;
  }

  .data-grid__row-name a {
    color: inherit;
    text-decoration: none;
  }

  .data-grid__row-name a:hover {
    color: var(--color-brand);
    text-decoration: underline;
  }

  .data-grid__corner {
    z-index: 5; /* Above sticky column AND sticky headers */
    background-color: var(--color-bg-secondary);
    vertical-align: middle;
  }

  .data-grid__corner-form {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
  }

  /* ============================================================================
   * HEADER ROWS — sticky vertically within scroll container
   * ========================================================================= */

  .data-grid__header-row {
    background-color: var(--color-bg-secondary);
  }

  .data-grid__header-row th {
    padding: var(--space-xxs) var(--space-xxs);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-4);
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-gray-2);
    background-color: var(--color-bg-secondary);
  }

  /* Day header - largest, top-level grouping - sticks at top */
  .data-grid__header-row--day th {
    position: sticky;
    top: 0;
    z-index: 4;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    padding: var(--space-xs) var(--space-xxs);
    border-bottom: 2px solid var(--color-gray-2);
  }

  /* Time header - sticks below day header */
  .data-grid__header-row--time th {
    position: sticky;
    top: var(--header-day-height);
    z-index: 4;
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    color: var(--color-gray-3);
  }

  /* Commit hash header - sticks below day + time headers */
  .data-grid__header-row--hash th {
    position: sticky;
    top: calc(var(--header-day-height) + var(--header-time-height));
    z-index: 4;
    font-size: var(--font-size-xs);
    padding-bottom: var(--space-xs);
  }

  /* Corner cells in sticky header rows need highest z-index (sticky both directions) */
  .data-grid__header-row--day .data-grid__corner {
    top: 0;
    z-index: 5;
  }

  .data-grid__header-row--time .data-grid__corner {
    top: var(--header-day-height);
    z-index: 5;
  }

  .data-grid__header-row--hash .data-grid__corner {
    top: calc(var(--header-day-height) + var(--header-time-height));
    z-index: 5;
  }

  .data-grid__header-row--hash code {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-gray-4);
    background: var(--color-bg-highlight);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
  }

  .data-grid__hash-link {
    text-decoration: none;
  }

  .data-grid__hash-link:hover code {
    color: var(--color-brand);
    text-decoration: underline;
  }

  /* Retry group indicator */
  .data-grid__header-row--hash th[colspan] {
    border-left: 1px solid var(--color-gray-2);
  }

  .data-grid__header-row--hash th[colspan]:first-of-type {
    border-left: none;
  }

  /* ============================================================================
   * DATA ROWS
   * ========================================================================= */

  .data-grid__row {
    border-bottom: 1px solid var(--color-gray-1);
  }

  .data-grid__row:hover .data-grid__row-name {
    background-color: var(--color-bg-highlight);
  }

  /* ============================================================================
   * CELLS — bordered boxes with status icons
   * ========================================================================= */

  .data-grid__cell {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--color-gray-2);
  }

  /* Retry column cells: dim only the icon, not the borders */
  .data-grid__cell--retry .data-grid__icon,
  .data-grid__cell--retry .data-grid__multi-status {
    opacity: 0.5;
  }

  /* ============================================================================
   * STATUS ICONS
   * ========================================================================= */

  .data-grid__icon {
    display: block;
    margin: auto;
  }

  .data-grid__icon--success {
    color: var(--color-positive);
  }

  .data-grid__icon--failure {
    color: var(--color-negative);
  }

  .data-grid__icon--running {
    color: var(--color-info);
    animation: data-grid-spin 1s linear infinite;
  }

  .data-grid__icon--pending {
    color: var(--color-gray-3);
  }

  .data-grid__icon--cancelled {
    color: var(--color-gray-3);
    opacity: 0.7;
  }

  .data-grid__icon--skipped {
    color: var(--color-gray-3);
    opacity: 0.5;
  }

  @keyframes data-grid-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ============================================================================
   * CLICKABLE CELLS
   * ========================================================================= */

  .data-grid__cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
  }

  .data-grid__cell a:hover {
    background-color: var(--color-bg-highlight);
    outline: 2px solid var(--color-gray-3);
    outline-offset: -2px;
  }

  /* Multiple statuses in one cell (small dots) */
  .data-grid__multi-status {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .data-grid__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .data-grid__status-dot--success,
  .data-grid__status-dot--passed {
    background-color: var(--color-success);
  }

  .data-grid__status-dot--failure,
  .data-grid__status-dot--failed,
  .data-grid__status-dot--error {
    background-color: var(--color-error);
  }

  .data-grid__status-dot--skipped {
    background-color: var(--color-gray-3);
  }

  /* ============================================================================
   * RESPONSIVE
   * ========================================================================= */

  @media (width <= 768px) {
    .data-grid__corner,
    .data-grid__row-name {
      min-width: 180px;
      max-width: 250px;
      font-size: var(--font-size-xs);
      padding: var(--space-xxs) var(--space-xs);
    }

    .data-grid__cell {
      width: 26px;
      min-width: 26px;
      height: 26px;
    }

    .data-grid__icon {
      width: 12px;
      height: 12px;
    }
  }

  /* ============================================================================
   * DARK MODE
   * ========================================================================= */

  @media (prefers-color-scheme: dark) {
    .data-grid__corner,
    .data-grid__row-name {
      background-color: var(--color-bg-main);
      border-right-color: var(--color-gray-2);
    }

    .data-grid__corner {
      background-color: var(--color-bg-secondary);
    }

    .data-grid__header-row {
      background-color: var(--color-bg-secondary);
    }

    .data-grid__header-row th {
      border-bottom-color: var(--color-gray-2);
      background-color: var(--color-bg-secondary);
    }

    .data-grid__header-row--hash code {
      background: var(--color-bg-highlight);
    }

    .data-grid__row {
      border-bottom-color: var(--color-gray-1);
    }

    .data-grid__cell {
      border-color: var(--color-gray-2);
    }

    .data-grid__cell a:hover {
      background-color: var(--color-bg-highlight);
    }
  }

  /* ============================================================================
   * DURATION VIEW
   * Shows duration labels in cells with status-based background colors.
   * ========================================================================= */

  .data-grid__cell--duration {
    min-width: 52px;
  }

  .data-grid__duration-label {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    line-height: 1;
    white-space: nowrap;
  }
}