/* Entity Kanban — generic group-by-any-select-field board (P2-05 · UX-03)
   All classes prefixed ek-. Tokens from styles.css :root (UX-01).

   UX-w7 (board parity): the CRM kanban is brought to visual parity with the
   main KanMail board (styles.css .kanban-board / .column / .card). The main
   board's chrome is:
     • #app paints the HugoAI-Background.jpg backdrop (fixed, dimmed 50→60%).
     • .column is TRANSPARENT so the backdrop shows through the gaps.
     • column titles carry a soft text-shadow so labels stay legible.
     • .card sits on --bg-dark, lifts on hover (translateY + shadow).
   We mirror that here: ek-columns are translucent (so the #app image shows
   through), headers get the text-shadow, and cards match the board card
   surface + hover lift. The mount transparency that lets the backdrop reach
   this board is owned by crm.css (.crm-mount:has(.ek-board)). */

/* ── Board container ────────────────────────────────────────────────────── */
.ek-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}

.ek-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  /* Board parity: translucent toolbar glass so the backdrop reads behind it. */
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.ek-toolbar-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ek-groupby-select {
  background: var(--bg-dark);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.ek-overflow-note {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--warning);
}

/* ── Search + filter toolbar (parity with the LIST view's q + f_ filters) ──
   Compact, wraps gracefully, and every control grows to a 44px touch target on
   phones. Same translucent glass as .ek-toolbar so it reads over the backdrop. */
.ek-filter-toolbar {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.ek-filter-search {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
}

.ek-search-input {
  width: 100%;
  background: var(--bg-dark);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.2;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ek-search-input::placeholder { color: var(--text-muted, var(--text-secondary)); }
.ek-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}
/* Hide the native search clear-cross in WebKit; we provide our own Clear button. */
.ek-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ek-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.ek-filter-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ek-filter-select {
  background: var(--bg-dark);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  max-width: 160px;
  transition: border-color 0.18s ease;
}
.ek-filter-select:focus { outline: none; border-color: var(--primary); }

.ek-filter-clear {
  flex: 0 0 auto;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ek-filter-clear:hover { border-color: var(--primary); background: var(--bg-light); }

.ek-filter-count {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── No-match banner (filter active, zero visible cards) ──────────────────── */
.ek-no-match {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.ek-no-match-icon { font-size: var(--text-md); opacity: 0.9; }
.ek-no-match-text { flex: 1 1 auto; min-width: 120px; }
.ek-no-match-clear {
  flex: 0 0 auto;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ek-no-match-clear:hover { border-color: var(--primary); background: var(--bg-light); }

/* ── Columns track ──────────────────────────────────────────────────────── */
.ek-columns {
  display: flex;
  gap: var(--space-3);
  flex: 1 1 0;
  overflow-x: auto;
  min-height: 0;
  padding-bottom: var(--space-1);
}

/* ── Individual column ──────────────────────────────────────────────────── */
.ek-column {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-width: 300px;
  flex: 1 1 240px;
  /* Board parity: translucent column glass so the #app HugoAI backdrop shows
     through (mirrors the main board's transparent .column), while keeping the
     CRM board's structured rounded chrome. ~78% --bg-card over transparent. */
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.ek-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  /* Slightly stronger glass on the header strip so the title reads cleanly. */
  background: color-mix(in srgb, var(--bg-light) 82%, transparent);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  user-select: none;
}

.ek-column-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
  /* Board parity: soft text-shadow keeps the title legible over the backdrop,
     matching styles.css `.column-header h3 { text-shadow … }`. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.ek-column-count {
  font-size: var(--text-xs);
  background: var(--bg-dark);
  color: var(--text-secondary);
  border-radius: 1rem;
  padding: var(--space-1) var(--space-2);
  min-width: 1.4rem;
  text-align: center;
}

.ek-column-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 60px;
}

/* Drop target affordances */
.ek-column.ek-drag-over {
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-card));
  border-color: var(--primary);
}

.ek-column.ek-drop-blocked {
  border-color: var(--danger);
  opacity: 0.6;
}

.ek-column.ek-drop-blocked .ek-column-header {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-light));
}

/* ── Add-column affordance (C-04 reserved slot) ─────────────────────────── */
.ek-add-column {
  display: flex;
  align-items: flex-start;
  min-width: 200px;
  flex: 0 0 auto;
  padding-top: var(--space-1);
}

.ek-add-column-btn {
  width: 100%;
  padding: var(--space-3);
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: not-allowed;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
/* Board parity: card surface matches the main board card (styles.css .card) —
   solid --bg-dark so the card reads as a crisp tile over the translucent
   column, with the same translateY hover lift + drop shadow. */
.ek-card {
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.18s ease, transform 0.15s ease;
  user-select: none;
}

.ek-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.4);
}

