/* ─────────────────────────────────────────────────────────────────────────
   BULK BAR — the one selection-and-act strip for list views.

   Replaces the hand-rolled ".bulk-cancel-bar" block in the Outreach actions
   list and the select-all/select-none links duplicated in the person and
   holon export pickers. Extend with a modifier; never fork.

   Pairs with crm/js/bulk-select.js and crm/partials/_bulk_bar.html.

   Anatomy:
     .bulk-bar                 the strip; hidden until something is selected
     .bulk-bar__count          exact selected count (spec §9.7)
     .bulk-bar__skips          how many rows will be skipped, and why
     .bulk-bar__actions        the registered operations
     .bulk-bar__panel          one action's extra inputs, revealed on demand
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .bulk-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--elev-2);
  }

  /* Hidden until a row is ticked, so an empty bar never occupies the strip. */
  .bulk-bar[hidden] {
    display: none;
  }

  .bulk-bar__count {
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .bulk-bar__skips {
    margin: 0;
    color: var(--color-warning);
    font-size: var(--text-sm);
  }

  .bulk-bar__skips[hidden] {
    display: none;
  }

  .bulk-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
  }

  .bulk-bar__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    width: 100%;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
  }

  .bulk-bar__panel[hidden] {
    display: none;
  }

  .bulk-bar__panel-actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
  }

  /* Hidden while a panel is open, so the panel's own submit is the only
     button on screen. */
  .bulk-bar__actions[hidden] {
    display: none;
  }

  .bulk-bar__result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: var(--text-sm);
  }

  .bulk-bar__result--error {
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
    color: var(--color-danger);
  }

  /* The per-row and select-all checkbox cell. Narrow, and never the click
     target that opens a row — bulk-select.js stops that propagation. */
  .bulk-select-cell {
    width: 36px;
    text-align: center;
    /* .data-table td pads 16px each side, which leaves 4px of a 36px cell for
       the checkbox — it overflowed a cell that also clips with an ellipsis, so
       every row showed a checkbox trailed by a stray "…". The cell is a
       control, not text, so it carries the row's vertical padding only. */
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    text-overflow: clip;
  }
}