From 42a20e3be3e6a70760e1ff2aefa56e918b4e4e7f Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 1 Mar 2026 12:22:36 -0500
Subject: [PATCH] feat: Improve wood paneling border colors and background
 blend

- Update wood-light border from harsh black (#2a2a2a) to lighter warm brown (#8b5a2b) for better harmony with light background
- Update wood-dark border from #5c3317 to #7a5228 (slightly lighter medium brown) for improved visibility on dark backgrounds
- Update wood-mahogany border from #5c3317 to #8b3a3a (medium red-brown) to enhance mahogany's characteristic reddish tones
- Reduce background blend opacity from 60% to 40% to create more subtle text area background that complements new border colors

These changes improve visual consistency between border colors and their respective wood paneling backgrounds while maintaining good text contrast across all wood themes.
---
 templates/collections_templ.go | 40 +++++++++++++++++++++++++++++-----
 templates/dashboard.templ      |  2 +-
 templates/dashboard_templ.go   |  2 +-
 web/src/dashboard.ts           |  2 +-
 web/static/input.css           |  6 ++---
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/templates/collections_templ.go b/templates/collections_templ.go
index 78284f9..784aea0 100644
--- a/templates/collections_templ.go
+++ b/templates/collections_templ.go
@@ -202,14 +202,14 @@ func CollectionDetail(user User, collection CollectionData, books []handlers.Boo
 			}
 		}
 		for _, book := range books {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"card p-4 rounded-lg border hover:shadow-lg transition-shadow\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex items-start gap-4\"><input type=\"checkbox\" onchange=\"toggleBookForRemoval('{ book.MediaItemID }')\" class=\"w-5 h-5 mt-2\"><div class=\"aspect-w-3 aspect-h-4 flex-shrink-0 w-24 mb-3 overflow-hidden rounded\"><img src=\"{ book.CoverImagePath }\" alt=\"Cover\" class=\"w-full h-32 object-cover rounded\" onerror=\"this.src='/static/placeholder-book.svg'\"></div><div class=\"flex-1\"><h3 class=\"font-semibold text-lg mb-1 line-clamp-2\" style=\"color: var(--text-primary)\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"card p-4 rounded-lg border hover:shadow-lg transition-shadow\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex gap-4\"><!-- Checkbox and Book Info --><div class=\"flex-shrink-0 pt-1\"><input type=\"checkbox\" onchange=\"toggleBookForRemoval('{ book.MediaItemID }')\" class=\"w-5 h-5\"></div><div class=\"flex-1 min-w-0\"><h3 class=\"font-semibold text-lg mb-1 line-clamp-2\" style=\"color: var(--text-primary)\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(book.Title)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 301, Col: 108}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 300, Col: 22}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
@@ -220,14 +220,14 @@ func CollectionDetail(user User, collection CollectionData, books []handlers.Boo
 				return templ_7745c5c3_Err
 			}
 			if book.Author != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<p class=\"text-sm\" style=\"color: var(--text-secondary)\">by ")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<p class=\"text-sm line-clamp-1\" style=\"color: var(--text-secondary)\">by ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var11 string
 				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(book.Author)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 303, Col: 82}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 307, Col: 27}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
