/* Filter group */
.filter-group { display: flex; gap: 6px; }
.mini-select {
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  cursor: pointer;
}

/* Task due dates */
.task-foot-right { display: flex; gap: 8px; align-items: center; }
.task-due {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.task-due.due-soon { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.task-due.due-late { background: rgba(239, 68, 68, 0.15); color: #b91c1c; font-weight: 600; }

/* Add column placeholder */
.column.add-col {
  background: transparent;
  border: 2px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  min-height: 80px;
  max-height: 120px;
  flex: 0 0 200px;
  cursor: pointer;
  transition: all .2s;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}
.column.add-col:hover {
  background: rgba(79, 70, 229, 0.05);
  border-color: var(--primary);
  color: var(--primary);
}
.column.add-col span { padding: 24px; }

/* Color picker */
.color-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 4px;
}
.cp-swatch {
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: all .15s;
}
.cp-swatch:hover { transform: scale(1.1); }
.cp-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px white inset; }

/* Editable column title */
.col-title[data-edit-col] { cursor: pointer; transition: color .15s; }
.col-title[data-edit-col]:hover { color: var(--primary); }

/* Toast */
.k-toast {
  position: fixed;
  bottom: 60px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 13px; font-weight: 500;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: all .25s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.k-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Mobile */
@media (max-width: 900px) {
  .top-left, .top-right { flex-wrap: wrap; }
  .filter-group { width: 100%; }
  .mini-select { flex: 1; }
  .board-picker { min-width: 0; flex: 1; }
  #search { flex: 1; min-width: 140px; }
  .column { flex: 0 0 260px; }
  .topbar { padding: 12px; }
  .back-link { font-size: 11px; }
}

/* Mobile polish v2 */
@media (max-width: 720px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .top-left, .top-right { gap: 6px; }
  .top-right { width: 100%; flex-wrap: wrap; }
  .logo { font-size: 16px; }
  .divider { display: none; }
  .board-picker { flex: 1; min-width: 0; padding: 6px 10px; font-size: 13px; }
  .icon-btn { width: 30px; height: 30px; font-size: 14px; }
  #search { flex: 1 1 100%; padding: 7px 12px; font-size: 13px; }
  .filter-group { width: 100%; gap: 4px; }
  .mini-select { flex: 1; padding: 6px 8px; font-size: 11px; }
  .btn-primary { font-size: 12px; padding: 7px 12px; }
  .back-link { display: none; }
  .board { padding: 14px; gap: 12px; }
  .column { flex: 0 0 80vw; max-width: 320px; padding: 10px; }
  .column.add-col { flex: 0 0 80vw; max-width: 320px; }
  .task { padding: 10px; }
  .task h4 { font-size: 13px; }
  .task-desc { font-size: 11px; }
  .modal-card { padding: 20px 16px; }
  #task-form label, #board-form label { font-size: 11px; }
  .form-row { grid-template-columns: 1fr; }
}