/* lt-interactive.css — controls for lt-interactive.js (search box, sortable
 * headers, column filters, pager). Classes are namespaced `lti-*` to avoid
 * clashing with core `lt-*`. Only properties that change a default are
 * declared. */

.lt-table {
  /* the search box and the pager are full-width rows of the table, so they line
   * up with its edges rather than the cell text */
  :is(.lti-head, .lti-pager-row) td {
    padding-left: 0;
    padding-right: 0;
  }

  /* Each box fills its cell: the whole table for the search, one column for a
   * filter. A faded magnifier stands in for a placeholder — it says "type here
   * to search" in no language — and steps aside once the box has the 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;
    /* on focus the magnifier goes away, leaving a small left pad so the caret
     * sits just inside the edge rather than behind the icon's wider gutter */
    &:focus {
      padding-left: .5em;
      background-image: none;
    }
  }

  /* the click target is the label span, not the whole cell (so the resize grip
   * stays separate), so the pointer cursor belongs on the label too */
  .lti-sortable .lti-label {
    cursor: pointer;
    user-select: none;
  }
  /* the ▲/▼ indicator, set off from the column label */
  .lti-sort {
    margin-left: 0.3em;
    font-size: 0.8em;
  }

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

  /* the expand caret leads the first cell of each row; it carries its own
   * glyph (▸ / ▾), so it needs no borders or background of its own */
  .lti-expand {
    border: none;
    background: none;
    padding: 0;
    margin-right: 0.4em;
    cursor: pointer;
  }
  /* a row's detail spans every column; the inset marks it as belonging to the
   * row above it */
  .lti-detail > td {
    padding-left: 1.5em;
  }

  /* the drag grip sits on a column's right edge, inside its header cell */
  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;
    }
  }
  /* while dragging, the pointer keeps the resize cursor anywhere on the table,
   * and the drag selects no text */
  &.lti-resizing {
    cursor: col-resize;
    user-select: none;
  }
  /* column widths are authoritative once frozen, so a drag moves one edge only */
  &.lti-fixed {
    table-layout: fixed;
    /* a shrunk column hides its overflow rather than spilling into the next
     * column or out under the resize grip, so the grip can shrink it freely;
     * the detail row (full width, possibly tall) and the popover-bearing
     * filter/bar cells (<td>) are left to overflow */
    thead th, tbody tr:not(.lti-detail) td {
      overflow: hidden;
    }
  }

  /* the control bar lays its parts out left to right: an icon group, the filter
   * chips, then the search box. Only the search box grows, so all the free space
   * lands in it (pushing it to the right edge); the icons and chips keep their
   * natural width. The search still fills the bar when it is the only control. */
  .lti-bar {
    display: flex;
    align-items: center;
    /* a wide gap between the three parts (icons, chips, search) ... */
    gap: 1.2em;
    .lti-icons, .lti-chips {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      /* ... but a tight gap between the buttons / chips within a part */
      gap: 0.3em;
    }
    .lti-chips {
      gap: 0.5em;
      /* always present as a drop target for a caller's chip (el._lt.chips); when
         it holds none, collapse it so it adds no gap between icons and search */
      &:empty { display: none; }
    }
    /* direct child only: a chip's popover holds its own `.lti-search` box */
    & > .lti-search {
      flex: 1 1 8em;
      min-width: 6em;
    }
  }

  /* the column-visibility menu: an eye button and the checklist it pops up */
  .lti-cols {
    position: relative;
    button {
      border: none;
      padding: 0;
      width: 1.2em;
      height: 1.2em;
      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;
      }
      /* a spanner's label, above its (indented) columns */
      .lti-group {
        font-weight: 600;
        white-space: nowrap;
      }
      .lti-sub { padding-left: 1em; }
    }
  }

  /* the CSV download button: an icon button, same footprint as the eye button */
  .lti-download {
    border: none;
    padding: 0;
    width: 1.2em;
    height: 1.2em;
    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 chips sit after the search box in the head bar; each is a label,
   * a summary of the current filter, and a funnel popping up the widget + box */
  .lti-chip {
    /* the whole chip is the popover's click target and the box its panel is
     * positioned against, so the panel opens flush with the chip's left edge */
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    /* a pill (border + faint fill) so each chip reads as a separate unit */
    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;
    }
    /* let the panel resolve against the chip, not the inner 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>');
    }
    /* a funnel standing in for a header-level filter reads as active when its
     * 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;
      /* an explicit display beats the UA [hidden] rule, so re-hide it here */
      &[hidden] { display: none; }
      gap: 0.5em;
      min-width: 14em;
      max-width: 90vw;
      padding: 0.6em;
      background: Canvas;
      border: 1px solid;
      /* a checklist widget's rows: a checkbox beside its label */
      .lti-check {
        display: flex;
        align-items: center;
        gap: 0.4em;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }

  /* the custom range slider: a track with a fill band between 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;
  }
  /* push the row count away from the arrows, and the page size to the far end */
  .lti-pos {
    margin: 0 auto 0 0.3em;
  }
}