/* Row-action icon buttons -- shared across L1/L2/Raw/CS query results
 * and the L1 "Open in Explorer" confirmation page. Replaces the old
 * flat grey/black 18px PNG icons (ic_list_black_18dp.png etc.) with
 * small colored circular buttons carrying an inline SVG glyph (defined
 * once, in master.html's own <svg> sprite block, referenced here via
 * <use href="#ic-row-...">). One color per action so each is
 * recognizable at a glance, not just by hovering to read the tooltip.
 */

.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin: 0 3px;
  vertical-align: middle;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  opacity: 0.92;
}

.row-action:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  opacity: 1;
}

.row-action svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
}

.row-action--header   { background: linear-gradient(135deg, #2c7be5 0%, #1a56b0 100%); }
.row-action--target   { background: linear-gradient(135deg, #2f9e44 0%, #1f7a34 100%); }
.row-action--report   { background: linear-gradient(135deg, #e8590c 0%, #c2410c 100%); }
.row-action--explorer { background: linear-gradient(135deg, #0d7d8c 0%, #0a5d68 100%); }

/* Larger variant for the L1 "Open in Explorer" confirmation page's own
 * buttons, which stand alone rather than sitting in a dense table row. */
.row-action--large {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.row-action--large svg {
  width: 12px;
  height: 12px;
}

/* "Open in Explorer" pill button -- deliberately a different shape
 * (labeled pill, not a bare circular icon) from every other row
 * action, and lives in its own dedicated table column rather than the
 * shared action-icon cluster, so it reads as the primary/dominant
 * action for a row rather than one option among several. L1/L2 results
 * tables only (Raw/CS don't have this action at all).
 *
 * This class was referenced in l1/l2queryresults.html a full round
 * before this definition was actually deployed -- a real gap (the CSS
 * edit was made locally but never included in that round's own file
 * push), confirmed live as the real cause of "icon is broken and text
 * overflows the border": with no rule at all, a `.explorer-pill` is
 * just bare unstyled inline content inside a narrow table cell.
 * white-space: nowrap here is deliberately paired with `width: fit-
 * content` (not a fixed px width) plus the *cell's* own `overflow:
 * visible` override below, so the pill can never be clipped by the
 * table's own generic `td { overflow: hidden; text-overflow:
 * ellipsis; }` rule (correct for plain text, wrong for a rendered
 * button) regardless of how narrow its column is asked to be. */
.explorer-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0d7d8c 0%, #0a5d68 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(10, 93, 104, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.explorer-pill svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}

.explorer-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(10, 93, 104, 0.45);
  color: #ffffff;
}

/* Pairs with the .explorer-pill note above: the table cell hosting it
 * needs overflow:visible (a real button, not truncatable text), and a
 * touch of extra horizontal padding room since the pill itself has its
 * own internal padding on top of the cell's. */
td.explorer-cell {
  overflow: visible;
  text-overflow: clip;
}