/* ============== THEME TOKENS ============== */
:root{
  --bg-grad: radial-gradient(1200px 700px at 40% -200px, rgba(53,83,148,.45), transparent 70%),
             radial-gradient(900px 600px at 100% 0%, rgba(31,82,113,.35), transparent 60%),
             #0b1220;
  --surface: rgba(255,255,255,.10);
  --surface-2: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.18);
  --text: #e8eefc;
  --text-dim:#cbd5e1;
  --muted:#8a94a7;
  --ring: rgba(99,179,237,.45);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
}
body[data-theme="sky"]{ --bg-grad: linear-gradient(180deg,#8EC5FC 0%, #E0C3FC 100%); }
body[data-theme="sunset"]{ --bg-grad: linear-gradient(180deg,#ff9a9e 0%, #fad0c4 100%); }
body[data-theme="mint"]{
  --bg-grad: linear-gradient(180deg,#a1ffce 0%, #faffd1 100%);
  --text:#0f172a; --text-dim:#334155; --muted:#475569;
  --surface: rgba(255,255,255,.65); --surface-2: rgba(255,255,255,.80); --border: rgba(15,23,42,.15);
}
body[data-theme="oled"]{ --bg-grad:#000; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg-grad);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ============== LAYOUT ============== */
.app{
  display:grid;
  grid-template-columns:250px 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  grid-area:sidebar;
  position:sticky; top:0; height:100vh;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
  backdrop-filter:blur(16px) saturate(140%);
  border-right:1px solid var(--border);
  padding:18px 12px;
}
.sb-title{display:flex; align-items:center; gap:10px; padding:8px 10px 14px; font-weight:700;}
.sb-title .logo{width:36px; height:36px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);}
.sb-sec{font-size:.78rem; letter-spacing:.08em; color:var(--muted); margin:10px 8px 6px; text-transform:uppercase;}
.sb-item{width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid transparent; background:transparent; color:inherit; font-weight:600; cursor:pointer;}
.sb-item:hover{background:var(--surface); border-color:var(--border);}
.sb-item .material-symbols-outlined{font-size:20px; opacity:.95;}
.sb-spacer{height:8px}
.sb-footer{position:absolute; left:0; right:0; bottom:0; padding:12px; color:var(--muted);}

/* Top bar */
.topbar{
  grid-area:topbar; display:flex; align-items:center; gap:12px; padding:12px 16px;
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.08));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
}
.hamburger{
  display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:#fff; display:grid; place-items:center; cursor:pointer;
}
.search{flex:1;}
.search input{
  width:100%; height:44px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface-2); outline:none; color:inherit; padding:0 14px;
}
.btn{height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:inherit; font-weight:600; cursor:pointer;}
.btn.ghost{background:transparent;}
.btn.primary{background:linear-gradient(135deg,#6a7bff,#39bdf8); border:0; color:#fff;}

/* Main */
.main{grid-area:main; padding:18px; display:grid; place-items:start;}
.panel{
  width:min(980px,100%);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:14px;
}

/* Store chips */
.storebar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.chip{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; color:inherit;}
.chip.active{background:linear-gradient(135deg,#6a7bff,#39bdf8); border:0; color:#fff;}

/* Add row & list */
.addrow{display:grid; grid-template-columns:1fr 220px 90px; gap:10px; margin:10px 0 12px;}
.input, select.input{
  width:100%; height:44px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface-2); color:inherit; padding:0 12px; outline:none;
}
/* Native picker sheet colors */
select.input option, .aisle-select option{background:#fff; color:#0f172a;}

.list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.item{
  display:grid;
  grid-template-columns:22px 1fr 96px 160px 120px; /* checkbox | name | qty | aisle | actions */
  align-items:center; gap:10px;
  padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
}
.item.is-marked{opacity:.55}
.qty{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 6px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.10);}
.qbtn{width:24px; height:24px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,.08); color:#fff; font-weight:900; cursor:pointer;}
.qnum{min-width:14px; text-align:center; font-weight:800;}
.aisle-select{-webkit-appearance:none; appearance:none;}
.actions{display:flex; gap:6px; justify-content:flex-end;}
.icon{width:32px; height:32px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.10); cursor:pointer; display:grid; place-items:center;}
.icon.star.on{background:rgba(255,215,0,.12); border-color:rgba(255,215,0,.35);}
.muted{color:var(--muted)}

/* Suggestions */
.suggest-panel{
  position:absolute; left:0; right:0; top:46px;
  background:rgba(11,18,32,.98);
  border:1px solid var(--border);
  border-radius:12px; padding:6px; display:none; z-index:3500;
  max-height:320px; overflow:auto; font-size:.94rem;
}
.suggest-panel.show{display:block;}
.sug-item{display:grid; grid-template-columns:26px 1fr; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer;}
.sug-item:hover{background:rgba(255,255,255,.08);}
.sug-item .emo{width:22px; text-align:center;}
.sug-item .nm{font-weight:600; line-height:1.2; white-space:normal; word-break:break-word;}
.sug-item .cat{color:var(--muted); font-size:.86rem; grid-column:2}

/* Modals */
.modal{position:fixed; inset:0; display:none; place-items:center; z-index:4000;}
.modal.show{display:grid;}
.back{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.card{
  position:relative; width:min(680px, 94vw);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.10));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:14px;
}
.grid{display:grid; gap:12px;}
.close{position:absolute; top:8px; right:8px; border:1px solid var(--border); background:var(--surface); color:#fff; border-radius:10px; width:36px; height:36px;}
.sortlist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.sortlist li{display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--surface); padding:10px; border-radius:10px;}
.handle{cursor:grab; opacity:.8}
.sort-actions{display:flex; gap:10px; justify-content:flex-end}

/* Manage Stores modal chips */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chipx{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--surface);}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:14px; background:rgba(15,23,42,.9); border:1px solid var(--border);
  color:#fff; border-radius:12px; padding:8px 10px; gap:10px; display:none; align-items:center; z-index:4500;
}
.toast.show{display:flex;}
.toast .btn{height:34px}


/* Sidebar anchor normalization (Pantry page uses <a>) */
.sidebar .sb-item,
.sidebar .sb-item:link,
.sidebar .sb-item:visited{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  text-decoration:none;
  font-weight:600;
}
.sidebar .sb-item:hover{ background:var(--surface); border-color:var(--border); }
.sidebar .sb-item.active{ background:var(--surface); border-color:var(--border); }


/* ============== MOBILE (≤ 960px) ============== */
@media (max-width: 840px){
  /* Layout changes */
  .app{grid-template-columns:1fr; grid-template-areas:"topbar" "main";}
  .sidebar{
    position:fixed; z-index:3000; left:0; top:0; bottom:0; width:84vw; max-width:320px;
    transform:translateX(-100%); transition:transform .18s ease-out; pointer-events:none;
  }
  .sidebar.open{transform:translateX(0); pointer-events:auto;}

  /* --- Topbar becomes a compact horizontally scrollable toolbar --- */
  .topbar{
    gap:8px;
    padding:10px 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .topbar::-webkit-scrollbar{ display:none; }
  .topbar > *{ flex:0 0 auto; scroll-snap-align:start; }

  .hamburger{display:grid; width:36px; height:36px; border-radius:10px;}
  /* Hide search to free space on phones; remove if you prefer it visible */
  .search{ display:none; }

  /* Compact buttons/chips in the toolbar */
  .btn{ height:36px; padding:0 12px; border-radius:10px; }
  .chip{ padding:6px 10px; }

  .panel{padding:12px; margin-top:6px;}

  /* Item row: 4 columns so actions can sit next to qty */
  .item{
    grid-template-columns:22px 1fr 96px auto;
    grid-template-rows:auto;
  }

  /* Hide aisle UI on phones */
  .item select,
  .item .aisle-select,
  .item .note{
    display:none !important;
  }

  /* Actions sit to the RIGHT, next to qty */
  .item .actions{
    position:static !important;
    grid-column:4 !important;
    grid-row:1 !important;
    justify-content:flex-end !important;
  }

  /* Compact action buttons */
  .item .actions .icon{
    width:30px !important;
    height:30px !important;
    border-radius:10px !important;
  }

  /* A little room between qty and actions */
  .item .qty{ margin-right:8px; }
}

/* === MOBILE: give "Add item" more room; shrink aisle dropdown === */
.addrow > * { min-width: 0; }                /* allow the 1fr column to actually stretch */

@media (max-width: 960px){
  /* checkbox | Add item (1fr) | aisle (narrow) | Add button */
  .addrow{
    grid-template-columns: 1fr minmax(110px, 30vw) 90px !important;
    column-gap: 10px;
  }
  /* keep the aisle select from forcing the grid wider */
  .addrow select.input{
    width: 100%;
    max-width: 160px;
  }
}

@media (max-width: 420px){
  /* even tighter on very small phones */
  .addrow{
    grid-template-columns: 1fr 96px 84px !important;
  }
  .addrow select.input{ max-width: 120px; font-size: .9rem; }
  .qty{ height:28px; }
  .qbtn{ width:22px; height:22px; }
}

/* Keep the suggestion panel contained so it doesn't cover the toolbar */
.addrow .stack { position: relative; }            /* the wrapper around #itemName + #suggestPanel */

#suggestPanel.suggest-panel{
  left: 0; right: 0; top: 46px;
  width: 100%;
  z-index: 1200;                                  /* below the topbar */
}

/* Make the topbar highest so it always receives taps */
.topbar{ z-index: 3000; }                         /* higher than suggest-panel */

/* Safety: when hidden, don't capture events */
#suggestPanel:not(.show){ display:none; pointer-events:none; }


/* iOS anti-zoom */
@supports (-webkit-touch-callout: none){
  input, select, textarea { font-size:16px !important; min-height:44px; }
  .gro-btn { font-size:16px; padding:12px 16px; }
}
/* ensure the mobile submenu button is visible everywhere (safe) */
.gro-item [data-act="more"]{ display:inline-flex !important; }