/* Kanban Board component (2026-08-03) -- [lpos_board], includes/Components/KanbanBoard.php.
   Token-driven glass HUD, matches the .lpos-c-subpanel / .lpos-c-icon-btn / archive-card design
   language. Fixed columns, FIT-the-panel: the whole board is one flex column (head + columns
   row), the columns row is a CSS grid that fills the remaining height, and each column's card
   stack is a flex column whose items share the available height evenly -- never a scrollbar,
   never scroll-to-fit. Card overflow is handled by pagination (kanban-board.js), same pattern
   CardGrid uses for its archive grid. 100% var(--lpos-*) token references; every fallback value
   equals that token's canon :where(:root) value in assets/css/console-tokens.css. */

.lpos-kanban {
  display: flex;
  flex-direction: column;
  gap: var(--lpos-gap, 12px);
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
  box-sizing: border-box;
}

/* ---- head row: title left, sample badge right (only rendered when demo data is showing) ---- */
.lpos-kanban__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-gap, 12px);
  min-height: var(--lpos-titlebar-h, 64px);
}
.lpos-kanban__title { flex: 1 1 auto; min-width: 0; margin: 0; }
.lpos-kanban__title h2 {
  margin: 0;
  font: 700 var(--lpos-text-lg, 20px) / 1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpos-kanban__demo-badge {
  flex: 0 0 auto;
  font: 600 var(--lpos-text-xs, 13px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border-radius: var(--lpos-radius-pill, 999px);
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-2, 40%), transparent);
  background: var(--lpos-glass-1, rgba(255,255,255,0.035));
  white-space: nowrap;
}

/* ---- columns row: liquid grid, 3-4 lanes side by side, fills remaining panel height ---- */
.lpos-kanban__columns {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--lpos-kanban-cols, 3), minmax(0, 1fr));
  gap: var(--lpos-gap, 12px);
  box-sizing: border-box;
}
/* narrow panels: stack lanes as equal-height rows instead of squeezing columns unreadably thin */
@media (max-width: 720px) {
  .lpos-kanban__columns { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

/* ---- one column: frosted sub-panel, header + card stack + optional pager, column layout ---- */
.lpos-c-subpanel--kanban {
  --lpos-kanban-accent: var(--lpos-accent, #00D4FF);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--lpos-subpanel-pad, 6px);
  gap: var(--lpos-space-sm, 8px);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
.lpos-kanban__col-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-space-sm, 8px);
  padding: 0 var(--lpos-space-xs, 4px) var(--lpos-space-xs, 4px);
  border-bottom: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-kanban-accent) var(--lpos-border-alpha-1, 30%), transparent);
}
.lpos-kanban__col-head h3 {
  margin: 0;
  font: 700 var(--lpos-text-sm, 14px) / 1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpos-kanban__count {
  flex: 0 0 auto;
  min-width: 1.6em;
  text-align: center;
  font: 700 var(--lpos-text-xs, 13px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-kanban-accent);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border-radius: var(--lpos-radius-pill, 999px);
  background: color-mix(in srgb, var(--lpos-kanban-accent) var(--lpos-border-alpha-2, 40%), transparent);
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-kanban-accent) 55%, transparent);
}

.lpos-kanban__empty {
  margin: 0;
  padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
  color: var(--lpos-muted, #A8B2C7);
  font: 400 var(--lpos-text-sm, 14px) / 1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

/* ---- card stack: flex column, cards share available height evenly, NEVER scrolls -- excess
   cards are paginated ([hidden]) by kanban-board.js, same contract as CardGrid's archive list. ---- */
.lpos-kanban__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-sm, 8px);
  box-sizing: border-box;
  overflow: hidden;
}
.lpos-kanban__cards.-drag-over {
  outline: var(--lpos-border-width-active, 2px) dashed var(--lpos-kanban-accent, var(--lpos-accent, #00D4FF));
  outline-offset: calc(-1 * var(--lpos-border-width-active, 2px));
  border-radius: var(--lpos-radius-control, 8px);
}

.lpos-kanban__card {
  --lpos-kanban-card-accent: var(--lpos-kanban-accent, var(--lpos-accent, #00D4FF));
  box-sizing: border-box;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lpos-space-xs, 4px);
  padding: var(--lpos-space-sm, 8px) var(--lpos-subpanel-pad, 6px);
  /* glass fill: console-tokens.css (one canonical rule) */
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-kanban-card-accent) var(--lpos-border-alpha-1, 30%), transparent);
  border-radius: var(--lpos-radius-control, 8px);
  cursor: grab;
  transition: border-color var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              opacity var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
}
.lpos-kanban__card[hidden] { display: none; }
.lpos-kanban__card:hover {
  border-color: var(--lpos-kanban-card-accent);
}
.lpos-kanban__card:active { cursor: grabbing; }
.lpos-kanban__card.-dragging { opacity: .45; }

.lpos-kanban__card-title {
  font: 600 var(--lpos-text-sm, 14px) / 1.35 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lpos-kanban__card-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-space-sm, 8px);
  flex-wrap: wrap;
}
.lpos-kanban__card-tag {
  font: 600 var(--lpos-text-2xs, 12px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lpos-kanban-card-accent);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border-radius: var(--lpos-radius-pill, 999px);
  background: color-mix(in srgb, var(--lpos-kanban-card-accent) var(--lpos-border-alpha-2, 40%), transparent);
  white-space: nowrap;
}
.lpos-kanban__card-meta {
  font: 400 var(--lpos-text-2xs, 12px) / 1.3 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- per-column pager: BARE icon-button group (2026-08-10: dropped the subpanel/cluster
   wrapper classes -- it sits inside the column subpanel, which was panel-in-panel. The layout
   those classes supplied moves here.) ---- */
.lpos-kanban__pager { flex: 0 0 auto; align-self: center; display: flex; align-items: center; gap: var(--lpos-gap, 12px); }
.lpos-kanban__pageinfo {
  font: 600 var(--lpos-text-sm, 14px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  min-width: 3.5ch;
  text-align: center;
  padding: 0 var(--lpos-space-xs, 4px);
  white-space: nowrap;
}

/* ---- icon buttons: ONE recipe for chat/form/kanban/calendar now lives in the COMPONENT ICON
   BUTTON block at the end of console-tokens.css (2026-08-10, JD: "make all four match"). This
   sheet's local copy is deleted -- the four had drifted into four different buttons. ---- */

@media (prefers-reduced-motion: reduce) {
  .lpos-kanban__card { transition-duration: 0ms !important; }
}