.kanban-demo-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px;
}

.kanban-demo-box {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.kanban-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.kanban-demo-grid label,
.kanban-demo-switches label {
  color: var(--muted);
  font-weight: 800;
  display: grid;
  gap: 6px;
}

.kanban-demo-switches,
.kanban-demo-actions,
.kanban-demo-status,
.kanban-demo-stage-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.kanban-demo-status span,
.kanban-demo-stage-stats span {
  background: #eef4ff;
  border: 1px solid #d8e5ff;
  border-radius: 6px;
  padding: 7px 10px;
  font-weight: 800;
}

.kanban-card-demo {
  border: 2px dashed #2f5bd8;
  background: #f7fbff;
}

.status.demo {
  background: #e9f7ef;
  color: #176b3a;
}

.secondary.danger {
  border-color: #f0b9b9;
  color: #9d1c1c;
}

@media (max-width: 900px) {
  .kanban-demo-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- board readability + motion ---------------------------------------- */
/* The card used to carry eight labelled fields, which made every card look the
   same from a metre away. Now: batch number, product, how much, for whom, by
   when. Everything else is one click away. */

.kanban-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  animation: kanban-in .32s ease both;
  animation-delay: calc(var(--card-index, 0) * 35ms);
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,35,75,.13); }
.kanban-card.dragging { opacity: .55; transform: scale(.97) rotate(-1deg); cursor: grabbing; }

@keyframes kanban-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.kanban-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-card__id {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.kanban-card__flag {
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.kanban-card__flag.is-critical { background: #fdeaec; color: #a3182a; }
.kanban-card__flag.is-urgent   { background: #fff3e0; color: #9a5b00; }

.kanban-card__product { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.kanban-card__meta { margin: 0; font-size: 12.5px; color: #5a6b8c; display: flex; gap: 6px; flex-wrap: wrap; }
.kanban-card__foot {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: #6b7a97;
  padding-top: 6px; border-top: 1px dashed #e3e9f5;
}
.kanban-card__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card__due { font-variant-numeric: tabular-nums; white-space: nowrap; }

.kanban-card.is-blocked { border-left: 3px solid #d92f3c; }

.kanban-card__demo {
  position: absolute; top: 6px; right: -1px;
  padding: 1px 6px; border-radius: 3px 0 0 3px;
  background: #eef1f8; color: #8a95ab; font-size: 9.5px; letter-spacing: .06em;
}

/* column: a coloured dot per stage makes the board scannable sideways */
.kanban-head { display: flex; align-items: center; gap: 8px; }
.kanban-head__dot { width: 8px; height: 8px; border-radius: 50%; background: #b9c4da; flex: none; }
[data-stage-code="queue"]     .kanban-head__dot { background: #98a5bd; }
[data-stage-code="mixing"]    .kanban-head__dot { background: #3f7fd8; }
[data-stage-code="forming"]   .kanban-head__dot { background: #4aa3c7; }
[data-stage-code="proofing"]  .kanban-head__dot { background: #d9a72f; }
[data-stage-code="oven"]      .kanban-head__dot { background: #e0722f; }
[data-stage-code="warehouse"] .kanban-head__dot { background: #7a6bd8; }
[data-stage-code="done"]      .kanban-head__dot { background: #2f9e55; }

.kanban-column { transition: background .18s ease, box-shadow .18s ease; }
.kanban-column.drop-target {
  background: #eef4ff;
  box-shadow: inset 0 0 0 2px #7aa7f0;
  border-radius: 10px;
}

/* a card that just arrived gets one flash, so a move is visible across the room */
.kanban-card.just-moved { animation: kanban-flash 1.1s ease-out; }
@keyframes kanban-flash {
  0%   { box-shadow: 0 0 0 0 rgba(47,158,85,.55); border-color: #2f9e55; }
  100% { box-shadow: 0 0 0 16px rgba(47,158,85,0); }
}
.badge.count-changed { animation: kanban-bump .45s ease; }
@keyframes kanban-bump { 40% { transform: scale(1.35); } }

.kanban-empty { padding: 14px 4px; font-size: 12.5px; opacity: .6; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .kanban-card, .kanban-card.just-moved, .badge.count-changed { animation: none !important; }
}

/* ---- board polish ------------------------------------------------------ */
.kanban-board-large { gap: 14px; padding-bottom: 8px; align-items: start; }

.kanban-column {
  background: #f4f6fb;
  border: 1px solid #e5eaf4;
  border-radius: 14px;
  padding: 10px;
}
.kanban-head {
  padding: 2px 4px 10px;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #46536b;
}
.kanban-head strong { flex: 1; font-size: 13px; }
.kanban-head .badge {
  background: #fff; border: 1px solid #dde4f0; color: #46536b;
  border-radius: 999px; min-width: 24px; text-align: center;
  font-size: 12px; font-weight: 700; padding: 1px 7px;
}
.kanban-column-search input {
  width: 100%; margin-bottom: 10px;
  border: 1px solid #e1e7f3; border-radius: 9px;
  padding: 7px 10px; font-size: 12.5px; background: #fff;
}
.kanban-column-search input:focus { outline: 2px solid #a9c4f5; outline-offset: -1px; }
.kanban-cards { display: flex; flex-direction: column; gap: 10px; }

.kanban-card {
  background: #fff;
  border: 1px solid #e4e9f4;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 2px rgba(16,32,64,.05);
}
.kanban-card__id { color: #16233d; }
.kanban-card__product { color: #24314c; }
.kanban-card__meta strong { color: #16233d; font-weight: 700; }

/* Actions are secondary to reading the board: quiet until the card is hovered,
   so a column of cards reads as information rather than a wall of buttons. */
.kanban-card-actions { display: flex; gap: 6px; margin-top: 2px; }
.kanban-card-actions form { flex: 1; margin: 0; }
.kanban-card-actions .primary,
.kanban-card-actions .secondary {
  width: 100%; padding: 7px 10px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kanban-card-actions .primary { background: #eef3ff; color: #2f5bd8; }
.kanban-card-actions .secondary {
  background: #fff; border-color: #e1e7f3; color: #61708c;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.kanban-card:hover .kanban-card-actions .primary { background: #2f5bd8; color: #fff; }
.kanban-card-actions .secondary:hover { border-color: #b9c8e6; color: #2f5bd8; }