/* ==========================================================================
   Mishnah — legacy dialogs, brought onto the design system
   ==========================================================================

   One surface still renders its original markup: the dialogs built in
   JavaScript - add/edit pledge and delete confirmation in js/manage-chart.js,
   collaborators in js/manage-chart-form.js, members and edit-info in
   js/organization-form.js. Between them they emit .popup-title, .perek-popup,
   .manage-buttons, .collaborator-card and the ACSS button classes.

   Rewriting those three files is the real fix and is still the plan. In the
   meantime the dialogs opened inside .mishnah-ui looking like a different,
   older application, which is worse than either option on its own.

   This file maps their class names onto the new tokens so the whole app reads
   as one thing. It is a bridge, deliberately:

     - Every selector is scoped to .mishnah-ui, so nothing outside the plugin's
       own surfaces is touched. The same classes appear on pages this file is
       not loaded on, and they keep their original look there.
     - It only restyles. No layout is inverted, no element is hidden, nothing
       structural is assumed - so it cannot break a flow whose markup it does
       not fully know.
     - As each dialog is rebuilt, delete its rules here.

   It used to be five sections longer. My Pledges, Manage Pledge, Edit Profile
   and the two chart screens have been rebuilt and the PHP that emitted their
   markup is deleted, so those sections styled nothing and are gone with it.

   Loads after mishnah-ui.css and mishnah-form-ui.css, whose tokens it uses.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Bottom sheet stacking
   --------------------------------------------------------------------------

   Plainsheet positions itself at z-index 2 and does not use showModal(), so
   it never enters the top layer. The chart page's sticky toolbar sits at 20,
   which put the filter row and seder bar on top of the open sheet.

   Raised above SweetAlert's 1060 as well, so a sheet opened over a Swal - the
   confirm-then-edit flows do this - lands in front of it rather than behind.
   -------------------------------------------------------------------------- */
.pbs-root { z-index: 1070; }
.pbs-backdrop { z-index: 1065; }


/* --------------------------------------------------------------------------
   2. Legacy dialogs
   .mishnah-manage-popup (add/edit pledge), .manage-collaborators-modal-content
   and the edit-info modal all share this chrome.
   -------------------------------------------------------------------------- */
.mishnah-ui .popup-title,
.mishnah-ui .mishnah-manage-popup .popup-title {
  font-family: var(--m-font);
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: hsl(var(--m-fg));
  text-align: start;
}

.mishnah-ui .popup-subtitle {
  margin-top: 0.3rem;
  margin-bottom: 2rem;
  font-size: 1.4rem;
  color: hsl(var(--m-muted-fg));
  text-align: start;
}

.mishnah-ui .popup-form-wrapper { margin: 1.6rem 0; }
.mishnah-ui .popup-form-wrapper form { max-width: none; }

/* --- Perek grid ---------------------------------------------------------- */
.mishnah-ui .pereks-popup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
  gap: 0.6rem;
  padding: 0;
  margin-bottom: 1.6rem;
}

.mishnah-ui .perek-popup {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid hsl(var(--m-input));
  border-radius: calc(var(--m-radius) - 4px);
  background: hsl(var(--m-bg));
  color: hsl(var(--m-fg));
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  transition: background-color 0.12s var(--m-ease),
              border-color 0.12s var(--m-ease), color 0.12s var(--m-ease);
}

.mishnah-ui .perek-popup.available {
  background: hsl(var(--m-bg));
  color: hsl(var(--m-fg));
  border-color: hsl(var(--m-input));
}

.mishnah-ui .perek-popup.available:hover {
  border-color: hsl(var(--m-brand));
  background: hsl(var(--m-brand-soft));
}

/* Green means finished here, matching the visitor's dialog */
.mishnah-ui .perek-popup.complete {
  background: hsl(var(--m-viz-done));
  border-color: hsl(var(--m-viz-done));
  color: #fff;
}

