/* Kanban board: a horizontal row of columns; each column is a stack of cards.
   Columns scroll horizontally when they overflow (mobile-friendly).
   Colours, borders, radius, shadow and spacing come from the active CiviCRM
   theme (RiverLea --crm-* variables) with fallbacks equal to the original
   values, so the board follows the active stream and dark mode; it degrades to
   the original look under Greenwich / non-RiverLea themes. */

.crm-search-display-kanban-board {
  display: flex;
  flex-direction: row;
  gap: var(--crm-flex-gap, 12px);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.crm-search-display-kanban-column {
  flex: 0 0 260px;
  max-width: 300px;
  background: var(--crm-layer1-bg-color, #f4f6f8);
  border: var(--crm-border, 1px solid #e0e4e8);
  border-radius: var(--crm-l-radius, 6px);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
}

.crm-search-display-kanban-column-null {
  background: var(--crm-layer2-bg-color, #f0f0f0);
}

.crm-search-display-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--crm-padding-small, 8px) var(--crm-padding-medium, 10px);
  font-weight: bold;
  border-bottom: 1px solid var(--crm-border-color, #e0e4e8);
  position: sticky;
  top: 0;
  background: inherit;
  border-top-left-radius: var(--crm-l-radius, 6px);
  border-top-right-radius: var(--crm-l-radius, 6px);
}

.crm-search-display-kanban-column-count {
  background: var(--crm-secondary-color, #6c757d);
  color: var(--crm-secondary-text-color, #fff);
}

.crm-search-display-kanban-column-cards {
  padding: var(--crm-padding-small, 8px);
  overflow-y: auto;
  flex: 1 1 auto;
}

.crm-search-display-kanban-card {
  background: var(--crm-container-bg-color, #fff);
  color: var(--crm-text-color, inherit);
  border: var(--crm-border, 1px solid #dfe3e8);
  border-radius: var(--crm-l-radius, 5px);
  box-shadow: var(--crm-shadow-block, 0 1px 2px rgba(0, 0, 0, 0.08));
  padding: var(--crm-padding-small, 8px) var(--crm-padding-medium, 10px);
  margin-bottom: var(--crm-padding-small, 8px);
}

/* When a column card hosts the Box component, strip the tile chrome so the Box
   card provides the surface; keep the spacing between cards. */
.crm-search-display-kanban-card.is-box-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: relative;
}

/* Box cards contain a kebab menu whose dropdown must escape the card. A column
   that scrolls (overflow) would clip it, so in box mode the columns don't scroll
   internally — the board/page scrolls instead. Default-tile boards keep their
   per-column scroll + sticky headers. */
.crm-search-display-kanban-board.is-box-cards .crm-search-display-kanban-column {
  max-height: none;
}
.crm-search-display-kanban-board.is-box-cards .crm-search-display-kanban-column-cards {
  overflow: visible;
}

/* Optional drag handle: a small grip pinned to the card's top-right corner. */
.crm-search-box-drag-handle {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  cursor: grab;
  padding: 2px 5px;
  border-radius: var(--crm-l-radius, 4px);
  color: var(--crm-inactive-color, #888);
  background: color-mix(in srgb, var(--crm-container-bg-color, #fff) 80%, transparent);
  line-height: 1;
}
.crm-search-box-drag-handle:active {
  cursor: grabbing;
}
/* On plain tiles the handle sits inside the padded card; nudge content clear. */
.crm-search-display-kanban-card:not(.is-box-card) {
  position: relative;
}

.crm-search-display-kanban-card-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.crm-search-display-kanban-card-subtitle {
  color: var(--crm-inactive-color, #666);
  font-size: 0.92em;
  margin-bottom: 4px;
}

.crm-search-display-kanban-card-image {
  margin-bottom: 6px;
}

.crm-search-display-kanban-card-img {
  max-width: 100%;
  max-height: 120px;
  border-radius: var(--crm-l-radius, 4px);
  display: block;
}

.crm-search-display-kanban-card-field {
  font-size: 0.9em;
  color: var(--crm-text-color, #555);
}

.crm-search-display-kanban-card-field label {
  color: var(--crm-inactive-color, #888);
  margin-right: 4px;
  font-weight: normal;
}

.crm-search-display-kanban-column-empty {
  color: var(--crm-inactive-color, #999);
  font-size: 0.9em;
  font-style: italic;
  padding: 8px 4px;
  text-align: center;
}

.crm-search-display-kanban-loading {
  padding: 16px;
  color: var(--crm-inactive-color, #666);
}

/* Drag affordance (only when the board is draggable) */
.crm-search-display-kanban-board.is-draggable .crm-search-display-kanban-card {
  cursor: grab;
}

.crm-search-display-kanban-board.is-draggable .crm-search-display-kanban-card:active {
  cursor: grabbing;
}

.crm-search-display-kanban-card-ghost {
  opacity: 0.5;
  background: color-mix(in srgb, var(--crm-info-color, #6c9bd2) 12%, var(--crm-container-bg-color, #fff));
  border: 1px dashed var(--crm-info-color, #6c9bd2);
}