/* CAS Puller — read at arm's length, in a warehouse, one-handed.
   Photo carries identification; the bin carries the destination. */

:root {
  --ink: #16181a;
  --paper: #f7f7f4;
  --rule: #d6d5cf;
  --bin-bg: #16181a;
  --bin-text: #f4d03a;
  --found: #1a46c8;      /* royal blue */
  --refunded: #d97400;   /* orange */
  --ebay: #0a5c2e;
  --direct: #7a3b00;
  --muted: #5d5f62;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Column layout so the sign-out button can be pushed to the bottom of the
   screen when the page is short, and simply follow the content when it
   isn't. dvh rather than vh so iOS Safari's shrinking toolbar doesn't
   leave the button below the fold. */
main {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  min-height: calc(100dvh - 52px);
  margin: 0 auto;
  padding: 0 12px 28px;
}

/* ---- brand -------------------------------------------------------- */

.brand {
  display: flex;
  justify-content: center;
  padding: 20px 12px 4px;
}

/* The logo is a JPG with a solid white box behind it. multiply drops the
   white into the page background without needing a transparent PNG. */
.brand img {
  max-height: 150px;
  max-width: 80%;
  width: auto;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* ---- nav ---------------------------------------------------------- */

.tabs {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
}

.tab {
  flex: 1 1 0;
  max-width: 220px;
  padding: 16px 8px;
  text-align: center;
  color: #a9abae;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.tab.on { color: #fff; box-shadow: inset 0 -3px 0 var(--bin-text); }
.tab:focus-visible { outline: 3px solid var(--bin-text); outline-offset: -3px; }

/* ---- search ------------------------------------------------------- */

.searchbar {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 0;
  position: sticky;
  top: 51px;
  background: var(--paper);
  z-index: 9;
}

.searchbar input {
  flex: 1;
  min-width: 0;
  padding: 14px 12px;
  font-size: 17px;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 2px;
}

.searchbar button {
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--found);
  border: 0;
  border-radius: 2px;
}

.searchbar button:active { background: #143aa0; }

/* ---- cards: photo left, everything else right --------------------- */

.card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: #fff;
  margin-bottom: 12px;
  padding: 10px;
}

.photo {
  position: relative;
  flex: 0 0 52%;
  max-width: 260px;
  align-self: flex-start;
  background: #f0efec;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* contain, not cover: a cropped part is a part you can't identify */
.photo .single {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.carousel {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar { display: none; }

.carousel img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scroll-snap-align: center;
  display: block;
}

.photo .count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: rgba(22, 24, 26, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 2px;
}

.listing {
  color: #1a46c8;
  font-weight: 700;
  text-decoration: underline;
}

.text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.text h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.codes {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 6px;
  align-items: baseline;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.codes dt { color: var(--muted); font-size: 11px; }
.codes dd { margin: 0; word-break: break-word; }

/* MPN runs long, and the two lengths are cut server-side rather than by
   CSS, so nothing depends on font metrics or text-overflow behaving. */
.codes dd.mpn { word-break: normal; }
.codes dd.mpn .narrow { display: none; }

@media (max-width: 600px) {
  .codes dd.mpn .wide { display: none; }
  .codes dd.mpn .narrow { display: inline; }
}

.binval {
  color: var(--found);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.tag {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border-radius: 2px;
}

.tag.inventory, .tag.src-ebay { background: var(--ebay); }
.tag.new, .tag.src-direct { background: var(--direct); }

/* Listing Status from the Inventory table, coloured as Airtable shows it. */
.status {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 2px;
  border: 1px solid;
}

.status.s-live     { color: #0a5c2e; border-color: #0a5c2e; background: #e8f5ed; }
.status.s-replaced { color: #a32020; border-color: #a32020; background: #fdecea; }
.status.s-sold     { color: #5d5f62; border-color: #b9babc; background: #f0efec; }

/* Search cards stack the table tag, listing status and link, each ~20%
   larger. Scoped to .stacked so the queue cards keep their inline row. */
.meta.stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
}

.meta.stacked .tag,
.meta.stacked .status {
  font-size: 13px;
  padding: 3px 8px;
}

.meta.stacked .listing {
  align-self: center;
  min-width: 130px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--found);
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
}

.meta.stacked .listing:active { background: #143aa0; }

/* Narrow screens: the text column is too cramped for a button, so the
   Listing link moves to its own full-width row beneath both columns. */
.listing-wide { display: none; }

@media (max-width: 600px) {
  .card { flex-wrap: wrap; }

  .meta.stacked .listing { display: none; }

  .listing-wide {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--found);
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
  }

  .listing-wide:active { background: #143aa0; }
}

/* ---- actions ------------------------------------------------------ */

.actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

/* single action, spanning the width the two buttons used to occupy */
.actions form { flex: 1; }

.btn {
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 0;
  border-radius: 3px;
  min-height: 36px;
}

.btn.found { background: var(--found); }
.btn.found:active { background: #143aa0; }
.btn.refunded { background: var(--refunded); }
.btn.refunded:active { background: #a85a00; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---- states ------------------------------------------------------- */

.empty, .foot {
  padding: 24px 4px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.alert {
  margin: 12px 0 0;
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #d9b430;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- lightbox ------------------------------------------------------ */

.photo img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 13, 14, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 24px;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  background: #fff;
}

/* Arrows sit clear of the image so a mis-tap closes rather than advances. */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  cursor: pointer;
}

.lb-nav.prev { left: 0; }
.lb-nav.next { right: 0; }
.lb-nav[hidden] { display: none; }

.lb-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 10px;
  border-radius: 2px;
}

.lb-count[hidden] { display: none; }

/* ---- login --------------------------------------------------------- */

.login-page main { max-width: 380px; padding-top: 8vh; }

.login {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login input {
  padding: 14px 12px;
  font-size: 17px;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 2px;
}

.login button {
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--found);
  border: 0;
  border-radius: 3px;
}

.loginerr {
  margin: 0;
  padding: 10px 12px;
  background: #fdecea;
  border: 1px solid #d98080;
  font-size: 14px;
}

.loginnote {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---- sign out ------------------------------------------------------ */

/* Flex centring rather than text-align: if any card overflows the viewport
   horizontally, text-align centres against the overflowed width and the
   button drifts off to one side on a phone. */
.signout {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;   /* auto top margin pushes it to the bottom */
  padding-top: 32px;
}

.signout a {
  display: inline-block;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--refunded);
  border-radius: 3px;
  background: var(--refunded);
  text-align: center;
}

.signout a:active { background: #a85a00; }

@media (max-width: 600px) {
  .signout a {
    min-width: 140px;
    padding: 10px 17px;
    font-size: 13px;
  }
}

/* keep cards from pushing the page wider than the screen */
.card { max-width: 100%; }
.codes dd { overflow-wrap: anywhere; }