.mishnah-ui .perek-popup.in-progress {
  background: hsl(var(--m-muted));
  border-color: hsl(var(--m-border));
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .perek-popup.unavailable {
  background: hsl(var(--m-muted));
  border-color: hsl(var(--m-border));
  color: hsl(var(--m-muted-fg));
  opacity: 0.5;
}

.mishnah-ui .perek-popup.selected {
  background: hsl(var(--m-brand));
  border-color: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
  transform: none;          /* the old rule scaled it 1.12 and cast a shadow */
  box-shadow: none;
}

.mishnah-ui .perek-popup .checkmark {
  font-size: 1.8rem;
  color: currentColor;
}

.mishnah-ui .select-all-wrapper {
  text-align: start;
  margin: 0 0 1rem;
}

.mishnah-ui .select-all-btn {
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: hsl(var(--m-brand));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mishnah-ui .select-all-btn:hover {
  background: none;
  color: hsl(var(--m-brand-hover));
}

/* --- Dialog footer ------------------------------------------------------- */
.mishnah-ui .manage-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  margin-top: 1.6rem;
  border-top: 1px solid hsl(var(--m-border));
}

.mishnah-ui .manage-buttons--simple { justify-content: space-between; }

.mishnah-ui .manage-cancel,
.mishnah-ui .manage-delete,
.mishnah-ui .manage-submit-add,
.mishnah-ui .manage-submit-edit,
.mishnah-ui .manage-submit-private {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 3.6rem;
  padding: 0 1.6rem;
  border-radius: calc(var(--m-radius) - 2px);
  font-family: var(--m-font);
  font-size: 1.4rem;
  font-weight: 500;
  transition: background-color 0.15s var(--m-ease);
}

.mishnah-ui .manage-cancel {
  border: 1px solid hsl(var(--m-input));
  background: hsl(var(--m-bg));
  color: hsl(var(--m-fg));
  box-shadow: var(--m-shadow-sm);
}

.mishnah-ui .manage-cancel:hover { background: hsl(var(--m-hover)); }

/* Destructive, so it stays quiet until you reach for it */
.mishnah-ui .manage-delete {
  margin-inline-end: auto;
  border: 1px solid hsl(var(--m-danger) / 0.3);
  background: transparent;
  color: hsl(var(--m-danger));
  font-weight: 500;
}

.mishnah-ui .manage-delete:hover {
  background: hsl(var(--m-danger) / 0.08);
  color: hsl(var(--m-danger));
}

.mishnah-ui .manage-submit-add,
.mishnah-ui .manage-submit-edit,
.mishnah-ui .manage-submit-private {
  border: none;
  background: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
  box-shadow: var(--m-shadow-sm);
}

.mishnah-ui .manage-submit-add:hover,
.mishnah-ui .manage-submit-edit:hover,
.mishnah-ui .manage-submit-private:hover {
  background: hsl(var(--m-brand-hover));
  transform: none;
  opacity: 1;
}

/* --- Collaborators ------------------------------------------------------- */
.mishnah-ui .collaborator-card {
  border: 1px solid hsl(var(--m-border));
  border-radius: var(--m-radius);
  background: hsl(var(--m-card));
  padding: 1.2rem;
  gap: 0.8rem;
}

.mishnah-ui .collaborator-card:hover {
  border-color: hsl(var(--m-fg) / 0.14);
  box-shadow: var(--m-shadow-sm);
}

.mishnah-ui .collaborator-name { font-size: 1.5rem; }
.mishnah-ui .collaborator-name strong { color: hsl(var(--m-fg)); }
.mishnah-ui .collaborator-email { font-size: 1.4rem; color: hsl(var(--m-muted-fg)); }
.mishnah-ui .collaborator-date { font-size: 1.3rem; color: hsl(var(--m-muted-fg)); }

.mishnah-ui .invite-collaborator-form-modal {
  background: hsl(var(--m-muted) / 0.6);
  border: 1px solid hsl(var(--m-border));
  border-radius: var(--m-radius);
  padding: 1.6rem;
}

.mishnah-ui .invite-collaborator-form-modal h4 {
  font-family: var(--m-font);
  font-size: 1.5rem;
  color: hsl(var(--m-fg));
}

/* ACSS button classes the old modals carry */
.mishnah-ui .btn--base,
.mishnah-ui .btn--secondary,
.mishnah-ui .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding: 0 1.6rem;
  border: none;
  border-radius: calc(var(--m-radius) - 2px);
  font-family: var(--m-font);
  font-size: 1.4rem;
  font-weight: 500;
  transition: background-color 0.15s var(--m-ease);
}

.mishnah-ui .btn--base {
  background: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
}

.mishnah-ui .btn--base:hover { background: hsl(var(--m-brand-hover)); opacity: 1; }

.mishnah-ui .btn--secondary {
  background: hsl(var(--m-bg));
  color: hsl(var(--m-fg));
  border: 1px solid hsl(var(--m-input));
}

.mishnah-ui .btn--secondary:hover { background: hsl(var(--m-hover)); transform: none; }

.mishnah-ui .btn-danger {
  background: transparent;
  border: 1px solid hsl(var(--m-danger) / 0.3);
  color: hsl(var(--m-danger));
}

.mishnah-ui .btn-danger:hover {
  background: hsl(var(--m-danger) / 0.08);
  transform: none;
}

.mishnah-ui .btn--s { font-size: 1.3rem; min-height: 3.2rem; padding: 0 1.2rem; }