/* Manage Lists modal + Add Car button. Uses the --dp-* theme vars from cars-datepicker.css. */
:root { --ml-surface:#161616; --ml-row:#222; --ml-row-border:#2e2e2e; --ml-editor:#1a1a1a; }
html.theme-light { --ml-surface:#ffffff; --ml-row:#ffffff; --ml-row-border:#e3e6eb; --ml-editor:#f8f9fb; }
html.theme-pink  { --ml-surface:#fffafc; --ml-row:#ffffff; --ml-row-border:#f5c6dc; --ml-editor:#fff0f6; }

#lists-modal .lists-card { display:flex; flex-direction:column; width:100%; max-width:56rem; max-height:90vh; overflow:hidden;
  background:var(--ml-surface); color:var(--dp-fg); border:1px solid var(--dp-border); border-radius:1rem; box-shadow:0 24px 60px rgba(0,0,0,.45); }
#lists-modal .lists-head { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--dp-border); flex:0 0 auto; }
#lists-modal .lists-close { width:36px; height:36px; border-radius:999px; font-size:1.6rem; line-height:1; color:var(--dp-muted); }
#lists-modal .lists-close:hover { background:var(--dp-hover); color:var(--dp-fg); }
#lists-modal .lists-body { padding:26px 28px; column-gap:28px; row-gap:28px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
#lists-modal .lists-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px; border-top:1px solid var(--dp-border); flex:0 0 auto; }
#lists-modal .lists-hint { font-size:.75rem; color:var(--dp-muted); }
#lists-modal .lists-title { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--dp-accent); margin-bottom:8px; }
#lists-modal .lists-count { font-size:.7rem; font-weight:600; padding:1px 8px; border-radius:999px; background:var(--dp-hover); color:var(--dp-muted); }
#lists-modal .list-editor { background:var(--ml-editor); border:1px solid var(--dp-border); border-radius:12px; padding:8px; min-height:110px; max-height:300px; overflow-y:auto; }
#lists-modal .list-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 8px 7px 6px; margin-bottom:6px;
  background:var(--ml-row); border:1px solid var(--ml-row-border); border-radius:9px; color:var(--dp-fg); transition:border-color .12s ease, transform .12s ease; }
#lists-modal .list-item:last-child { margin-bottom:0; }
#lists-modal .list-item:hover { border-color:var(--dp-accent); }
#lists-modal .drag-handle { color:var(--dp-muted); cursor:grab; padding:4px; border-radius:6px; }
#lists-modal .drag-handle:hover { color:var(--dp-accent); background:var(--dp-hover); }
#lists-modal .list-item-ghost { opacity:.4; }
#lists-modal .remove-item { width:28px; height:28px; border-radius:8px; color:#ef4444; flex:0 0 auto; }
#lists-modal .remove-item:hover { background:rgba(239,68,68,.14); }
#lists-modal .lists-add-row { display:flex; gap:8px; margin-top:8px; }
#lists-modal .lists-add-row .form-input { min-width:0; }
html.theme-light #lists-modal .lists-add-row .form-input { background:var(--ml-row); color:var(--dp-fg); border-color:var(--dp-border); }
#lists-modal .add-item { padding:0 14px; border-radius:10px; font-weight:600; font-size:.85rem; white-space:nowrap;
  color:var(--dp-accent); border:1px solid var(--dp-accent); background:transparent; }
#lists-modal .add-item:hover { background:var(--dp-accent); color:var(--dp-accent-fg); }

/* gentle pop-in / out */
@keyframes lists-pop-in  { from { opacity:0; transform:scale(.96) translateY(6px); } to { opacity:1; transform:none; } }
@keyframes lists-pop-out { from { opacity:1; transform:none; } to { opacity:0; transform:scale(.97); } }
#lists-modal.flex > .lists-card { animation:lists-pop-in .2s cubic-bezier(.2,.9,.3,1.1); }
#lists-modal.closing > .lists-card { animation:lists-pop-out .14s ease-in forwards; }

@media (max-width: 639.98px) {
  #lists-modal { padding:0 !important; }
  #lists-modal .lists-card { max-width:none; height:100%; max-height:none; border-radius:0; border:0; }
  #lists-modal .lists-head { padding:calc(8px + env(safe-area-inset-top)) 8px 8px 16px; }
  #lists-modal .lists-head h2 { font-size:1.15rem; }
  #lists-modal .lists-body { padding:18px 16px; row-gap:24px; }
  #lists-modal .lists-foot { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  #lists-modal .remove-item, #lists-modal .drag-handle { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; }
}

/* ---- Add Car button ---- */
.add-car-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:12px; font-weight:800; letter-spacing:.01em;
  color:#1a1200; background:linear-gradient(135deg,#ffe24a 0%,#ffc400 45%,#ff9f0a 100%);
  box-shadow:0 4px 14px rgba(255,180,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.add-car-btn i { font-size:.95em; }
.add-car-btn:hover { transform:scale(1.05); box-shadow:0 6px 22px rgba(255,190,0,.55), inset 0 1px 0 rgba(255,255,255,.5); filter:saturate(1.1); }
.add-car-btn:active { transform:scale(.98); }
html.theme-light .add-car-btn { color:#2a1f00; background:linear-gradient(135deg,#ffd84d 0%,#f5b800 55%,#e09a00 100%);
  box-shadow:0 3px 12px rgba(200,140,0,.3), inset 0 1px 0 rgba(255,255,255,.6); }
html.theme-light .add-car-btn:hover { box-shadow:0 6px 18px rgba(200,140,0,.45), inset 0 1px 0 rgba(255,255,255,.6); }
html.theme-pink .add-car-btn { color:#fff; background:linear-gradient(135deg,#ff6fb5 0%,#ec4899 50%,#d61f7a 100%);
  box-shadow:0 4px 14px rgba(236,72,153,.38), inset 0 1px 0 rgba(255,255,255,.35); }
html.theme-pink .add-car-btn:hover { box-shadow:0 6px 22px rgba(236,72,153,.55), inset 0 1px 0 rgba(255,255,255,.35); }