/* ══════════════════════════════════════════════════════════════════════════
   shopping.css  —  Shopping page specific styles
   Defines --tc/--gc-c colour cascade vars. Pages.html-identical tool-grid.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tool grid (pages.html-identical) ── */
.glass-card-section {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.3rem 1.4rem 1.1rem;
  margin-bottom: 0.85rem; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  border-left: 3px solid rgba(var(--gc-c,150,150,180),0.35);
}
.glass-card-section::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent); }
.gc-general { --gc-c: 255,140,80; }
.gc-media   { --gc-c: 46,196,255; }
.section-label.sl-general { --sl-c: 255,140,80; }
.section-label.sl-media   { --sl-c: 46,196,255; }

.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0.6rem; position:relative; z-index:1; }
.tool-card {
  display:flex; flex-direction:row; align-items:center; gap:0.55rem;
  padding:0.75rem 0.85rem; border-radius:var(--radius-sm);
  border:1px solid rgba(var(--tc),0.2); background:rgba(var(--tc),0.05);
  text-decoration:none; color:var(--text); position:relative; overflow:visible;
  transition:all 0.2s ease; cursor:pointer;
  box-shadow:0 2px 10px rgba(var(--tc),0.07),inset 0 1px 0 rgba(255,255,255,0.05);
  --tc: 150,150,180;
}
.tool-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--tc),0.55),transparent); }
.tool-card:hover { border-color:rgba(var(--tc),0.38); background:rgba(var(--tc),0.1); transform:translateY(-3px); box-shadow:0 8px 24px rgba(var(--tc),0.16),inset 0 1px 0 rgba(255,255,255,0.07); }
.tool-card:active { transform:translateY(0) scale(0.97); }
.tc-general { --tc: 255,140,80; }
.tc-support { --tc: 56,215,160; }
.tc-media   { --tc: 46,196,255; }
.tc-admin   { --tc: 162,110,255; }
.tc-fav     { --tc: 255,195,55; }
.card-icon { font-size:1.25rem; line-height:1; width:32px; height:32px; border-radius:8px; background:rgba(var(--tc),0.1); border:1px solid rgba(var(--tc),0.18); display:flex; align-items:center; justify-content:center; flex:0 0 32px; }
.card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.18rem; }
.card-title { font-size:0.86rem; font-weight:700; color:var(--text); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-desc  { font-size:0.7rem; color:var(--text-dim); line-height:1.4; margin:0; }
/* shared badge */
.shared-badge { position:absolute; top:0.3rem; right:0.3rem; transform:translate(8px,-8px); width:26px; height:26px; background:#0c0a1c; border:1px solid rgba(46,196,255,0.5); border-radius:7px; font-size:0.78rem; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(46,196,255,0.15),0 2px 8px rgba(0,0,0,0.5); z-index:10; }
/* new list tile */
.tile-new { border-style:dashed!important; border-color:rgba(255,255,255,0.1)!important; background:rgba(255,255,255,0.02)!important; }
.tile-new:hover { border-color:rgba(124,92,252,0.4)!important; background:rgba(124,92,252,0.06)!important; transform:translateY(-3px); }
.tile-new .card-icon { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); font-size:1.1rem; }
.tile-new .card-title { color:var(--text-muted); }

/* ── List view ── */
.progress-bar { height:3px; border-radius:2px; background:rgba(255,255,255,0.06); overflow:hidden; margin-bottom:0.9rem; }
.progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width 0.4s cubic-bezier(0.16,1,0.3,1); }
.body-grid { display:grid; grid-template-columns:280px 1fr; gap:0.85rem; align-items:start; }
@media(max-width:680px){ .body-grid{grid-template-columns:1fr;} }
.left-col { display:flex; flex-direction:column; gap:0.85rem; }
.add-form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.summary-row { display:flex; justify-content:space-between; align-items:center; padding:0.55rem 0.75rem; background:rgba(255,255,255,0.025); border:1px solid var(--row-border); border-radius:9px; margin-bottom:0.4rem; }
.summary-row:last-child { margin-bottom:0; }
.summary-label { font-size:0.78rem; color:var(--text-dim); }
.summary-val { font-size:1rem; font-weight:800; font-family:'DM Mono',monospace; color:var(--text); }
.list-card-inner { padding-bottom:0.85rem; }
.list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
.list-item { display:flex; align-items:center; gap:0.65rem; padding:0.62rem 0.85rem; background:rgba(255,255,255,0.025); border:1px solid var(--row-border); border-radius:9px; margin-bottom:0.4rem; transition:background 0.12s; }
.list-item:last-child { margin-bottom:0; }
.list-item:hover { background:rgba(255,255,255,0.04); }
.item-text { font-size:0.84rem; color:var(--text); flex:1; min-width:0; }
.item-note { font-size:0.7rem; color:var(--text-muted); margin-top:0.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-text.done { text-decoration:line-through; color:var(--text-muted); }
.item-done-row { opacity:0.5; }
.del-btn { background:none; border:none; color:var(--text-muted); font-size:0.75rem; cursor:pointer; padding:0.2rem 0.4rem; border-radius:4px; transition:color 0.15s; flex-shrink:0; font-family:inherit; }
.del-btn:hover { color:var(--red); }
.check-box { width:19px; height:19px; border-radius:5px; flex-shrink:0; border:1.5px solid var(--border-hi); background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; user-select:none; font-size:0.65rem; }
.check-box:hover { border-color:rgba(124,92,252,0.5); }
.check-box.checked { background:rgba(52,211,153,0.15); border-color:rgba(52,211,153,0.55); color:var(--green); }
.qty-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; border-radius:50%; background:rgba(124,92,252,0.12); border:1px solid rgba(124,92,252,0.22); color:var(--accent2); font-size:0.68rem; font-weight:700; font-family:'DM Mono',monospace; flex-shrink:0; }

