From 7a85f612b1206e5424823ad7f65ddcef2e134726 Mon Sep 17 00:00:00 2001
From: Niek Rabelink <niek.rabelink@gmail.com>
Date: Mon, 14 Sep 2026 13:16:22 +0200
Subject: [PATCH] Header center

---
 includes/header.php | 39 +++++++++++++++++++--------------------
 planner.php         |  3 ---
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/includes/header.php b/includes/header.php
index 5f950a1..8ff2e5e 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -149,8 +149,8 @@ require_once __DIR__ . '/env_badge.php';
 <header class="sticky top-0 z-40 bg-white/80 dark:bg-[#0c0f17]/85 backdrop-blur-md border-b border-slate-200/80 dark:border-slate-800/60 shadow-xs transition-colors duration-150">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center justify-between h-16">
-            <!-- Brand Logo (met linker padding zodat het dev/live badge vrij staat) -->
-            <div class="flex items-center space-x-4 lg:space-x-6 pl-16 sm:pl-20 lg:pl-24 shrink-0">
+            <!-- Brand Logo (uitgelijnd met de widgets / content container) -->
+            <div class="flex items-center space-x-4 lg:space-x-6 shrink-0">
                 <a href="/planner.php" class="flex items-center space-x-2.5 group shrink-0">
                     <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-indigo-600 to-sky-500 flex items-center justify-center text-white font-black text-sm shadow-sm shadow-indigo-500/20 group-hover:scale-105 transition">
                         F
@@ -250,38 +250,33 @@ require_once __DIR__ . '/env_badge.php';
                 </nav>
             </div>
 
-            <!-- Right side: Clean User Profile & Logout -->
-            <div class="flex items-center space-x-2 sm:space-x-3 shrink-0">
-                <?php if ($currentPage === 'planner.php' && !empty($formattedSelectedDate)): ?>
-                <!-- Unified Dashboard Toolbar Pill (Datum, Badges & Instellingen) -->
-                <div class="flex items-center bg-slate-100/80 dark:bg-slate-800/60 rounded-xl p-1 border border-slate-200/80 dark:border-slate-700/60 shadow-2xs whitespace-nowrap shrink-0">
+            <!-- Center: Unified Dashboard Toolbar Pill (Gecentreerd in de header) -->
+            <?php if ($currentPage === 'planner.php' && !empty($formattedSelectedDate)): ?>
+            <div class="flex items-center justify-center flex-1 mx-2 lg:mx-4 shrink-0">
+                <div class="flex items-center bg-slate-100/80 dark:bg-slate-800/60 rounded-xl p-1 border border-slate-200/80 dark:border-slate-700/60 shadow-2xs whitespace-nowrap">
                     <!-- Date & Status -->
                     <div class="flex items-center space-x-2 px-2.5 py-1 text-xs text-slate-700 dark:text-slate-200 select-none">
                         <div class="w-6 h-6 rounded-lg bg-indigo-50 dark:bg-indigo-500/15 text-indigo-600 dark:text-indigo-400 flex items-center justify-center shrink-0">
                             <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                         </div>
-                        <span id="headerCurrentDateDisplay" class="font-semibold tracking-tight whitespace-nowrap"><?= htmlspecialchars($formattedSelectedDate) ?></span>
+                        <span id="headerCurrentDateDisplay" class="font-semibold tracking-tight whitespace-nowrap leading-none"><?= htmlspecialchars($formattedSelectedDate) ?></span>
 
                         <!-- Badges -->
-                        <span id="headerDateBadgesContainer" class="flex items-center gap-1.5 ml-1">
-                            <?php if (!empty($isTodaySelected)): ?>
-                                <span class="px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20">Vandaag</span>
-                            <?php endif; ?>
-
+                        <span id="headerDateBadgesContainer" class="inline-flex items-center gap-1.5 ml-1">
                             <?php if (!empty($isSelectedDateWorkday)): ?>
-                                <span class="hidden lg:inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20" title="Reguliere werkdag">
+                                <span class="hidden lg:inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 leading-none" title="Reguliere werkdag">
                                     <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                     <span>Werkdag</span>
                                 </span>
                             <?php else: ?>
