/*
 * Shared table cell primitives for the console tables (admin.html, profile.html).
 *
 * These rules used to live inline in admin.html only, which is why Profile kept
 * printing whole 100-character image references while Admin showed short names.
 * They are one file now so the two pages cannot drift again.
 *
 * Pair with static/table_cells.js (window.TableCells).
 */

/* No table may widen the page. A table sized by its content (table-layout:auto)
   overflows its container when the columns' minimum widths do not fit, and
   without this the overflow escapes to the document and the right-hand columns
   end up outside the window with nothing to scroll. Confining it here means the
   worst case is a scrollbar on the table itself. Tables that pass antd's
   `scroll` prop already set overflow inline, so this changes nothing for them. */
.ant-table-wrapper { max-width: 100%; }
.ant-table-content { overflow-x: auto; }

/* A column asks for the width its content needs and no more: width:1% plus
   nowrap is the shrink-to-fit idiom, which frees width for the values that
   actually need it. */
.col-tight { white-space: nowrap; }
.cell-chip { white-space: nowrap; }
.table-code { display: block; max-width: 100%; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* .table-code and .cell-ref ask for one line with an ellipsis, but antd puts the
   text in an inner <code>; without these the page's generic <code> wrapping wins
   and a 100-character image ref grows the row to five lines. */
.ant-table-cell .table-code code,
.ant-table-cell .cell-ref code,
.ant-table-cell .cell-ref-face code { white-space: nowrap; word-break: normal; }

/* Last resort when even the reclaimed width is not enough: wrap to a few lines
   rather than clip, because the full value is also in the hover card. */
.cell-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.cell-clamp-2 { -webkit-line-clamp: 2; }
.ant-table-cell .cell-clamp code { white-space: normal; overflow-wrap: anywhere; word-break: normal; }

/* A wide value (image ref, repo URL, email) shows only its distinguishing tail;
   the full string stays one click away instead of widening the column. */
.cell-ref { min-width: 0; max-width: 100%; }
/* The reference's short form is never clipped: it is the thing being read. */
.cell-ref-face { white-space: nowrap; }
/* ...unless even the short form does not fit, in which case two lines beat a clip.
   Must come after the nowrap rules above; same specificity, later wins.

   The width has to be definite. Once the text may wrap, the cell's minimum content
   width is a single token, and auto layout happily shrinks the column to that and
   clips the name the column exists to show. Pages override the width per column. */
.cell-ref-face-wrap { display: block; width: 210px; white-space: normal; }
.ant-table-cell .cell-ref-face-wrap code,
.cell-ref-face-wrap .cell-ref-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; word-break: break-all; }
.cell-ref .ant-typography { display: flex; align-items: center; gap: 6px; min-width: 0;
  max-width: 100%; margin-bottom: 0; }
.cell-ref .ant-typography > code,
.cell-ref .cell-ref-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* refSplitCell: the ellipsis belongs in FRONT of the value, because the head is the run
   every row repeats and the tail is what tells rows apart. A box laid out right-to-left
   overflows past its left edge, so that is where the browser paints the ellipsis, and the
   value keeps its own left-to-right order inside an isolated span -- without the isolation
   a trailing slash or colon would be moved to the wrong end of the line.
   The value stays one text node so triple-click still selects all of it; a two-box
   head/tail layout was tried first and broke exactly that. */
.cell-ref-split-line .ant-typography > code { direction: rtl; text-align: left; }
.cell-ref-line { unicode-bidi: isolate; }
.cell-ref .ant-typography-copy { flex: 0 0 auto; opacity: 0; transition: opacity .15s ease; }
.cell-ref:hover .ant-typography-copy,
.cell-ref:focus-within .ant-typography-copy { opacity: 1; }

.ref-card { max-width: 440px; }
.ref-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ref-card-label { color: #8c8c8c; font-size: 12px; }
.ref-card-copy.ant-typography { margin-bottom: 0; line-height: 1; }
.ref-card-code { display: block; white-space: normal; overflow-wrap: anywhere;
  font-size: 12px; line-height: 1.55; }
.ref-card-gap { height: 10px; }

/* Two facts stacked in one cell (title + slug, repo + notebook path). */
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-stack > * { min-width: 0; }
.cell-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { color: #8c8c8c; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Like .cell-stack but for chips: align-items keeps a Tag at its own width
   instead of stretching it across the column. */
.cell-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cell-lines > * { max-width: 100%; }
.cell-line-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* A column whose action labels run to hundreds of pixels takes the buttons out of
   flow and shows them on row hover. The column then costs only the width of the
   hint glyph, and the bar grows leftwards over the columns beside it. */
.col-row-actions { position: relative; }
.row-actions-host { min-width: 24px; }
.row-actions-hint { color: #bfbfbf; }
/* The bar is a child of this cell, so hovering the bar keeps the cell hovered
   even though the bar is drawn outside the cell's box. */
.col-row-actions:hover .row-actions-hint { opacity: 0; }
.row-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 6px; }
.row-actions-grid > * { width: 100%; }
/* width:max-content is what lets the bar grow leftwards past the narrow cell it
   is anchored in; without it the buttons are squeezed into a vertical stack. */
.row-actions { position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: max-content; max-width: none; display: flex; gap: 8px; padding: 4px 8px;
  background: #fff; border: 1px solid #f0f0f0; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 3; }
.row-actions .ant-space { flex-wrap: nowrap; }
.col-row-actions:hover .row-actions,
.row-actions:focus-within { opacity: 1; pointer-events: auto; }
/* A device that cannot hover would never see the bar, so there it stays put. */
@media (hover: none) {
  .row-actions { position: static; opacity: 1; pointer-events: auto; transform: none;
    box-shadow: none; border: 0; padding: 0; background: transparent; flex-wrap: wrap; white-space: normal; }
  .row-actions-hint { display: none; }
}