@@ -238,12 +238,40 @@ func CollectionDetail(user User, collection CollectionData, books []handlers.Boo
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<button onclick=\"removeBook('{ book.MediaItemID }')\" class=\"mt-2 px-3 py-1 text-sm border rounded hover:opacity-80\" style=\"border-color: var(--border); color: var(--text-secondary);\">Remove</button></div></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</div><!-- Book Cover --><div class=\"flex-shrink-0 w-16 sm:w-20\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if book.CoverImagePath != "" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<img src=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var12 string
+				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(book.CoverImagePath)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/collections.templ`, Line: 315, Col: 36}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" alt=\"Cover\" class=\"w-full aspect-[3/4] object-cover rounded shadow-md\" onerror=\"this.src='/static/placeholder-book.svg'\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "<img src=\"/static/placeholder-book.svg\" alt=\"Cover\" class=\"w-full aspect-[3/4] object-cover rounded shadow-md\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "</div></div><!-- Remove Button --><div class=\"mt-3 pt-3 border-t\" style=\"border-color: var(--border);\"><button onclick=\"removeBook('{ book.MediaItemID }')\" class=\"px-3 py-1 text-sm border rounded hover:opacity-80\" style=\"border-color: var(--border); color: var(--text-secondary);\">🗑️ Remove from Collection</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div><div id=\"add-books-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Books to Collection</h2><button onclick=\"hideAddBooksModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Search and select books to add to this collection.</p><div class=\"mb-4\"><input type=\"text\" id=\"book-search\" placeholder=\"Search books...\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div id=\"book-results\" class=\"max-h-64 overflow-y-auto mb-4\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddBooksModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"addSelectedBooks()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Selected Books</button></div></div></div><script>\n            let collectionId = '{ collection.ID }';\n            let selectedBooks = new Set();\n            let booksToRemove = new Set();\n            let allBooks = [\n                { range books }{\n                    {\n                        id: '{ book.MediaItemID }',\n                        title: '{ book.Title }',\n                        author: '{ book.Author }',\n                        cover: '{ book.CoverImagePath }'\n                    },\n                }{ end }\n            ];\n            let ws = null;\n\n            function backToCollections() {\n                window.location.href = '/collections';\n            }\n\n            function connectWebSocket() {\n                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n                const wsUrl = `${protocol}//${window.location.host}/ws/sync`;\n\n                ws = new WebSocket(wsUrl);\n\n                ws.onopen = function() {\n                    console.log('WebSocket connected');\n                };\n\n                ws.onmessage = function(event) {\n                    const message = JSON.parse(event.data);\n\n                    if (message.type === 'collection_updated' && message.data.collection_id === collectionId) {\n                        showToast(`Collection updated: ${message.data.action} (${message.data.count} books)`, 'info');\n\n                        setTimeout(() => {\n                            location.reload();\n                        }, 1000);\n                    }\n                };\n\n                ws.onclose = function() {\n                    console.log('WebSocket disconnected, reconnecting in 5s...');\n                    setTimeout(connectWebSocket, 5000);\n                };\n\n                ws.onerror = function(error) {\n                    console.error('WebSocket error:', error);\n                };\n            }\n\n            connectWebSocket();\n\n            function filterCollectionBooks() {\n                const searchTerm = document.getElementById('collection-search').value.toLowerCase();\n                const booksContainer = document.getElementById('books-container');\n                const bookCards = booksContainer.children;\n\n                let visibleCount = 0;\n                for (let i = 0; i < bookCards.length; i++) {\n                    const card = bookCards[i];\n                    if (card.id === 'empty-state') continue;\n\n                    const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';\n                    const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';\n\n                    const matches = title.includes(searchTerm) || author.includes(searchTerm);\n\n                    if (matches || searchTerm === '') {\n                        card.style.display = '';\n                        visibleCount++;\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n\n            function showAddBooksModal() {\n                document.getElementById('add-books-modal').classList.remove('hidden');\n                selectedBooks.clear();\n                document.getElementById('book-results').innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n            }\n\n            function hideAddBooksModal() {\n                document.getElementById('add-books-modal').classList.add('hidden');\n                document.getElementById('book-search').value = '';\n                document.getElementById('book-results').innerHTML = '';\n                selectedBooks.clear();\n            }\n\n            function searchBooks() {\n                const searchTerm = document.getElementById('book-search').value;\n                const container = document.getElementById('book-results');\n\n                if (searchTerm.length < 2) {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n                    return;\n                }\n\n                container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Searching...</p>';\n\n                fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.data && result.data.length > 0) {\n                        let html = '<div class=\"space-y-2\">';\n                        result.data.slice(0, 50).forEach(book => {\n                            const isSelected = selectedBooks.has(book.media_item_id);\n                            const checkedAttr = isSelected ? 'checked' : '';\n                            const authorHtml = book.author ? `<div class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</div>` : '';\n                            html += `\n                                <div class=\"flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80\"\n                                     style=\"background-color: var(--bg-primary);\"\n                                     onclick=\"toggleBookSelection('${book.media_item_id}')\">\n                                    <input type=\"checkbox\" ${checkedAttr} class=\"w-4 h-4\">\n                                    <img src=\"${book.cover_image_path || '/static/placeholder-book.svg'}\"\n                                         alt=\"Cover\" class=\"w-10 h-14 object-cover rounded\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">${book.title}</div>\n                                        ${authorHtml}\n                                    </div>\n                                </div>\n                            `;\n                        });\n                        html += '</div>';\n                        if (result.data.length > 50) {\n                            html += '<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Showing first 50 of ' + result.data.length + ' results</p>';\n                        }\n                        container.innerHTML = html;\n                    } else {\n                        container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No books found</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--error)\">Failed to search books</p>';\n                });\n            }\n\n            function toggleBookSelection(bookId) {\n                if (selectedBooks.has(bookId)) {\n                    selectedBooks.delete(bookId);\n                } else {\n                    selectedBooks.add(bookId);\n                }\n                searchBooks();\n            }\n\n            function addSelectedBooks() {\n                if (selectedBooks.size === 0) {\n                    showToast('Please select at least one book', 'error');\n                    return;\n                }\n\n                const bookIds = Array.from(selectedBooks);\n\n                fetch(`/api/collections/${collectionId}/books`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast(`Added ${bookIds.length} book(s) to collection`, 'success');\n                        hideAddBooksModal();\n                        location.reload();\n                    } else {\n                        showToast('Failed to add books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to add books', 'error');\n                });\n            }\n\n            function removeBook(bookId) {\n                if (!confirm('Remove this book from the collection?')) return;\n\n                fetch(`/api/collections/${collectionId}/books/${bookId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Book removed from collection', 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove book', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function toggleBookForRemoval(bookId) {\n                if (booksToRemove.has(bookId)) {\n                    booksToRemove.delete(bookId);\n                } else {\n                    booksToRemove.add(bookId);\n                }\n                updateSelectedCount();\n            }\n\n            function updateSelectedCount() {\n                const count = booksToRemove.size;\n                const countSpan = document.getElementById('selected-count');\n                const removeBtn = document.getElementById('bulk-remove-btn');\n\n                if (count > 0) {\n                    countSpan.textContent = count + ' selected';\n                    countSpan.classList.remove('hidden');\n                    removeBtn.disabled = false;\n                } else {\n                    countSpan.classList.add('hidden');\n                    removeBtn.disabled = true;\n                }\n            }\n\n            function removeSelectedBooks() {\n                if (booksToRemove.size === 0) {\n                    showToast('No books selected', 'error');\n                    return;\n                }\n\n                if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;\n\n                const bookIds = Array.from(booksToRemove);\n\n                fetch(`/api/collections/${collectionId}/books/bulk-remove`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.removed > 0) {\n                        showToast(`Removed ${result.removed} book(s) from collection`, 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove books', 'error');\n                });\n            }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n\n            renderBooks();\n        </script></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div></div><div id=\"add-books-modal\" class=\"hidden fixed inset-0 z-50 flex items-center justify-center\" style=\"background-color: rgba(0, 0, 0, 0.7);\"><div class=\"card rounded-lg p-6 w-full max-w-2xl mx-4\" style=\"background-color: var(--bg-secondary); border-color: var(--border);\"><div class=\"flex justify-between items-center mb-6\"><h2 class=\"text-xl font-bold\" style=\"color: var(--text-primary)\">Add Books to Collection</h2><button onclick=\"hideAddBooksModal()\" class=\"p-2 hover:opacity-80 rounded\" style=\"color: var(--text-primary)\">✕</button></div><p class=\"mb-4\" style=\"color: var(--text-secondary)\">Search and select books to add to this collection.</p><div class=\"mb-4\"><input type=\"text\" id=\"book-search\" placeholder=\"Search books...\" class=\"w-full px-4 py-2 border rounded-lg\" style=\"background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);\"></div><div id=\"book-results\" class=\"max-h-64 overflow-y-auto mb-4\"></div><div class=\"flex justify-end space-x-3\"><button type=\"button\" onclick=\"hideAddBooksModal()\" class=\"btn-secondary px-4 py-2 rounded-lg\">Cancel</button> <button type=\"button\" onclick=\"addSelectedBooks()\" class=\"btn-primary px-4 py-2 rounded-lg\">Add Selected Books</button></div></div></div><script>\n            let collectionId = '{ collection.ID }';\n            let selectedBooks = new Set();\n            let booksToRemove = new Set();\n            let allBooks = [\n                { range books }{\n                    {\n                        id: '{ book.MediaItemID }',\n                        title: '{ book.Title }',\n                        author: '{ book.Author }',\n                        cover: '{ book.CoverImagePath }'\n                    },\n                }{ end }\n            ];\n            let ws = null;\n\n            function backToCollections() {\n                window.location.href = '/collections';\n            }\n\n            function connectWebSocket() {\n                const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';\n                const wsUrl = `${protocol}//${window.location.host}/ws/sync`;\n\n                ws = new WebSocket(wsUrl);\n\n                ws.onopen = function() {\n                    console.log('WebSocket connected');\n                };\n\n                ws.onmessage = function(event) {\n                    const message = JSON.parse(event.data);\n\n                    if (message.type === 'collection_updated' && message.data.collection_id === collectionId) {\n                        showToast(`Collection updated: ${message.data.action} (${message.data.count} books)`, 'info');\n\n                        setTimeout(() => {\n                            location.reload();\n                        }, 1000);\n                    }\n                };\n\n                ws.onclose = function() {\n                    console.log('WebSocket disconnected, reconnecting in 5s...');\n                    setTimeout(connectWebSocket, 5000);\n                };\n\n                ws.onerror = function(error) {\n                    console.error('WebSocket error:', error);\n                };\n            }\n\n            connectWebSocket();\n\n            function filterCollectionBooks() {\n                const searchTerm = document.getElementById('collection-search').value.toLowerCase();\n                const booksContainer = document.getElementById('books-container');\n                const bookCards = booksContainer.children;\n\n                let visibleCount = 0;\n                for (let i = 0; i < bookCards.length; i++) {\n                    const card = bookCards[i];\n                    if (card.id === 'empty-state') continue;\n\n                    const title = card.querySelector('.font-semibold')?.textContent.toLowerCase() || '';\n                    const author = card.querySelector('.text-sm')?.textContent.toLowerCase() || '';\n\n                    const matches = title.includes(searchTerm) || author.includes(searchTerm);\n\n                    if (matches || searchTerm === '') {\n                        card.style.display = '';\n                        visibleCount++;\n                    } else {\n                        card.style.display = 'none';\n                    }\n                }\n            }\n\n            function showAddBooksModal() {\n                document.getElementById('add-books-modal').classList.remove('hidden');\n                selectedBooks.clear();\n                document.getElementById('book-results').innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n            }\n\n            function hideAddBooksModal() {\n                document.getElementById('add-books-modal').classList.add('hidden');\n                document.getElementById('book-search').value = '';\n                document.getElementById('book-results').innerHTML = '';\n                selectedBooks.clear();\n            }\n\n            function searchBooks() {\n                const searchTerm = document.getElementById('book-search').value;\n                const container = document.getElementById('book-results');\n\n                if (searchTerm.length < 2) {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Enter at least 2 characters to search.</p>';\n                    return;\n                }\n\n                container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">Searching...</p>';\n\n                fetch(`/api/media-items/search?q=${encodeURIComponent(searchTerm)}`, {\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.data && result.data.length > 0) {\n                        let html = '<div class=\"space-y-2\">';\n                        result.data.slice(0, 50).forEach(book => {\n                            const isSelected = selectedBooks.has(book.media_item_id);\n                            const checkedAttr = isSelected ? 'checked' : '';\n                            const authorHtml = book.author ? `<div class=\"text-xs\" style=\"color: var(--text-secondary)\">${book.author}</div>` : '';\n                            html += `\n                                <div class=\"flex items-center gap-3 p-2 rounded cursor-pointer hover:opacity-80\"\n                                     style=\"background-color: var(--bg-primary);\"\n                                     onclick=\"toggleBookSelection('${book.media_item_id}')\">\n                                    <input type=\"checkbox\" ${checkedAttr} class=\"w-4 h-4\">\n                                    <img src=\"${book.cover_image_path || '/static/placeholder-book.svg'}\"\n                                         alt=\"Cover\" class=\"w-10 h-14 object-cover rounded\">\n                                    <div class=\"flex-1\">\n                                        <div class=\"text-sm font-medium\" style=\"color: var(--text-primary)\">${book.title}</div>\n                                        ${authorHtml}\n                                    </div>\n                                </div>\n                            `;\n                        });\n                        html += '</div>';\n                        if (result.data.length > 50) {\n                            html += '<p class=\"text-sm mt-2\" style=\"color: var(--text-secondary)\">Showing first 50 of ' + result.data.length + ' results</p>';\n                        }\n                        container.innerHTML = html;\n                    } else {\n                        container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--text-secondary)\">No books found</p>';\n                    }\n                })\n                .catch(error => {\n                    container.innerHTML = '<p class=\"text-sm\" style=\"color: var(--error)\">Failed to search books</p>';\n                });\n            }\n\n            function toggleBookSelection(bookId) {\n                if (selectedBooks.has(bookId)) {\n                    selectedBooks.delete(bookId);\n                } else {\n                    selectedBooks.add(bookId);\n                }\n                searchBooks();\n            }\n\n            function addSelectedBooks() {\n                if (selectedBooks.size === 0) {\n                    showToast('Please select at least one book', 'error');\n                    return;\n                }\n\n                const bookIds = Array.from(selectedBooks);\n\n                fetch(`/api/collections/${collectionId}/books`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast(`Added ${bookIds.length} book(s) to collection`, 'success');\n                        hideAddBooksModal();\n                        location.reload();\n                    } else {\n                        showToast('Failed to add books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to add books', 'error');\n                });\n            }\n\n            function removeBook(bookId) {\n                if (!confirm('Remove this book from the collection?')) return;\n\n                fetch(`/api/collections/${collectionId}/books/${bookId}`, {\n                    method: 'DELETE',\n                    headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }\n                })\n                .then(response => {\n                    if (response.ok) {\n                        showToast('Book removed from collection', 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove book', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function toggleBookForRemoval(bookId) {\n                if (booksToRemove.has(bookId)) {\n                    booksToRemove.delete(bookId);\n                } else {\n                    booksToRemove.add(bookId);\n                }\n                updateSelectedCount();\n            }\n\n            function updateSelectedCount() {\n                const count = booksToRemove.size;\n                const countSpan = document.getElementById('selected-count');\n                const removeBtn = document.getElementById('bulk-remove-btn');\n\n                if (count > 0) {\n                    countSpan.textContent = count + ' selected';\n                    countSpan.classList.remove('hidden');\n                    removeBtn.disabled = false;\n                } else {\n                    countSpan.classList.add('hidden');\n                    removeBtn.disabled = true;\n                }\n            }\n\n            function removeSelectedBooks() {\n                if (booksToRemove.size === 0) {\n                    showToast('No books selected', 'error');\n                    return;\n                }\n\n                if (!confirm(`Remove ${booksToRemove.size} book(s) from the collection?`)) return;\n\n                const bookIds = Array.from(booksToRemove);\n\n                fetch(`/api/collections/${collectionId}/books/bulk-remove`, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'application/json',\n                        'Authorization': 'Bearer ' + localStorage.getItem('token')\n                    },\n                    body: JSON.stringify({ book_ids: bookIds })\n                })\n                .then(response => response.json())\n                .then(result => {\n                    if (result.removed > 0) {\n                        showToast(`Removed ${result.removed} book(s) from collection`, 'success');\n                        location.reload();\n                    } else {\n                        showToast('Failed to remove books', 'error');\n                    }\n                })\n                .catch(error => {\n                    showToast('Failed to remove books', 'error');\n                });\n            }\n                })\n                .catch(error => {\n                    showToast('Failed to remove book', 'error');\n                });\n            }\n\n            function logout() {\n                localStorage.removeItem('token');\n                window.location.href = '/login';\n            }\n        </script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/dashboard.templ b/templates/dashboard.templ
index 99c5415..f5b8bce 100644
--- a/templates/dashboard.templ
+++ b/templates/dashboard.templ
@@ -185,7 +185,7 @@ templ BookCard(item handlers.BookInfo) {
 				/>
 			}
 		</div>
-		<div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_60%,transparent)]">
+		<div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]">
 			<h3 class="font-semibold text-base line-clamp-2" style="color: var(--text-primary)">
 				{ item.Title }
 			</h3>
