/* ══════════════════════════════════════════════════════════════════════════
   Management programs list. Builds on the .mlist tokens and components in
   bmr-management-lists.css.
   ══════════════════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* ── Program cell ─────────────────────────────────────────────────────── */
.pg-prog { display: flex; align-items: center; gap: .75rem; min-width: 240px; max-width: 380px; }
.pg-thumb {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ml-teal-50); color: var(--ml-teal); font-size: 1rem;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg-prog-text { min-width: 0; }
.pg-title {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 700; color: var(--ml-ink); text-decoration: none;
}
.pg-title:hover { color: var(--ml-teal); text-decoration: underline; }
.pg-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.pg-tag {
  display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .45rem; border-radius: 6px;
  background: var(--ml-grey-50); color: var(--ml-grey); font-size: .68rem; font-weight: 700;
}

/* ── Schedule, location, sign-ups ─────────────────────────────────────── */
.pg-date { font-weight: 700; white-space: nowrap; }
.pg-date.is-past { color: var(--ml-muted); font-weight: 600; }
.pg-rel.soon { color: var(--ml-teal); font-weight: 700; }
.pg-loc { display: block; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg-signups { min-width: 150px; font-size: .82rem; }
.pg-signups strong { font-variant-numeric: tabular-nums; }
.pg-bar { max-width: 160px; height: 6px; margin: .3rem 0 .25rem; overflow: hidden; border-radius: 999px; background: var(--ml-grey-50); }
.pg-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ml-teal); }
.pg-bar span.is-full { background: var(--ml-amber); }
.pg-vis { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ── Mobile: each row becomes a card ──────────────────────────────────── */
@media (max-width: 767.98px) {
  .pg-table thead { display: none; }
  .pg-table, .pg-table tbody { display: block; }
  .pg-table tbody { display: flex; flex-direction: column; gap: .75rem; padding: .75rem; }
  .pg-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem;
    grid-template-areas: "prog vis" "schedule schedule" "location location" "signups signups" "actions actions";
    padding: .85rem; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-surface);
  }
  .pg-table tbody tr:hover td { background: transparent; }
  .pg-table td { display: block; padding: 0; border: 0; }
  .pg-table td.pg-cell-prog { grid-area: prog; }
  .pg-table td.pg-cell-vis { grid-area: vis; }
  .pg-table td.pg-cell-schedule { grid-area: schedule; }
  .pg-table td.pg-cell-location { grid-area: location; }
  .pg-table td.pg-cell-signups { grid-area: signups; }
  .pg-table td.pg-cell-actions { grid-area: actions; }

  /* Labelled detail rows */
  .pg-table td[data-label] {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; align-items: start;
    padding: .5rem 0; border-top: 1px solid var(--ml-line); font-size: .82rem;
  }
  .pg-table td.pg-cell-schedule { margin-top: .75rem; }
  .pg-table td[data-label]::before {
    content: attr(data-label); color: var(--ml-muted);
    font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem;
  }

  .pg-prog { min-width: 0; max-width: none; align-items: flex-start; }
  .pg-title { white-space: normal; }
  .pg-vis { flex-direction: column; align-items: flex-end; }
  .pg-loc { max-width: none; white-space: normal; }
  .pg-signups { min-width: 0; }
  .pg-bar { max-width: none; }

  .pg-table td.pg-cell-actions { padding-top: .65rem; border-top: 1px solid var(--ml-line); }
  .pg-table .ml-row-actions { justify-content: flex-start; }
}

/* ── Row menu (fixed so the scrolling table does not clip it) ─────────── */
.pg-menu {
  position: fixed; z-index: 1065; width: 230px; padding: .35rem;
  background: var(--ml-surface); border: 1px solid var(--ml-line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
.pg-menu-item {
  display: flex; align-items: flex-start; gap: .65rem; width: 100%; padding: .55rem .7rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--ml-ink);
  font-size: .85rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.pg-menu-item i { width: 1rem; margin-top: .2rem; text-align: center; }
.pg-menu-item small { display: block; font-size: .74rem; font-weight: 500; color: var(--ml-muted); }
.pg-menu-item:hover { background: var(--ml-soft); color: var(--ml-ink); }
.pg-menu-item.danger { color: var(--ml-red); }
.pg-menu-item.danger:hover { background: var(--ml-red-50); color: var(--ml-red); }
.pg-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--ml-line); }