From aa2ecc44e6a6a93366dc42ef07c00ffa2a902b6a Mon Sep 17 00:00:00 2001
From: marijo <marijo@novosel.dk>
Date: Tue, 9 Jun 2026 12:57:18 +0000
Subject: [PATCH] Style update

---
 app.js    | 10 ++++++++--
 style.css |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/app.js b/app.js
index 738b72f..355f567 100644
--- a/app.js
+++ b/app.js
@@ -368,7 +368,7 @@ function renderEntries() {
     const source = sourceLabels[entry.source] || entry.source;
     return `
       <tr class="${isPastEntry(entry) ? 'past-entry' : ''}">
-        <td><strong>${escapeHtml(entry.title)}</strong> <span class="muted">${escapeHtml(source)}</span><br><span class="muted entry-date">${escapeHtml(entry.start_date)} → ${escapeHtml(entry.end_date)}</span>${Number(entry.allow_unpaid) ? ' <span class="pill unpaid">unpaid</span>' : ''}</td>
+        <td><strong>${escapeHtml(entry.title)}</strong> <span class="muted">${escapeHtml(source)}</span><br><span class="muted entry-date">${formatDate(entry.start_date)} → ${formatDate(entry.end_date)}</span>${Number(entry.allow_unpaid) ? ' <span class="pill unpaid">unpaid</span>' : ''}</td>
         <td class="num strong-num">${days(summary.workdays)}</td>
         <td class="num">${days(summary.usedVacation)}</td>
         <td class="num">${days(summary.usedFeriefridage)}</td>
@@ -427,7 +427,7 @@ function renderMonthRow(month) {
       <span class="month-entry">
         <strong>${escapeHtml(item.title)}</strong>
         <small class="planner-entry-meta"><strong>${days(item.workdays)} wd</strong> · ${days(item.usedVacation)} vd · ${days(item.usedFeriefridage)} ff · ${hours(item.usedFlex)} fl</small>
-        <small class="planner-entry-dates">${escapeHtml(item.start_date)} → ${escapeHtml(item.end_date)}</small>
+        <small class="planner-entry-dates">${formatDate(item.start_date)} → ${formatDate(item.end_date)}</small>
       </span>
     `).join('')
     : '<span class="muted">—</span>';
@@ -866,6 +866,12 @@ function parseDate(value) {
   return dateFromParts(year, month, day);
 }
 
+function formatDate(value) {
+  const [year, month, day] = String(value).split('-');
+  if (!year || !month || !day) return escapeHtml(value);
+  return `${day}/${month}/${year}`;
+}
+
 function monthKey(year, month) {
   return `${year}-${String(month).padStart(2, '0')}`;
 }
diff --git a/style.css b/style.css
index b5f2972..3736f71 100644
--- a/style.css
+++ b/style.css
@@ -293,9 +293,9 @@ table { width: 100%; border-collapse: collapse; font-size: .92rem; }
 th, td { padding: .75rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
 th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
 tbody tr:hover { background: rgba(255,255,255,.04); }
-.planner-body-table tr.past-month { opacity: .55; }
+.planner-body-table tr.past-month { opacity: .78; }
 .planner-body-table tr.past-month td:first-child { color: var(--muted); }
-.planner-body-table tr.past-month .balance-override-input { opacity: .72; }
+.planner-body-table tr.past-month .balance-override-input { opacity: .9; }
 .num { text-align: right; font-variant-numeric: tabular-nums; }
 .strong-num { font-weight: 900; color: var(--ink); }
 .muted { color: var(--muted); }