.ek-card.ek-card-dragging {
  opacity: 0.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.ek-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ek-card-lines {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ek-card-line {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ek-card-line-label {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Status / empty states ──────────────────────────────────────────────── */
.ek-state-loading,
.ek-state-empty,
.ek-state-error,
.ek-no-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-md);
  text-align: center;
}

.ek-empty-icon {
  font-size: var(--text-xl);
  opacity: 0.8;
}

.ek-empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.ek-empty-hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ek-state-error {
  color: var(--danger);
}

.ek-retry-btn {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ek-retry-btn:hover {
  border-color: var(--primary);
  background: var(--bg-light);
}

/* ── Inline column toast ────────────────────────────────────────────────── */
.ek-col-toast {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-card));
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--danger);
  margin-bottom: var(--space-1);
  word-break: break-word;
}

/* ══ CRM redesign W3 — stage lane colour + rich company cards ═══════════════
   The lane colour (--_lane) is set inline per column by entityKanban.js; the
   rich card atoms (avatar / signal / chip / money / mailbtn / skeleton) come
   from crm-design.css. */

/* Lane colour: 3px top bar + header dot. Header re-flows to dot · title …count */
.ek-column {
  border-top: 3px solid var(--_lane, var(--border-color));
}
.ek-column-header {
  justify-content: flex-start;
  gap: var(--space-2);
}
.ek-column-count {
  margin-left: auto;
}
.ek-column-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--_lane, var(--text-secondary));
  flex: none;
}

/* Rich company card */
.ek-card--company {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ekc-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.ekc-id { flex: 1; min-width: 0; }
.ekc-name {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.ekc-no {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.ekc-signal { flex: none; align-self: flex-start; }

.ekc-contact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
}
.ekc-contact-text { flex: 1; min-width: 0; }
.ekc-contact-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ekc-contact-email {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ekc-contact-none {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.ekc-foot {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.ekc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ekc-money {
  flex: none;
  text-align: right;
}
.ekc-money .crm-money { font-size: var(--text-sm); }

/* The rich company card is a column, not a single ellipsised line — let it grow */
.ek-card--company .ekc-name { white-space: normal; }

/* ── Rich project card (A4) ───────────────────────────────────────────────
   Mirrors the company card's three-row column layout. Reuses the shared
   crm-chip / crm-money atoms; the .ekp-* classes mirror the .ekc-* ones so
   the two rich cards stay visually consistent and responsive. */
.ek-card--project {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ekp-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.ekp-id { flex: 1; min-width: 0; }
.ekp-name {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow: hidden;
}
.ekp-company {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ekp-status {
  flex: none;
  align-self: flex-start;
  text-transform: capitalize;
}

.ekp-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 16px;
}
.ekp-date {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.ekp-date-label {
  color: var(--text-secondary);
  opacity: 0.8;
}

.ekp-foot {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}
.ekp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ekp-money {
  flex: none;
  text-align: right;
}
.ekp-money .crm-money { font-size: var(--text-sm); }

/* ── Tablet: fixed 330px lanes + peek, scroll-snap ──────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ek-columns {
    scroll-snap-type: x mandatory;
  }
  .ek-column {
    scroll-snap-align: start;
    min-width: 330px;
    max-width: 330px;
    flex: 0 0 330px;
  }
}

/* ── Phone: one lane per screen, swipe (scroll-snap) + peek of the next ──── */
@media (max-width: 767px) {
  .ek-columns {
    scroll-snap-type: x mandatory;
  }
  .ek-column {
    scroll-snap-align: start;
    min-width: 85vw;
    max-width: 85vw;
    flex: 0 0 85vw;
  }
  .crm-mailbtn { width: var(--touch); height: var(--touch); }

  /* Filter toolbar: full-width search on its own row; controls grow to 44px. */
  .ek-filter-search { flex: 1 1 100%; }
  .ek-search-input,
  .ek-filter-select,
  .ek-filter-clear,
  .ek-no-match-clear {
    min-height: var(--touch);
  }
  .ek-filter-group { flex: 1 1 auto; }
  .ek-filter-select { flex: 1 1 auto; max-width: none; }
}