/* ================================
   Rosie's Pantry — Full-width UI
   ================================ */

/* Tokens */
:root{
  --brand:#FC4F00;
  --bg:#fff9f6;
  --ink:#1F2937;
  --muted:#6B7280;
  --line:#E5E7EB;
  --card:#ffffff;
}

/* Global / containment */
html, body { width:100%; overflow-x:hidden; background:var(--bg); color:var(--ink); }
* { box-sizing:border-box; }
.rp-wrap { width:100%; margin:0; padding:8px 12px; } /* small edge padding so content feels end-to-end */

/* Header */
.rp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; position:sticky; top:0; z-index:2;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.rp-brand{ display:flex; align-items:center; gap:10px }
.rp-logo-dot{ width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(252,79,0,.15) }
.rp-pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px }

/* Toolbar (desktop: grid, mobile: stacked) */
.rp-toolbar{
  display:grid;
  grid-template-columns: 3fr 1fr;   /* left controls | right actions */
  gap:16px; align-items:start; margin:12px 0 8px;
}
.rp-toolbar .rp-left{ grid-column:1; }
.rp-toolbar .rp-right{
  grid-column:2; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* Left controls: 2x2 layout on desktop */
.rp-toolbar .rp-row{
  display:grid; gap:12px; align-items:stretch;
  grid-template-columns: 3fr 1fr;   /* 75 | 25 */
  grid-template-rows: auto auto;
}
#rp-ean       { grid-column:1; grid-row:1; }
#rp-lookup    { grid-column:1; grid-row:2; }
#rp-scan-open { grid-column:2; grid-row:1; }
#rp-manual    { grid-column:2; grid-row:2; }
.rp-input{ display:contents; }

/* Inputs & buttons */
#rp-ean{
  width:100%; min-width:260px; height:44px;
  padding:0 14px; border:1px solid var(--line); border-radius:12px;
  background:#fff; font-size:14px; outline:none;
}
#rp-ean:focus{ border-color:#ffd0bd; box-shadow:0 0 0 3px rgba(252,79,0,.12) }

.rp-btn{
  height:44px; padding:0 14px;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:10px; cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:transform .04s ease, box-shadow .2s ease, opacity .2s ease;
}
.rp-btn:hover{ box-shadow:0 6px 14px rgba(0,0,0,.06) }
.rp-btn:active{ transform:translateY(1px) }
.rp-btn:disabled{ opacity:.6; cursor:not-allowed }
.rp-btn-primary{ background:var(--brand); color:#fff; border-color:transparent; }
.rp-btn-secondary{ background:#ffe8df; color:#9a2a00; border-color:#ffd7c6; }

.rp-toolbar .rp-right .rp-btn,
.rp-toolbar .rp-right a.rp-btn{ height:40px; padding:0 12px; }

/* Filters */
.rp-filters{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 12px }
.rp-search,.rp-select{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff }
.rp-search{ min-width:220px }

/* Cards (list) — image above content */
#rp-list{
  display:grid; gap:16px; width:100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cols desktop */
}
#rp-list .rp-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:box-shadow .2s ease, transform .1s ease;
}
#rp-list .rp-card:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px); }
#rp-list .rp-img{
  width:120px; height:120px; object-fit:cover;
  border-radius:10px; background:#f3f3f3; margin-bottom:10px;
}
#rp-list .rp-name{ font-weight:600; font-size:15px; margin-bottom:4px; }
#rp-list .rp-muted{ color:var(--muted); font-size:13px; }
#rp-list .rp-qty{ font-weight:700; color:var(--brand); }
.rp-tag{ background:#fff0ea; color:#9a2a00; border:1px dashed #ffc7b1; border-radius:999px; padding:2px 8px; font-size:12px }

/* Generic card wrapper (used by result/edit too) */
.rp-card{ margin:12px 0; }

/* Result/Edit form card — two-column, centered on mobile */
.rp-result .rp-card{ /* leave full width on desktop; center feel comes on mobile */
  border:1px solid var(--line); border-radius:14px; background:var(--card);
}
.rp-grid{
  display:grid; gap:16px; align-items:start; width:100%;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
}
.rp-img{ width:100%; max-width:260px; height:auto; border-radius:10px; background:#f3f3f3 }

.rp-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0;
}
.rp-row > label{ min-width:110px; color:#666; flex:0 0 auto; }
.rp-row input[type="text"],
.rp-row input[type="number"],
.rp-row input[type="date"],
.rp-row select,
.rp-row textarea{
  flex:1 1 320px; min-width:0; max-width:100%;
}
.rp-photo-row input[type="file"]{ flex:0 0 auto; }

/* Stats */
.rp-stats{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 }
.rp-stat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 10px; font-size:13px }

/* Scanner overlay */
.rp-scan-overlay{ position:fixed; inset:0; background:#000; z-index:99999; overflow:hidden }
.rp-scan-overlay[hidden]{ display:none!important }
#rp-scan-video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:100vh; object-fit:cover;
}
#rp-scan-close{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(255,255,255,.9); border:0; width:40px; height:40px;
  border-radius:999px; font-size:22px; line-height:40px; cursor:pointer;
}
.rp-laser{
  position:absolute; left:0; right:0; top:20%;
  height:2px; background:linear-gradient(90deg,transparent,#ff0000,transparent);
  animation:rp-scan 2.2s linear infinite; box-shadow:0 0 10px #ff0000; z-index:2;
}
@keyframes rp-scan{ 0%{top:20%;opacity:.6} 45%{top:80%;opacity:1} 100%{top:20%;opacity:.6} }

/* ====== Responsive ====== */
@media (max-width:1200px){
  #rp-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  /* Stack toolbar fully and make buttons full width */
  .rp-toolbar{ display:block; }
  .rp-toolbar .rp-right{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px;
  }
  #rp-ean, #rp-lookup, #rp-scan-open, #rp-manual{
    display:block; width:100%; height:44px; margin:0 0 12px 0;
  }
}
@media (max-width:720px){
  /* Items: single column; smaller image */
  #rp-list{ grid-template-columns: 1fr; }
  #rp-list .rp-img{ width:100px; height:100px; }

  /* Form/result: one column, centered look */
  .rp-grid{ grid-template-columns: 1fr; }
  .rp-result .rp-card{ margin-left:auto; margin-right:auto; }
  .rp-img{ max-width:420px; margin:0 auto; }

  /* Labels slightly smaller on mobile */
  .rp-row > label{ min-width:90px; }
}
/* === Item cards: stacked layout === */
#rp-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  width:100%;
}

