/* 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(--surface);
  }

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

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

  /* ============================================================================
   * 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(--text-xs);
  }

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

  .data-grid__grid .data-grid__corner--day {
    top: 0;
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: 2px solid var(--neutral-200);
  }

  .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-2);
  }

  /* Header cells in unified grid (day / time / hash rows) */
  .data-grid__header {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-sunken);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
    white-space: nowrap;
    border-bottom: 1px solid var(--neutral-200);
    padding: var(--space-1);
  }

  .data-grid__header--day {
    position: sticky;
    top: 0;
    z-index: 4;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--fg);
    padding: var(--space-2) var(--space-1);
    border-bottom: 2px solid var(--neutral-200);
  }

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

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

  .data-grid__header--hash code {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--neutral-600);
    background: var(--neutral-100);
    padding: 1px 4px;
    border-radius: var(--radius-1);
  }

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

  .data-grid__grid .data-grid__hash-link:hover code {
    color: var(--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(--surface);
    border-right: 2px solid var(--neutral-200);
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--space-1) var(--space-3);
    min-width: 250px;
    max-width: 400px;
    font-size: var(--text-xs);
    color: var(--fg);
    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(--brand);
    text-decoration: underline;
  }

  .data-grid__row-prefix {
    display: block;
    color: var(--neutral-400);
    font-size: var(--text-xs);
    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(--neutral-200);

    /* 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(--surface);
    border-right: 2px solid var(--neutral-200);
    padding: var(--space-1) var(--space-3);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 250px;
    max-width: 400px;
  }

  .data-grid__row-name {
    font-size: var(--text-xs);
    color: var(--fg);
    font-weight: var(--weight-regular);
    vertical-align: middle;
    cursor: default;
  }

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

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

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

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

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

  .data-grid__header-row {
    background-color: var(--surface-sunken);
  }

  .data-grid__header-row th {
    padding: var(--space-1) var(--space-1);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--neutral-200);
    background-color: var(--surface-sunken);
  }

  /* 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(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--fg);
    padding: var(--space-2) var(--space-1);
    border-bottom: 2px solid var(--neutral-200);
  }

  /* 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(--text-2xs);
    font-family: var(--font-mono);
    color: var(--neutral-400);
  }

  /* 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(--text-2xs);
    padding-bottom: var(--space-2);
  }

  /* 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(--text-2xs);
    color: var(--neutral-600);
    background: var(--neutral-100);
    padding: 1px 4px;
    border-radius: var(--radius-1);
  }

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

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

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

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

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

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

  .data-grid__row:hover .data-grid__row-name {
    background-color: var(--neutral-100);
  }

  /* ============================================================================
   * 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(--neutral-200);
  }

  /* 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(--brand);
    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(--danger);
    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(--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(--neutral-400);
    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(--neutral-400);
    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(--neutral-400);
    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(--neutral-100);
    outline: 2px solid var(--neutral-400);
    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(--brand);
  }

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

  .data-grid__status-dot--skipped {
    background-color: var(--neutral-400);
  }

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

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

    .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(--surface);
      border-right-color: var(--neutral-200);
    }

    .data-grid__corner {
      background-color: var(--surface-sunken);
    }

    .data-grid__header-row {
      background-color: var(--surface-sunken);
    }

    .data-grid__header-row th {
      border-bottom-color: var(--neutral-200);
      background-color: var(--surface-sunken);
    }

    .data-grid__header-row--hash code {
      background: var(--neutral-100);
    }

    .data-grid__row {
      border-bottom-color: var(--neutral-100);
    }

    .data-grid__cell {
      border-color: var(--neutral-200);
    }

    .data-grid__cell a:hover {
      background-color: var(--neutral-100);
    }
  }

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

  /* ============================================================================
   * COMPACT TABLE RENDERER (dg-table)
   * Lightweight <table> alternative to the CSS grid renderer.
   * Background-color cells, no SVG icons, minimal class names.
   * ========================================================================= */

  .dg-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    font-size: var(--text-xs);

    /* Fixed layout makes column widths a function of the <colgroup>, not
       the widest cell in the column. Without this, the 8-char commit SHA
       in the hash header or a multi-strip retry cell would widen the
       column to fit, producing inconsistent cell sizes across pages. */
    table-layout: fixed;
  }

  .dg-col-name {
    width: 300px;
  }

  .dg-col-cell {
    width: 32px;
  }

  /* Headers */
  .dg-hdr th {
    padding: var(--space-1);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--neutral-200);
    background-color: var(--surface-sunken);
  }

  .dg-hdr--day th {
    position: sticky;
    top: 0;
    z-index: 4;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--fg);
    padding: var(--space-2) var(--space-1);
    border-bottom: 2px solid var(--neutral-200);
  }

  .dg-hdr--time th {
    position: sticky;
    top: var(--header-day-height, 33px);
    z-index: 4;
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--neutral-400);
  }

  .dg-hdr--hash th {
    position: sticky;
    top: calc(var(--header-day-height, 33px) + var(--header-time-height, 25px));
    z-index: 4;
    font-size: var(--text-2xs);
    padding-bottom: var(--space-2);
    border-left: 1px solid var(--neutral-200);
  }

  .dg-hdr--hash code {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--neutral-600);
    background: var(--neutral-100);
    padding: 1px 4px;
    border-radius: var(--radius-1);
  }

  .dg-hdr--hash a {
    text-decoration: none;
  }

  .dg-hdr--hash a:hover code {
    color: var(--brand);
    text-decoration: underline;
  }

  /* Corner cells (sticky both directions) */
  .dg-corner {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: var(--surface-sunken);
    border-right: 2px solid var(--neutral-200);
    padding: var(--space-1) var(--space-3);
  }

  .dg-corner--day {
    top: 0;
  }

  /* Row name cells (sticky left) */
  .dg-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--surface);
    border-right: 2px solid var(--neutral-200);
    border-bottom: 1px solid var(--neutral-100);
    padding: var(--space-1) var(--space-3);
    min-width: 250px;
    max-width: 400px;
    font-size: var(--text-xs);
    color: var(--fg);
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
  }

  .dg-name a {
    color: inherit;
    text-decoration: none;
    display: block;
  }

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

  .dg-pfx {
    display: block;
    color: var(--neutral-400);
    font-size: var(--text-xs);
    line-height: 1.2;
  }

  .dg-sfx {
    display: block;
    line-height: 1.3;
  }

  tr:hover .dg-name {
    background-color: var(--neutral-100);
  }

  /* Status cells — background color only, no icons */
  .dg-table td:not(.dg-name) {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--neutral-200);
    cursor: default;
  }

  /* Clickable cells (has data-u attribute) */
  .dg-table td[data-u] {
    cursor: pointer;
  }

  .dg-table td[data-u]:hover {
    outline: 2px solid var(--neutral-400);
    outline-offset: -2px;
    filter: brightness(1.1);
  }

  /* Status background colors — use the status color directly.
     Opacity is controlled by the color-mix with transparent so cells
     work in both light and dark mode without depending on --color-bg-main. */
  .g-s { background-color: color-mix(in srgb, var(--brand) 60%, transparent); }
  .g-f { background-color: color-mix(in srgb, var(--danger) 65%, transparent); }
  .g-r { background-color: color-mix(in srgb, var(--info) 60%, transparent); }
  .g-p { background-color: color-mix(in srgb, var(--neutral-400) 25%, transparent); }
  .g-x { background-color: color-mix(in srgb, var(--neutral-400) 20%, transparent); }
  .g-k { background-color: color-mix(in srgb, var(--neutral-400) 15%, transparent); }

  /* Empty cells */
  .dg-e {
    background-color: transparent;
  }

  /* Retry dimming */
  .dg-rt {
    opacity: 0.5;
  }

  /* Multi-status dots */
  .dg-m {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }

  /* Multi-status cell: colored strips for retries within one cell.
     Strips share the column's 32px width (set by .dg-col-cell) rather
     than growing the cell — under table-layout: fixed the cell can't
     widen its column anyway, and letting the strips push the cell box
     wider would clip into the next column. */
  td.dg-mc {
    padding: 0 !important;
    opacity: 1 !important; /* override dg-rt dimming — strips show status directly */
  }

  .dg-strips {
    display: flex;
    height: 100%;
    min-height: 30px;
    gap: 1px;
  }

  .dg-strips > .dg-strip {
    flex: 1 1 0;
    min-width: 0;
  }

  .dg-strips > .dg-strip[data-u] {
    cursor: pointer;
  }

  .dg-strips > .dg-strip[data-u]:hover {
    opacity: 0.8;
  }

  .dg-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
  }

  .dg-dot--success { background-color: var(--brand); }

  .dg-dot--failure,
  .dg-dot--error { background-color: var(--danger); }
  .dg-dot--skipped { background-color: var(--neutral-400); }

  /* Duration cells */
  .dg-dur {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    line-height: 1;
    white-space: nowrap;
  }


  /* ── Icon mode ──────────────────────────────────────────────────────
     When .dg-table--icons is present, overlay SVG icons via CSS mask-image.
     Zero HTML change — same <td class="g-s"></td>, purely CSS-driven.
     The mask punches an icon shape through the background color. */
  /* stylelint-disable property-no-vendor-prefix */

  /* Icon mode: use ::before pseudo-element so the mask doesn't clip borders.
     The td keeps its background + border, the ::before overlays the icon. */

  /* Only apply icons to empty status cells (no .dg-dur content).
     Duration cells keep their background color + text without icon overlay. */
  .dg-table--icons td.g-s:not(:has(.dg-dur)),
  .dg-table--icons td.g-f:not(:has(.dg-dur)),
  .dg-table--icons td.g-r:not(:has(.dg-dur)),
  .dg-table--icons td.g-p:not(:has(.dg-dur)),
  .dg-table--icons td.g-x:not(:has(.dg-dur)),
  .dg-table--icons td.g-k:not(:has(.dg-dur)) {
    position: relative;
    background-color: transparent;
  }

  .dg-table--icons td.g-s:not(:has(.dg-dur))::before,
  .dg-table--icons td.g-f:not(:has(.dg-dur))::before,
  .dg-table--icons td.g-r:not(:has(.dg-dur))::before,
  .dg-table--icons td.g-p:not(:has(.dg-dur))::before,
  .dg-table--icons td.g-x:not(:has(.dg-dur))::before,
  .dg-table--icons td.g-k:not(:has(.dg-dur))::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 14px;
    mask-size: 14px;
  }

  .dg-table--icons td.g-s:not(:has(.dg-dur))::before {
    background-color: var(--brand);
    -webkit-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");
    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");
  }

  .dg-table--icons td.g-f:not(:has(.dg-dur))::before {
    background-color: var(--danger);
    -webkit-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");
    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");
  }

  .dg-table--icons td.g-r:not(:has(.dg-dur))::before {
    background-color: var(--info);
    -webkit-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");
    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");
  }

  .dg-table--icons td.g-p:not(:has(.dg-dur))::before {
    background-color: var(--neutral-400);
    -webkit-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");
    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");
  }

  .dg-table--icons td.g-x:not(:has(.dg-dur))::before {
    background-color: var(--neutral-400);
    -webkit-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");
    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");
  }

  .dg-table--icons td.g-k:not(:has(.dg-dur))::before {
    background-color: var(--neutral-400);
    -webkit-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");
    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");
  }

  /* Retry strip icons — same ::before approach, same size as single cells */
  .dg-table--icons .dg-strip.g-s,
  .dg-table--icons .dg-strip.g-f,
  .dg-table--icons .dg-strip.g-r,
  .dg-table--icons .dg-strip.g-p,
  .dg-table--icons .dg-strip.g-x,
  .dg-table--icons .dg-strip.g-k {
    position: relative;
    background-color: transparent;
  }

  .dg-table--icons .dg-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 14px;
    mask-size: 14px;
  }

  .dg-table--icons .dg-strip.g-s::before {
    background-color: var(--brand);
    -webkit-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");
    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");
  }

  .dg-table--icons .dg-strip.g-f::before {
    background-color: var(--danger);
    -webkit-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");
    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");
  }

  .dg-table--icons .dg-strip.g-r::before {
    background-color: var(--info);
    -webkit-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");
    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");
  }
  /* stylelint-enable property-no-vendor-prefix */

  @media (width <= 768px) {
    .dg-col-name {
      width: 220px;
    }

    .dg-col-cell {
      width: 26px;
    }

    .dg-name {
      font-size: var(--text-2xs);
      padding: var(--space-1) var(--space-2);
    }

    .dg-table td:not(.dg-name) {
      height: 26px;
    }
  }
}