/**
 * Projects table: pin the Actions column when the table is wider than its card.
 *
 * TS-5243 item 22. QA reported the action icons "floating outside the visible
 * section". They were not floating: the grid is a react-data-table with its
 * own overflow-x, the content is wider than the card below about 1000px, and
 * the Actions column simply fell off the right-hand edge mid-icon.
 *
 * It was reachable by scrolling the grid sideways, but nothing said so, which
 * is why it reads as a rendering fault rather than as a scroll. Pinning the
 * column means the actions are always where you expect and the columns you
 * scroll are the informational ones.
 *
 * Applied only below 1000px, which is where the table stops fitting. Above
 * that everything is visible and a pinned column would be pointless chrome.
 * Sentiment Type is hidden at the same breakpoint, in the column definition.
 *
 * The backgrounds are opaque on purpose: content scrolls UNDER a sticky cell,
 * so a transparent one shows the other columns sliding through it. They match
 * what the table already uses, #fff for a row and #F2EEF8 for the header, so
 * the pinned column is invisible until something moves behind it.
 */

@media (max-width: 999.98px) {
  .ts-projects-table .rdt_TableCol:last-child,
  .ts-projects-table .rdt_TableCell:last-child {
    position: sticky;
    right: 0;
    /* Above the scrolling cells, below any dropdown the actions open. */
    z-index: 2;
    /* Wide enough for the three action icons and their gaps, which measure
       144px, plus the cell's own padding.
       
       This used to say it had to live in CSS because CustomDataTable stripped
       grow, minWidth and wrap from every column. That stripping has since been
       removed - the wrapper passes columns straight through - so a column
       minWidth does now reach the library. Kept here anyway: the floor has to
       apply to the pinned cell as well as the column, and the two rules below
       need to move together. */
    min-width: 160px;
  }

  .ts-projects-table .rdt_TableCol:last-child {
    background: #f2eef8;
  }

  .ts-projects-table .rdt_TableCell:last-child {
    background: #fff;
  }

  /* A hairline on the leading edge, so the pinned column reads as pinned
     rather than as one column overlapping another. Uses the house control
     boundary at reduced strength: this separates two areas of one surface,
     which is a divider's job, not a control's. */
  .ts-projects-table .rdt_TableCol:last-child::before,
  .ts-projects-table .rdt_TableCell:last-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--ts-border-control, #6f6786);
    opacity: 0.3;
  }
}

/**
 * TS-5243 item 24: the screen jumps when hovering the action icons.
 *
 * The action icons carry Hover.css's ripple-out effect. Its ::before is
 * absolutely positioned at inset 0 and the keyframe animates it out to inset
 * -12px before fading. Absolute positioning means it cannot move a sibling,
 * which is why this looks harmless, but it DOES enlarge the element's overflow
 * area, and these icons sit inside the grid's horizontal scroll container.
 *
 * Measured on the projects grid: applying the keyframe's end state takes the
 * scroll container from 709x292 to 721x297, and removing it puts it back. So
 * for the animation's full second the scrollable area inflates and deflates,
 * the scrollbar twitches, and the content shifts under the pointer. That is
 * the jump.
 *
 * The ripple is decoration on a 36px icon, where it is barely legible anyway,
 * so it goes rather than being contained. Containing it would mean clipping
 * the cell, and the last cell is the pinned Actions column, which must not be
 * clipped.
 */
.ts-projects-table .rdt_TableRow .btn-preview:hover::before,
.ts-projects-table .rdt_TableRow .btn-preview:focus::before {
  animation: none;
}

