/* 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;

    /* Match scrollbar corner to grid background */
    scrollbar-color: auto;
  }

  .data-grid__scroll::-webkit-scrollbar-corner {
    background-color: var(--color-bg-main);
  }

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

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

  /* ============================================================================
   * UNIFIED CSS GRID — single grid for headers + body (Python-rendered path)
   * Headers and data cells share the same column tracks so they align exactly.
   * ========================================================================= */

  .data-grid__grid {
    width: max-content;
    min-width: 100%;
    font-size: var(--font-size-sm);
  }

  /* Corner cells in unified grid (column 1 in header rows) */
  .data-grid__grid .data-grid__corner {
    background-color: var(--color-bg-secondary);
    border-right: 2px solid var(--color-gray-2);
    border-bottom: 1px solid var(--color-gray-2);
    position: sticky;
    left: 0;
    z-index: 5;
  }

  .data-grid__grid .data-grid__corner--day {
    top: 0;
    display: flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 2px solid var(--color-gray-2);
  }

  .data-grid__grid .data-grid__corner--time {
    top: var(--header-day-height, 33px);
  }

  .data-grid__grid .data-grid__corner--hash {
    top: calc(var(--header-day-height, 33px) + var(--header-time-height, 25px));
    padding-bottom: var(--space-xs);
  }

  /* Header cells in unified grid (day / time / hash rows) */
  .data-grid__header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-secondary);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-4);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-gray-2);
    padding: var(--space-xxs);
  }

  .data-grid__header--day {
    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);
  }

  .data-grid__header--time {
    position: sticky;
    top: var(--header-day-height, 33px);
    z-index: 4;
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    color: var(--color-gray-3);
  }

  .data-grid__header--hash {
    position: sticky;
    top: calc(var(--header-day-height, 33px) + var(--header-time-height, 25px));
    z-index: 4;
    font-size: var(--font-size-xs);
    padding-bottom: var(--space-xs);
    border-left: 1px solid var(--color-gray-2);
  }

  .data-grid__header--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__grid .data-grid__hash-link {
    text-decoration: none;
  }

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

  /* Row names inside unified grid (divs, not tds) */
  .data-grid__grid .data-grid__row-name {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-bg-main);
    border-right: 2px solid var(--color-gray-2);
    border-bottom: 1px solid var(--color-gray-1);
    padding: var(--space-xxs) var(--space-sm);
    min-width: 250px;
    max-width: 400px;
    font-size: var(--font-size-sm);
    color: var(--color-dark);
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
  }

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

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

  .data-grid__row-prefix {
    display: block;
    color: var(--color-gray-3);
    font-size: var(--font-size-sm);
    line-height: 1.2;
  }

  .data-grid__row-suffix {
    display: block;
    line-height: 1.3;
  }

  /* Data cells inside unified grid (divs, not tds) */
  .data-grid__grid .data-grid__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-2);

    /* Override fixed 32px from table path — let cells fill the grid track */
    width: auto;
    min-width: auto;
    height: auto;
    min-height: 32px;
  }


  /* ============================================================================
   * 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 — CSS mask-image approach
   * The SVG shape is rasterized once by the browser and reused for every cell
   * with the same class. No inner <svg> DOM element needed per cell.
   * The mask reveals the element's background-color, preserving theme colors.
   * ========================================================================= */

  .data-grid__icon {
    display: block;
    margin: auto;
    width: 14px;
    height: 14px;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .data-grid__icon--success {
    background-color: var(--color-positive);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  }

  .data-grid__icon--failure {
    background-color: var(--color-negative);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  }

  .data-grid__icon--running {
    background-color: var(--color-info);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2a6 6 0 1 1-4.24 1.76'/%3E%3C/svg%3E");
    animation: data-grid-spin 1s linear infinite;
  }

  .data-grid__icon--pending {
    background-color: var(--color-gray-3);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E");
  }

  .data-grid__icon--cancelled {
    background-color: var(--color-gray-3);
    opacity: 0.7;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
  }

  .data-grid__icon--skipped {
    background-color: var(--color-gray-3);
    opacity: 0.5;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3l6 5-6 5'/%3E%3C/svg%3E");
  }

  @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;
  }
}