@layer components {
  /*
   * Data table - generic table styling
   */
  .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    table-layout: fixed;
  }

  .data-table__th {
    padding: var(--block-space-sm) var(--inline-space);
    text-align: start;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-muted);
    background-color: var(--color-canvas-alt);
    border-block-end: 1px solid var(--color-border);
  }

  /* Round corners on header cells to match table border-radius */
  .data-table__th:first-child {
    border-start-start-radius: calc(var(--radius-lg) - 1px);
  }

  .data-table__th:last-child {
    border-start-end-radius: calc(var(--radius-lg) - 1px);
  }

  .data-table__th--center {
    text-align: center;
  }

  .data-table__th--actions {
    text-align: end;
  }

  .data-table__row {
    transition: background-color 0.1s ease;
  }

  .data-table__row:hover {
    background-color: var(--color-canvas-alt);
  }

  .data-table__row:not(:last-child) .data-table__td {
    border-block-end: 1px solid var(--color-border);
  }

  /* Hidden rows (for collapsible trees) */
  .data-table__row.is-hidden {
    display: none;
  }

  .data-table__td {
    padding: var(--block-space-sm) var(--inline-space);
    vertical-align: middle;
  }

  .data-table__td--center {
    text-align: center;
  }

  .data-table__td--actions {
    text-align: end;
    position: relative;
  }

  .data-table__actions {
    display: flex;
    gap: var(--inline-space-sm);
    justify-content: flex-end;
  }

  .data-table__td--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .data-table__td--muted {
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
  }

  /* Secondary text (e.g., descriptions below main content) */
  .data-table__secondary {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    margin-block-start: var(--block-space-xs);
  }

  @media (max-width: 640px) {
    .data-table__secondary {
      display: none;
    }
  }

  .data-table__link {
    color: inherit;
    text-decoration: none;
  }

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

  .data-table__check {
    color: var(--color-green);
  }

  .data-table__code {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    background-color: var(--color-canvas-alt);
    padding: var(--block-space-xs) var(--inline-space-sm);
    border-radius: var(--radius-sm);
  }

  /*
   * Column width utilities - for fixed-width columns
   * Use on th elements; td will follow due to table-layout: fixed
   */
  .data-table__th--narrow {
    width: 6rem;
  }

  .data-table__th--medium {
    width: 10rem;
  }

  .data-table__th--wide {
    width: 16rem;
  }

  /* Icon-only column (for status icons, indicators) */
  .data-table__th--icon {
    width: 2.5rem;
  }

  .data-table__td--icon {
    text-align: center;
  }

  /*
   * Responsive column visibility
   * Apply to both th and td to hide columns on smaller viewports
   * Mobile: < 640px, Tablet: < 1024px
   */
  @media (max-width: 640px) {
    .data-table__th--hide-mobile,
    .data-table__td--hide-mobile {
      display: none;
    }

    /* Switch to auto layout on mobile for better content fitting */
    .data-table--auto-mobile {
      table-layout: auto;
    }

    /* Narrower columns on mobile */
    .data-table__th--narrow {
      width: 5rem;
    }

    /* Icon-only actions on mobile */
    .data-table__actions .btn__text {
      display: none;
    }

    .data-table__actions .btn--small {
      padding: var(--block-space-xs) var(--inline-space-sm);
    }
  }

  @media (max-width: 1024px) {
    .data-table__th--hide-tablet,
    .data-table__td--hide-tablet {
      display: none;
    }
  }

  /*
   * Tree table extensions - for hierarchical data in tables
   */
  .tree-table__indent {
    display: inline-block;
  }

  .tree-table__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin-inline-end: var(--inline-space-sm);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
    vertical-align: middle;
  }

  .tree-table__toggle:hover {
    background-color: var(--color-grey-200);
    color: var(--color-ink);
  }

  .tree-table__toggle i {
    font-size: var(--text-xs);
    transition: transform 0.15s ease;
  }

  .tree-table__toggle-spacer {
    display: inline-block;
    width: 1.5rem;
    margin-inline-end: var(--inline-space-sm);
  }

  /* Clickable rows - for full-row navigation */
  .data-table__row--clickable {
    cursor: pointer;
  }

  /* Inactive/muted rows */
  .data-table__row--inactive {
    opacity: 0.5;
  }

  /*
   * Toolbar above a data table - right-aligned actions
   */
  .data-table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-block-end: var(--block-space-xs);
  }

  .data-table-toolbar__toggle {
    all: unset;
    cursor: pointer;
    font-size: var(--text-lg);
    color: var(--color-blue);
    line-height: 1;
  }

  .data-table-toolbar__toggle:hover {
    color: oklch(from var(--color-blue) calc(l - 0.1) c h);
  }

  /*
   * Scrollable table container
   * Fills remaining viewport height via flex layout when inside a turbo-frame.
   * The turbo-frame grows to fill .main, and the container grows within it.
   */
  .data-table-container {
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  /* Prevent page scroll when a turbo-frame has a data table */
  .page:has(turbo-frame .data-table-container) {
    overflow: hidden;
  }

  /* turbo-frame fills remaining space in .main flex column */
  .main > turbo-frame:has(.data-table-container) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Wrapper divs between turbo-frame and data-table-container */
  .main > turbo-frame > :has(.data-table-container) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Table container fills remaining space inside turbo-frame */
  turbo-frame .data-table-container {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Standalone containers (not in turbo-frame) use fixed max height */
  .main > .data-table-container {
    max-block-size: calc(100dvh - 20rem);
  }

  .data-table-container .data-table {
    border: none;
    border-radius: 0;
    height: 100%; /* Fill container so tfoot pins to bottom with few rows */
  }

  /* Spacer row absorbs extra height so data rows stay natural size */
  .data-table-container .data-table tbody::after {
    content: "";
    display: table-row;
    height: 100%;
  }

  /* Container handles corners, so remove cell corner radius */
  .data-table-container .data-table__th:first-child,
  .data-table-container .data-table__th:last-child,
  .data-table-container .data-table__tfoot td:first-child,
  .data-table-container .data-table__tfoot td:last-child,
  .data-table-container .data-table tbody tr:last-child td:first-child,
  .data-table-container .data-table tbody tr:last-child td:last-child {
    border-radius: 0;
  }

  .data-table-container .data-table__th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
  }

  /*
   * Table footer
   */
  .data-table__tfoot {
    position: sticky;
    inset-block-end: 0;
  }

  .data-table__tfoot td {
    padding: var(--block-space-sm) var(--inline-space);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    background-color: var(--color-canvas-alt);
    border-block-start: 1px solid var(--color-border);
  }

  /* Round bottom corners on footer cells */
  .data-table__tfoot td:first-child {
    border-end-start-radius: calc(var(--radius-lg) - 1px);
  }

  .data-table__tfoot td:last-child {
    border-end-end-radius: calc(var(--radius-lg) - 1px);
  }

  /* Round bottom corners on last body row (for tables without footer) */
  .data-table tbody tr:last-child td:first-child {
    border-end-start-radius: calc(var(--radius-lg) - 1px);
  }

  .data-table tbody tr:last-child td:last-child {
    border-end-end-radius: calc(var(--radius-lg) - 1px);
  }

  /*
   * Group header rows - for collapsible sections within a table
   */
  .data-table__group-header {
    background-color: var(--color-canvas-alt);
    cursor: pointer;
    user-select: none;
  }

  .data-table__group-header:hover {
    background-color: var(--color-grey-200);
  }

  .data-table__group-header td {
    padding: var(--block-space-sm) var(--inline-space);
    font-weight: 600;
    border-block-end: 1px solid var(--color-border);
  }

  .data-table__group-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-sm);
    color: inherit;
    text-decoration: none;
  }

  .data-table__group-toggle i {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    transition: transform 0.15s ease;
    width: 1rem;
    text-align: center;
  }

  .data-table__group-header.is-collapsed .data-table__group-toggle i {
    transform: rotate(-90deg);
  }

  .data-table__group-name {
    font-size: var(--text-base);
  }

  .data-table__group-count {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-ink-muted);
    margin-inline-start: var(--inline-space-sm);
  }

  /*
   * Inline toggle switch - for header-level options like "Show inactive"
   */
  .data-table__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-sm);
    text-decoration: none;
    color: var(--color-ink-muted);
    font-weight: 400;
    cursor: pointer;
  }

  .data-table__toggle:hover {
    color: var(--color-ink);
  }

  .data-table__toggle-label {
    font-size: var(--text-xs);
  }

  .data-table__toggle-switch {
    position: relative;
    display: inline-block;
    width: 1.75rem;
    height: 1rem;
    background-color: var(--color-grey-300);
    border-radius: var(--radius-full);
    transition: background-color 0.15s ease;
  }

  .data-table__toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: var(--color-canvas);
    border-radius: 50%;
    transition: transform 0.15s ease;
  }

  .data-table__toggle.is-on .data-table__toggle-switch {
    background-color: var(--color-blue);
  }

  .data-table__toggle.is-on .data-table__toggle-switch::after {
    transform: translateX(0.75rem);
  }

  @media (max-width: 640px) {
    .data-table__toggle-label {
      display: none;
    }
  }

  /*
   * Loading indicator for infinite scroll
   */
  .data-table__loading {
    text-align: center;
    padding: var(--block-space) var(--inline-space);
    color: var(--color-ink-muted);
  }

  .data-table__loading.is-hidden {
    display: none;
  }

  /*
   * Sentinel element for infinite scroll (invisible)
   */
  .data-table__sentinel {
    height: 1px;
  }
}