/* ==========================================================================
   Boards (and the shared drag & drop visuals used by backlogs/taskboard)
   ========================================================================== */

/* ---------- Shared sortable ---------- */
.sortable-ghost {
  position: fixed; z-index: 1000; pointer-events: none; margin: 0 !important;
  box-shadow: var(--shadow-lg) !important; opacity: .96; transition: none;
}
.sortable-placeholder { opacity: .35; outline: 2px dashed color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: -2px; }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.min-w-0 { min-width: 0; }

/* ---------- Board list ---------- */
.board-kind-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); flex-shrink: 0; vertical-align: middle; }
.board-kind-icon .icon { width: 15px; height: 15px; }
.board-kind-icon-lg { width: 38px; height: 38px; border-radius: var(--radius-lg); }
.board-kind-icon-lg .icon { width: 20px; height: 20px; }
.boards-table-name { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.board-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.board-kind { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color .12s, background .12s; }
.board-kind:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.board-kind input { margin-top: 6px; accent-color: var(--primary); }
.board-kind:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.board-kind.is-disabled { opacity: .55; cursor: not-allowed; }
.board-kind-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board-kind-text .badge { height: 18px; font-size: .72rem; vertical-align: 1px; }

/* ---------- Board page ---------- */
body.board-page .content { padding-bottom: 12px; }
.board-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.board-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.board-title { margin: 0; font-size: 1.45rem; word-break: break-word; }
.board-title[data-board-title] { cursor: text; border-radius: var(--radius-sm); padding: 0 4px; margin-left: -4px; }
.board-title[data-board-title]:hover { background: var(--bg-hover); }
.board-subtitle { margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.board-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-toolbar .btn.active { background: var(--bg-active); border-color: var(--primary); color: var(--primary); }
.board-search { position: relative; display: inline-flex; align-items: center; }
.board-search .icon { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; width: 14px; height: 14px; }
.board-search .input { padding-left: 28px; width: 220px; }
.board-filter-hint { align-items: center; padding: 8px 12px; }

.board { position: relative; }
.board-columns {
  display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 14px; min-height: calc(100vh - var(--header-h) - 200px);
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.board-column {
  flex: 0 0 300px; width: 300px; max-height: calc(100vh - var(--header-h) - 170px); display: flex; flex-direction: column;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); scroll-snap-align: start;
  border-top: 3px solid var(--col-c, var(--border));
}
.board-column.sortable-ghost { max-height: 60vh; overflow: hidden; }
.board-column-header { display: flex; align-items: center; gap: 6px; padding: 9px 8px 8px 12px; min-height: 44px; user-select: none; }
.can-drag + * .board-column-header, .board-column-header { cursor: default; }
.board-column-title { margin: 0; font-size: .98rem; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-column-title a { color: var(--text); }
.board-column-title[data-column-rename] { cursor: text; border-radius: var(--radius-sm); }
.board-column-title[data-column-rename]:hover { background: var(--bg-hover); }
.board-column-title .input { width: 100%; }
.board-column-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--col-c); flex-shrink: 0; }
.board-column-header .dropdown-menu { min-width: 220px; }
.board-cards { flex: 1 1 auto; overflow-y: auto; padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.board-empty { border: 2px dashed var(--border); border-radius: var(--radius); padding: 18px 10px; text-align: center; color: var(--text-faint); font-size: .9rem; }
.board-quick-add { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.board-quick-add-row { display: flex; gap: 6px; align-items: center; }
.board-quick-add-row select { flex: 1 1 auto; min-width: 0; }
.board-column-add { background: transparent; border: 2px dashed var(--border); border-top-width: 2px; flex-basis: 280px; width: 280px; }
.board-add-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.board-add-list .board-column-title { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.board-no-lists { padding: 20px; }

/* ---------- Cards ---------- */
.board-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--type-c, var(--primary));
  border-radius: var(--radius); padding: 8px 10px 8px 10px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 5px;
  transition: box-shadow .12s, border-color .12s, opacity .2s; touch-action: auto;
}
.board-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); border-left-color: var(--type-c, var(--primary)); }
.board-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.board-card.is-draggable { cursor: grab; }
.board-card.is-closed .board-card-subject { color: var(--text-muted); }
.board-card.is-saving { opacity: .6; pointer-events: none; }
.board-card.is-saving::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
.board-card.is-new { animation: board-card-in .9s ease; }
@keyframes board-card-in { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 55%, transparent); } to { box-shadow: var(--shadow-sm); } }
.board-card-top { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.board-card-top .type-label { font-size: .72rem; }
.board-card-id { color: var(--text-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.board-card-top .priority-dot { margin-left: auto; }
.board-card-remove { margin-left: auto; border: 0; background: none; color: var(--text-faint); width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .1s; padding: 0; }
.board-card-top .priority-dot + .board-card-remove { margin-left: 4px; }
.board-card:hover .board-card-remove, .board-card:focus-within .board-card-remove { opacity: 1; }
.board-card-remove:hover { background: var(--danger-soft); color: var(--danger); }
.board-card-remove .icon { width: 13px; height: 13px; }
.board-card-subject { color: var(--text); font-weight: 500; line-height: 1.35; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.board-card-subject:hover { color: var(--link); }
.board-card-project { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.board-card-project .icon { width: 12px; height: 12px; }
.board-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--text-muted); }
.board-card-meta .status-badge { font-size: .76rem; }
.board-card-meta .grow { flex: 1 1 auto; }
.board-card-points { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--bg-muted); color: var(--text); font-weight: 600; font-size: .76rem; font-variant-numeric: tabular-nums; }
.board-card-due { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.board-card-due .icon { width: 12px; height: 12px; }
.board-card-due.is-overdue { color: var(--danger); font-weight: 600; }
.board-card-due.is-soon { color: var(--warning); }

@media (max-width: 900px) {
  .board-column { flex-basis: 82vw; width: 82vw; max-width: 320px; max-height: none; }
  .board-columns { min-height: 0; scroll-snap-type: x mandatory; }
  .board-search .input { width: 100%; }
  .board-search { flex: 1 1 160px; }
  .board-toolbar { width: 100%; }
  .board-kind-grid { grid-template-columns: 1fr; }
  .board-card-remove { opacity: 1; }
}