/* ============================================================
   LA VIA MISSIONS — Admin dashboard
   Uses tokens.css for color/type. Layout = sidebar + main pane.
   ============================================================ */

body { background: var(--canvas); color: var(--ink); }

.admin {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.admin__sidebar {
  background: var(--navy-900);
  color: rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  padding: 22px 18px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 28px;
  padding: 0 6px;
}
.admin__brand svg { color: #fff; }
.admin__brand span {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.admin__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: auto;
}
.admin__nav button {
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.admin__nav button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin__nav button.is-active {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.admin__sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
}
.admin__view {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 8px 6px;
}
.admin__view:hover { color: #fff; }
.admin__change-pw {
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  padding: 6px;
  font-family: inherit;
  text-align: left;
}
.admin__change-pw:hover { color: #fff; }
.admin__reset {
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  padding: 6px;
  font-family: inherit;
  text-align: left;
}
.admin__reset:hover { color: rgba(255,200,200,0.95); }

/* ---- Main pane ---- */
.admin__main {
  padding: 32px clamp(20px, 4vw, 48px) 80px;
  min-width: 0;
}
.admin__section { display: none; }
.admin__section.is-active { display: block; }
.admin__section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.admin__section h1 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.admin__section header p.sub {
  color: var(--ink-3);
  font-size: 14px;
  margin: 6px 0 0;
}
.admin__section > p {
  color: var(--ink-3);
  margin-bottom: 16px;
}

/* ---- Stat tiles ---- */
.admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.admin-stat {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.admin-stat .num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--navy-800);
  font-weight: 600;
  line-height: 1;
}
.admin-stat .lbl {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ---- List items ---- */
.admin__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-item {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 16px 12px 12px;
  transition: box-shadow .15s;
}
.admin-item:hover { box-shadow: 0 6px 18px rgba(20,36,80,0.08), 0 0 0 1px var(--hairline); }
.admin-item__photo {
  width: 80px;
  height: 80px;
  border-radius: var(--r-sm);
  background: var(--canvas-3) center/cover no-repeat;
  flex: none;
}
.admin-item__photo--blank {
  background: var(--canvas-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-500);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.admin-item__body { min-width: 0; }
.admin-item__body h3 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
}
.admin-item__body .meta {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.admin-item__body .meta .pill {
  background: var(--canvas-2);
  color: var(--navy-800);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.admin-item__actions {
  position: relative;
  display: flex;
  gap: 6px;
  flex: none;
}
.admin-item__actions button {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--canvas-2);
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.admin-item__actions button:hover { background: var(--navy-800); color: #fff; }
.admin-item__actions .danger:hover { background: #b03a3a; color: #fff; }

/* ---- Actions dropdown menu (patient rows) ---- */
.actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 210px;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(20,36,80,0.18), 0 0 0 1px var(--hairline);
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}
.actions-menu[hidden] { display: none; }
.actions-menu:not([hidden]) { display: flex; }
.actions-menu button,
.actions-menu__label {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--navy-800);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.actions-menu button:hover { background: var(--canvas-2); color: var(--navy-900); }
/* Flip upward when there is no room below (set by JS on open). */
.actions-menu--up {
  top: auto;
  bottom: calc(100% + 6px);
}
.actions-menu__label {
  color: var(--ink-3);
  cursor: default;
}
.actions-menu .actions-menu__danger { color: #b03a3a; }
.actions-menu .actions-menu__danger:hover { background: #b03a3a; color: #fff; }

/* ---- "Featured on home" badge next to the patient name ---- */
.pill--featured {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  background: var(--navy-800);
  color: #fff;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.admin-empty {
  background: var(--paper);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 36px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}

/* ---- Invite copy-link fallback (shown when the invite email can't be sent) ---- */
.admin-invite-banner {
  position: relative;
  background: var(--canvas-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 16px 44px 16px 16px;
  margin-bottom: 14px;
}
.admin-invite-banner[hidden] { display: none; }
.admin-invite-banner p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.admin-invite-banner__row {
  display: flex;
  gap: 8px;
}
.admin-invite-banner__row input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.admin-invite-banner__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
}
.admin-invite-banner__close:hover { color: var(--navy-800); }

/* ---- Settings form ---- */
.admin-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 720px;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
}
.admin-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.admin-form input,
.admin-form select,
.admin-form textarea {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.admin-form textarea { resize: vertical; min-height: 80px; }
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.admin-form__footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}
.admin-form__msg {
  color: var(--success);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
  align-self: center;
  margin-right: auto;
  opacity: 0;
  transition: opacity .2s;
}
.admin-form__msg.is-shown { opacity: 1; }

/* ---- FAQ editor (repeatable rows inside the settings form) ---- */
.faq-editor { display: flex; flex-direction: column; gap: 14px; }
.faq-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--canvas);
}
.faq-row__fields { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.faq-row__fields label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.faq-row__fields input,
.faq-row__fields textarea {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.faq-row__fields textarea { resize: vertical; min-height: 64px; }
.faq-row__remove {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.faq-row__remove:hover { background: #b03a3a; border-color: #b03a3a; color: #fff; }

/* ---- Dialog ---- */
dialog.admin-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(920px, 94vw);
  max-height: 90vh;
}
dialog.admin-dialog::backdrop {
  background: rgba(15, 30, 80, 0.55);
  backdrop-filter: blur(2px);
}
.admin-dialog__inner {
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(20,36,80,0.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  min-height: 0;
}
.admin-dialog__inner > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.admin-dialog__head { flex: none; }
.admin-dialog__foot { flex: none; }
.admin-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hairline);
}
.admin-dialog__head h2 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}
.admin-dialog__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--canvas-2);
  color: var(--ink-2);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-dialog__close:hover { background: var(--canvas-3); color: var(--ink); }
.admin-dialog__body {
  padding: 24px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
.admin-dialog__body label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.admin-dialog__body input,
.admin-dialog__body select,
.admin-dialog__body textarea {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline-strong);
  background: var(--paper);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
}
.admin-dialog__body textarea { resize: vertical; min-height: 80px; }
.admin-dialog__body input:focus,
.admin-dialog__body select:focus,
.admin-dialog__body textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.admin-dialog__body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---- Inline notes / success / error messages inside a dialog ---- */
.admin-dialog__note {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.admin-dialog__msg {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  background: var(--canvas-2);
  color: var(--ink-2);
  word-break: break-word;
}
.admin-dialog__msg--err { background: rgba(196,68,51,0.1); color: #c43; }
.admin-dialog__msg--ok  { background: rgba(30,120,80,0.12); color: #1e7850; }
.admin-dialog__body .photo-preview {
  width: 120px;
  height: 150px; /* 4:5 portrait, matches the crop output */
  border-radius: var(--r-sm);
  background: var(--canvas-3) center/cover no-repeat;
  border: 1px solid var(--hairline);
  flex: none;
}

/* Photo upload + crop widget */
.photo-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.photo-widget__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.photo-widget__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.photo-widget__controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.photo-widget__file {
  cursor: pointer;
  align-self: flex-start;
}
.photo-widget__file input[type="file"] { display: none; }
.photo-widget__file.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.photo-widget__msg {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  min-height: 14px;
}

/* Crop editor: fixed 4:5 viewport the image is dragged/zoomed within */
.photo-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas);
  max-width: 320px;
}
.photo-editor[hidden] { display: none; }
.photo-viewport {
  position: relative;
  width: 240px;
  height: 300px; /* 4:5 */
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--canvas-3);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.photo-viewport.is-grabbing { cursor: grabbing; }
.photo-viewport__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.photo-viewport__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.photo-editor__tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.photo-zoom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.photo-zoom input[type="range"] { flex: 1; margin: 0; }
.photo-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-dialog__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
}

/* ---- Patient dialog: labeled sections (photo/basics/story/about/costs/campaign) ---- */
.admin-dialog__body fieldset.dlg-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-dialog__body fieldset.dlg-section:not(:first-of-type) {
  /* Combined with .admin-dialog__body's own 14px grid gap, this yields the
     ~28px of breathing room between sections called for in the design. */
  margin-top: 14px;
}
.dlg-section__title {
  display: block;
  width: 100%;
  padding: 0 0 8px;
  margin: 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
}

/* ---- Form sections (collapsible) inside dialogs ---- */
.admin-dialog__body details.form-section {
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0;
  margin: 0 0 14px;
  background: var(--paper);
}
.admin-dialog__body details.form-section[open] { padding-bottom: 14px; }
.admin-dialog__body details.form-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-dialog__body details.form-section > summary::-webkit-details-marker { display: none; }
.admin-dialog__body details.form-section > summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 8px;
}
.admin-dialog__body details.form-section[open] > summary::after { content: "−"; }
.admin-dialog__body details.form-section > .form-section__body {
  padding: 4px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Repeater rows (tiers, supporters) ---- */
.repeater {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.repeater__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--canvas-2);
  border-radius: var(--r-sm);
}
.repeater__row--supporter {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.7fr) auto;
}
.repeater__row input,
.repeater__row select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
}
.repeater__remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.repeater__remove:hover { background: rgba(220,80,80,0.12); color: #c43; }
.repeater__add {
  align-self: flex-start;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  color: var(--navy-700);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.repeater__add:hover { background: var(--canvas-2); }

/* ---- Login gate ---- */
.admin-login {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.admin-login[hidden] { display: none; }
.admin-login__card {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 36px 40px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-login__card h1 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-size: 26px;
  font-weight: 600;
  margin: 0;
}
.admin-login__card .sub {
  color: var(--ink-3);
  font-size: 13px;
  margin: 0 0 8px;
}
.admin-login__card label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-login__card input {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  font-weight: 400;
  padding: 10px 14px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.admin-login__card input:focus {
  outline: none;
  border-color: var(--navy-700);
}
.admin-login__card button {
  margin-top: 8px;
}
.admin-login__err {
  margin: 0;
  color: #c43;
  font-size: 13px;
  text-align: center;
}
.admin-login__forgot {
  margin: 0;
  font-size: 13px;
  text-align: center;
}
.admin-login__forgot a {
  color: var(--navy-700);
}

/* ---- Mobile ---- */
@media (max-width: 760px) {
  .admin { grid-template-columns: 1fr; }
  .admin__sidebar { position: relative; height: auto; flex-direction: row; padding: 12px 14px; overflow-x: auto; flex-wrap: wrap; }
  .admin__brand { margin-bottom: 0; margin-right: 16px; flex: none; }
  .admin__nav { flex-direction: row; gap: 4px; flex: 1; flex-wrap: wrap; }
  .admin__sidebar-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: none;
    padding-top: 0;
    flex: none;
  }
  .admin__sidebar-footer .admin__reset { display: none; }
  .admin-item { grid-template-columns: 60px minmax(0, 1fr); }
  .admin-item__photo { width: 60px; height: 60px; }
  .admin-item__actions { grid-column: 1 / -1; }
  .admin-form .form-row { grid-template-columns: 1fr; }
  .admin-dialog__body .form-row { grid-template-columns: 1fr; }
  /* Grid items default to min-width: auto, so a single wide row (e.g. the
     Givebutter-slug field's inline flex row with its "Create in Givebutter"
     button) can force every stacked row in the shared column to its width,
     overflowing the dialog. Let rows shrink, and let that one inline row
     wrap instead of forcing the column wide. */
  .admin-form > *,
  .admin-dialog__body > *,
  .admin-form .form-row > *,
  .admin-dialog__body .form-row > * { min-width: 0; }
  .admin-form [style*="display:flex"],
  .admin-dialog__body [style*="display:flex"] { flex-wrap: wrap; }
}

/* Clickable patient rows: whole row opens the editor; Actions reveals on hover. */
.admin-item--clickable { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.admin-item--clickable:hover { box-shadow: 0 8px 24px rgba(20,36,80,0.10), 0 0 0 1px var(--hairline-strong); }
.admin-item--clickable .admin-item__actions { opacity: 0; transition: opacity .15s; }
.admin-item--clickable:hover .admin-item__actions,
.admin-item--clickable:focus-within .admin-item__actions,
.admin-item--clickable .admin-item__actions:has(.actions-menu:not([hidden])) { opacity: 1; }
@media (hover: none) {
  /* Touch devices have no hover — keep Actions always visible. */
  .admin-item--clickable .admin-item__actions { opacity: 1; }
}

/* Money input: fixed "$" prefix; the field itself holds only the amount. */
.money-input { position: relative; display: block; }
.money-input__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 14px;
  pointer-events: none;
}
.money-input input { padding-left: 28px; width: 100%; }