/* The food ledger (issue #109) — paper-feel cards on the eds' pickles skin.
   Tokens come from assets/app.css (--brand/--warm/--good/--line/--muted). */

.scan-doors{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.scan-door{border:2px solid var(--line);border-radius: 10px;padding:.55rem 1.1rem;font-weight:700;font-size:.92rem;color:var(--muted);background: var(--bg);cursor:pointer;}
.scan-door:hover{border-color:var(--brand);color:var(--brand);}
.scan-door.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.scan-door .note{font-weight:400;font-size:.8rem;color:inherit;opacity:.8;display:block;}

.ledger-tally{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem;}
.ledger-tally .btn{margin-inline-start:auto;}

.shelf-chip{font-weight:700;border-radius: 10px;padding:.25em .7em;font-size:.78rem;display:inline-flex;align-items:center;gap:.3em;border:2px solid var(--line);color:var(--muted);background: var(--bg);}
.shelf-chip.in{color:var(--good);border-color:var(--good);background:var(--good-soft);}
.shelf-chip.low{color:#92400e;border-color:#fbbf24;background:var(--warm-soft);}
.shelf-chip.out{color:var(--bad);border-color:var(--bad);background:var(--bad-soft);}
.shelf-chip.trade{color:#5b21b6;border-color:#c4b5fd;background:var(--brand-soft);}

.umg-card{border:2px solid var(--line);border-radius:var(--radius);background: var(--bg);padding:1rem;}
.umg-card .umg-q{font-weight:800;color:var(--brand);white-space:nowrap;}
.umg-fine{border-top:2px solid var(--line);margin-top:.8rem;padding-top:.7rem;font-size:.85rem;color:var(--muted);font-style:italic;line-height:1.5;}
.umg-fine b{font-style:normal;color:var(--ink);}

  .match-line{font-size:.9rem;color:var(--muted);line-height:1.6;word-break:break-word;overflow-wrap:break-word;}

.toast-oc{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius: 10px;padding:.6rem 1.1rem;font-size:.9rem;box-shadow:0 8px 24px rgb(0 0 0/.25);max-width:92vw;z-index:1200;display:none;}

#scanStage{position:fixed;inset:0;background:#000;z-index:1100;display:none;flex-direction:column;}
#scanStage video{width:100%;max-height:80vh;object-fit:contain;background:#000;}
#scanStage .scan-bar{display:flex;gap:.6rem;padding:1rem;align-items:center;justify-content:center;flex-wrap:wrap;}
#scanStage .scan-msg{color:#fff;text-align:center;font-size:.9rem;}

#checkStage{position:fixed;inset:0;background:#000;z-index:1100;display:none;}
#checkStage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
#checkStage .shape-guide{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:min(58vw,54vh);height:auto;color:rgb(124 58 237/.9);filter:drop-shadow(0 0 8px rgb(0 0 0/.55));pointer-events:none;display:none;}
#checkStage .shape-guide.on{display:block;}
#checkStage .shape-guide.seen{color:#10b981;transition:color .25s ease;}
#checkStage .scan-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:.6rem;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));align-items:center;justify-content:center;flex-wrap:wrap;background:linear-gradient(rgb(0 0 0/.0),rgb(0 0 0/.6));}
#checkStage .scan-msg{color:#fff;text-align:center;font-size:.9rem;text-shadow:0 1px 3px rgb(0 0 0/.8);}

.qr-modal-body{text-align:center;padding:1.25rem 1rem 1.5rem;}
.qr-modal-body svg{margin-inline:auto;display:block;}

.photo-thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--line);}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  #entryForm .row.g-2 > [class*="col-"] {
    padding-left: .25rem;
    padding-right: .25rem;
  }
  #entryForm .row.g-2 {
    margin-left: -.25rem;
    margin-right: -.25rem;
  }
  #entryForm .form-control,
  #entryForm .form-select {
    padding: .35rem .5rem;
    font-size: .82rem;
    min-height: 40px;
  }
  #entryForm .note {
    font-size: .72rem;
    margin-bottom: .15rem;
  }
  #entryForm label.note {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ledger-tally {
    flex-direction: column;
    align-items: flex-start;
  }
  .ledger-tally .btn {
    margin-inline-start: 0;
    width: 100%;
  }
  .umg-card {
    padding: .75rem;
  }
  .umg-card h3 {
    font-size: 1rem;
  }
  .umg-fine {
    font-size: .78rem;
  }
  .scan-doors {
    flex-direction: column;
  }
  .scan-door {
    width: 100%;
    text-align: left;
  }
  html {
    scroll-behavior: smooth;
  }
  #entryForm {
    overflow-anchor: none;
  }
  .umg-card .btn {
    font-size: .78rem;
    padding: .3rem .6rem;
  }
  .umg-card .btn i {
    margin-right: .2rem !important;
  }
}