/* static/unstuck_ops/css/session_reqs.css */

/* Horizontal strip: all tiles in a single row */
.session-reqs-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
}

/* Base tile */
.session-req-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: 0.45rem;
  border: 1px solid var(--unstuck-border, #e5e7eb);
  background-color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}


/* Links inherit appropriate color */
.session-req-tile,
.session-req-tile:link,
.session-req-tile:visited {
  color: inherit;
}

/* Icon only */
.session-req-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-req-icon i {
  font-size: 1rem;
  line-height: 1;
}

/* Met: clear green */
.session-req-tile.is-met {
  background-color: #ecfdf3;
  border-color: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.08);
  color: #14532d;
}

/* Unmet: neutral base (overridden by per-req colors below) */
.session-req-tile.is-unmet {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

/* Hover / active */
.session-req-tile:hover {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
  text-decoration: none;
}

.session-req-tile:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

/* Focus-visible for keyboard users */
.session-req-tile:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* ------------------------------------------------------------------
 * Per-requirement color accents for UNMET state
 * (met state stays globally green)
 * ------------------------------------------------------------------ */

/* Guestbook signed – purple */
.session-req-tile.req-guestbook.is-unmet {
  background-color: rgba(111, 66, 193, 0.06);
  border-color: #6f42c1;
  color: #4b2a7a;
}

/* Product photo – blue */
.session-req-tile.req-product-photo.is-unmet {
  background-color: rgba(13, 110, 253, 0.06);
  border-color: #0d6efd;
  color: #0b4db3;
}

/* ID photo – teal/cyan */
.session-req-tile.req-id-photo.is-unmet {
  background-color: rgba(13, 202, 240, 0.08);
  border-color: #0dcaf0;
  color: #0a6c80;
}

/* Pre-session product form – orange */
.session-req-tile.req-product-form.is-unmet {
  background-color: rgba(253, 126, 20, 0.06);
  border-color: #fd7e14;
  color: #b65a0f;
}

/* OR tracking – teal/greenish */
.session-req-tile.req-or-track.is-unmet {
  background-color: rgba(32, 201, 151, 0.06);
  border-color: #20c997;
  color: #13896a;
}

/* Client end-of-session signature – pink */
.session-req-tile.req-eos-client.is-unmet {
  background-color: rgba(214, 51, 132, 0.06);
  border-color: #d63384;
  color: #952358;
}

/* Facilitator end-of-session signature – deep purple */
.session-req-tile.req-eos-facilitator.is-unmet {
  background-color: rgba(102, 16, 242, 0.06);
  border-color: #6610f2;
  color: #4510aa;
}

/* Client paid – red */
.session-req-tile.req-client-paid.is-unmet {
  background-color: rgba(220, 53, 69, 0.06);
  border-color: #dc3545;
  color: #9b222e;
}

/* Payment logged – warm brown */
.session-req-tile.req-payment-noted.is-unmet {
  background-color: rgba(121, 85, 72, 0.06);
  border-color: #795548;
  color: #5a3e35;
}

/* ------------------------------------------------------------------
 * Sessions table: make each row feel like a card
 * ------------------------------------------------------------------ */

.sessions-table-card {
  border-collapse: separate;
  border-spacing: 0 0.65rem; /* vertical gap between rows */
}

/* Slight contrast behind cards */
.sessions-table-card {
  background-color: transparent;
}

/* Cells: draw a single rounded border around the row */
.sessions-table-card tbody tr td {
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

/* Left edge of the card */
.sessions-table-card tbody tr td:first-child {
  border-left: 1px solid #e5e7eb;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

/* Right edge of the card */
.sessions-table-card tbody tr td:last-child {
  border-right: 1px solid #e5e7eb;
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

/* Row-level shadow for the whole card */
.sessions-table-card tbody tr {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Hover lift */
.sessions-table-card tbody tr:hover {
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.18);
}

/* ------------------------------------------------------------------
   Row hover "lift" effect for card-like table rows
------------------------------------------------------------------ */
.sessions-table-card tbody tr {
  transition:
    box-shadow 0.18s ease,
    transform 0.12s ease,
    background-color 0.16s ease;
}

.sessions-table-card tbody tr:hover {
  background-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  z-index: 5;
  position: relative;
}

/* ------------------------------------------------------------------
   Tile completion "pop" animation when a requirement flips to met
------------------------------------------------------------------ */

@keyframes req-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Only animate on appearance if tile is marked met */
.session-req-tile.is-met {
  animation: req-pop 0.22s ease-out;
}

/* ------------------------------------------------------------------
   Completion animation: quick pop when a tile is in a "met" state.
   (Will also play on initial render for met tiles, which is fine.)
------------------------------------------------------------------- */

@keyframes session-req-met-pop {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0);
  }
  40% {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0);
  }
}

/* Play the pop when a requirement is met */
.session-req-tile.is-met {
  animation: session-req-met-pop 140ms ease-out;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .session-req-tile.is-met {
    animation: none;
  }
}