/* ==========================================================================
   INLINE EDIT — module pages (/m/<key>): "press to edit, + icon to add"
   Nunu, 29 Sep 2026: "Remove the bulky entry and make it like the staff format.
   Press to edit and to add just press icon below."

   Same mechanism as the staff table (a hidden checkbox + a label, no JavaScript),
   scoped to its own classes so nothing else on the dashboard changes.
   The redesign pass owns grid.css — this is a layer, loaded after it.

   REVERT: delete the inline-edit.css <link> in templates/base.html and restore
   the plain form card in templates/generic.html.
   ========================================================================== */

/* the edit form row: hidden until its row's checkbox is ticked */
tr.editrow{display:none}
tr.edrow:has(.ed:checked) + tr.editrow{display:table-row}
tr.editrow > td{
  background:rgba(255,255,255,.025);
  border-top:1px solid var(--g-hair2);
  padding-top:12px;padding-bottom:14px;
}
tr.editrow .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
/* the customer-text box is the one long field: give it the whole row, or it renders as a
   cramped little box beside two short inputs (caught in the render, 29 Sep 2026) */
tr.editrow .fgrid > div:has(textarea){grid-column:1 / -1}
tr.editrow textarea{min-height:104px;width:100%;line-height:1.6}
tr.editrow .go{display:flex;align-items:center;gap:12px;margin-top:12px}
tr.editrow .editnote{font-size:11px;color:var(--faint)}

/* the pressable value */
.edrow .nm{
  cursor:pointer;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.edrow .nm:hover{color:var(--g-accent);border-bottom-color:var(--g-accent)}
.edrow:has(.ed:focus-visible) .nm{outline:1px solid var(--g-accent);outline-offset:2px}

/* the pencil affordance, used where the first column is already a link */
.edrow .pen{cursor:pointer;color:var(--g-faint);user-select:none;padding-right:8px}
.edrow .pen:hover{color:var(--g-accent)}

/* the checkboxes themselves are never seen, only their labels */
.edrow .ed,.addtoggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

/* ---- add: an icon below the list, never a form standing open ---- */
.addzone{margin-top:18px}
.addtoggle + label.addbtn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.02em;color:var(--g-ink);
  border:1px solid var(--g-hair2);background:transparent;
  padding:9px 15px;border-radius:2px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.addtoggle + label.addbtn:hover{border-color:var(--g-accent);color:var(--g-accent)}
.addtoggle + label.addbtn svg{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.addwrap{display:none;margin-top:14px}
.addtoggle:checked + label.addbtn{border-color:var(--g-accent);color:var(--g-accent)}
.addtoggle:checked + label.addbtn .plus{transform:rotate(45deg)}
.addtoggle + label.addbtn .plus{transition:transform .18s ease;display:inline-flex}
.addtoggle:checked ~ .addwrap{display:block}

/* ---- remove: a stroke-only trash on the right of each billboard entry ----
   The affordance is an icon; the permission is unchanged. The form posts to the same
   delete route, which still demands the manager PIN from a staff session and takes a
   management session as already having given it at sign-in. A plain submit button, so it
   works with JavaScript disabled. Secondary-action grey -> brand orange on hover/focus;
   no red anywhere, it is not in the palette.

   Layout: the cell is a nowrap column pinned to the right of the row (the greyed `th` in
   the header is `aria-label="Remove"`). Narrow screens do not squeeze the row into an
   overflow: the whole table already sits in `.dt .scroll` (overflow-x:auto), and the
   remove column adds one narrow cell on the end, so it stays put and scrolls with the
   table. A staff session sees its small PIN box beside the icon; management sees the icon
   alone. */
.rmth,.rmcell{width:1%;white-space:nowrap;text-align:right}
.rmcell{vertical-align:middle}
.rmform{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.rmpin{
  width:72px;padding:7px 8px;margin:0;
  font-size:11px;letter-spacing:.04em;
}
.rmbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;margin:0;
  background:transparent;border:1px solid transparent;border-radius:0;
  color:var(--g-grey);cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.rmbtn svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5}
.rmbtn:hover,.rmbtn:focus-visible{
  color:var(--g-accent);border-color:var(--g-hair2);
  outline:1px solid var(--g-accent);outline-offset:2px;
}
.sronly{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}