{"project":{"id":"28UbLeu","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Kanban","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"\n\n\n \n \n Untitled\n \n\n\n\n\n\n\n
\n\t
\n\t\t

Kanban Board

\n\t\t\n\t
\n\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

To Do

\n\t\t\t\t\t3\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Design
\n\t\t\t\t\t

Redesign landing page hero section

\n\t\t\t\t\t

Update the hero with new brand imagery and copy

\n\t\t\t\t\t
\n\t\t\t\t\t\t
4
\n\t\t\t\t\t\t
2
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Development
\n\t\t\t\t\t

Set up CI/CD pipeline

\n\t\t\t\t\t

Configure GitHub Actions for automated testing and deploy

\n\t\t\t\t\t
\n\t\t\t\t\t\t
1
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Research
\n\t\t\t\t\t

Competitive analysis report

\n\t\t\t\t\t

Analyze top 5 competitors' feature sets and pricing

\n\t\t\t\t\t
\n\t\t\t\t\t\t
6
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

In Progress

\n\t\t\t\t\t2\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Development
\n\t\t\t\t\t

Build authentication flow

\n\t\t\t\t\t

Implement OAuth2 with Google and GitHub providers

\n\t\t\t\t\t
\n\t\t\t\t\t\t
8
\n\t\t\t\t\t\t
3
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Bug Fix
\n\t\t\t\t\t

Fix mobile nav collapse

\n\t\t\t\t\t

Navigation menu not closing on route change in mobile

\n\t\t\t\t\t
\n\t\t\t\t\t\t
2
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Review

\n\t\t\t\t\t1\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Design
\n\t\t\t\t\t

Dashboard wireframes v2

\n\t\t\t\t\t

Updated wireframes with stakeholder feedback incorporated

\n\t\t\t\t\t
\n\t\t\t\t\t\t
12
\n\t\t\t\t\t\t
5
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\n\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Done

\n\t\t\t\t\t2\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Research
\n\t\t\t\t\t

User interview synthesis

\n\t\t\t\t\t

Compiled findings from 12 user interviews into report

\n\t\t\t\t\t
\n\t\t\t\t\t\t
3
\n\t\t\t\t\t\t
1
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Development
\n\t\t\t\t\t

API rate limiting

\n\t\t\t\t\t

Implemented token bucket algorithm for API endpoints

\n\t\t\t\t\t
\n\t\t\t\t\t\t
6
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n
\n\n\n
\n\t
\n\t\t

Add New Card

\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n
\n \n\n"},{"name":"main.js","content":"// Initialize Lucide icons\nlucide.createIcons();\n\n// State\nlet draggedCard = null;\nlet currentColumn = null;\nlet placeholder = null;\n\n// DOM\nconst board = document.getElementById('board');\nconst cardModal = document.getElementById('cardModal');\nconst cardTitleInput = document.getElementById('cardTitleInput');\nconst cardDescInput = document.getElementById('cardDescInput');\nconst saveCardBtn = document.getElementById('saveCard');\nconst cancelCardBtn = document.getElementById('cancelCard');\nconst addColumnBtn = document.getElementById('addColumn');\n\n// Tag labels\nconst tagLabels = {\n\tamber: 'Design',\n\tblue: 'Development',\n\temerald: 'Research',\n\trose: 'Bug Fix'\n};\n\n// Update column counts\nfunction updateCounts() {\n\tdocument.querySelectorAll('.kanban__column').forEach(col => {\n\t\tconst count = col.querySelectorAll('.kanban__card').length;\n\t\tcol.querySelector('.kanban__column-count').textContent = count;\n\t});\n}\n\n// Create placeholder\nfunction createPlaceholder() {\n\tconst el = document.createElement('div');\n\tel.className = 'kanban__placeholder';\n\treturn el;\n}\n\n// Drag and Drop\nfunction initDragAndDrop() {\n\tdocument.querySelectorAll('.kanban__card').forEach(card => {\n\t\tcard.removeEventListener('dragstart', handleDragStart);\n\t\tcard.removeEventListener('dragend', handleDragEnd);\n\t\tcard.addEventListener('dragstart', handleDragStart);\n\t\tcard.addEventListener('dragend', handleDragEnd);\n\t});\n\n\tdocument.querySelectorAll('.kanban__cards').forEach(zone => {\n\t\tzone.removeEventListener('dragover', handleDragOver);\n\t\tzone.removeEventListener('dragleave', handleDragLeave);\n\t\tzone.removeEventListener('drop', handleDrop);\n\t\tzone.addEventListener('dragover', handleDragOver);\n\t\tzone.addEventListener('dragleave', handleDragLeave);\n\t\tzone.addEventListener('drop', handleDrop);\n\t});\n}\n\nfunction handleDragStart(e) {\n\tdraggedCard = this;\n\tthis.classList.add('dragging');\n\te.dataTransfer.effectAllowed = 'move';\n\t// small delay so the card visually starts dragging\n\tsetTimeout(() => {\n\t\tthis.style.display = 'none';\n\t}, 0);\n}\n\nfunction handleDragEnd(e) {\n\tif (draggedCard) {\n\t\tdraggedCard.classList.remove('dragging');\n\t\tdraggedCard.style.display = '';\n\t}\n\t// Remove all drag-over states\n\tdocument.querySelectorAll('.kanban__column').forEach(col => col.classList.remove('drag-over'));\n\t// Remove placeholder\n\tif (placeholder && placeholder.parentNode) {\n\t\tplaceholder.parentNode.removeChild(placeholder);\n\t}\n\tplaceholder = null;\n\tdraggedCard = null;\n\tupdateCounts();\n}\n\nfunction handleDragOver(e) {\n\te.preventDefault();\n\te.dataTransfer.dropEffect = 'move';\n\n\tconst zone = this;\n\tzone.closest('.kanban__column').classList.add('drag-over');\n\n\tif (!placeholder) {\n\t\tplaceholder = createPlaceholder();\n\t}\n\n\tconst afterElement = getDragAfterElement(zone, e.clientY);\n\tif (afterElement) {\n\t\tzone.insertBefore(placeholder, afterElement);\n\t} else {\n\t\tzone.appendChild(placeholder);\n\t}\n}\n\nfunction handleDragLeave(e) {\n\tconst zone = this;\n\tconst rect = zone.getBoundingClientRect();\n\tif (\n\t\te.clientX < rect.left ||\n\t\te.clientX > rect.right ||\n\t\te.clientY < rect.top ||\n\t\te.clientY > rect.bottom\n\t) {\n\t\tzone.closest('.kanban__column').classList.remove('drag-over');\n\t\tif (placeholder && placeholder.parentNode === zone) {\n\t\t\tzone.removeChild(placeholder);\n\t\t}\n\t}\n}\n\nfunction handleDrop(e) {\n\te.preventDefault();\n\tconst zone = this;\n\n\tif (draggedCard) {\n\t\tdraggedCard.style.display = '';\n\t\tif (placeholder && placeholder.parentNode) {\n\t\t\tplaceholder.parentNode.insertBefore(draggedCard, placeholder);\n\t\t\tplaceholder.parentNode.removeChild(placeholder);\n\t\t} else {\n\t\t\tzone.appendChild(draggedCard);\n\t\t}\n\t\tdraggedCard.classList.remove('dragging');\n\t}\n\n\tzone.closest('.kanban__column').classList.remove('drag-over');\n\tplaceholder = null;\n\tupdateCounts();\n}\n\nfunction getDragAfterElement(container, y) {\n\tconst elements = [...container.querySelectorAll('.kanban__card:not(.dragging)')];\n\treturn elements.reduce((closest, child) => {\n\t\tconst box = child.getBoundingClientRect();\n\t\tconst offset = y - box.top - box.height / 2;\n\t\tif (offset < 0 && offset > closest.offset) {\n\t\t\treturn {\n\t\t\t\toffset: offset,\n\t\t\t\telement: child\n\t\t\t};\n\t\t} else {\n\t\t\treturn closest;\n\t\t}\n\t}, {\n\t\toffset: Number.NEGATIVE_INFINITY\n\t}).element;\n}\n\n// Add Card\nlet activeTag = 'amber';\n\ndocument.querySelectorAll('.kanban__add-card').forEach(btn => {\n\tbtn.addEventListener('click', function() {\n\t\tcurrentColumn = this.closest('.kanban__column').querySelector('.kanban__cards');\n\t\tcardTitleInput.value = '';\n\t\tcardDescInput.value = '';\n\t\tcardModal.classList.add('active');\n\t\tsetTimeout(() => cardTitleInput.focus(), 100);\n\t});\n});\n\ndocument.querySelectorAll('.kanban__tag-btn').forEach(btn => {\n\tbtn.addEventListener('click', function() {\n\t\tdocument.querySelectorAll('.kanban__tag-btn').forEach(b => b.classList.remove('active'));\n\t\tthis.classList.add('active');\n\t\tactiveTag = this.dataset.tag;\n\t});\n});\n\nsaveCardBtn.addEventListener('click', saveCard);\ncancelCardBtn.addEventListener('click', () => cardModal.classList.remove('active'));\n\ncardModal.addEventListener('click', function(e) {\n\tif (e.target === this) cardModal.classList.remove('active');\n});\n\ncardTitleInput.addEventListener('keydown', function(e) {\n\tif (e.key === 'Enter') saveCard();\n\tif (e.key === 'Escape') cardModal.classList.remove('active');\n});\n\nfunction saveCard() {\n\tconst title = cardTitleInput.value.trim();\n\tif (!title) return;\n\tconst desc = cardDescInput.value.trim();\n\n\tconst card = document.createElement('div');\n\tcard.className = 'kanban__card';\n\tcard.draggable = true;\n\tcard.innerHTML = `\n
${tagLabels[activeTag]}
\n

${escapeHtml(title)}

\n ${desc ? `

${escapeHtml(desc)}

` : ''}\n
\n
0
\n
\n `;\n\n\tcurrentColumn.appendChild(card);\n\tlucide.createIcons();\n\tinitDragAndDrop();\n\tupdateCounts();\n\tcardModal.classList.remove('active');\n}\n\nfunction escapeHtml(text) {\n\tconst div = document.createElement('div');\n\tdiv.textContent = text;\n\treturn div.innerHTML;\n}\n\n// Add Column\nconst dotColors = ['red', 'amber', 'blue', 'emerald'];\nlet colCounter = 0;\n\naddColumnBtn.addEventListener('click', function() {\n\tconst dotColor = dotColors[colCounter % dotColors.length];\n\tcolCounter++;\n\n\tconst col = document.createElement('div');\n\tcol.className = 'kanban__column';\n\tcol.innerHTML = `\n
\n
\n \n

New Column

\n 0\n
\n \n
\n
\n \n `;\n\n\tboard.appendChild(col);\n\tlucide.createIcons();\n\n\t// Bind add card\n\tcol.querySelector('.kanban__add-card').addEventListener('click', function() {\n\t\tcurrentColumn = col.querySelector('.kanban__cards');\n\t\tcardTitleInput.value = '';\n\t\tcardDescInput.value = '';\n\t\tcardModal.classList.add('active');\n\t\tsetTimeout(() => cardTitleInput.focus(), 100);\n\t});\n\n\tinitDragAndDrop();\n\n\t// Focus the title for editing\n\tconst title = col.querySelector('.kanban__column-title');\n\ttitle.focus();\n\tconst range = document.createRange();\n\trange.selectNodeContents(title);\n\twindow.getSelection().removeAllRanges();\n\twindow.getSelection().addRange(range);\n});\n\n// Init\ninitDragAndDrop();\nupdateCounts();"},{"name":"style.css","content":"@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');\n\n:root {\n\tcolor-scheme: dark;\n\t--slate-950: #020617;\n\t--slate-900: #0f172a;\n\t--slate-850: #131c31;\n\t--slate-800: #1e293b;\n\t--slate-700: #334155;\n\t--slate-600: #475569;\n\t--slate-500: #64748b;\n\t--slate-400: #94a3b8;\n\t--slate-300: #cbd5e1;\n\t--slate-200: #e2e8f0;\n\t--slate-100: #f1f5f9;\n\t--amber-400: #fbbf24;\n\t--amber-500: #f59e0b;\n\t--amber-900: #451a0330;\n\t--blue-400: #60a5fa;\n\t--blue-500: #3b82f6;\n\t--blue-900: #1e3a5f30;\n\t--emerald-400: #34d399;\n\t--emerald-500: #10b981;\n\t--emerald-900: #064e3b30;\n\t--rose-400: #fb7185;\n\t--rose-500: #f43f5e;\n\t--rose-900: #4c132230;\n\t--red-400: #f87171;\n\t--radius: 12px;\n\t--radius-sm: 8px;\n\tfont-family: 'Outfit', sans-serif;\n}\n\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tbackground: var(--slate-950);\n\tcolor: var(--slate-200);\n\tmin-height: 100vh;\n\toverflow-x: auto;\n}\n\n.kanban {\n\tmin-height: 100vh;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground:\n\t\tradial-gradient(ellipse at 20% 0%, rgba(51, 65, 85, 0.3) 0%, transparent 50%),\n\t\tradial-gradient(ellipse at 80% 100%, rgba(30, 41, 59, 0.4) 0%, transparent 50%),\n\t\tvar(--slate-950);\n}\n\n.kanban__header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 24px 32px;\n\tborder-bottom: 1px solid var(--slate-800);\n\tbackdrop-filter: blur(12px);\n\tbackground: rgba(15, 23, 42, 0.6);\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n}\n\n.kanban__title {\n\tfont-family: 'Outfit', sans-serif;\n\tfont-size: 1.5rem;\n\tfont-weight: 700;\n\tletter-spacing: -0.03em;\n\tbackground: linear-gradient(135deg, var(--slate-100), var(--slate-400));\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n}\n\n.kanban__add-col {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 8px 16px;\n\tborder: 1px solid var(--slate-700);\n\tborder-radius: var(--radius-sm);\n\tbackground: var(--slate-800);\n\tcolor: var(--slate-300);\n\tfont-family: 'Outfit', sans-serif;\n\tfont-size: 0.85rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n}\n\n.kanban__add-col:hover {\n\tbackground: var(--slate-700);\n\tborder-color: var(--slate-600);\n\tcolor: var(--slate-100);\n}\n\n.kanban__add-col svg {\n\twidth: 16px;\n\theight: 16px;\n}\n\n.kanban__board {\n\tdisplay: flex;\n\tgap: 20px;\n\tpadding: 28px 32px;\n\tflex: 1;\n\toverflow-x: auto;\n\talign-items: flex-start;\n}\n\n.kanban__column {\n\tmin-width: 300px;\n\tmax-width: 320px;\n\twidth: 320px;\n\tbackground: var(--slate-900);\n\tborder: 1px solid var(--slate-800);\n\tborder-radius: var(--radius);\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\ttransition: border-color 0.2s;\n}\n\n.kanban__column.drag-over {\n\tborder-color: var(--blue-500);\n\tbox-shadow: 0 0 0 1px var(--blue-500), 0 0 20px rgba(59, 130, 246, 0.1);\n}\n\n.kanban__column-header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 16px 16px 12px;\n}\n\n.kanban__column-info {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n}\n\n.kanban__column-dot {\n\twidth: 10px;\n\theight: 10px;\n\tborder-radius: 50%;\n\tflex-shrink: 0;\n}\n\n.kanban__column-dot--red {\n\tbackground: var(--red-400);\n}\n\n.kanban__column-dot--amber {\n\tbackground: var(--amber-400);\n}\n\n.kanban__column-dot--blue {\n\tbackground: var(--blue-400);\n}\n\n.kanban__column-dot--emerald {\n\tbackground: var(--emerald-400);\n}\n\n.kanban__column-title {\n\tfont-size: 0.9rem;\n\tfont-weight: 600;\n\tcolor: var(--slate-200);\n\toutline: none;\n\tborder-radius: 4px;\n\tpadding: 2px 4px;\n\tmargin: -2px -4px;\n\ttransition: background 0.15s;\n}\n\n.kanban__column-title:focus {\n\tbackground: var(--slate-800);\n}\n\n.kanban__column-count {\n\tfont-size: 0.75rem;\n\tfont-weight: 600;\n\tcolor: var(--slate-500);\n\tbackground: var(--slate-800);\n\tpadding: 2px 8px;\n\tborder-radius: 100px;\n\tfont-family: 'JetBrains Mono', monospace;\n}\n\n.kanban__column-menu {\n\tbackground: none;\n\tborder: none;\n\tcolor: var(--slate-500);\n\tcursor: pointer;\n\tpadding: 4px;\n\tborder-radius: 6px;\n\tdisplay: flex;\n\ttransition: all 0.15s;\n}\n\n.kanban__column-menu:hover {\n\tbackground: var(--slate-800);\n\tcolor: var(--slate-300);\n}\n\n.kanban__column-menu svg {\n\twidth: 18px;\n\theight: 18px;\n}\n\n.kanban__cards {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\tpadding: 0 12px 12px;\n\tmin-height: 40px;\n\tflex: 1;\n}\n\n.kanban__card {\n\tbackground: var(--slate-850);\n\tborder: 1px solid var(--slate-800);\n\tborder-radius: var(--radius-sm);\n\tpadding: 14px;\n\tcursor: grab;\n\ttransition: all 0.2s;\n\tposition: relative;\n}\n\n.kanban__card:hover {\n\tborder-color: var(--slate-700);\n\tbackground: var(--slate-800);\n\ttransform: translateY(-1px);\n\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n}\n\n.kanban__card:active {\n\tcursor: grabbing;\n}\n\n.kanban__card.dragging {\n\topacity: 0.4;\n\ttransform: rotate(2deg);\n}\n\n.kanban__card-tag {\n\tdisplay: inline-block;\n\tfont-size: 0.7rem;\n\tfont-weight: 600;\n\tpadding: 3px 10px;\n\tborder-radius: 100px;\n\tmargin-bottom: 10px;\n\tletter-spacing: 0.02em;\n\ttext-transform: uppercase;\n}\n\n.kanban__card-tag--amber {\n\tcolor: var(--amber-400);\n\tbackground: var(--amber-900);\n\tborder: 1px solid rgba(251, 191, 36, 0.15);\n}\n\n.kanban__card-tag--blue {\n\tcolor: var(--blue-400);\n\tbackground: var(--blue-900);\n\tborder: 1px solid rgba(96, 165, 250, 0.15);\n}\n\n.kanban__card-tag--emerald {\n\tcolor: var(--emerald-400);\n\tbackground: var(--emerald-900);\n\tborder: 1px solid rgba(52, 211, 153, 0.15);\n}\n\n.kanban__card-tag--rose {\n\tcolor: var(--rose-400);\n\tbackground: var(--rose-900);\n\tborder: 1px solid rgba(251, 113, 133, 0.15);\n}\n\n.kanban__card-title {\n\tfont-size: 0.88rem;\n\tfont-weight: 500;\n\tcolor: var(--slate-200);\n\tline-height: 1.4;\n\tmargin-bottom: 6px;\n}\n\n.kanban__card-desc {\n\tfont-size: 0.78rem;\n\tcolor: var(--slate-500);\n\tline-height: 1.5;\n\tmargin-bottom: 12px;\n}\n\n.kanban__card-footer {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n}\n\n.kanban__card-meta {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\tfont-size: 0.75rem;\n\tcolor: var(--slate-500);\n\tfont-family: 'JetBrains Mono', monospace;\n}\n\n.kanban__card-meta svg {\n\twidth: 14px;\n\theight: 14px;\n}\n\n.kanban__add-card {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 6px;\n\tpadding: 10px;\n\tmargin: 0 12px 12px;\n\tborder: 1px dashed var(--slate-700);\n\tborder-radius: var(--radius-sm);\n\tbackground: transparent;\n\tcolor: var(--slate-500);\n\tfont-family: 'Outfit', sans-serif;\n\tfont-size: 0.82rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n}\n\n.kanban__add-card:hover {\n\tborder-color: var(--slate-600);\n\tbackground: var(--slate-850);\n\tcolor: var(--slate-300);\n}\n\n.kanban__add-card svg {\n\twidth: 16px;\n\theight: 16px;\n}\n\n/* Modal */\n.kanban__modal {\n\tdisplay: none;\n\tposition: fixed;\n\tinset: 0;\n\tz-index: 100;\n\tbackground: rgba(2, 6, 23, 0.8);\n\tbackdrop-filter: blur(8px);\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.kanban__modal.active {\n\tdisplay: flex;\n}\n\n.kanban__modal-content {\n\tbackground: var(--slate-900);\n\tborder: 1px solid var(--slate-700);\n\tborder-radius: var(--radius);\n\tpadding: 28px;\n\twidth: 420px;\n\tmax-width: 90vw;\n\tbox-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);\n}\n\n.kanban__modal-title {\n\tfont-size: 1.1rem;\n\tfont-weight: 600;\n\tcolor: var(--slate-100);\n\tmargin-bottom: 20px;\n}\n\n.kanban__input {\n\twidth: 100%;\n\tpadding: 10px 14px;\n\tbackground: var(--slate-800);\n\tborder: 1px solid var(--slate-700);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--slate-200);\n\tfont-family: 'Outfit', sans-serif;\n\tfont-size: 0.88rem;\n\toutline: none;\n\tmargin-bottom: 12px;\n\ttransition: border-color 0.2s;\n}\n\n.kanban__input:focus {\n\tborder-color: var(--blue-500);\n}\n\n.kanban__textarea {\n\twidth: 100%;\n\tpadding: 10px 14px;\n\tbackground: var(--slate-800);\n\tborder: 1px solid var(--slate-700);\n\tborder-radius: var(--radius-sm);\n\tcolor: var(--slate-200);\n\tfont-family: 'Outfit', sans-serif;\n\tfont-size: 0.85rem;\n\toutline: none;\n\tresize: vertical;\n\tmin-height: 70px;\n\tmargin-bottom: 16px;\n\ttransition: border-color 0.2s;\n}\n\n.kanban__textarea:focus {\n\tborder-color: var(--blue-500);\n}\n\n.kanban__modal-tags {\n\tdisplay: flex;\n\tgap: 8px;\n\tmargin-bottom: 20px;\n\tflex-wrap: wrap;\n}\n\n.kanban__tag-btn {\n\tfont-size: 0.72rem;\n\tfont-weight: 600;\n\tpadding: 4px 12px;\n\tborder-radius: 100px;\n\tcursor: pointer;\n\tborder: 1px solid transparent;\n\tfont-family: 'Outfit', sans-serif;\n\ttext-transform: uppercase;\n\tletter-spacing: 0.02em;\n\topacity: 0.5;\n\ttransition: all 0.15s;\n}\n\n.kanban__tag-btn:hover, .kanban__tag-btn.active {\n\topacity: 1;\n}\n\n.kanban__modal-actions {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\tgap: 10px;\n}\n\n.kanban__btn {\n\tpadding: 8px 20px;\n\tborder-radius: var(--radius-sm);\n\tfont-family: 'Outfit', sans-serif;\n\tfont-size: 0.85rem;\n\tfont-weight: 500;\n\tcursor: pointer;\n\tborder: none;\n\ttransition: all 0.15s;\n}\n\n.kanban__btn--ghost {\n\tbackground: transparent;\n\tcolor: var(--slate-400);\n}\n\n.kanban__btn--ghost:hover {\n\tbackground: var(--slate-800);\n\tcolor: var(--slate-200);\n}\n\n.kanban__btn--primary {\n\tbackground: var(--blue-500);\n\tcolor: white;\n}\n\n.kanban__btn--primary:hover {\n\tbackground: var(--blue-400);\n}\n\n/* Placeholder card while dragging */\n.kanban__placeholder {\n\tborder: 2px dashed var(--slate-700);\n\tborder-radius: var(--radius-sm);\n\tmin-height: 60px;\n\tbackground: rgba(51, 65, 85, 0.15);\n\tborder-radius: var(--radius-sm);\n}\n\n/* Scrollbar */\n::-webkit-scrollbar {\n\twidth: 6px;\n\theight: 6px;\n}\n\n::-webkit-scrollbar-track {\n\tbackground: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n\tbackground: var(--slate-700);\n\tborder-radius: 100px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--slate-600);\n}"}],"folders":[]},"variants":null,"createdAt":"2026-02-07T12:12:48.438Z","updatedAt":"2026-02-08T20:29:16.616Z","hasThumbnail":true}}