/*
  Component — My Lists page (自選)
  ─────────────────────────────────
  Full-page watchlist with chip nav and sortable tables.
  Reuses .scanner__chips-wrap / .scanner__chip / .scanner__table
  from scanner.css — only page-specific chrome is defined here.
*/

/* ── Page header ────────────────────────────────── */
.lists-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
}

.lists-page__title {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.lists-page__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  transition: background 0.12s;
}

.lists-page__action-btn:active {
  background: rgba(10, 120, 209, 0.08);
}

.lists-page__action-btn img {
  width: 22px;
  height: 22px;
}

/* ── Chip panels ────────────────────────────────── */
.lists-chip-panel { display: none; }
.lists-chip-panel.is-active { display: block; }

/* ── Chip states (lists page) ────────────────────── */

/* Unselected: white fill so chips read as tappable pills */
.lists-page .scanner__chip:not(.is-active) {
  background: var(--color-surface);
}

/* Unselected press */
.lists-page .scanner__chip:not(.is-active):active {
  background: rgba(10, 120, 209, 0.07);
  border-color: rgba(10, 120, 209, 0.30);
}

/* Active press — slight dim */
.lists-page .scanner__chip.is-active:active {
  opacity: 0.80;
}

/* ── Long-press swipe reveal ────────────────────── */
.scanner__row.lists-row {
  position: relative;
  display: block;   /* override flex — content wrapper takes over */
  padding: 0;
  overflow: hidden;
}

.lists-row__content {
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.lists-row.is-revealed .lists-row__content {
  transform: translateX(208px); /* 192px actions + 16px gap */
}

.lists-row.is-reveal-dragging .lists-row__content,
.lists-row.is-reveal-dragging .lists-row__actions {
  transition: none;
}

/* Three buttons slide in from the left */
.lists-row__actions {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.lists-row.is-revealed .lists-row__actions {
  transform: translateX(0);
}

/* Individual action button */
.lists-row__action {
  position: relative;
  overflow: hidden;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 0;
  transition: opacity 0.12s;
}

/* Gloss overlay — top-half white sheen */
.lists-row__action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  pointer-events: none;
}

.lists-row__action:active { opacity: 0.72; }

.lists-row__action img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.lists-row__action span {
  white-space: nowrap;
}

/* ── Edit mode header ───────────────────────────── */
.lists-page__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lists-page__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  transition: background 0.12s;
}
.lists-page__icon-btn:active { background: rgba(10, 120, 209, 0.08); }
.lists-page__icon-btn img { width: 20px; height: 20px; }

.lists-page__done-btn {
  display: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-blue);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.lists-page.is-edit-mode .lists-page__done-btn  { display: block; }
.lists-page.is-edit-mode #lists-edit-btn         { display: none; }
.lists-page.is-edit-mode .lists-page__action-btn { display: none; }

/* ── Edit mode row ──────────────────────────────── */

/* Hide price columns to give room for check + handle */
.lists-page.is-edit-mode .scanner__thead  { display: none; }
.lists-page.is-edit-mode .col-change,
.lists-page.is-edit-mode .col-volume      { display: none; }

/* Inset row content so checkbox/handle don't touch the container edge */
.lists-page.is-edit-mode .lists-row__content {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

/* Disable swipe reveal */
.lists-page.is-edit-mode .lists-row__actions { display: none; }
.lists-page.is-edit-mode .lists-row.is-revealed .lists-row__content {
  transform: translateX(0) !important;
}

/* Selected row highlight */
.lists-row.is-selected { background: rgba(10, 120, 209, 0.05); }

/* ── Checkbox ────────────────────────────────────── */
.lists-row__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  margin-right: var(--space-3);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.lists-page.is-edit-mode .lists-row__check { display: flex; }

.lists-row.is-selected .lists-row__check {
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

/* Checkmark via CSS */
.lists-row__check::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity 0.1s;
}
.lists-row.is-selected .lists-row__check::after { opacity: 1; }

/* ── Drag handle ─────────────────────────────────── */
.lists-row__handle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: var(--space-2);
  display: none;
  align-items: center;
  justify-content: center;
  touch-action: none;
  cursor: grab;
}
.lists-page.is-edit-mode .lists-row__handle { display: flex; }

.lists-row__handle-icon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}
.lists-row__handle-icon span {
  display: block;
  height: 2px;
  background: var(--color-text-tertiary);
  border-radius: 1px;
}

/* Drag ghost (appended to body) */
.lists-drag-ghost {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20), 0 3px 8px rgba(0,0,0,0.10) !important;
  transform: scale(1.025) !important;
}

/* Placeholder slot left behind while dragging */
.lists-drag-placeholder {
  background: rgba(10, 120, 209, 0.06);
  border: 1.5px dashed rgba(10, 120, 209, 0.24);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

/* ── Edit bottom bar ────────────────────────────── */
.lists-edit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-top);
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lists-edit-bar.is-visible { transform: translateY(0); }

.lists-edit-bar__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: opacity 0.12s;
}
.lists-edit-bar__action img {
  width: 22px;
  height: 22px;
  opacity: 0.6;
}
.lists-edit-bar__action:disabled { opacity: 0.32; }
.lists-edit-bar__action--destructive { color: var(--color-up); }
.lists-edit-bar__action--destructive img { opacity: 1; filter: invert(40%) sepia(80%) saturate(500%) hue-rotate(330deg); }

/* ── Bottom sheets ──────────────────────────────── */
.lists-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.lists-sheet-overlay.is-visible { opacity: 1; pointer-events: all; }

.lists-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 610;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lists-sheet.is-visible { transform: translateY(0); }

.lists-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  margin: 10px auto 0;
}

.lists-sheet__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.lists-sheet__list { padding: var(--space-2) 0; }

.lists-sheet__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px var(--space-6);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  text-align: left;
  transition: background 0.1s;
}
.lists-sheet__option:active { background: var(--color-bg); }
.lists-sheet__option.is-current { color: var(--color-text-tertiary); pointer-events: none; }

.lists-sheet__cancel {
  display: block;
  width: calc(100% - var(--space-8));
  margin: var(--space-2) var(--space-4) var(--space-4);
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Accent gradients per action */
.lists-row__action--sip {
  background: linear-gradient(160deg, #2A96E8 0%, #0A78D1 100%);
}
.lists-row__action--odd-lot {
  background: linear-gradient(160deg, #F88A3A 0%, #F36F12 100%);
}
.lists-row__action--alert {
  background: linear-gradient(160deg, #8860E8 0%, #6B48D9 100%);
}