/**
 * @file
 * The shared row card (biopama_libraries/row-card): the Conservation Tracking
 * dataset card compacted to one line, as the dataset menu rows
 * (templates/biopama-menu-row.html.twig) and the analyser's weight rows
 * (templates/biopama-weight-row.html.twig) draw it.
 *
 * Classes: .biopama-row-card on the card, .biopama-row-overlay (the tinted
 * layer over an optional background image), .biopama-row-title (the title
 * button), .biopama-row-switch (the round button on the far right). The
 * weight rows carry .biopama-row-card without .card: they take the title's
 * colours and hover only (no background, border, shadow or overlay).
 * Hover changes opacity, colour and rotation only, never a size. The overlay
 * takes the page's dark token (Conservation Tracking grey on the tool pages).
 */

/* The two button sizes, as tokens: lists that line their columns up with
   these buttons (the analyser's weights list) read the same values. */
:root {
  --biopama-icon-btn-size: 1.75rem;
  --biopama-row-switch-size: 2.25rem;
}

/* Square icon buttons (Bootstrap has no fixed rem width/height utility). */
.biopama-icon-btn {
  width: var(--biopama-icon-btn-size);
  height: var(--biopama-icon-btn-size);
}

/* Card edge: a downward shadow without spread plus a hairline light edge, so
   stacked rows read as separate cards (Conservation Tracking's global .card
   glow has a 5px spread that merges into one dark band at 8px gaps). The
   shadow deepens on hover; no size changes. */
.card.biopama-row-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.3s ease;
}

.card.biopama-row-card:hover,
.card.biopama-row-card:has(:focus-visible) {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Tinted overlay over the background image; the image shows through more on
   hover, as on the Conservation Tracking dataset card. */
.biopama-row-overlay {
  background-color: rgba(var(--bs-dark-rgb, 60, 60, 60), 0.87);
  transition: background-color 0.3s ease;
}

.biopama-row-card:hover .biopama-row-overlay,
.biopama-row-card:has(:focus-visible) .biopama-row-overlay {
  background-color: rgba(var(--bs-dark-rgb, 60, 60, 60), 0.6);
}

/* Title: body colour toned to 80% at rest, accent on row hover; no
   background change. The theme preset sets --bs-btn-hover-bg on :root and
   .btn-link does not override it, so the light hover fill has to be cleared
   here. Two classes outrank Bootstrap's .btn-link whatever the stylesheet
   order. The zero flex basis lets a long title truncate instead of pushing
   the buttons. */
.biopama-row-card .biopama-row-title {
  flex: 1 1 0;
  min-width: 0;
  --bs-btn-color: rgba(var(--bs-body-color-rgb, 255, 255, 255), 0.8);
  --bs-btn-hover-color: var(--bs-warning, #ffc107);
  --bs-btn-active-color: var(--bs-warning, #ffc107);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb, 255, 193, 7);
  transition: color 0.3s ease;
}

.biopama-row-card:hover .biopama-row-title {
  color: var(--bs-btn-hover-color);
}

/* The plus circle (Conservation Tracking size) keeps its background on
   hover/active and rotates once. */
.btn.biopama-row-switch {
  width: var(--biopama-row-switch-size);
  height: var(--biopama-row-switch-size);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-active-border-color: var(--bs-btn-border-color);
}

.biopama-row-switch i {
  transition: transform 0.3s ease;
}

.biopama-row-card:hover .biopama-row-switch i.fa-plus,
.biopama-row-card:has(:focus-visible) .biopama-row-switch i.fa-plus {
  transform: rotate(90deg);
}