/* category chips — predefined colours */
.cat-chip { font-size:0.68rem; font-weight:700; padding:0.18rem 0.55rem; border-radius:20px; white-space:nowrap; letter-spacing:0.2px; }
.cc-produce   { background:rgba(56,215,160,0.16);  border:1px solid rgba(56,215,160,0.42);  color:#5de8b4; }
.cc-meat      { background:rgba(248,113,113,0.16); border:1px solid rgba(248,113,113,0.42); color:#fca5a5; }
.cc-dairy     { background:rgba(251,191,36,0.16);  border:1px solid rgba(251,191,36,0.42);  color:#fcd34d; }
.cc-bakery    { background:rgba(255,140,80,0.16);  border:1px solid rgba(255,140,80,0.42);  color:#ffb080; }
.cc-dry       { background:rgba(124,92,252,0.18);  border:1px solid rgba(124,92,252,0.48);  color:#c4affe; }
.cc-drinks    { background:rgba(46,196,255,0.16);  border:1px solid rgba(46,196,255,0.44);  color:#7de2ff; }
.cc-frozen    { background:rgba(100,140,255,0.18); border:1px solid rgba(100,140,255,0.44); color:#a5b8ff; }
.cc-snacks    { background:rgba(162,110,255,0.17); border:1px solid rgba(162,110,255,0.44); color:#d4a8ff; }
.cc-household { background:rgba(150,160,180,0.14); border:1px solid rgba(150,160,180,0.32); color:#b0b8cc; }
.cc-personal  { background:rgba(240,130,190,0.16); border:1px solid rgba(240,130,190,0.42); color:#f9a8d4; }
.cc-pharmacy  { background:rgba(56,200,180,0.16);  border:1px solid rgba(56,200,180,0.42);  color:#5eded2; }
.cc-other     { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); color:#9898b8; }

/* category dropdown */
.cat-select-btn { display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-align:left; width:100%; background:rgba(0,0,0,0.38); border:1px solid var(--border); border-radius:var(--radius-xs); padding:0.52rem 0.8rem; color:var(--text); font-family:inherit; font-size:0.84rem; outline:none; transition:border-color 0.18s; }
.cat-select-btn:focus { border-color:var(--accent-border); box-shadow:0 0 0 3px rgba(124,92,252,0.1); }
.cat-drop { position:fixed; z-index:600; background:rgba(10,10,20,0.98); border:1px solid var(--border-hi); border-radius:var(--radius-xs); box-shadow:0 8px 32px rgba(0,0,0,0.6); overflow:hidden; display:none; }
.cat-drop-item { display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0.75rem; cursor:pointer; font-size:0.82rem; color:var(--text-dim); transition:background 0.1s; }
.cat-drop-item:hover { background:rgba(255,255,255,0.06); color:var(--text); }
.cat-drop-item.active { background:rgba(124,92,252,0.1); color:var(--text); }
.cat-swatch { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* list footer */
.list-footer { display:flex; align-items:center; justify-content:space-between; margin-top:0.75rem; padding-top:0.65rem; border-top:1px solid var(--row-border); flex-wrap:wrap; gap:0.5rem; }
.list-footer-label { font-size:0.75rem; color:var(--text-dim); display:flex; align-items:center; gap:0.5rem; }

/* presence bar */
.presence-bar { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; min-height:28px; }
.presence-label { font-size:0.68rem; color:var(--text-muted); white-space:nowrap; }
.presence-avatars { display:flex; align-items:center; }
.presence-avatar { width:26px; height:26px; border-radius:50%; border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:0.8rem; margin-left:-6px; position:relative; transition:transform 0.15s; background:rgba(255,255,255,0.08); cursor:default; }
.presence-avatar:first-child { margin-left:0; }
.presence-avatar:hover { transform:translateY(-2px); z-index:5; }
.presence-dot { position:absolute; bottom:0; right:0; width:7px; height:7px; border-radius:50%; background:var(--green); border:1.5px solid var(--bg); box-shadow:0 0 5px rgba(52,211,153,0.7); }
.presence-typing { font-size:0.68rem; color:var(--text-muted); font-style:italic; animation:presence-pulse 1.4s ease-in-out infinite; }
@keyframes presence-pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* share modal user list */
.user-select-list { display:flex; flex-direction:column; gap:0.4rem; max-height:260px; overflow-y:auto; }
.user-row { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 0.85rem; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:9px; cursor:pointer; transition:all 0.15s; user-select:none; }
.user-row:hover { background:rgba(255,255,255,0.06); border-color:var(--border-hi); }
.user-row.selected { background:rgba(124,92,252,0.12); border-color:rgba(124,92,252,0.4); }
.user-avatar { width:32px; height:32px; border-radius:50%; background:rgba(124,92,252,0.15); border:1.5px solid rgba(124,92,252,0.3); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.user-meta { flex:1; min-width:0; }
.user-name { font-size:0.84rem; font-weight:600; color:var(--text); }
.user-role { font-size:0.68rem; color:var(--text-muted); }
.user-check { width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border-hi); background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.62rem; color:transparent; transition:all 0.15s; }
.user-row.selected .user-check { background:rgba(124,92,252,0.3); border-color:rgba(124,92,252,0.7); color:var(--accent2); }

/* icon picker */
.icon-picker { display:flex; gap:0.4rem; flex-wrap:wrap; margin-top:0.3rem; }
.icon-opt { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; border:1.5px solid var(--border); background:rgba(255,255,255,0.04); transition:all 0.12s; }
.icon-opt:hover { border-color:var(--border-hi); background:rgba(255,255,255,0.08); }
.icon-opt.active { border-color:rgba(124,92,252,0.6); background:rgba(124,92,252,0.15); }

/* empty state */
.empty-state { text-align:center; padding:2rem 1rem; color:var(--text-muted); font-size:0.84rem; }
.empty-state .es-icon { font-size:2rem; margin-bottom:0.5rem; }

@media(max-width:540px){
  .body-grid{gap:0.65rem;}
  .card,.glass-card,.glass-card-section{padding:1rem 1.1rem;}
}
@media(max-width:380px){
  .card-title{font-size:0.82rem;}
  .card-desc{font-size:0.66rem;}
}