-                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20" title="Weekend / Vrije dag">
+                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 leading-none" title="Weekend / Vrije dag">
                                     <i data-lucide="coffee" class="w-2.5 h-2.5 text-amber-500"></i>
                                     <span>Vrij</span>
                                 </span>
                             <?php endif; ?>
 
                             <?php if (!empty($isSelectedDateBlocked)): ?>
-                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30 cursor-pointer hover:bg-amber-500/25 transition" onclick="openCalendarBlockModal(<?= htmlspecialchars(json_encode($selectedDayBlock), ENT_QUOTES) ?>)" title="<?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?> (klik om te bewerken)">
+                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-amber-500/15 text-amber-700 dark:text-amber-300 border border-amber-500/30 cursor-pointer hover:bg-amber-500/25 transition leading-none" onclick="openCalendarBlockModal(<?= htmlspecialchars(json_encode($selectedDayBlock), ENT_QUOTES) ?>)" title="<?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?> (klik om te bewerken)">
                                     <i data-lucide="palmtree" class="w-2.5 h-2.5 text-amber-600 dark:text-amber-400"></i>
                                     <span><?= htmlspecialchars($selectedDayBlock['title'] ?? '') ?></span>
                                 </span>
@@ -290,14 +285,14 @@ require_once __DIR__ . '/env_badge.php';
                     </div>
 
                     <!-- Divider -->
-                    <div class="h-4 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 shrink-0"></div>
+                    <div class="h-4 w-px bg-slate-200 dark:bg-slate-700 mx-0.5 shrink-0 self-center"></div>
 
                     <!-- Instellingen Tandwiel Dropdown -->
-                    <div class="relative">
+                    <div class="relative flex items-center justify-center">
                         <button id="plannerSettingsDropdownBtn" onclick="togglePlannerSettingsMenu(event)" class="w-7 h-7 rounded-lg flex items-center justify-center text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-white dark:hover:bg-slate-700/60 transition cursor-pointer" title="Dashboard Opties & Instellingen">
                             <i data-lucide="settings" class="w-4 h-4"></i>
                         </button>
-                        <div id="plannerSettingsDropdownMenu" class="hidden absolute right-0 mt-2 w-56 rounded-2xl bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-50 text-xs text-slate-700 dark:text-slate-300">
+                        <div id="plannerSettingsDropdownMenu" class="hidden absolute right-0 top-full mt-2 w-56 rounded-2xl bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 shadow-xl py-1.5 z-50 text-xs text-slate-700 dark:text-slate-300">
                             <button onclick="closePlannerSettingsMenu(); openWidgetManagerModal();" class="w-full text-left px-3.5 py-2 hover:bg-slate-50 dark:hover:bg-slate-800/70 flex items-center space-x-2.5 transition cursor-pointer">
                                 <i data-lucide="layout-grid" class="w-4 h-4 text-indigo-500"></i>
                                 <span class="font-medium">Widgets & Indeling</span>
@@ -315,7 +310,11 @@ require_once __DIR__ . '/env_badge.php';
                         </div>
                     </div>
                 </div>
-                <?php endif; ?>
+            </div>
+            <?php endif; ?>
+
+            <!-- Right side: Clean User Profile & Logout -->
+            <div class="flex items-center space-x-2 sm:space-x-3 shrink-0">
 
                 <!-- Profiel link rechtsboven -->
                 <a href="/profile.php" class="flex items-center space-x-2.5 group hover:opacity-90 transition px-2 py-1.5 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800/60 shrink-0" title="Mijn Profiel & Instellingen">
diff --git a/planner.php b/planner.php
index c6894d8..4eae6eb 100644
--- a/planner.php
+++ b/planner.php
@@ -6182,9 +6182,6 @@ async function switchPlannerDate(newDate, event = null, pushState = true) {
         const headerBadgesEl = document.getElementById('headerDateBadgesContainer');
         if (headerBadgesEl) {
             let badgesHtml = '';
-            if (data.isToday) {
-                badgesHtml += `<span class="px-2 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20">Vandaag</span>`;
-            }
             if (data.isWorkday) {
                 badgesHtml += `<span class="hidden lg:inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-bold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20" title="Reguliere werkdag">
                     <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>