/* Row marks (public/js/row-marks.js). Nothing here takes table space:
   the dot sits in the ID cell's left padding, "last opened" is an inset edge,
   the red dot rides on the order-number badge. The dots and edge show only
   while the person's Markers switch is on (body.rm-on). */
/* The dot hangs off the left of the ID badge, inside the cell's padding, so it
   lines up with the badge however tall the row is. */
.rm-wrap { position: relative; display: inline-block; }

/* "Working on" dot — invisible until the row is hovered, solid amber when set.
   The BUTTON is a 22x36 invisible hit area (so a near-miss doesn't open the
   row); the visible 11px circle is drawn by ::before inside it. */
.rm-dot {
  position: absolute; left: -24px; top: 50%;
  width: 22px; height: 36px; margin-top: -18px;
  min-height: 0; padding: 0; margin-left: 0; box-sizing: border-box; /* crm-theme gives every button min-height 34px */
  border: 0; border-radius: 6px; background: transparent;
  cursor: pointer; opacity: 0;
}
.rm-dot::before {
  content: ''; position: absolute; left: 5.5px; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px; box-sizing: border-box;
  border: 1.5px solid #b8c4d6; border-radius: 50%; background: transparent;
}
tr:hover .rm-dot, .rm-dot:focus-visible { opacity: 1; }
.rm-dot:hover::before { border-color: #d97706; }
.rm-dot:focus-visible { outline: none; }
.rm-dot:focus-visible::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a3a6b; }
.rm-dot.is-on { opacity: 1; }
.rm-dot.is-on::before { background: #f59e0b; border-color: #f59e0b; }
/* With Markers on, the ID cell gets room on its left for the click area: the
   lists sit in an overflow-x scroll box that clips anything past the cell's
   edge (normal padding is 14px). Markers off = layout exactly as before. */
body.rm-on td.rm-cell { padding-left: 30px !important; }

/* No hover on touch screens: keep a faint ring, a little bigger. */
@media (pointer: coarse) {
  .rm-dot { opacity: .55; }
  .rm-dot::before { width: 14px; height: 14px; margin-top: -7px; left: 4px; }
}

/* The row opened last in this tab. */
body.rm-on tr.rm-last > td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }

/* Markers switch OFF (the default): no dots, no edge. Red unopened dots stay. */
body:not(.rm-on) .rm-dot { display: none; }

/* "Markers" button next to Filters: icon only, amber icon when on. */
.df-tbtn.rm-tbtn { width: 40px; padding: 0; justify-content: center; color: #64748b; flex: 0 0 auto; }
#tab-leads .lead-tools .df-tbtn.rm-tbtn { width: 36px; padding: 0; }
/* admin.css (phones) sets every Leads tool to width:auto !important, which
   collapses this icon-only button to 17px. Keep its 36px tap area. */
#tab-leads .lead-tools > .df-tbtn.rm-tbtn { width: 36px !important; }
.df-tbtn.rm-tbtn.is-on { color: #d97706; }
.df-tbtn.rm-tbtn.is-on svg { fill: #f59e0b; stroke: #d97706; }

/* Its popup. */
.rm-pop {
  position: fixed; z-index: 2000; width: 260px; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: #fff; border: 1px solid #dfe4ec; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 12px 14px;
  font-size: 13px; color: #334155;
}
.rm-pop[hidden] { display: none; }
.rm-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rm-pop-title { font-weight: 700; color: #0A2540; font-size: 13.5px; }
.rm-help {
  width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid #c4d0e0; background: #fff; color: #475569;
  font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer;
}
.rm-help:hover, .rm-help[aria-expanded="true"] { border-color: #1a3a6b; color: #1a3a6b; background: #eef3fb; }
.rm-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-weight: 600; margin: 0; }
.rm-switch {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 34px; height: 20px; min-height: 0; padding: 0; border: 0; border-radius: 10px;
  background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s;
}
.rm-switch::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s;
}
.rm-switch:checked { background: #1a3a6b; }
.rm-switch:checked::before { transform: translateX(14px); }
.rm-switch:focus-visible { outline: 2px solid #1a3a6b; outline-offset: 2px; }
.rm-help-text { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f5; color: #475569; line-height: 1.45; font-size: 12.5px; }
.rm-help-text p { margin: 0 0 6px; }
.rm-help-text p:last-child { margin-bottom: 0; }

/* Orders: not opened yet. */
tr.rm-unseen .order-row-orderid { position: relative; }
tr.rm-unseen .order-row-orderid::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e11d48; box-shadow: 0 0 0 2px #fff;
}

/* Phones (≤680px, where crm-theme stacks the toolbar into a column): keep the
   Markers button on the SAME row as Filters instead of alone on its own line,
   and give the search box the full width (Quotes had a fixed 260px inline). */
@media (max-width: 680px) {
  body.crm-app #tab-quotes .toolbar .filters,
  body.crm-app #tab-orders .toolbar .filters {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px !important; align-items: stretch !important;
  }
  #tab-quotes .toolbar .filters > .input-box,
  #tab-orders .toolbar .filters > .input-box { grid-column: 1 / -1; width: 100% !important; }
  #tab-quotes .toolbar .filters > .df-tbtn-filter,
  #tab-orders .toolbar .filters > .df-tbtn-filter { width: 100%; }
  #tab-quotes .toolbar .filters > .rm-tbtn,
  #tab-orders .toolbar .filters > .rm-tbtn { width: 44px !important; height: auto; min-height: 40px; }
  .rm-switch { width: 38px; height: 22px; }
  .rm-switch::before { width: 18px; height: 18px; }
  .rm-switch:checked::before { transform: translateX(16px); }
  .rm-help { width: 26px; height: 26px; font-size: 13px; }
}