diff --git a/templates/dashboard_templ.go b/templates/dashboard_templ.go
index 29d91df..bb7c376 100644
--- a/templates/dashboard_templ.go
+++ b/templates/dashboard_templ.go
@@ -424,7 +424,7 @@ func BookCard(item handlers.BookInfo) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div><div class=\"book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_60%,transparent)]\"><h3 class=\"font-semibold text-base line-clamp-2\" style=\"color: var(--text-primary)\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "</div><div class=\"book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]\"><h3 class=\"font-semibold text-base line-clamp-2\" style=\"color: var(--text-primary)\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/web/src/dashboard.ts b/web/src/dashboard.ts
index 30a3fa4..33b3e91 100644
--- a/web/src/dashboard.ts
+++ b/web/src/dashboard.ts
@@ -344,7 +344,7 @@ function renderBookCard(book: BookInfo): string {
                      loading="lazy"
                      onerror="this.src='/static/placeholder-book.svg'">
             </div>
-            <div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_60%,transparent)]">
+            <div class="book-card-text px-2 py-1 bg-[color-mix(in_srgb,var(--wood-border)_40%,transparent)]">
                 <h3 class="font-semibold text-base line-clamp-2" style="color: var(--text-primary)">
                     ${book.title}
                 </h3>
diff --git a/web/static/input.css b/web/static/input.css
index d97eff9..e2779ff 100644
--- a/web/static/input.css
+++ b/web/static/input.css
@@ -265,21 +265,21 @@
     #collections-container[data-wood="wood-light"] {
         --wood-text-primary: #1a1a1a;
         --wood-text-secondary: #4a4a4a;
-        --wood-border: #2a2a2a;
+        --wood-border: #8b5a2b;
     }
 
     /* Wood Dark - needs light text */
     #collections-container[data-wood="wood-dark"] {
         --wood-text-primary: #f5f5f5;
         --wood-text-secondary: #c0c0c0;
-        --wood-border: #5c3317;
+        --wood-border: #7a5228;
     }
 
     /* Wood Mahogany - needs light text (darkest background) */
     #collections-container[data-wood="wood-mahogany"] {
         --wood-text-primary: #f5f5f5;
         --wood-text-secondary: #c0c0c0;
-        --wood-border: #5c3317;
+        --wood-border: #8b3a3a;
     }
 
     /* Apply wood-specific text colors to all text within collections container */