/*  Item picker — see rf-item-picker.js.
    Dense on purpose: the point is to compare twenty rows at once. */

.rf-ip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
             padding: 8px 14px; background: #f7f9ff; border-bottom: 1px solid #e3e7f3; }
.rf-ip-check { display: flex; align-items: center; gap: 5px; font-size: 12px;
               color: #46506b; cursor: pointer; user-select: none; }
.rf-ip-check input { accent-color: #102a83; }
.rf-ip-hint { font-size: 11px; color: #9aa0b1; }

.rf-ip-tbl { font-size: 12.5px; }
.rf-ip-tbl thead th { position: sticky; top: 0; z-index: 2;
                      background: #102a83; color: #fff; font-weight: 600; font-size: 10.5px;
                      text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
                      padding: 6px 8px; }
.rf-ip-tbl tbody td { padding: 4px 8px; vertical-align: middle; }
.rf-ip-tbl tbody tr { cursor: pointer; }
.rf-ip-tbl tbody tr:hover { background: #f7f9ff; }

/* where the keyboard is */
.rf-ip-tbl tbody tr.cur { background: #eef2fb; box-shadow: inset 3px 0 0 #102a83; }
/* already on the document being edited — visible, but not addable twice */
.rf-ip-tbl tbody tr.had { opacity: .5; }

.rf-ip-name { font-weight: 600; color: #23262f; }
.rf-ip-sub { color: #7b8296; font-size: .7rem; }
/* under its minimum, or nobody sells it */
.rf-ip-low { color: #a32d2d; font-weight: 600; }
/* stock is not maintained in this database — say so rather than show a zero */
.rf-ip-unknown { color: #c3c8d6; font-style: italic; font-size: .72rem; }

.rf-ip-qty { width: 92px; font-variant-numeric: tabular-nums; }
.rf-ip-qty:focus { border-color: #102a83; box-shadow: 0 0 0 .15rem rgba(16,42,131,.15); }

/*  The seller count is a button — it opens who they are and what each charged.
    Styled as a link rather than a button so the column still reads as a number. */
.rf-ip-sellers { border: none; background: transparent; padding: 0 4px;
                 font: inherit; font-weight: 600; color: #102a83;
                 text-decoration: underline; text-underline-offset: 2px;
                 cursor: pointer; }
.rf-ip-sellers:hover { background: #eef2fb; border-radius: 4px; }

.rf-sel-tbl tbody td { padding: 6px 8px; }
/* the cheapest anybody has ever charged for this item */
.rf-sel-best { color: #1a7f5a; font-weight: 700; }
.rf-sel-note { padding: 8px 14px; background: #f7f9ff; border-top: 1px solid #e3e7f3;
               font-size: 12px; color: #46506b; }

/*  The panel under a picked line on an entry form — what this item last cost,
    how fast it goes, and whether some is already on order. */
.rf-intel { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
            background: #f7f9ff; border: 1px solid #e3e7f3; border-radius: 6px;
            padding: 6px 10px; font-size: 12px; color: #46506b; margin-top: 6px; }
.rf-intel .k { color: #9aa0b1; font-size: 10px; text-transform: uppercase;
               letter-spacing: .04em; display: block; }
.rf-intel .v { color: #23262f; font-weight: 600; }
.rf-intel .up { color: #a32d2d; }
.rf-intel .down { color: #1a7f5a; }
.rf-intel .warn { color: #a32d2d; font-weight: 600; }

/*  506 — nothing on the shelf. Said as a word rather than a 0, which reads as a
    measurement somebody could still order against. */
.rf-ip-none { color: #a32d2d; font-weight: 600; font-size: .74rem; }

/* ---------------------------------------------------------------------------
   Rate history popup.

   Up is bad news for a buyer and down is good, so the arrows are coloured the
   opposite way round from a sales figure: a rate that has risen is the red one.
   --------------------------------------------------------------------------- */
.rf-rate-head { padding: 10px 14px; background: #f7f9ff; border-bottom: 1px solid #e3e7f3; }

.rf-rate-cells { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.rf-rate-cells > div { display: flex; flex-direction: column; line-height: 1.2; }
.rf-rate-cells .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #7b8296; }
.rf-rate-cells .v { font-size: 17px; font-weight: 700; color: #1a1f36; font-variant-numeric: tabular-nums; }

/* where today's rate sits between the cheapest and the dearest ever paid */
.rf-rate-band { position: relative; height: 4px; border-radius: 2px; margin-top: 10px;
                background: linear-gradient(90deg, #1a7f5a 0%, #d9d2b0 50%, #b42318 100%); }
.rf-rate-band > i { position: absolute; top: -3px; width: 2px; height: 10px;
                    background: #1a1f36; border-radius: 1px; }

.rf-rate-up   { color: #b42318; font-weight: 700; }
.rf-rate-down { color: #1a7f5a; font-weight: 700; }