/* Phase 20C — Bulk Update Selected Rows: selection column, action bar, modal. */

/* The select column is hidden by default and only shown for editors (the board
   table gets .bulk-select-on in render()). Hidden on mobile, where rows open the
   truck detail modal on tap instead. */
.col-select { display: none; }
table.bulk-select-on .col-select {
  display: table-cell;
  width: 34px;
  min-width: 34px;
  text-align: center;
  padding: 0 4px;
}
@media (max-width: 768px) {
  table.bulk-select-on .col-select { display: none; }
}

.bulk-select-box {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent, #3b82f6);
  vertical-align: middle;
}

/* Highlight selected rows so the selection is obvious even after scrolling.
   Uses the active theme accent (pink in the light/Rose theme) instead of a fixed
   blue so it matches the Bulk Update Selected modal. */
tbody tr.bulk-selected-row {
  background: var(--accent-soft, rgba(224, 70, 126, 0.12)) !important;
}

/* Phase 20C.2 — individually Ctrl/Cmd-selected cells (the primary mini-bulk
   trigger). Themed ring + soft fill so the selection reads clearly in light and
   dark themes. */
td.bulk-cell-selected {
  box-shadow: inset 0 0 0 2px var(--accent, #e0467e);
  background: var(--accent-soft, rgba(224, 70, 126, 0.12)) !important;
}

/* ── Action bar ─────────────────────────────────────────────────────────── */
.bulk-select-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin: 0 0 8px;
  border: 1px solid var(--accent, #3b82f6);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.08);
}
.bulk-select-count { font-size: 0.85rem; color: var(--text, #e5e7eb); }
.bulk-select-count strong { font-size: 1rem; }
.bulk-select-bar .btn { font-size: 0.78rem; padding: 5px 12px; }
/* Phase 20C.2 — disabled Bulk Update (ragged cell selection) + guidance text. */
.bulk-select-bar .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bulk-select-msg {
  font-size: 0.76rem;
  color: var(--amber, #f59e0b);
  white-space: nowrap;
}

/* ── Modal body ─────────────────────────────────────────────────────────── */
.bu-section-title {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted, #9ca3af);
  margin: 14px 0 6px;
}
.bu-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border, #2a2f3a);
}
.bu-field-row label.bu-field-name {
  flex: 0 0 120px;
  font-size: 0.82rem;
  cursor: pointer;
}
.bu-field-row input[type="text"],
.bu-field-row input[type="time"],
.bu-field-row select.bu-field-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.82rem;
  background: var(--input-bg, #1a1f29);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 5px;
}
.bu-field-row input:disabled,
.bu-field-row select:disabled { opacity: 0.4; }
.bu-clear-wrap {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--muted, #9ca3af);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.bu-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid var(--amber, #f59e0b);
  color: var(--amber, #f59e0b);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
  margin: 10px 0;
}
.bu-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--red, #ef4444);
  color: var(--red, #ef4444);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.8rem;
  margin: 10px 0;
}

/* Preview table */
.bu-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  margin-top: 4px;
}
.bu-preview-table th,
.bu-preview-table td {
  border: 1px solid var(--border, #2a2f3a);
  padding: 4px 7px;
  text-align: left;
  white-space: nowrap;
}
.bu-preview-table th { background: var(--input-bg, #1a1f29); color: var(--muted, #9ca3af); }
.bu-old { color: var(--muted, #9ca3af); text-decoration: line-through; }
.bu-new { color: var(--green, #22c55e); }
.bu-preview-scroll { max-height: 260px; overflow: auto; }

/* ── Phase 20C.1 / 20C.2 — Mini bulk edit (per-column) ─────────────────────── */
/* Small ✎ button injected into eligible column headers while cells/rows are
   selected. Themed with the active accent (pink in the light/Rose theme) so it
   matches the Bulk Update Selected modal rather than a fixed blue. */
.mini-bulk-btn {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  font-size: 0.72rem;
  line-height: 1.3;
  cursor: pointer;
  border: 1px solid var(--accent, #e0467e);
  border-radius: 4px;
  background: var(--accent-soft, rgba(224, 70, 126, 0.14));
  color: var(--accent, #e0467e);
  vertical-align: middle;
}
.mini-bulk-btn:hover { background: var(--accent-soft-strong, rgba(224, 70, 126, 0.28)); }
/* Hidden on mobile, where row selection itself is hidden. */
@media (max-width: 768px) {
  .mini-bulk-btn { display: none; }
}

/* Compact one-field editor popover. Re-themed in 20C.2 to match the Bulk Update
   Selected modal (.modal): light surface, pink border/title, theme inputs —
   replacing the old dark/black popover. Stays compact and clamps to the
   viewport (positioning handled in JS). */
.mini-bulk-pop {
  position: fixed;
  z-index: 1200;
  width: 240px;
  max-width: calc(100vw - 16px);
  padding: 12px 14px;
  border: 1px solid var(--accent, #e0467e);
  border-radius: 10px;
  background: var(--surface, #fff7fa);
  color: var(--text, #3a2330);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  font-size: 0.82rem;
}
.mini-bulk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #f3c9d8);
}
.mini-bulk-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
  font-size: 1rem;
  color: var(--accent, #e0467e);
}
.mini-bulk-count { font-size: 0.72rem; color: var(--muted, #8a6b76); }
.mini-bulk-input-wrap input,
.mini-bulk-input-wrap select {
  width: 100%;
  padding: 6px 9px;
  font-size: 0.82rem;
  background: var(--surface2, #fbe6ee);
  color: var(--text, #3a2330);
  border: 1px solid var(--border, #f3c9d8);
  border-radius: 5px;
}
.mini-bulk-input-wrap input:focus,
.mini-bulk-input-wrap select:focus {
  outline: none;
  border-color: var(--accent, #e0467e);
}
.mini-bulk-input-wrap input:disabled,
.mini-bulk-input-wrap select:disabled { opacity: 0.4; }
.mini-bulk-clear {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: 0.74rem;
  color: var(--muted, #8a6b76);
}
.mini-bulk-warn {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid var(--amber, #f59e0b);
  color: var(--amber, #f59e0b);
}
.mini-bulk-error {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 0.74rem;
  border-radius: 5px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--red, #ef4444);
  color: var(--red, #ef4444);
}
.mini-bulk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.mini-bulk-actions .btn { font-size: 0.76rem; padding: 4px 12px; }