/*
 * The search result table — one look, every search box.
 *
 * Taken from the billing counter's medicine search, which is the one the shop already
 * knows, and lifted out of billing.php so the purchase screen and the customer,
 * patient and doctor boxes can render the identical thing instead of each inventing
 * a smaller version of it.
 *
 * Dense on purpose. A clerk works down a distributor's bill for twenty minutes; rows
 * that breathe cost them scrolling. The first column is pinned so the name stays put
 * while the figures scroll sideways.
 *
 * Colours use the dashboard tokens where they exist, with plain fallbacks, so this
 * file works on any screen without dragging a theme along with it.
 */

.nxsd-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 340px;
  overscroll-behavior: contain;        /* stop the page scrolling once the list ends */
  -webkit-overflow-scrolling: touch;
}

.nxsd-tbl {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

/* ---- heading row: stays visible while the list scrolls ---- */
.nxsd-tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--skin-head, var(--bg-subtle, #f1f5f9));
  border-bottom: 1px solid var(--skin-line, var(--border, #cbd5e1));
  border-right: 1px solid var(--skin-line, var(--border, #cbd5e1));
  padding: 7px 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #0f172a; text-align: left; white-space: nowrap;
}
.nxsd-tbl thead th:last-child { border-right: 0; }
.nxsd-tbl thead th.r { text-align: right; }
.nxsd-tbl thead th.c { text-align: center; }

/* ---- the name column is pinned: it is what you are reading by ---- */
.nxsd-tbl th:first-child,
.nxsd-tbl td:first-child {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 2px 0 0 var(--skin-line, var(--border, #cbd5e1));
}
.nxsd-tbl thead th:first-child { z-index: 3; }
.nxsd-tbl tbody td:first-child { background: var(--skin-card, var(--bg-card, #fff)); }

.nxsd-tbl td {
  padding: 5px 9px; height: 30px;
  border-bottom: 1px solid var(--skin-line-soft, var(--border-soft, #e2e8f0));
  border-right: 1px solid var(--skin-line-soft, var(--border-soft, #e2e8f0));
  color: #0f172a; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 0;
}
.nxsd-tbl td:last-child { border-right: 0; }
.nxsd-tbl tr:last-child td { border-bottom: 0; }
.nxsd-tbl td.r { text-align: right; }
.nxsd-tbl td.c { text-align: center; }

/* ---- the row under the cursor, and the one the arrow keys are on ---- */
.nxsd-tbl tbody tr { cursor: pointer; }
/* the counter has its own cream skin; anywhere else this falls back to a cool blue */
.nxsd-tbl tbody tr:hover td             { background: var(--nxsd-hover, #eef4ff); }
.nxsd-tbl tbody tr:hover td:first-child { background: var(--nxsd-hover, #eef4ff); }
.nxsd-tbl tbody tr.hl td,
.nxsd-tbl tbody tr.is-active td {
  background: #dbeafe;
  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .07);
}
.nxsd-tbl tbody tr.hl td:first-child,
.nxsd-tbl tbody tr.is-active td:first-child {
  background: #dbeafe;
  box-shadow: inset 3px 0 0 #2563eb, inset 0 0 0 9999px rgba(37, 99, 235, .07);
}

/* ---- the few things worth colouring ---- */
.nxsd-nm     { font-weight: 700; color: #0f172a; }
.nxsd-cmp    { color: #1d4ed8; font-weight: 600; font-size: 11.5px; }
.nxsd-sup    { color: #1d4ed8; font-weight: 700; }
.nxsd-more   { color: #64748b; font-weight: 700; font-size: 11px; }

/* a Schedule-H medicine says so next to its name, not in a column you scroll to */
.nxsd-sched  { background: #fee2e2; color: #b91c1c; border-radius: 3px;
               padding: 0 4px; font-size: 10px; font-weight: 800; }

/* money owed, money in hand, and the allergy line all have to catch the eye */
.nxsd-due    { color: #b91c1c; font-weight: 800; }
.nxsd-clear  { color: #15803d; font-weight: 700; font-size: 11.5px; }
.nxsd-credit { color: #15803d; font-weight: 800; }
.nxsd-warn   { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b;
               border-radius: 3px; padding: 0 5px; font-weight: 800; }
.nxsd-reg    { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }

.nxsd-empty  { padding: 14px 16px; color: #475569; font-size: 13px; }

/* ---- on a phone the table would be wider than the screen; it scrolls, and the
        pinned first column is what makes that usable ---- */
@media (max-width: 640px) {
  .nxsd-scroll { max-height: 260px; }
  .nxsd-tbl    { font-size: 12px; }
  .nxsd-tbl td { height: 28px; padding: 4px 7px; }
}