/* ============================================================================
   F23  SUPPLIER PRICE WATCHER
   "Supplier prices" on a job, and "Estimates against supplier prices" on the
   Pricing screen. Tokens only, from app.css, so both themes work.
   ============================================================================ */

/* ------------------------------------------------------------ on the job */
.f23-h{margin-top:4px}
.f23-list{display:grid;gap:8px;margin:0 0 10px}
.f23-row{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:var(--panel)}
.f23-row-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px;color:var(--ink)}
.f23-when,.f23-ref{font-size:12px;color:var(--ink-3)}
/* The price sits at the right on a wide drawer and drops under the name on a
   phone, so a long reference never pushes it off the edge. */
.f23-tot{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.f23-rooms{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:4px;overflow-wrap:anywhere}
.f23-acc{font-size:12.5px;color:var(--ink);margin-top:4px}
.f23-why{font-size:11.5px;line-height:1.45;color:var(--ink-3);margin-top:4px;overflow-wrap:anywhere}
/* "Not for this job": small and quiet, under the reason, so it is there when a
   filing is wrong without inviting a press when it is right. */
.f23-row-act{margin-top:8px}
.f23-row-act .f23-aside{margin-left:0}

/* ------------------------------------------------------- on Pricing */
.f23-hist{margin-top:28px}
.f23-tools{margin:0 0 10px}
.f23-diff{font-size:12px;font-weight:700}
.f23-diff.good{color:var(--good)}
.f23-diff.warn{color:var(--warn)}
.f23-none{font-size:12px;color:var(--ink-3)}
.f23-aside{margin-left:8px}
.f23-aside-form{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.f23-aside-form[hidden]{display:none}
.f23-aside-form label{display:grid;gap:6px;font-size:12.5px;color:var(--ink-2)}
.f23-aside-form input{width:100%}
.f23-aside-form .btnrow{margin-top:10px}
#f23Table td{vertical-align:top}

@media (max-width:700px){
  .f23-tot{margin-left:0;flex-basis:100%}
  .f23-aside{margin:6px 0 0}
  .f23-hist{margin-top:22px}
}