/*
 * bulk-action-bar.css — Seeds tab multi-select bar + selection state
 * Bar sits at bottom:0 covering the nav while active (iOS Photos pattern).
 * Long-press on a starter row enters bulk mode. Tokens: --v2-* only.
 */

/* ── Selection state on starter rows (CSS-driven, no re-render) ──────────── */

/* Make room for the checkbox circle on the left + scale animation on press */
#seed-grid.bulk-mode .plant-starter-row {
  position: relative;
  padding-left: 44px;
  transition: background var(--v2-transition-fast) var(--v2-ease-out),
              transform var(--v2-transition-fast) var(--v2-ease-out);
}

#seed-grid.bulk-mode .plant-starter-row::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: var(--v2-radius-full);
  border: 2px solid var(--v2-border-strong);
  background: var(--v2-bg-card);
  transition: border-color var(--v2-transition-fast) var(--v2-ease-out),
              background var(--v2-transition-fast) var(--v2-ease-spring),
              transform var(--v2-transition-fast) var(--v2-ease-spring);
}

/* Selected: filled botanical circle + checkmark */
#seed-grid.bulk-mode .plant-starter-row.bulk-selected::before {
  border-color: var(--v2-accent-botanical);
  background: var(--v2-accent-botanical);
  transform: translateY(-50%) scale(1.05);
}

#seed-grid.bulk-mode .plant-starter-row.bulk-selected::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
  pointer-events: none;
}

/* Selected card — background tint only (no ring; corner-shape mismatches with
   parent accordion clipping made the ring look broken at the bottom). The
   checkmark circle + tint are sufficient signal. */
#seed-grid.bulk-mode .plant-starter-row.bulk-selected {
  background: var(--v2-pop-sage-bg);
}

/* Long-press visual cue — subtle scale-down */
#seed-grid .plant-starter-row.is-long-pressing {
  transform: scale(0.97);
  background: var(--v2-bg-card-hover);
}

/* Subtle "tappable" cue for non-selected rows in bulk mode */
#seed-grid.bulk-mode .plant-starter-row:not(.bulk-selected):active {
  background: var(--v2-bg-card-hover);
}

/* ── Bulk action bar — replaces nav while active ──────────────────────────── */

.bulk-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;  /* above bottom nav (which sits ~50) */

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));

  background: var(--v2-bg-panel);
  border-top: 1px solid var(--v2-edge);
  box-shadow: 0 -8px 24px oklch(18% 0.02 150 / 0.10);

  /* hidden by default — slides up when .is-open is added */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform var(--v2-transition-sheet) var(--v2-ease-decel),
              visibility 0s var(--v2-transition-sheet);
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .bulk-action-bar {
    background: oklch(98% 0.005 85 / 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}

.bulk-action-bar.is-open {
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--v2-transition-sheet) var(--v2-ease-decel),
              visibility 0s 0s;
}

/* Close (X) — round, low-emphasis */
.bulk-bar-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--v2-radius-full);
  background: var(--v2-bg-secondary);
  border: none;
  color: var(--v2-text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--v2-transition-fast) var(--v2-ease-out),
              transform var(--v2-transition-fast) var(--v2-ease-out);
}

.bulk-bar-close:active {
  background: var(--v2-edge);
  transform: scale(0.92);
}

/* Count — primary text, takes remaining space */
.bulk-bar-count {
  flex: 1;
  min-width: 0;
  font: 600 0.9375rem/1.2 'DM Sans', sans-serif;
  color: var(--v2-text-primary);
  letter-spacing: -0.01em;
}

/* Actions cluster on the right */
.bulk-bar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Pill action button — 40px height, icon + label */
.bulk-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--v2-radius-full);
  border: none;
  font: 600 0.875rem/1 'DM Sans', sans-serif;
  letter-spacing: -0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--v2-transition-fast) var(--v2-ease-out),
              transform var(--v2-transition-fast) var(--v2-ease-out),
              filter var(--v2-transition-fast) var(--v2-ease-out);
}

.bulk-bar-btn:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.bulk-bar-btn:active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(0.94);
}

.bulk-bar-btn-water {
  background: var(--v2-pop-slate-bg);
  color: var(--v2-pop-slate);
}

.bulk-bar-btn-harden {
  background: var(--v2-accent-botanical);
  color: var(--v2-text-on-dark);
}

/* Smaller phones: hide button labels, show icons only — but keep 40px tap target */
@media (max-width: 360px) {
  .bulk-bar-btn-label {
    display: none;
  }
  .bulk-bar-btn {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .bulk-bar-count {
    font-size: 0.8125rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bulk-action-bar,
  .bulk-action-bar.is-open,
  #seed-grid.bulk-mode .plant-starter-row,
  #seed-grid.bulk-mode .plant-starter-row::before,
  .bulk-bar-close,
  .bulk-bar-btn {
    transition: none;
  }
}