/* card shell */
#rp-list .rp-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  transition:box-shadow .2s ease, transform .1s ease;
}
#rp-list .rp-card:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px); }

/* kill the old two-column grid inside list cards */
#rp-list .rp-card .rp-grid{ display:block; }

/* image on top */
#rp-list .rp-card .rp-img{
  width:120px; height:120px;
  object-fit:cover; border-radius:10px; background:#f3f3f3;
  margin:0 auto 10px;
}

/* title */
#rp-list .rp-card strong{
  font-size:15px;
  line-height:1.25;
  display:block;
  margin-bottom:4px;
}

/* description (clamped so cards stay even height) */
#rp-list .rp-card .rp-muted{
  color:var(--muted);
  font-size:13px;
  margin:0 auto 8px;
  display:-webkit-box;
  -webkit-line-clamp:6;         /* show up to ~6 lines */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* tags row (species/category/size/weight) */
#rp-list .rp-card .rp-row{
  justify-content:center;
  gap:6px;
  margin:8px 0;
}
#rp-list .rp-card .rp-tag{
  background:#fff0ea;
  color:#9a2a00;
  border:1px dashed #ffc7b1;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
}

/* barcode line toned down */
#rp-list .rp-card .rp-barcode,
#rp-list .rp-card .rp-muted:has(> .rp-barcode){ color:var(--muted); font-size:12px; }

/* qty & location */
#rp-list .rp-card .rp-qty{ font-weight:700; color:var(--brand); margin-right:8px; }
#rp-list .rp-card .rp-pill{ margin-left:8px; }

/* +/- buttons row centered */
#rp-list .rp-card .rp-row .rp-btn{ height:36px; padding:0 12px; }

/* responsive: 3 → 2 → 1 columns; smaller image on phones */
@media (max-width:1200px){
  #rp-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px){
  #rp-list{ grid-template-columns: 1fr; }
  #rp-list .rp-card .rp-img{ width:100px; height:100px; }
}
/* --- Fix extra whitespace between filters and items --- */
.rp-filters{ margin:6px 0 8px !important; }

/* Remove top/bottom margins on list cards (grid gap already handles spacing) */
#rp-list{ margin-top:0 !important; }
#rp-list .rp-card{ margin:0 !important; }

/* If the result panel is empty, don’t reserve space */
.rp-result:empty{ display:none; }

/* If a result card is shown, keep it close to the list */
.rp-result .rp-card{ margin:8px 0 12px !important; }