/* rowmenu.css — v495
 * ===========================================================================
 * The "kebab" row-action menu. See static/js/rowmenu.js for why the popup is
 * position:fixed rather than absolute (v458 .tblwrap clips it otherwise).
 * ------------------------------------------------------------------------- */

.rm { display: inline-block; position: relative; line-height: 0; }

/* 36px here, not 44. v455 rule 1.1 gives every control a 44px BOX -- and this
   control replaces three or four .mini buttons whose own boxes were 26px, so
   the touch area goes UP either way. 44 would make a ledger row taller than the
   text in it on a phone; the pseudo-element below buys the rest of the target
   without spending layout on it, which is the same trick .mini rows needed. */
.rm-trig {
  position: relative;
  min-width: 36px;
  height: 32px;
  padding: 0;
  background: var(--btn);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-weight: 700;font-size: 17px;line-height: 1;font-family: inherit;
  letter-spacing: 0;
  cursor: pointer;
}
/* The invisible half of the tap target. -6px each side takes 36x32 to 48x44
   without moving a single pixel of layout. */
.rm-trig::after {
  content: "";
  position: absolute;
  top: -6px; right: -6px; bottom: -6px; left: -6px;
}
.rm-trig:hover { border-color: var(--accent); }
.rm-trig.on { background: var(--accent); border-color: var(--accent); color: #04120c; }
.rm-trig:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* `hidden` is display:none in the UA sheet, but `display:flex` below is a more
   specific author rule and would BEAT it -- the menu would render open on every
   row. This line is the whole reason the component works. Do not remove it. */
.rm-pop[hidden] { display: none !important; }

.rm-pop {
  position: fixed;
  /* Above EVERYTHING that floats, and the number is measured, not guessed:
     sticky table headers are 1, .jc-switchrow is 6, the sidebar drawer 120-130,
     the .fin-ov modal 9999 and #fin-fab 10000. The FAB is the one that matters —
     it is fixed to the bottom-right of the viewport and it is VISIBLE on the
     History tab (syncFab hides it only on Add), which is exactly where the right-
     aligned row menu opens. At 4000 a menu on one of the lower rows came out
     underneath it. A popup the user just opened outranks a button that is always
     there. */
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  max-width: calc(100vw - 16px);       /* a 390px phone, minus place()'s 8px margins */
  padding: 6px;
  background: var(--card, var(--panel,  var(--panel)));
  border: 1px solid var(--line2);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  text-align: left;
  line-height: normal;
}

/* The items are the caller's OWN buttons, moved not rebuilt, so they arrive
   wearing .mini (and sometimes .danger). `.rm-pop > button.mini` outranks
   `.mini` on specificity, which is what lets a 12px inline chip become a
   full-width 44px menu row without the renderer knowing. */
.rm-pop > button,
.rm-pop > a,
.rm-pop > button.mini,
.rm-pop > a.mini {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 44px;                    /* a menu row IS a primary target */
  margin: 0;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;font-size: 13.5px;line-height: 1.2;font-family: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.rm-pop > button:hover,
.rm-pop > a:hover { background: var(--btn); }
.rm-pop > button:focus-visible,
.rm-pop > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rm-pop > button.danger,
.rm-pop > button.danger.mini { color: #ff6b6b; }
.rm-pop > button.danger:hover { background: rgba(229, 72, 77, .14); }
.rm-pop > button.confirm,
.rm-pop > button.confirm.mini { color: #51cf66; }

/* A destructive item is worth separating from the ones you reach for daily --
   the gap is the only thing standing between "Copy" and "Delete" at speed. */
.rm-pop > button.danger:first-child { margin-top: 0; }
.rm-pop > button.danger { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 0; }
.rm-pop > button.danger:only-child { margin-top: 0; border-top: 0; }

/* A <select> can legitimately live in a row menu (Categories' per-row default
   account). It keeps its own control chrome -- a dropdown that looked like a
   menu item would hide the fact that it is a dropdown. */
.rm-pop > select,
.rm-pop > select.mini {
  width: 100%;
  min-height: 40px;
  max-width: none;
  margin: 2px 0;
  padding: 0 10px;
  background: var(--btn);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;font-size:var(--fld-fs,13px);line-height: 1.2;font-family: inherit;
}
.rm-pop > .rm-lbl {
  padding: 6px 12px 2px;
  font-weight: 700;font-size: 10.5px;line-height: 1.2;font-family: inherit;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted2);
}

/* V529 -- text/date/number inputs in a row menu.
 * The popover already styled its buttons, links and selects, but never an
 * <input>: nothing had put a form in one until the subscription reminder
 * fields. Without this, a date field renders at the browser default width and
 * spills out of a 210px popup. Same 40px minimum height as the buttons beside
 * it, which is also the touch-target floor the responsive sweep checks.
 * `box-sizing` is spelled out because a 100% width plus padding is the classic
 * way a control ends up 20px wider than its parent. */
.rm-pop > input,
.rm-pop > input.mini {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  max-width: none;
  margin: 2px 0;
  padding: 0 10px;
  background: var(--btn);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;font-size:var(--fld-fs,13px);line-height: 1.2;font-family: inherit;
}
/* A <label> carrying .rm-lbl is the same caption the popover already draws for
   its selects -- it just also points at a field now. The rule that styles
   .rm-lbl is an element-agnostic child selector, so nothing more is needed
   than making the label fill the row rather than shrink-wrap its text. */
.rm-pop > label.rm-lbl { display: block; }
/* The "reminder only" note. Muted and small: it is a caveat, not an action, and
   it must not read as another menu item. */
.rm-pop > .sub {
  display: block;
  padding: 4px 12px 2px;
  font-weight: 400;font-size: 11px;line-height: 1.35;font-family: inherit;
  color: var(--muted2);
  white-space: normal;
}

/* An action column that now holds one 36px button should stop reserving room
   for four. Applies only where a renderer opted in with .rm-cell. */
td.rm-cell, .rm-cell { white-space: nowrap; text-align: right; width: 1%; }


/* ===========================================================================
 * v497 — the labelled / sticky variant
 * ---------------------------------------------------------------------------
 * Same popover, a different face. Used by the Budget workbook's year picker,
 * which replaced a `<select multiple size=3>` — a control that requires the
 * reader to know that ctrl-click exists, shows three of N years at a time, and
 * on a touch screen cannot select two things at all.
 * ------------------------------------------------------------------------- */
.rm-trig.rm-trig-lbl {
  width: auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  font-weight: 600;font-size: 12.5px;line-height: 1;font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.rm-pop.rm-sticky { min-width: 210px; padding: 8px; gap: 0; }
.rm-pop.rm-sticky .rm-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 8px;
  font-weight: 600;font-size: 13px;line-height: 1.2;font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.rm-pop.rm-sticky .rm-opt:hover { background: var(--btn); }
.rm-pop.rm-sticky .rm-opt input { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.rm-pop.rm-sticky .rm-sep { margin: 6px 2px; border-top: 1px solid var(--line); }
/* A disabled row must LOOK disabled — ticking "All years" greys the individual
   years rather than silently ignoring them. */
.rm-pop.rm-sticky .rm-opt.off { opacity: .42; cursor: default; }
.rm-pop.rm-sticky .rm-opt.off:hover { background: transparent; }

/* V652: a line of explanation inside a row menu, for the case where the action a
   reader is looking for is deliberately absent. RaffleHub's winner rows use it to
   say "Voided — no certificate" where the Certificate link would be: an empty menu
   reads as a broken menu, and a missing option with no reason is what sends people
   to ask why. */
.rm-pop .rm-note {
  display: block; padding: 7px 10px; font-size: 12px; line-height: 1.4;
  color: var(--muted2, #7fc8a8); white-space: normal; max-width: 210px;
}