/* Stock-only additions on top of the CRM stylesheet.
   ---------------------------------------------------
   app.css is the CRM's, copied verbatim so the two apps look like one system.
   Everything here is something the CRM has no need for, because the CRM is not
   used one-handed on a godown floor: a bottom action bar, oversized entry
   buttons, and the "not yet verified" badge that must appear anywhere a
   balance is shown. */

/* ---- sidebar footer (CRM's sidebar ends differently) ---- */
.side-foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.side-foot .side-user { color: var(--side-ink); font-size: .82rem; line-height: 1.35; }
.side-foot .sub { color: var(--side-ink-dim); }

/* ---- the floor bar: the two actions, always reachable on a phone ---- */
.floorbar { display: none; }

@media (max-width: 900px) {
  .floorbar {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    display: flex; background: var(--card);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .floorbar a {
    flex: 1; text-align: center; padding: 11px 4px 13px;
    font-size: .74rem; font-weight: 600; text-decoration: none;
    color: var(--ink-faint); display: flex; flex-direction: column; gap: 3px;
  }
  .floorbar a span { font-size: 1.05rem; }
  .floorbar a.active { color: var(--brand-strong); }
  .content { padding-bottom: 92px; }
}

/* ---- oversized entry actions (gloved hands, bright light) ---- */
.btn-xl {
  min-height: 64px; font-size: 1.05rem; font-weight: 700;
  width: 100%; border-radius: var(--radius);
}
.action-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
@media (max-width: 560px) { .action-pair { grid-template-columns: 1fr; } }

/* ---- an unverified balance must never look like a real one ---- */
.unverified {
  display: inline-block; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--amber-soft, #fdf3e2); color: var(--amber, #9a6400);
  font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.negative { color: var(--red, #b42318); font-weight: 700; }

/* Quantities are read down a column and compared. */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }

/* ---- KPI row ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 14px 16px; }
.stat .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
           color: var(--ink-faint); font-weight: 700; }
.stat .v { font-size: 1.6rem; font-weight: 700; margin-top: 2px;
           font-variant-numeric: tabular-nums; }

/* ---- a bill line: item, quantity, remove ---- */
.bill-line {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.bill-line:last-child { border-bottom: 0; }
.bill-line input[type="text"] { width: 100%; }
.bill-line .remove-line { flex: none; margin-top: 2px; }
.bill-line .chosen { margin-top: 4px; }
@media (max-width: 560px) {
  .bill-line { flex-wrap: wrap; }
  .bill-line > div:nth-child(2) { flex: 1 1 auto !important; }
}

/* ---- the item picker (a datalist-backed search field) ---- */
.picker { position: relative; }
.picker-results {
  position: absolute; inset: 100% 0 auto 0; z-index: 30;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto;
}
.picker-results button {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px;
  cursor: pointer; color: var(--ink); font: inherit;
}
.picker-results button:last-child { border-bottom: 0; }
.picker-results button:hover, .picker-results button:focus { background: var(--brand-soft); }
.picker-results .nm { font-weight: 600; }
.picker-results .meta { font-size: .76rem; color: var(--ink-faint); }

/* Creating a customer or supplier is normal, but it is not the same act as
   picking an existing one — a misspelling here becomes a second account that
   splits one client's history in two, and nothing later ever looks wrong. So
   the option that CREATES is marked, rather than sitting in the list looking
   like the others. */
.picker-results .is-new { background: var(--warn-soft, #fff8e1); }
.picker-results .is-new .nm { color: var(--warn-ink, #8a5a00); }

.menu-btn { display: none; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }