/* ============================================================
   Fuse CRM — the pager
   ============================================================
   Used by Hunt and Contacts. Loaded from header.php alongside
   mobile.css, so any list can use it without its own stylesheet.
   ============================================================ */

.pager{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-soft)}
.pager:first-child{border-top:none;border-bottom:1px solid var(--line)}
.pg-count strong{color:var(--ink);font-variant-numeric:tabular-nums}

.pg-nums{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.pg{display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;border-radius:7px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  text-decoration:none;font-size:13px;font-variant-numeric:tabular-nums}
.pg:hover{border-color:var(--brand-lift);color:var(--brand-lift);text-decoration:none}
.pg.on{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;font-weight:650}
/* An arrow with nowhere to go is shown, not hidden: the row keeps its shape
   as you page, so the numbers do not shift under the cursor. */
.pg.off{opacity:.35;pointer-events:none}
.pg-gap{padding:0 2px;color:var(--ink-soft)}

.pg-jump label,.pg-per label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.pg-input{width:64px;padding:6px 8px;border:1px solid var(--line-strong);
  border-radius:7px;font:inherit;font-size:13px;background:#fff;text-align:center}
.pg-per select{padding:6px 8px;border:1px solid var(--line-strong);border-radius:7px;
  font:inherit;font-size:13px;background:#fff;color:var(--ink)}
.pg-per{margin-left:auto}

@media (max-width:760px){
  .pager{gap:10px;padding:10px 12px}
  .pg-per{margin-left:0}
  .pg-jump{display:none}          /* a number field plus a keyboard is worse than tapping */
  .pg-count{flex:1 1 100%}
}

/* ---- when they were last spoken to, on each row ---- */
.crow-contact{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  margin-left:auto;padding-left:14px;text-align:right;white-space:nowrap}
.crow-when{display:flex;flex-direction:column;gap:1px}
.cw-big{font-size:13.5px;font-weight:650;color:var(--ink)}
.cw-sub{font-size:11px;color:var(--ink-soft)}

/* Recent is quietly green, stale and never-contacted are amber. Those are
   the rows worth acting on, which is the reason for putting this on a list
   rather than leaving it on the record. */
.crow-when.warm .cw-big{color:var(--ok)}
.crow-when.cold .cw-big{color:#8a5414}

@media (max-width:760px){
  .crow-contact{align-items:flex-start;text-align:left;margin-left:0;padding-left:0;
    margin-top:3px}
  .crow-when{flex-direction:row;align-items:baseline;gap:7px;flex-wrap:wrap}
}

/* ---- "when did this happen" on the capture box ---- */
.cap-when{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.cap-when input{padding:6px 9px;border:1px solid var(--line-strong);border-radius:7px;
  font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
/* Filled in, it is doing something unusual, so it says so. */
.cap-when input:not(:placeholder-shown),
.cap-when input[value]:not([value=""]){border-color:var(--brand-rose)}
/* A datetime box needs more room than a date box. */
.cap-when input[type=datetime-local]{min-width:200px}