/**
 * TS-5381: the action icons rendered as a few pixels wide, and could sit
 * outside the card when the window was resized.
 *
 * Reported as "icons display issues (view, delete)". The one icon that looked
 * right is the Project Hub one, and it is the odd one out: it is a Bootstrap
 * icon FONT glyph sized in rem. The other three are 16x16 <img> SVGs, and an
 * <img> is subject to the theme's global `img { max-width: 100% }`
 * (css/style.css). Removing that rule makes them appear correctly, which is
 * what pointed at the cause, but it is a site-wide responsive safeguard and
 * cannot go: the icons have to opt out of it instead.
 *
 * Why they were being squeezed at all: the block above sizes this column for
 * THREE icons ("which measure 144px"), but the cell renders up to FOUR -
 * Project Hub, SEO Tools, Edit Thumbnail and Delete - because Edit Thumbnail is
 * conditional on field_reference_thumbnail and only appears on projects that
 * have one. A fourth icon overflows the 160px, the flex children shrink to fit
 * (flex-shrink defaults to 1), each button's content box collapses, and
 * max-width:100% then resolves against that collapsed box. The SVG ends up a
 * few pixels wide, which reads as a faint dot rather than an icon.
 *
 * That also explains the resize behaviour. Above 1000px the pinned block does
 * not apply and nothing set a minimum at all, so the column took whatever the
 * table left it: sometimes squeezing the icons, sometimes letting them run past
 * the card's edge.
 *
 * So: fix the size at source, stop the icons and their buttons shrinking, and
 * give the column a floor wide enough for four of them at every width.
 */

/* Opt the action icons out of the global img clamp and pin their size, so they
   no longer depend on however wide their parent happens to end up. */
.ts-projects-table .rdt_TableRow .btn-preview .icon-normal {
  width: 16px;
  height: 16px;
  max-width: none;
  flex: 0 0 auto;
}

/* The buttons are controls, not content: they should not give up width. */
.ts-projects-table .rdt_TableRow .btn-preview {
  flex: 0 0 auto;
}

/* Four buttons at 36px (a 16px icon plus 6px/10px padding) is 144px, three
   1rem gaps is 48px, and the cell's own padding is 16px: 208px. Applied at
   every width, not just under the pinned breakpoint, because the icons can no
   longer shrink to fit a narrower column and would otherwise overflow the card
   instead - the same fault TS-5243 item 22 fixed below 1000px. */
.ts-projects-table .rdt_TableCol:last-child,
.ts-projects-table .rdt_TableCell:last-child {
  min-width: 208px;
}

/**
 * The action cell's layout, and two icons per row below 576px.
 *
 * The 208px floor above is right for one row of four icons, but it applies at
 * every width, so on a 320px screen Actions took 208px of it and the Title
 * column was left about 45px - "Unde Com", "Mast Pytho". Title is the only
 * column that identifies the row, so it is the last thing that should be
 * squeezed. Two rows of two costs one line of height and returns roughly 96px
 * to it.
 *
 * The layout lives HERE and not on the element, which used to carry d-flex and
 * gap-2. Both are !important in this bootstrap build
 * (display:flex!important, gap:.5rem!important), so a two-column grid set in
 * this file was overridden and every icon stayed on one row - which then
 * clipped, because four of them are wider than the floor. Utilities with
 * !important cannot be beaten from a stylesheet, so the utilities came off the
 * element instead.
 *
 * The icons still carry flex: 0 0 auto from the block above, so they lay out
 * at full size rather than collapsing to dots, which is the TS-5381 failure.
 */
.ts-projects-table .ts-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 575.98px) {
  /* Two per row, then break. An explicit two-track grid rather than
     flex-wrap: wrapping only gives two per row while the box happens to be
     wide enough for exactly two, which is how this regressed into a stack of
     four once before. Two tracks give two per row regardless. */
  .ts-projects-table .ts-project-actions {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px 8px;
    justify-content: start;
    align-items: center;
    /* Two stacked rows of icons sat flush against the row's top and bottom
       edges, so the buttons read as touching the dividers above and below.
       Padding goes on this container rather than on the cell, so it applies
       only where the icons wrap and does not shift the other columns' text
       off the shared baseline. Space token, not a raw number. */
    padding-top: var(--ts-space-2, 8px);
    padding-bottom: var(--ts-space-2, 8px);
  }

  /* 112px, measured: two .btn-preview at 36px (a 16px icon plus its 6px/10px
     padding), one 8px gap, and react-data-table's own 16px of cell padding on
     each side. */
  .ts-projects-table .rdt_TableCol:last-child,
  .ts-projects-table .rdt_TableCell:last-child {
    min-width: 112px;
  }
}