/* /styles/shoppinglist.css
   Shopping List (CSP-safe, no inline styles, no @import)
   Uses tokens: var(--color-...), var(--radius-8), var(--space-*)
   Scope: classes used by the shopping module (.vm-*)
*/

/* ===== Toolbar ===== */
#shoppingToolbar{
  display:flex;
  gap: var(--space-10,10px);
  flex-wrap:wrap;
  margin-bottom: calc(var(--space-16,16px) - 4px);
}
#shoppingToolbar button{
  appearance:none;
  -webkit-appearance:none;
  line-height:1;
  padding:6px 10px;
  border:1px solid var(--color-accent);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  color: var(--color-text);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: background-color var(--dur-quick,120ms) var(--easing-standard,cubic-bezier(.2,0,.2,1));
}
#shoppingToolbar button:hover{
  background: var(--color-bg-subtle);
}

/* ===== Card ===== */
.vm-card{
  border:1px solid var(--color-border-strong);
  border-radius: var(--radius-8);
  padding: 1rem;
  background: var(--color-bg);
  box-shadow: var(--shadow-medium);
}
.vm-card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-10,10px);
  margin-bottom:.75rem;
}
.vm-card-h h3{
  margin:0;
  font-size:1.05rem;
  color: var(--color-text);
}
.vm-actions{
  display:flex;
  gap: var(--space-10,10px);
  align-items:center;
}

/* ===== Messages ===== */
.vm-muted{ color: var(--color-muted); }
.vm-error{ color:#b00020; } /* keep explicit error hue */

/* ===== Add-item form ===== */
.vm-form-row{
  display:flex;
  align-items:center;
  gap: var(--space-10,10px);
  margin: 0 0 .75rem 0;
}
#addItemForm input#newItem,
.vm-item-input{
  flex:1 1 auto;
  min-width:0;
  padding:.5rem .6rem;
  border:1px solid var(--color-border-subtle);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}
#addItemForm button{
  appearance:none;
  -webkit-appearance:none;
  padding:6px 10px;
  border:1px solid var(--color-accent);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  color: var(--color-text);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
#addItemForm button:hover{
  background: var(--color-bg-subtle);
}

/* ===== Lists ===== */
.vm-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.vm-list li{ margin:0; }

/* Row layout */
.vm-row{
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* Item text — visible and flexible */
.vm-row .vm-item-text{
  display:inline-block !important;
  color: var(--color-text) !important;
  opacity:1 !important;
  visibility:visible !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:pre-wrap !important; /* mirrors .text--prewrap utility */
}

/* Inline buttons (Edit, Delete, Save, Cancel) */
button.vm-inline{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  pointer-events:auto !important;
  padding:.35rem .55rem;
  line-height:1;
  border:1px solid var(--color-accent);
  border-radius: var(--radius-8);
  background: var(--color-bg);
  color: var(--color-text);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
button.vm-inline:hover{
  background: var(--color-bg-subtle);
}
.vm-inline.vm-danger{
  background:#b00020;
  color:#fff;
  border-color:#b00020;
  box-shadow:none;
}

/* Optional link-style shortcuts */
.vm-link{
  display:inline-block;
  padding:.35rem .6rem;
  border:1px solid transparent;
  border-radius: var(--radius-8);
  color: var(--color-accent);
  background:transparent;
  cursor:pointer;
}
.vm-link:hover{
  background: rgba(176,138,72,.06);
}

/* ✓ tick flash after save */
.vm-tick{
  display:inline-block;
  margin-left:.25rem;
  opacity:0;
  transition:opacity .2s ease-in-out;
  pointer-events:none;
}
.vm-tick.show{
  opacity:1;
}

/* Editing highlight state for inline edit mode */
.vm-item-input-editing{
  outline:1px solid var(--color-accent, #b08a48);
  outline-offset:0;
}

/* Touch-friendly targets */
@media (pointer:coarse){
  #shoppingToolbar button,
  .vm-inline,
  #addItemForm button{
    padding:.6rem .8rem;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #shoppingToolbar button,
  #addItemForm button,
  .vm-inline{
    transition:none;
  }
}