/* Multi-select and bulk actions (Unit 3). Mobile-first: a full-width action
   bar pinned to the bottom on a phone, 44px targets, thumb-friendly. */

.select-toggle {
  min-height: 44px; padding: 0 1rem; margin-bottom: 0.7rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font: inherit; font-weight: 700; font-size: 0.85rem; color: var(--navy); cursor: pointer;
}
.select-toggle:hover { border-color: var(--gold); }

/* A one-line hint that appears only in Select mode, so the mode announces
   itself instead of the user guessing what a tap will now do. */
.select-hint {
  margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--navy);
}

/* Selecting mode does two jobs, because the old treatment (a ~1.4px outline)
   read as nothing on a dense grid:
   1. make the MODE obvious — every unpicked tile recedes to 60%, so picked
      ones advance and it is clear a tap now selects;
   2. make each SELECTION unmissable — a filled gold checkbox with a white tick,
      26px (over the 24px floor), sitting above the photo with a shadow so it
      survives a bright image underneath, plus a 3px gold border and a gold
      wash over the tile. Legible at 320px, where a 3-up grid tile is ~100px. */
.selecting [data-select-id] { cursor: pointer; position: relative; }
/* the whole tile is the touch target in select mode (min 44px) */
.selecting.thumb-grid [data-select-id] { min-height: 44px; }
.selecting .thumb-open { position: relative; }

/* unpicked tiles recede; the picked ones sit at full strength */
.selecting [data-select-id]:not(.is-selected) { opacity: 0.6; }
.selecting [data-select-id].is-selected { opacity: 1; }

/* the checkbox — an empty white-ringed box, filled gold once picked */
.selecting [data-select-id]::before {
  content: ""; position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid #fff; background: rgba(15,36,64,0.35);
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.selecting [data-select-id].is-selected::before {
  background: var(--gold); border-color: #fff;
}
.selecting [data-select-id].is-selected::after {
  content: "✓"; position: absolute; top: 8px; left: 8px; z-index: 4;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 1rem; line-height: 1;
}
/* the selected tile: a 3px gold border */
.selecting [data-select-id].is-selected {
  outline: 3px solid var(--gold); outline-offset: -3px;
}
/* a subtle gold wash over the photo (below the checkbox, above the image) */
.selecting.thumb-grid [data-select-id].is-selected .thumb-open::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: rgba(198,160,74,0.18); border-radius: 3px; pointer-events: none;
}
/* a selected table row: tint the whole row, keep the box centred and clear */
.selecting tr[data-select-id] { min-height: 44px; }
.selecting tr[data-select-id].is-selected { background: rgba(198,160,74,0.14); }
.selecting tr[data-select-id]::before,
.selecting tr[data-select-id].is-selected::after { top: 50%; transform: translateY(-50%); }
.selecting td:first-child { padding-left: 2.8rem; }

.select-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--navy); box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
.select-count { color: #fff; font-weight: 700; font-size: 0.85rem; margin-right: auto; }
.select-act {
  min-height: 44px; padding: 0 0.9rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.08);
  color: #fff; font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer;
}
.select-act:hover { background: rgba(255,255,255,0.18); }
.select-act:disabled { opacity: 0.4; cursor: default; }
.select-danger { border-color: var(--red); color: #fff; background: var(--red); }
.select-danger:hover { background: #a5322a; }

/* bulk-label modal */
.select-modal-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(15,36,64,0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto;
}
.select-modal {
  background: #fff; border-radius: 14px; padding: 1.1rem;
  width: 100%; max-width: 34rem; margin: 2rem 0;
}
.select-modal-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.2rem; color: var(--navy); margin: 0 0 0.8rem; }
.select-modal-row { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.select-modal-name { font-size: 0.78rem; color: var(--muted); word-break: break-word; }
.select-modal-row input { width: 100%; min-height: 44px; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.select-modal-row input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.select-modal-hint { font-size: 0.8rem; color: var(--muted); margin: 0.6rem 0; }
.select-modal-actions { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.select-modal-actions .primary { min-height: 44px; }

@media (min-width: 900px) {
  .select-bar { left: auto; right: 1.5rem; bottom: 1.5rem; border-radius: 12px; max-width: 40rem; }
}