From 888cd05437919ead0b3aaa5ae3e4d9f5052ab8dc Mon Sep 17 00:00:00 2001
From: Ulas Kalayci <ulas.kalayci@googlemail.com>
Date: Sun, 19 Apr 2026 22:10:06 +0200
Subject: [PATCH] fix: move nav-badge styles to layout.css so badge stays
 visible on all pages

The .nav-badge base styles (background, size, color) were defined in tasks.css,
which is dynamically unloaded when navigating away from /tasks. This caused the
overdue badge in the nav to become invisible on every other page, even though
the badge element remained in the DOM.

Also refactors subtask checkbox icon to use a CSS class instead of inline styles.

Resolves #56

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/pages/tasks.js    |  2 +-
 public/styles/layout.css | 15 ++++++++++++++-
 public/styles/tasks.css  | 24 ++++++------------------
 3 files changed, 21 insertions(+), 20 deletions(-)
 mode change 100644 => 100755 public/styles/layout.css

diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index a505041..75a42f2 100644
--- a/public/pages/tasks.js
+++ b/public/pages/tasks.js
@@ -157,7 +157,7 @@ function renderTaskCard(task, opts = {}) {
           <button class="subtask-item__checkbox ${s.status === 'done' ? 'subtask-item__checkbox--done' : ''}"
                   data-action="toggle-subtask" data-id="${s.id}"
                   data-status="${s.status}" aria-label="${t('tasks.subtaskMarkDone', { title: esc(s.title) })}">
-            ${s.status === 'done' ? '<i data-lucide="check" style="width:10px;height:10px;color:#fff" aria-hidden="true"></i>' : ''}
+            ${s.status === 'done' ? '<i data-lucide="check" class="subtask-item__checkbox-icon" aria-hidden="true"></i>' : ''}
           </button>
           <span class="subtask-item__title">${esc(s.title)}</span>
         </div>`).join('')
diff --git a/public/styles/layout.css b/public/styles/layout.css
old mode 100644
new mode 100755
index 265fcbb..da8f894
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -202,11 +202,24 @@
   flex-shrink: 0;
 }
 
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-full);
+  background-color: var(--color-danger);
+  color: var(--color-text-on-accent);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-bold);
+}
+
 .nav-item__icon-wrap .nav-badge {
   position: absolute;
   top: calc(-1 * var(--space-1));
   right: calc(-1 * var(--space-1));
-  margin-left: 0;
 }
 
 .nav-item:active {
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index db5eb5e..66ec1a3 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -436,6 +436,12 @@
   animation: check-pop 0.15s var(--ease-out);
 }
 
+.subtask-item__checkbox-icon {
+  width: 10px;
+  height: 10px;
+  color: var(--color-text-on-accent);
+}
+
 .subtask-item__title {
   font-size: var(--text-sm);
   color: var(--color-text-primary);
@@ -467,24 +473,6 @@
   color: var(--color-accent);
 }
 
-/* --------------------------------------------------------
- * Overdue-Badge (Navigation)
- * -------------------------------------------------------- */
-.nav-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 var(--space-1);
-  border-radius: var(--radius-full);
-  background-color: var(--color-danger);
-  color: var(--color-text-on-accent);
-  font-size: var(--text-xs);
-  font-weight: var(--font-weight-bold);
-  margin-left: auto;
-}
-
 /* --------------------------------------------------------
  * Kanban-Board
  * -------------------------------------------------------- */