/* Controls for lt-interactive.js. `lti-*` classes avoid clashing with core
 * `lt-*`. Declare only properties that change a default. */

.lt-table {
  /* full-width rows: align with table edges, not cell text */
  :is(.lti-head, .lti-pager-row) td {
    padding-left: 0;
    padding-right: 0;
  }

  /* Box fills its cell. Faded magnifier replaces a (translatable) placeholder;
   * hidden on focus. */
  .lti-search {
    width: 100%;
    padding: .5em 0 .5em 1.6em;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="gray" stroke-width="2"><circle cx="6.5" cy="6.5" r="4.5"/><path d="M10 10l5 5"/></svg>') 0.4em center / 1em no-repeat;
    /* no icon on focus: smaller left pad so caret sits near the edge */
    &:focus {
      padding-left: .5em;
      background-image: none;
    }
  }

  /* click target is the label, not the cell (keeps resize grip separate) */
  .lti-sortable .lti-label {
    cursor: pointer;
    user-select: none;
  }
  /* ▲/▼ indicator */
  .lti-sort {
    margin-left: 0.3em;
    font-size: 0.8em;
  }

  .lti-empty td {
    text-align: center;
  }

  /* expand caret: glyph is its own (▸ / ▾), so strip button chrome */
  .lti-expand {
    border: none;
    background: none;
    padding: 0;
    margin-right: 0.4em;
    cursor: pointer;
  }
  /* inset ties the detail to the row above */
  .lti-detail > td {
    padding-left: 1.5em;
  }

  /* drag grip on a column's right edge */
  th:has(.lti-resizer) {
    position: relative;
  }
  .lti-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    &:hover {
      background: currentColor;
      opacity: 0.3;
    }
  }
  /* keep resize cursor and block text selection during drag */
  &.lti-resizing {
    cursor: col-resize;
    user-select: none;
  }
  /* frozen widths are authoritative: a drag moves one edge only */
  &.lti-fixed {
    table-layout: fixed;
    /* clip a shrunk column so the grip can shrink it freely; detail row and
     * popover-bearing filter/bar cells (<td>) must overflow */
    thead th, tbody tr:not(.lti-detail) td {
      overflow: hidden;
    }
  }

  /* control bar: icons, chips, search. Only search grows, taking free space
   * (right-aligned); it fills the bar when alone. */
  .lti-bar {
    display: flex;
    align-items: center;
    /* wide gap between parts ... */
    gap: 1.2em;
    .lti-icons, .lti-chips {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      /* ... tight within a part */
      gap: 0.3em;
    }
    .lti-chips {
      gap: 0.5em;
      /* always present as a drop target for caller chips (el._lt.chips);
         collapse when empty to avoid a stray gap */
      &:empty { display: none; }
    }
    /* direct child only: chip popovers hold their own `.lti-search` */
    & > .lti-search {
      flex: 1 1 8em;
      min-width: 6em;
    }
  }

  /* shared size of eye and download buttons */
  .lti-cols button, .lti-download {
    border: none;
    padding: 0;
    width: 1.2em;
    height: 1.2em;
  }

  /* column-visibility menu: eye button + checklist popup */
  .lti-cols {
    position: relative;
    button {
      background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="gray" stroke-width="1.5"><path d="M1 8s2.5-4.5 7-4.5 7 4.5 7 4.5-2.5 4.5-7 4.5-7-4.5-7-4.5z"/><circle cx="8" cy="8" r="2"/></svg>');
    }
    .lti-menu {
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 0;
      background: Canvas;
      border: 1px solid;
      padding: 0.3em 0.6em;
      label {
        display: block;
        white-space: nowrap;
        cursor: pointer;
      }
      /* spanner label above its indented columns */
      .lti-group {
        font-weight: 600;
        white-space: nowrap;
      }
      .lti-sub { padding-left: 1em; }
    }
  }

  /* CSV download icon button */
  .lti-download {
    background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="gray" stroke-width="1.5"><path d="M8 1v9m0 0L4.5 6.5M8 10l3.5-3.5"/><path d="M2 11v3h12v-3"/></svg>');
  }

  /* typed filter chip: label, filter summary, funnel opening widget + box */
  .lti-chip {
    /* whole chip is the click target and panel anchor (panel flush with chip) */
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    /* pill look separates chips */
    padding: 0.05em 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f7f7f7;
    &.lti-on {
      border-color: #999;
      .lti-chip-name { font-weight: 600; }
    }
    .lti-chip-cur {
      color: #555;
      font-variant-numeric: tabular-nums;
    }
    /* panel positions against the chip, not the funnel wrap */
    .lti-pop { position: static; }
  }
  .lti-pop {
    position: relative;
    .lti-funnel {
      border: none;
      padding: 0;
      width: 1.1em;
      height: 1.1em;
      opacity: 0.55;
      background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="gray"><path d="M1 2h14l-5.5 6.5V14l-3 1V8.5z"/></svg>');
    }
    /* active when the column has a live term */
    &.lti-on .lti-funnel {
      opacity: 1;
    }
    .lti-pop-panel {
      position: absolute;
      z-index: 1;
      top: 100%;
      left: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      min-width: 14em;
      max-width: 90vw;
      padding: 0.6em;
      background: Canvas;
      border: 1px solid;
      .lti-widget { display: contents; }
      &[hidden], [hidden] { display: none; }
      /* checklist row: checkbox + label */
      .lti-check {
        display: flex;
        align-items: center;
        gap: 0.4em;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }

  /* range slider: track, fill band, two button thumbs */
  .lti-slider {
    position: relative;
    height: 1.2em;
    margin: 0.4em 0.6em;
    &::before {
      content: "";
      position: absolute;
      inset: 50% 0 auto;
      height: 3px;
      transform: translateY(-50%);
      background: #c8c8c8;
      border-radius: 3px;
    }
    .lti-slider-fill {
      position: absolute;
      inset: 50% 0;
      height: 3px;
      transform: translateY(-50%);
      background: #4a90d9;
    }
    .lti-thumb {
      position: absolute;
      top: 50%;
      width: 14px;
      height: 14px;
      padding: 0;
      transform: translate(-50%, -50%);
      border: 2px solid #fff;
      border-radius: 50%;
      background: #4a90d9;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      touch-action: none;
    }
  }
  .lti-slider-out {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .lti-pager {
    display: flex;
    align-items: center;
    gap: 0.3em;
  }
  button, select {
    font: inherit;
    cursor: pointer;
  }
  /* row count away from arrows; page size pushed to far end */
  .lti-pos {
    margin: 0 auto 0 0.3em;
  }
}

/* Busy state during a page-freezing recompute (see lt-interactive.js). */
.lti-busy {
  /* beat controls' own cursors */
  &, & * {
    cursor: wait !important;
  }
  & tbody {
    opacity: 0.5;
  }
}