admin.php

@@ -831,7 +831,7 @@ require_once __DIR__ . '/includes/header.php';
             </div>
 
             <!-- MODAL: Wachtrijfilter Toevoegen / Bewerken -->
-            <div id="jiraFilterModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
+            <div id="jiraFilterModal" onclick="if(event.target === this) closeJiraFilterModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
                 <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl p-6 transition transform">
                     <div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800">
                         <div class="flex items-center space-x-2.5">

api/integrations.php

@@ -98,7 +98,8 @@ try {
             exit;
         }
 
-        $title = "[{$key}] {$summary}";
+        $customTitle = trim($input['title'] ?? '');
+        $title = !empty($customTitle) ? $customTitle : "[{$key}] {$summary}";
 
         // Zoek of maak daily plan aan voor deze datum
         $stmtPlan = $db->prepare("SELECT id FROM daily_plans WHERE user_id = ? AND plan_date = ?");

api/planner.php

@@ -704,6 +704,45 @@ try {
         $maxDays = 14;
         $checkedDays = 0;
 
+        // Bepaal het totale zoekvenster voor batch-ophalen (O(1) database & Graph API schaalbaarheid)
+        $rangeStartDate = $checkDate->format('Y-m-d');
+        $rangeEndObj = clone $checkDate;
+        $rangeEndObj->modify('+21 days'); // ruim venster incl. weekenden
+        $rangeEndDate = $rangeEndObj->format('Y-m-d');
+
+        // 1. Batch SQL: haal alle bestaande taken van de gebruiker in 1 geoptimaliseerde query op
+        $tasksByDate = [];
+        $stmtTasks = $db->prepare("
+            SELECT t.id, dp.plan_date, t.time_block_start, t.time_block_end, t.duration_minutes 
+            FROM tasks t
+            INNER JOIN daily_plans dp ON t.daily_plan_id = dp.id
+            WHERE t.user_id = ? 
+              AND dp.plan_date BETWEEN ? AND ?
+              AND t.time_block_start IS NOT NULL 
+              AND t.time_block_start != ''
+              AND t.status != 'CANCELLED'
+        ");
+        $stmtTasks->execute([$user['id'], $rangeStartDate, $rangeEndDate]);
+        while ($t = $stmtTasks->fetch()) {
+            if ($excludeTaskId > 0 && (int)$t['id'] === $excludeTaskId) {
+                continue;
+            }
+            $tasksByDate[$t['plan_date']][] = $t;
+        }
+
+        // 2. Batch Microsoft Graph: haal alle Outlook events in 1 API call op voor het gehele venster
+        $outlookByDate = [];
+        if (function_exists('microsoft_fetch_events_range')) {
+            try {
+                $allOutlookEvts = microsoft_fetch_events_range($user['id'], $rangeStartDate, $rangeEndDate, false);
+                foreach ($allOutlookEvts as $oe) {
+                    if (!empty($oe['date'])) {
+                        $outlookByDate[$oe['date']][] = $oe;
+                    }
+                }
+            } catch (Throwable $e) {}
+        }
+
         while ($checkedDays < $maxDays) {
             $dayOfWeek = (int)$checkDate->format('N'); // 1 = Ma, 7 = Zo
 
@@ -738,22 +777,9 @@ try {
                     $busyIntervals[] = [$lunchStartMin, $lunchEndMin];
                 }
 
-                // Bestaande taken van de gebruiker op deze dag
+                // Bestaande taken voor deze datum uit het geheugen
-                $stmtTasks = $db->prepare("
+                $dayTasks = $tasksByDate[$dateStr] ?? [];
-                    SELECT t.id, t.time_block_start, t.time_block_end, t.duration_minutes 
+                foreach ($dayTasks as $t) {
-                    FROM tasks t
-                    INNER JOIN daily_plans dp ON t.daily_plan_id = dp.id
-                    WHERE t.user_id = ? 
-                      AND dp.plan_date = ? 
-                      AND t.time_block_start IS NOT NULL 
-                      AND t.time_block_start != ''
-                      AND t.status != 'CANCELLED'
-                ");
-                $stmtTasks->execute([$user['id'], $dateStr]);
-                while ($t = $stmtTasks->fetch()) {
-                    if ($excludeTaskId > 0 && (int)$t['id'] === $excludeTaskId) {
-                        continue;
-                    }
                     $tStart = $toMins($t['time_block_start']);
                     $tDur = (int)($t['duration_minutes'] ?: 30);
                     $tEnd = !empty($t['time_block_end']) ? $toMins($t['time_block_end']) : ($tStart + $tDur);
@@ -762,20 +788,16 @@ try {
                     }
                 }
 
-                // Outlook afspraken
+                // Outlook afspraken voor deze datum uit het geheugen
-                if (function_exists('microsoft_fetch_events_range')) {
+                $dayOutlook = $outlookByDate[$dateStr] ?? [];
-                    try {
+                foreach ($dayOutlook as $oe) {
-                        $outlookEvts = microsoft_fetch_events_range($user['id'], $dateStr, $dateStr, false);
+                    if (!empty($oe['is_all_day'])) continue;
-                        foreach ($outlookEvts as $oe) {
+                    if (empty($oe['start']) || empty($oe['end'])) continue;
-                            if (!empty($oe['is_all_day'])) continue;
+                    $oStart = $toMins($oe['start']);
-                            if (empty($oe['start']) || empty($oe['end'])) continue;
+                    $oEnd = $toMins($oe['end']);
-                            $oStart = $toMins($oe['start']);
+                    if ($oEnd > $oStart) {
-                            $oEnd = $toMins($oe['end']);
+                        $busyIntervals[] = [$oStart, $oEnd];
-                            if ($oEnd > $oStart) {
+                    }
-                                $busyIntervals[] = [$oStart, $oEnd];
-                            }
-                        }
-                    } catch (Throwable $e) {}
                 }
 
                 // Doorzoek kwartierslots

board.php

@@ -159,7 +159,7 @@ $isAdmin = ($userRole === 'ADMIN');
 </div>
 
 <!-- MODAL 1: Taak (Post-it / Opdracht) Toevoegen of Bewerken -->
-<div id="cardModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
+<div id="cardModal" onclick="if(event.target === this) closeCardModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
     <div class="fociz-card p-6 w-full max-w-xl shadow-2xl space-y-5 my-8">
         
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
@@ -341,7 +341,7 @@ $isAdmin = ($userRole === 'ADMIN');
 </div>
 
 <!-- MODAL 2: Bord Instellingen, Kolommen & Leden Autorisatie (Beheerder) -->
-<div id="manageBoardModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
+<div id="manageBoardModal" onclick="if(event.target === this) closeManageBoardModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
     <div class="fociz-card p-6 w-full max-w-xl shadow-2xl space-y-5 my-8">
         
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
@@ -403,7 +403,7 @@ $isAdmin = ($userRole === 'ADMIN');
 </div>
 
 <!-- MODAL 3: Nieuw Bord Aanmaken (Beheerder) -->
-<div id="createBoardModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="createBoardModal" onclick="if(event.target === this) closeCreateBoardModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="fociz-card p-6 w-full max-w-md shadow-2xl space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
             <h3 class="text-base font-bold text-slate-900 dark:text-white">Nieuw Bord Toevoegen</h3>
@@ -1275,11 +1275,25 @@ function toggleBoardMaximize() {
 // Pas bewaarde breedte-status direct toe bij het laden
 applyMaximizeState(isBoardMaximized);
 
-// Sneltoets Escape om gemaximaliseerd bord te verkleinen (mits geen modal openstaat)
+// Sneltoets Escape om geopende modals te sluiten of gemaximaliseerd bord te verkleinen
 document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && isBoardMaximized) {
+    if (e.key === 'Escape') {
-        const anyModalOpen = document.querySelector('#cardModal:not(.hidden), #manageBoardModal:not(.hidden), #createBoardModal:not(.hidden)');
+        const cardModal = document.getElementById('cardModal');
-        if (!anyModalOpen) {
+        if (cardModal && !cardModal.classList.contains('hidden')) {
+            closeCardModal();
+            return;
+        }
+        const manageModal = document.getElementById('manageBoardModal');
+        if (manageModal && !manageModal.classList.contains('hidden')) {
+            closeManageBoardModal();
+            return;
+        }
+        const createModal = document.getElementById('createBoardModal');
+        if (createModal && !createModal.classList.contains('hidden')) {
+            closeCreateBoardModal();
+            return;
+        }
+        if (isBoardMaximized) {
             toggleBoardMaximize();
         }
     }

brainstorm.php

@@ -126,7 +126,7 @@ require_once __DIR__ . '/includes/header.php';
 </div>
 
 <!-- Modal: Nieuwe sessie -->
-<div id="newSessionModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+<div id="newSessionModal" onclick="if(event.target === this) this.classList.add('hidden')" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
     <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-lg w-full space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
@@ -159,7 +159,7 @@ require_once __DIR__ . '/includes/header.php';
                 </div>
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Doel / Beschrijving</label>
-                    <input type="text" name="description" placeholder="Doel van deze sessie..." class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3.5 py-2 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
+                    <input type="text" name="description" placeholder="Doel van deze sessie..." class="w-full bg-slate-50/70 dark:bg-[#0c0f17]/60 border border-slate-300 dark:border-slate-800 rounded-xl px-3.5 py-2.5 text-slate-900 dark:text-white text-xs placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 shadow-2xs">
                 </div>
             </div>
 
@@ -175,4 +175,13 @@ require_once __DIR__ . '/includes/header.php';
     </div>
 </div>
 
+<script>
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        const modal = document.getElementById('newSessionModal');
+        if (modal) modal.classList.add('hidden');
+    }
+});
+</script>
+
 <?php require_once __DIR__ . '/includes/footer.php'; ?>

brainstorm_canvas.php

@@ -195,7 +195,7 @@ $categories = [
 </div>
 
 <!-- Modal: Nieuwe Kaart Toevoegen -->
-<div id="addCardModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+<div id="addCardModal" onclick="if(event.target === this) closeAddCardModal()" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
     <div class="fociz-card p-6 shadow-2xl max-w-md w-full space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
@@ -236,7 +236,7 @@ $categories = [
 </div>
 
 <!-- Modal: Zet om naar Roadmap -->
-<div id="convertModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+<div id="convertModal" onclick="if(event.target === this) closeConvertModal()" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
     <div class="fociz-card p-6 shadow-2xl max-w-lg w-full space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
@@ -554,7 +554,12 @@ async function aiSuggestRoadmapMeta(btn) {
             if (typeof lucide !== 'undefined') lucide.createIcons();
         }
     }
-}
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        closeAddCardModal();
+        closeConvertModal();
+    }
+});
 </script>
 
 <?php require_once __DIR__ . '/includes/footer.php'; ?>

jira.php

@@ -467,8 +467,8 @@ $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT
 </div>
 
 <!-- MODAL 1: Inplannen in Dagplanner (planner.php) -->
-<div id="planTaskModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
+<div id="planTaskModal" onclick="if(event.target === this) closePlanModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
-    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl w-full max-w-md shadow-2xl p-6 transition transform">
+    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl p-6 transition transform">
         <div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800">
             <div class="flex items-center space-x-2.5">
                 <div class="w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400 flex items-center justify-center">
@@ -476,7 +476,7 @@ $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT
                 </div>
                 <div>
                     <h3 class="text-sm font-bold text-slate-900 dark:text-white">Inplannen in Dagplanner</h3>
-                    <p class="text-[11px] text-slate-400">Voeg toe aan je dagfocus</p>
+                    <p class="text-[11px] text-slate-400">Voeg toe aan je dagfocus op de tijdlijn</p>
                 </div>
             </div>
             <button onclick="closePlanModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1.5 rounded-lg transition cursor-pointer">
@@ -489,25 +489,81 @@ $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT
             <input type="hidden" id="planIssueSummary" value="">
             <input type="hidden" id="planIssueUrl" value="">
 
-            <!-- Ticket Info Preview -->
+            <!-- Ticket Info Preview met uitklapbare inhoud -->
-            <div class="p-3 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80">
+            <div class="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 space-y-2">
                 <div class="flex items-center space-x-2">
                     <span id="planTicketKeyBadge" class="font-mono text-xs font-bold text-indigo-600 dark:text-indigo-400">FOC-101</span>
                     <span id="planTicketProject" class="text-[11px] text-slate-400">• Fociz Platform</span>
                     <span id="planSpBadge" class="hidden ml-auto text-[10px] font-bold px-2 py-0.5 rounded-full bg-violet-50 dark:bg-violet-500/10 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-500/20"></span>
                 </div>
-                <div id="planTicketSummaryText" class="text-xs font-semibold text-slate-800 dark:text-slate-200 mt-1 line-clamp-2">
+                <div id="planTicketSummaryText" class="text-xs font-semibold text-slate-800 dark:text-slate-200 line-clamp-2">
                     Tweestapsverificatie implementeren
                 </div>
-                <div id="planSpHint" class="hidden mt-1.5 text-[11px] text-violet-600 dark:text-violet-400 flex items-center space-x-1">
+                <div id="planSpHint" class="hidden mt-1 text-[11px] text-violet-600 dark:text-violet-400 flex items-center space-x-1">
                     <i data-lucide="zap" class="w-3 h-3"></i>
                     <span id="planSpHintText"></span>
                 </div>
+
+                <!-- Uitklapbare beschrijving (10 regels verticaal scrollen) -->
+                <div class="pt-1.5 border-t border-slate-200/60 dark:border-slate-800/60">
+                    <button type="button" onclick="togglePlanTicketDesc()" class="text-[11px] text-indigo-600 dark:text-indigo-400 hover:underline flex items-center space-x-1 font-medium cursor-pointer">
+                        <i data-lucide="file-text" class="w-3 h-3"></i>
+                        <span id="planTicketDescToggleText">Toon ticket inhoud</span>
+                        <i data-lucide="chevron-down" id="planTicketDescChevron" class="w-3 h-3 transition-transform duration-200"></i>
+                    </button>
+                    <div id="planTicketDescContainer" class="hidden mt-2 p-3 rounded-lg bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-[11px] text-slate-700 dark:text-slate-300 max-h-40 overflow-y-auto leading-relaxed whitespace-pre-wrap select-text font-normal">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Aanpasbare Taaktitel in Agenda -->
+            <div>
+                <div class="flex items-center justify-between mb-1">
+                    <label for="planTaskTitleInput" class="block text-xs font-bold text-slate-700 dark:text-slate-300">Naam op de tijdlijn</label>
+                    <button type="button" onclick="clearPlanTaskTitle()" class="text-[10px] text-slate-400 hover:text-rose-500 cursor-pointer flex items-center space-x-0.5" title="Titel wissen">
+                        <i data-lucide="x-circle" class="w-3 h-3"></i>
+                        <span>Wissen</span>
+                    </button>
+                </div>
+                <div class="relative">
+                    <input 
+                        type="text" 
+                        id="planTaskTitleInput" 
+                        required 
+                        placeholder="Bijv. Oppakken Jira item FOC-101" 
+                        class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl pl-3 pr-8 py-2 text-xs text-slate-900 dark:text-white font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                    >
+                    <button type="button" onclick="clearPlanTaskTitle()" class="absolute right-2.5 top-2.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 cursor-pointer" title="Wissen">
+                        <i data-lucide="x" class="w-3.5 h-3.5"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Datum & Slimme "Plan in open blok" knop -->
+            <div class="space-y-2 pt-1 border-t border-slate-100 dark:border-slate-800">
+                <div class="flex items-center justify-between">
+                    <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Datum & Tijdblok</span>
+                    <button type="button" onclick="planInNextOpenBlockJira()" id="btnJiraPlanOpenBlock" class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-bold transition shadow-xs cursor-pointer active:scale-95" title="Vind automatisch het eerstvolgende vrije kwartierblok binnen werktijden">
+                        <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
+                        <span>Plan in open blok</span>
+                    </button>
+                </div>
+
+                <!-- Open blok banner -->
+                <div id="jiraPlanOpenBlockNotice" class="hidden p-2.5 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-800 dark:text-emerald-300 text-[11px] flex items-center justify-between">
+                    <div class="flex items-center space-x-1.5 min-w-0 flex-1 mr-2">
+                        <i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400 flex-shrink-0"></i>
+                        <span id="jiraPlanOpenBlockNoticeText" class="truncate font-semibold"></span>
+                    </div>
+                    <button type="button" onclick="document.getElementById('jiraPlanOpenBlockNotice').classList.add('hidden')" class="p-0.5 text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 rounded cursor-pointer">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                </div>
             </div>
 
             <!-- Datum Kiezer -->
             <div>
-                <label class="block text-xs font-bold text-slate-700 dark:text-slate-300 mb-1">Datum</label>
+                <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Datum</label>
                 <input 
                     type="date" 
                     id="planDateInput" 
@@ -518,19 +574,26 @@ $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT
             </div>
 
             <!-- Tijdsblok Starttijd & Duur -->
-            <div class="grid grid-cols-2 gap-3">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
-                    <label class="block text-xs font-bold text-slate-700 dark:text-slate-300 mb-1">Starttijd (optioneel)</label>
+                    <div class="flex items-center justify-between mb-1">
-                    <input 
+                        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300">Starttijd (optioneel)</label>
-                        type="time" 
+                        <span id="planEndTimeBadge" class="text-[10px] text-indigo-600 dark:text-indigo-400 font-mono font-semibold"></span>
-                        id="planStartTimeInput" 
+                    </div>
-                        value="09:00" 
+                    <div class="relative">
-                        class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                        <input 
-                    >
+                            type="time" 
+                            id="planStartTimeInput" 
+                            value="09:00" 
+                            oninput="updatePlanEndTimeBadge()" 
+                            class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-xs font-mono text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
+                        >
+                    </div>
                 </div>
                 <div>
-                    <label class="block text-xs font-bold text-slate-700 dark:text-slate-300 mb-1">Verwachte Duur</label>
+                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Verwachte Duur</label>
-                    <select id="planDurationInput" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 cursor-pointer">
+                    <select id="planDurationInput" onchange="updatePlanEndTimeBadge()" class="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 cursor-pointer">
+                        <option value="15">15 minuten</option>
                         <option value="30">30 minuten</option>
                         <option value="45" selected>45 minuten</option>
                         <option value="60">1 uur (60 min)</option>
@@ -573,8 +636,54 @@ $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT
     </div>
 </div>
 
+<!-- Modal: Waarschuwing Buiten Werktijden (Jira) -->
+<div id="outsideWorkhoursModalJira" onclick="if(event.target === this) closeOutsideWorkhoursModalJira('CANCEL')" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+    <div class="bg-white dark:bg-slate-900 border border-amber-500/30 rounded-2xl w-full max-w-md shadow-2xl p-6 space-y-4">
+        <div class="flex items-start space-x-3">
+            <div class="w-10 h-10 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-500 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            </div>
+            <div class="min-w-0 flex-1">
+                <h3 class="text-base font-bold text-slate-900 dark:text-white leading-tight">
+                    Let op! Je plant buiten werktijden
+                </h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                    Het ingeplande tijdblok valt buiten de gezette werktijden.
+                </p>
+            </div>
+            <button type="button" onclick="closeOutsideWorkhoursModalJira('CANCEL')" class="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg transition cursor-pointer flex-shrink-0">
+                <i data-lucide="x" class="w-4 h-4"></i>
+            </button>
+        </div>
+
+        <div class="bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800/40 rounded-xl p-3.5 text-xs text-amber-800 dark:text-amber-300 space-y-1.5">
+            <div class="flex items-center justify-between text-[11px] font-semibold text-amber-900 dark:text-amber-200">
+                <span>Gekozen tijdblok:</span>
+                <span id="outsideWorkhoursSelectedSlotJira" class="font-mono font-bold"></span>
+            </div>
+            <div class="flex items-center justify-between text-[11px] text-amber-700 dark:text-amber-400">
+                <span>Gezette werktijden:</span>
+                <span id="outsideWorkhoursBoundsJira" class="font-mono font-semibold">08:30 – 17:00</span>
+            </div>
+            <p class="text-[11px] text-amber-700/80 dark:text-amber-400/80 pt-1 border-t border-amber-200/60 dark:border-amber-800/30">
+                Kies <strong>Nee</strong> om het item automatisch in te plannen in het eerstvolgende open blok op de volgende werkdag, of kies <strong>Ja</strong> om toch nu buiten werktijd te plannen.
+            </p>
+        </div>
+
+        <div class="flex items-center space-x-2.5 pt-2">
+            <button type="button" id="btnOutsideWorkhoursNoJira" onclick="closeOutsideWorkhoursModalJira('NEE')" class="flex-1 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs transition shadow-xs flex items-center justify-center space-x-1.5 cursor-pointer">
+                <i data-lucide="calendar-arrow-up" class="w-4 h-4"></i>
+                <span>Nee (Volgende werkdag)</span>
+            </button>
+            <button type="button" id="btnOutsideWorkhoursYesJira" onclick="closeOutsideWorkhoursModalJira('JA')" class="px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs transition cursor-pointer">
+                <span>Ja, toch inplannen</span>
+            </button>
+        </div>
+    </div>
+</div>
+
 <!-- MODAL 2: Toevoegen aan Kanban Bord (board.php) -->
-<div id="boardTaskModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
+<div id="boardTaskModal" onclick="if(event.target === this) closeBoardModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
     <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl w-full max-w-md shadow-2xl p-6 transition transform">
         <div class="flex items-center justify-between pb-4 border-b border-slate-100 dark:border-slate-800">
             <div class="flex items-center space-x-2.5">
@@ -1399,12 +1508,131 @@ function renderTickets(tickets) {
 }
 
 // Modal 1: Plan in Dagplanner
+let _activeJiraTicket = null;
+let _outsideWorkhoursPendingJira = null;
+
+function togglePlanTicketDesc() {
+    const container = document.getElementById('planTicketDescContainer');
+    const chevron = document.getElementById('planTicketDescChevron');
+    const text = document.getElementById('planTicketDescToggleText');
+    if (!container) return;
+
+    if (container.classList.contains('hidden')) {
+        container.classList.remove('hidden');
+        if (chevron) chevron.classList.add('rotate-180');
+        if (text) text.textContent = 'Verberg ticket inhoud';
+    } else {
+        container.classList.add('hidden');
+        if (chevron) chevron.classList.remove('rotate-180');
+        if (text) text.textContent = 'Toon ticket inhoud';
+    }
+    if (typeof lucide !== 'undefined') lucide.createIcons();
+}
+
+function clearPlanTaskTitle() {
+    const input = document.getElementById('planTaskTitleInput');
+    if (input) {
+        input.value = '';
+        input.focus();
+    }
+}
+
+function updatePlanEndTimeBadge() {
+    const startInput = document.getElementById('planStartTimeInput');
+    const durationInput = document.getElementById('planDurationInput');
+    const badge = document.getElementById('planEndTimeBadge');
+    if (!startInput || !durationInput || !badge) return;
+
+    const startVal = (startInput.value || '').trim();
+    const duration = parseInt(durationInput.value || '30', 10);
+    if (!startVal || !startVal.includes(':') || isNaN(duration)) {
+        badge.innerText = '';
+        return;
+    }
+
+    const [hStr, mStr] = startVal.split(':');
+    const totalMinutes = (parseInt(hStr, 10) * 60 + parseInt(mStr, 10)) + duration;
+    const endH = Math.floor((totalMinutes / 60) % 24);
+    const endM = totalMinutes % 60;
+    const endStr = `${String(endH).padStart(2, '0')}:${String(endM).padStart(2, '0')}`;
+    badge.innerText = `(tot ${endStr})`;
+}
+
+async function planInNextOpenBlockJira(startFromNextWorkday = false) {
+    const durationInput = document.getElementById('planDurationInput');
+    const duration = parseInt(durationInput?.value || '45', 10);
+    const btn = document.getElementById('btnJiraPlanOpenBlock');
+    const origHtml = btn ? btn.innerHTML : '';
+
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = `<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Zoeken...</span>`;
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
+
+    try {
+        let url = `/api/planner.php?action=find_next_free_slot&duration=${duration}`;
+        if (startFromNextWorkday) {
+            url += '&start_from_next_workday=1';
+        }
+        const resp = await fetch(url);
+        const data = await resp.json();
+
+        if (data.success && data.slot) {
+            const slot = data.slot;
+            const dateInput = document.getElementById('planDateInput');
+            const startInput = document.getElementById('planStartTimeInput');
+            if (dateInput) dateInput.value = slot.date;
+            if (startInput) startInput.value = slot.start;
+
+            updatePlanEndTimeBadge();
+
+            const notice = document.getElementById('jiraPlanOpenBlockNotice');
+            const noticeText = document.getElementById('jiraPlanOpenBlockNoticeText');
+            if (notice && noticeText) {
+                const formattedDate = new Date(slot.date + 'T00:00:00').toLocaleDateString('nl-NL', { weekday: 'short', day: 'numeric', month: 'short' });
+                noticeText.innerText = `Vrij blok gevonden: ${formattedDate} om ${slot.start} – ${slot.end} (${duration} min)`;
+                notice.classList.remove('hidden');
+            }
+        } else {
+            alert(data.error || 'Geen beschikbaar tijdblok gevonden binnen de komende 14 dagen.');
+        }
+    } catch (err) {
+        alert('Netwerkfout bij zoeken van open blok: ' + err.message);
+    } finally {
+        if (btn) {
+            btn.disabled = false;
+            btn.innerHTML = origHtml;
+            if (typeof lucide !== 'undefined') lucide.createIcons();
+        }
+    }
+}
+
+function closeOutsideWorkhoursModalJira(choice) {
+    const modal = document.getElementById('outsideWorkhoursModalJira');
+    if (modal) modal.classList.add('hidden');
+
+    if (choice === 'JA') {
+        if (_outsideWorkhoursPendingJira) {
+            _outsideWorkhoursPendingJira.bypassWorkhours = true;
+            submitPlanTask(null, _outsideWorkhoursPendingJira);
+        }
+    } else if (choice === 'NEE') {
+        _outsideWorkhoursPendingJira = null;
+        planInNextOpenBlockJira(true);
+    } else {
+        _outsideWorkhoursPendingJira = null;
+    }
+}
+
 function openPlanModal(item) {
     const ticket = (typeof item === 'string') 
         ? (ticketStore.get(item) || (jiraData.assigned_issues || []).concat(jiraData.team_issues || []).find(t => t.key === item)) 
         : item;
     if (!ticket) return;
 
+    _activeJiraTicket = ticket;
+
     document.getElementById('planIssueKey').value = ticket.key;
     document.getElementById('planIssueSummary').value = ticket.summary;
     document.getElementById('planIssueUrl').value = ticket.url;
@@ -1413,6 +1641,27 @@ function openPlanModal(item) {
     document.getElementById('planTicketProject').innerText = '• ' + (ticket.project || 'Project');
     document.getElementById('planTicketSummaryText').innerText = ticket.summary;
 
+    // Vul aanpasbare taaktitel in
+    const titleInput = document.getElementById('planTaskTitleInput');
+    if (titleInput) {
+        titleInput.value = `Oppakken Jira item ${ticket.key} - ${ticket.summary}`;
+    }
+
+    // Vul ticket omschrijving preview
+    const descContainer = document.getElementById('planTicketDescContainer');
+    if (descContainer) {
+        descContainer.textContent = ticket.description || 'Geen gedetailleerde omschrijving beschikbaar in Jira.';
+        descContainer.classList.add('hidden');
+    }
+    const chevron = document.getElementById('planTicketDescChevron');
+    if (chevron) chevron.classList.remove('rotate-180');
+    const descText = document.getElementById('planTicketDescToggleText');
+    if (descText) descText.textContent = 'Toon ticket inhoud';
+
+    // Verberg open blok notice
+    const notice = document.getElementById('jiraPlanOpenBlockNotice');
+    if (notice) notice.classList.add('hidden');
+
     // Story Points → Duur conversie (1 SP = 30 minuten, configurabel)
     const spBadge = document.getElementById('planSpBadge');
     const spHint  = document.getElementById('planSpHint');
@@ -1420,7 +1669,7 @@ function openPlanModal(item) {
     const sp = parseFloat(ticket.story_points);
     if (!isNaN(sp) && sp > 0) {
         const spMinutes = Math.round(sp * 30); // 1 SP = 30 minuten
-        const closestDuration = [30, 45, 60, 90, 120].reduce((prev, curr) =>
+        const closestDuration = [15, 30, 45, 60, 90, 120].reduce((prev, curr) =>
             Math.abs(curr - spMinutes) < Math.abs(prev - spMinutes) ? curr : prev
         );
         const durationSelect = document.getElementById('planDurationInput');
@@ -1449,6 +1698,8 @@ function openPlanModal(item) {
         if (r.value === focizPrio) r.checked = true;
     }
 
+    updatePlanEndTimeBadge();
+
     const modal = document.getElementById('planTaskModal');
     modal.classList.remove('hidden');
     modal.classList.add('flex');
@@ -1461,19 +1712,18 @@ function closePlanModal() {
     modal.classList.remove('flex');
 }
 
-async function submitPlanTask(e) {
+async function submitPlanTask(e, options = {}) {
-    e.preventDefault();
+    if (e) e.preventDefault();
+
     const btn = document.getElementById('planSubmitBtn');
-    const oldBtnText = btn.innerHTML;
+    const oldBtnText = btn ? btn.innerHTML : '';
-    btn.disabled = true;
-    btn.innerHTML = `<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Inplannen...</span>`;
-    if (typeof lucide !== 'undefined') lucide.createIcons();
 
     const key = document.getElementById('planIssueKey').value;
     const summary = document.getElementById('planIssueSummary').value;
+    const customTitle = (document.getElementById('planTaskTitleInput')?.value || '').trim();
     const url = document.getElementById('planIssueUrl').value;
     const planDate = document.getElementById('planDateInput').value;
-    const timeBlockStart = document.getElementById('planStartTimeInput').value;
+    const timeBlockStart = (document.getElementById('planStartTimeInput')?.value || '').trim();
     const durationMinutes = parseInt(document.getElementById('planDurationInput').value, 10);
     
     let priority = 'P2';
@@ -1482,6 +1732,45 @@ async function submitPlanTask(e) {
         if (r.checked) priority = r.value;
     }
 
+    // Controleer of de geplande tijd buiten de gezette werktijden valt (standaard 08:30 - 17:00)
+    if (!options.bypassWorkhours && timeBlockStart && timeBlockStart.includes(':')) {
+        const [shStr, smStr] = timeBlockStart.split(':');
+        const startMin = parseInt(shStr, 10) * 60 + parseInt(smStr, 10);
+        const endMin = startMin + durationMinutes;
+
+        const workStartMin = 8 * 60 + 30; // 08:30
+        const workEndMin = 17 * 60;        // 17:00
+
+        if (startMin < workStartMin || endMin > workEndMin) {
+            _outsideWorkhoursPendingJira = { key, summary, title: customTitle, url, planDate, timeBlockStart, durationMinutes, priority };
+
+            const endH = Math.floor((endMin / 60) % 24);
+            const endM = endMin % 60;
+            const endStr = `${String(endH).padStart(2, '0')}:${String(endM).padStart(2, '0')}`;
+
+            const slotEl = document.getElementById('outsideWorkhoursSelectedSlotJira');
+            if (slotEl) slotEl.innerText = `${timeBlockStart} – ${endStr} (${durationMinutes} min)`;
+
+            const outsideModal = document.getElementById('outsideWorkhoursModalJira');
+            if (outsideModal) {
+                outsideModal.classList.remove('hidden');
+                outsideModal.classList.add('flex');
+                setTimeout(() => {
+                    const btnNo = document.getElementById('btnOutsideWorkhoursNoJira');
+                    if (btnNo) btnNo.focus();
+                }, 50);
+                if (typeof lucide !== 'undefined') lucide.createIcons();
+            }
+            return;
+        }
+    }
+
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = `<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Inplannen...</span>`;
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
+
     try {
         const response = await fetch('/api/integrations.php?action=plan_jira_task', {
             method: 'POST',
@@ -1489,6 +1778,7 @@ async function submitPlanTask(e) {
             body: JSON.stringify({
                 key,
                 summary,
+                title: customTitle || `[${key}] ${summary}`,
                 url,
                 plan_date: planDate,
                 time_block_start: timeBlockStart,
@@ -1512,9 +1802,11 @@ async function submitPlanTask(e) {
     } catch (err) {
         alert('Netwerkfout: ' + err.message);
     } finally {
-        btn.disabled = false;
+        if (btn) {
-        btn.innerHTML = oldBtnText;
+            btn.disabled = false;
-        if (typeof lucide !== 'undefined') lucide.createIcons();
+            btn.innerHTML = oldBtnText;
+            if (typeof lucide !== 'undefined') lucide.createIcons();
+        }
     }
 }
 
@@ -1681,11 +1973,23 @@ function escapeHtml(str) {
         .replace(/'/g, '&#039;');
 }
 
-// Sluit modals bij Escape toets
+// Toetsenbordnavigatie voor alle modals (Escape & Enter)
 document.addEventListener('keydown', function(e) {
     if (e.key === 'Escape') {
+        const outsideModal = document.getElementById('outsideWorkhoursModalJira');
+        if (outsideModal && !outsideModal.classList.contains('hidden')) {
+            closeOutsideWorkhoursModalJira('CANCEL');
+            return;
+        }
         closePlanModal();
         closeBoardModal();
+    } else if (e.key === 'Enter') {
+        const outsideModal = document.getElementById('outsideWorkhoursModalJira');
+        if (outsideModal && !outsideModal.classList.contains('hidden')) {
+            e.preventDefault();
+            closeOutsideWorkhoursModalJira('NEE');
+            return;
+        }
     }
 });
 

mail.php

@@ -241,7 +241,7 @@ $jsonMessages = json_encode($messages, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_Q
 </div>
 
 <!-- MODAL 1: E-mail Inplannen in Fociz Dagplanning -->
-<div id="planMailModal" class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="planMailModal" onclick="if(event.target === this) closePlanMailModal()" class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
     <div class="bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-7 shadow-2xl space-y-5 animate-in fade-in zoom-in-95 duration-150">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <div class="flex items-center space-x-2.5">
@@ -253,7 +253,7 @@ $jsonMessages = json_encode($messages, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_Q
                     <p class="text-[11px] text-slate-400">Plaats dit actiepunt direct op jouw Fociz tijdlijn</p>
                 </div>
             </div>
-            <button onclick="closePlanMailModal()" class="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg transition cursor-pointer">
+            <button onclick="closePlanMailModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 p-1.5 rounded-lg transition cursor-pointer">
                 <i data-lucide="x" class="w-4 h-4"></i>
             </button>
         </div>
@@ -268,21 +268,46 @@ $jsonMessages = json_encode($messages, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_Q
                 <input type="text" id="planMailSubject" required class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3.5 py-2 text-xs text-slate-900 dark:text-white font-semibold focus:outline-none focus:ring-1 focus:ring-indigo-500">
             </div>
 
+            <!-- Datum & Slimme "Plan in open blok" knop -->
+            <div class="space-y-2 pt-1 border-t border-slate-100 dark:border-slate-800">
+                <div class="flex items-center justify-between">
+                    <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Datum & Tijdblok</span>
+                    <button type="button" onclick="planInNextOpenBlockMail()" id="btnMailPlanOpenBlock" class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-bold transition shadow-xs cursor-pointer active:scale-95" title="Vind automatisch het eerstvolgende vrije kwartierblok binnen werktijden">
+                        <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
+                        <span>Plan in open blok</span>
+                    </button>
+                </div>
+
+                <!-- Open blok banner -->
+                <div id="mailPlanOpenBlockNotice" class="hidden p-2.5 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-800 dark:text-emerald-300 text-[11px] flex items-center justify-between">
+                    <div class="flex items-center space-x-1.5 min-w-0 flex-1 mr-2">
+                        <i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400 flex-shrink-0"></i>
+                        <span id="mailPlanOpenBlockNoticeText" class="truncate font-semibold"></span>
+                    </div>
+                    <button type="button" onclick="document.getElementById('mailPlanOpenBlockNotice').classList.add('hidden')" class="p-0.5 text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 rounded cursor-pointer">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Datum</label>
                     <input type="date" id="planMailDate" value="<?= date('Y-m-d') ?>" required class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                 </div>
                 <div>
-                    <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Starttijd (optioneel)</label>
+                    <div class="flex items-center justify-between mb-1">
-                    <input type="text" id="planMailStartTime" placeholder="bijv. 10:30" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs font-mono text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                        <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300">Starttijd (optioneel)</label>
+                        <span id="planMailEndTimeBadge" class="text-[10px] text-indigo-600 dark:text-indigo-400 font-mono font-semibold"></span>
+                    </div>
+                    <input type="text" id="planMailStartTime" oninput="updatePlanMailEndTimeBadge()" placeholder="bijv. 10:30" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs font-mono text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                 </div>
             </div>
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Tijdsduur</label>
-                    <select id="planMailDuration" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="planMailDuration" onchange="updatePlanMailEndTimeBadge()" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                         <option value="15">15 minuten</option>
                         <option value="30" selected>30 minuten</option>
                         <option value="45">45 minuten</option>
@@ -292,7 +317,7 @@ $jsonMessages = json_encode($messages, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_Q
                 </div>
                 <div>
                     <label class="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Prioriteit</label>
-                    <select id="planMailPriority" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <select id="planMailPriority" class="w-full bg-slate-50 dark:bg-[#0c0f17] border border-slate-300 dark:border-slate-700 rounded-xl px-3 py-2 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500 cursor-pointer">
                         <option value="P1">P1 - Urgent / Brandend</option>
                         <option value="P2" selected>P2 - Belangrijk</option>
                         <option value="P3">P3 - Regulier</option>
@@ -313,8 +338,54 @@ $jsonMessages = json_encode($messages, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_Q
     </div>
 </div>
 
+<!-- Modal: Waarschuwing Buiten Werktijden (Mail) -->
+<div id="outsideWorkhoursModalMail" onclick="if(event.target === this) closeOutsideWorkhoursModalMail('CANCEL')" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+    <div class="bg-white dark:bg-[#111624] border border-amber-500/30 rounded-2xl w-full max-w-md shadow-2xl p-6 space-y-4">
+        <div class="flex items-start space-x-3">
+            <div class="w-10 h-10 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-500 flex items-center justify-center flex-shrink-0">
+                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
+            </div>
+            <div class="min-w-0 flex-1">
+                <h3 class="text-base font-bold text-slate-900 dark:text-white leading-tight">
+                    Let op! Je plant buiten werktijden
+                </h3>
+                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                    Het ingeplande tijdblok valt buiten de gezette werktijden.
+                </p>
+            </div>
+            <button type="button" onclick="closeOutsideWorkhoursModalMail('CANCEL')" class="p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 rounded-lg transition cursor-pointer flex-shrink-0">
+                <i data-lucide="x" class="w-4 h-4"></i>
+            </button>
+        </div>
+
+        <div class="bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800/40 rounded-xl p-3.5 text-xs text-amber-800 dark:text-amber-300 space-y-1.5">
+            <div class="flex items-center justify-between text-[11px] font-semibold text-amber-900 dark:text-amber-200">
+                <span>Gekozen tijdblok:</span>
+                <span id="outsideWorkhoursSelectedSlotMail" class="font-mono font-bold"></span>
+            </div>
+            <div class="flex items-center justify-between text-[11px] text-amber-700 dark:text-amber-400">
+                <span>Gezette werktijden:</span>
+                <span id="outsideWorkhoursBoundsMail" class="font-mono font-semibold">08:30 – 17:00</span>
+            </div>
+            <p class="text-[11px] text-amber-700/80 dark:text-amber-400/80 pt-1 border-t border-amber-200/60 dark:border-amber-800/30">
+                Kies <strong>Nee</strong> om het item automatisch in te plannen in het eerstvolgende open blok op de volgende werkdag, of kies <strong>Ja</strong> om toch nu buiten werktijd te plannen.
+            </p>
+        </div>
+
+        <div class="flex items-center space-x-2.5 pt-2">
+            <button type="button" id="btnOutsideWorkhoursNoMail" onclick="closeOutsideWorkhoursModalMail('NEE')" class="flex-1 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-xs transition shadow-xs flex items-center justify-center space-x-1.5 cursor-pointer">
+                <i data-lucide="calendar-arrow-up" class="w-4 h-4"></i>
+                <span>Nee (Volgende werkdag)</span>
+            </button>
+            <button type="button" id="btnOutsideWorkhoursYesMail" onclick="closeOutsideWorkhoursModalMail('JA')" class="px-4 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs transition cursor-pointer">
+                <span>Ja, toch inplannen</span>
+            </button>
+        </div>
+    </div>
+</div>
+
 <!-- MODAL 2: E-mail Beantwoorden -->
-<div id="replyModal" class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="replyModal" onclick="if(event.target === this) closeReplyModal()" class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-7 shadow-2xl space-y-5 animate-in fade-in zoom-in-95 duration-150">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <div class="flex items-center space-x-2.5">
@@ -360,7 +431,7 @@ $jsonMessages = json_encode($messages, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_Q
 </div>
 
 <!-- MODAL 3: E-mail Doorsturen -->
-<div id="forwardModal" class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="forwardModal" onclick="if(event.target === this) closeForwardModal()" class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 rounded-3xl max-w-lg w-full p-6 sm:p-7 shadow-2xl space-y-5 animate-in fade-in zoom-in-95 duration-150">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <div class="flex items-center space-x-2.5">
@@ -671,7 +742,97 @@ function closeMobileDetail() {
     document.getElementById('noMailSelectedState').classList.remove('hidden');
 }
 
-// Modal open/close helpers
+// Modal open/close helpers & Open blok inplannen
+let _outsideWorkhoursPendingMail = null;
+
+function updatePlanMailEndTimeBadge() {
+    const startInput = document.getElementById('planMailStartTime');
+    const durationInput = document.getElementById('planMailDuration');
+    const badge = document.getElementById('planMailEndTimeBadge');
+    if (!startInput || !durationInput || !badge) return;
+
+    const startVal = (startInput.value || '').trim();
+    const duration = parseInt(durationInput.value || '30', 10);
+    if (!startVal || !startVal.includes(':') || isNaN(duration)) {
+        badge.innerText = '';
+        return;
+    }
+
+    const [hStr, mStr] = startVal.split(':');
+    const totalMinutes = (parseInt(hStr, 10) * 60 + parseInt(mStr, 10)) + duration;
+    const endH = Math.floor((totalMinutes / 60) % 24);
+    const endM = totalMinutes % 60;
+    const endStr = `${String(endH).padStart(2, '0')}:${String(endM).padStart(2, '0')}`;
+    badge.innerText = `(tot ${endStr})`;
+}
+
+async function planInNextOpenBlockMail(startFromNextWorkday = false) {
+    const durationInput = document.getElementById('planMailDuration');
+    const duration = parseInt(durationInput?.value || '30', 10);
+    const btn = document.getElementById('btnMailPlanOpenBlock');
+    const origHtml = btn ? btn.innerHTML : '';
+
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = `<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Zoeken...</span>`;
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
+
+    try {
+        let url = `/api/planner.php?action=find_next_free_slot&duration=${duration}`;
+        if (startFromNextWorkday) {
+            url += '&start_from_next_workday=1';
+        }
+        const resp = await fetch(url);
+        const data = await resp.json();
+
+        if (data.success && data.slot) {
+            const slot = data.slot;
+            const dateInput = document.getElementById('planMailDate');
+            const startInput = document.getElementById('planMailStartTime');
+            if (dateInput) dateInput.value = slot.date;
+            if (startInput) startInput.value = slot.start;
+
+            updatePlanMailEndTimeBadge();
+
+            const notice = document.getElementById('mailPlanOpenBlockNotice');
+            const noticeText = document.getElementById('mailPlanOpenBlockNoticeText');
+            if (notice && noticeText) {
+                const formattedDate = new Date(slot.date + 'T00:00:00').toLocaleDateString('nl-NL', { weekday: 'short', day: 'numeric', month: 'short' });
+                noticeText.innerText = `Vrij blok gevonden: ${formattedDate} om ${slot.start} – ${slot.end} (${duration} min)`;
+                notice.classList.remove('hidden');
+            }
+        } else {
+            alert(data.error || 'Geen beschikbaar tijdblok gevonden binnen de komende 14 dagen.');
+        }
+    } catch (err) {
+        alert('Netwerkfout bij zoeken van open blok: ' + err.message);
+    } finally {
+        if (btn) {
+            btn.disabled = false;
+            btn.innerHTML = origHtml;
+            if (typeof lucide !== 'undefined') lucide.createIcons();
+        }
+    }
+}
+
+function closeOutsideWorkhoursModalMail(choice) {
+    const modal = document.getElementById('outsideWorkhoursModalMail');
+    if (modal) modal.classList.add('hidden');
+
+    if (choice === 'JA') {
+        if (_outsideWorkhoursPendingMail) {
+            _outsideWorkhoursPendingMail.bypassWorkhours = true;
+            submitPlanEmail(null, _outsideWorkhoursPendingMail);
+        }
+    } else if (choice === 'NEE') {
+        _outsideWorkhoursPendingMail = null;
+        planInNextOpenBlockMail(true);
+    } else {
+        _outsideWorkhoursPendingMail = null;
+    }
+}
+
 function openPlanMailModal() {
     if (!selectedMessage) return;
     document.getElementById('planMailId').value = selectedMessage.id;
@@ -679,9 +840,15 @@ function openPlanMailModal() {
     document.getElementById('planMailWebLink').value = selectedMessage.web_link || '';
     document.getElementById('planMailSender').value = selectedMessage.from_name || '';
 
+    const notice = document.getElementById('mailPlanOpenBlockNotice');
+    if (notice) notice.classList.add('hidden');
+
+    updatePlanMailEndTimeBadge();
+
     const modal = document.getElementById('planMailModal');
     modal.classList.remove('hidden');
     modal.classList.add('flex');
+    if (typeof lucide !== 'undefined') lucide.createIcons();
 }
 
 function closePlanMailModal() {
@@ -690,26 +857,72 @@ function closePlanMailModal() {
     modal.classList.remove('flex');
 }
 
-async function submitPlanEmail(e) {
+async function submitPlanEmail(e, options = {}) {
-    e.preventDefault();
+    if (e) e.preventDefault();
+
+    const messageId = document.getElementById('planMailId').value;
+    const subject = document.getElementById('planMailSubject').value;
+    const planDate = document.getElementById('planMailDate').value;
+    const timeBlockStart = (document.getElementById('planMailStartTime')?.value || '').trim();
+    const durationMinutes = parseInt(document.getElementById('planMailDuration').value, 10);
+    const priority = document.getElementById('planMailPriority').value;
+    const webLink = document.getElementById('planMailWebLink').value;
+    const sender = document.getElementById('planMailSender').value;
+
+    // Controleer of de geplande tijd buiten de gezette werktijden valt (standaard 08:30 - 17:00)
+    if (!options.bypassWorkhours && timeBlockStart && timeBlockStart.includes(':')) {
+        const [shStr, smStr] = timeBlockStart.split(':');
+        const startMin = parseInt(shStr, 10) * 60 + parseInt(smStr, 10);
+        const endMin = startMin + durationMinutes;
+
+        const workStartMin = 8 * 60 + 30; // 08:30
+        const workEndMin = 17 * 60;        // 17:00
+
+        if (startMin < workStartMin || endMin > workEndMin) {
+            _outsideWorkhoursPendingMail = { messageId, subject, planDate, timeBlockStart, durationMinutes, priority, webLink, sender };
+
+            const endH = Math.floor((endMin / 60) % 24);
+            const endM = endMin % 60;
+            const endStr = `${String(endH).padStart(2, '0')}:${String(endM).padStart(2, '0')}`;
+
+            const slotEl = document.getElementById('outsideWorkhoursSelectedSlotMail');
+            if (slotEl) slotEl.innerText = `${timeBlockStart} – ${endStr} (${durationMinutes} min)`;
+
+            const outsideModal = document.getElementById('outsideWorkhoursModalMail');
+            if (outsideModal) {
+                outsideModal.classList.remove('hidden');
+                outsideModal.classList.add('flex');
+                setTimeout(() => {
+                    const btnNo = document.getElementById('btnOutsideWorkhoursNoMail');
+                    if (btnNo) btnNo.focus();
+                }, 50);
+                if (typeof lucide !== 'undefined') lucide.createIcons();
+            }
+            return;
+        }
+    }
+
     const btn = document.getElementById('planMailSubmitBtn');
-    const origHtml = btn.innerHTML;
+    const origHtml = btn ? btn.innerHTML : '';
-    btn.innerHTML = `<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Inplannen...</span>`;
+    if (btn) {
-    btn.disabled = true;
+        btn.innerHTML = `<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i><span>Inplannen...</span>`;
+        btn.disabled = true;
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
 
     try {
         const res = await fetch('/api/mail.php?action=plan_email', {
             method: 'POST',
             headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({
-                message_id: document.getElementById('planMailId').value,
+                message_id: messageId,
-                subject: document.getElementById('planMailSubject').value,
+                subject: subject,
-                plan_date: document.getElementById('planMailDate').value,
+                plan_date: planDate,
-                time_block_start: document.getElementById('planMailStartTime').value,
+                time_block_start: timeBlockStart,
-                duration_minutes: parseInt(document.getElementById('planMailDuration').value, 10),
+                duration_minutes: durationMinutes,
-                priority: document.getElementById('planMailPriority').value,
+                priority: priority,
-                web_link: document.getElementById('planMailWebLink').value,
+                web_link: webLink,
-                sender: document.getElementById('planMailSender').value
+                sender: sender
             })
         });
         const data = await res.json();
@@ -722,9 +935,11 @@ async function submitPlanEmail(e) {
     } catch(err) {
         alert('Netwerkfout: ' + err.message);
     } finally {
-        btn.innerHTML = origHtml;
+        if (btn) {
-        btn.disabled = false;
+            btn.innerHTML = origHtml;
-        if (typeof lucide !== 'undefined') lucide.createIcons();
+            btn.disabled = false;
+            if (typeof lucide !== 'undefined') lucide.createIcons();
+        }
     }
 }
 
@@ -858,6 +1073,27 @@ function escapeHtml(str) {
         .replace(/'/g, '&#039;');
 }
 
+// Toetsenbordnavigatie voor alle modals (Escape & Enter)
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        const outsideModal = document.getElementById('outsideWorkhoursModalMail');
+        if (outsideModal && !outsideModal.classList.contains('hidden')) {
+            closeOutsideWorkhoursModalMail('CANCEL');
+            return;
+        }
+        closePlanMailModal();
+        closeReplyModal();
+        closeForwardModal();
+    } else if (e.key === 'Enter') {
+        const outsideModal = document.getElementById('outsideWorkhoursModalMail');
+        if (outsideModal && !outsideModal.classList.contains('hidden')) {
+            e.preventDefault();
+            closeOutsideWorkhoursModalMail('NEE');
+            return;
+        }
+    }
+});
+
 document.addEventListener('DOMContentLoaded', () => {
     applyMailSearch();
     if (allMessages && allMessages.length > 0) {

planner.php

@@ -1771,7 +1771,7 @@ if ($isAjaxRequest) {
 <?php endif; ?>
 
 <!-- Modal: Jira Ticket Inplannen (met datum, tijdsuggestie & aanpasbare titel) -->
-<div id="jiraPlanModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="jiraPlanModal" onclick="if(event.target === this) closeJiraPlanModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="fociz-card p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto shadow-2xl space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-2.5">
@@ -1825,21 +1825,46 @@ if ($isAjaxRequest) {
                 <input type="text" id="jiraPlanCustomTitle" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500 placeholder-slate-400" placeholder="Oppakken Jira item ...">
             </div>
 
+            <!-- Datum & Tijdblok met slimme "Plan in open blok" actieknop -->
+            <div class="space-y-2 pt-1 border-t border-slate-100 dark:border-slate-800/80">
+                <div class="flex items-center justify-between">
+                    <span class="text-[11px] font-bold text-slate-700 dark:text-slate-300">Datum & Tijdblok</span>
+                    <button type="button" onclick="planJiraInNextOpenBlock()" id="btnJiraPlanOpenBlock" class="inline-flex items-center space-x-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-indigo-600 to-sky-600 hover:from-indigo-500 hover:to-sky-500 text-white text-xs font-bold transition shadow-xs cursor-pointer active:scale-95" title="Vind automatisch het eerstvolgende vrije kwartierblok binnen werktijden">
+                        <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
+                        <span>Plan in open blok</span>
+                    </button>
+                </div>
+
+                <!-- Succes / statusmelding wanneer een open blok gevonden is -->
+                <div id="jiraPlanOpenBlockNotice" class="hidden p-2.5 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-800 dark:text-emerald-300 text-[11px] flex items-center justify-between">
+                    <div class="flex items-center space-x-1.5 min-w-0 flex-1 mr-2">
+                        <i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400 flex-shrink-0"></i>
+                        <span id="jiraPlanOpenBlockNoticeText" class="truncate font-semibold"></span>
+                    </div>
+                    <button type="button" onclick="document.getElementById('jiraPlanOpenBlockNotice').classList.add('hidden')" class="p-0.5 text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 rounded">
+                        <i data-lucide="x" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+
             <!-- Datum & Starttijd -->
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div>
                     <label for="jiraPlanDate" class="block text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5">
                         Datum
                     </label>
-                    <input type="date" id="jiraPlanDate" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                    <input type="date" id="jiraPlanDate" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" onchange="updateJiraPlanEndTimeDisplay()">
                 </div>
 
                 <div>
-                    <label for="jiraPlanStartTime" class="block text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5">
+                    <div class="flex items-center justify-between mb-1.5">
-                        Starttijd
+                        <label for="jiraPlanStartTime" class="block text-[11px] font-bold text-slate-700 dark:text-slate-300">
-                    </label>
+                            Starttijd
+                        </label>
+                        <span id="jiraPlanEndTimeBadge" class="text-[10px] font-mono text-indigo-600 dark:text-indigo-400 font-semibold"></span>
+                    </div>
                     <div class="relative flex items-center">
-                        <input type="time" id="jiraPlanStartTime" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl pl-3 pr-8 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
+                        <input type="time" id="jiraPlanStartTime" class="w-full bg-white dark:bg-[#0c0f17] border border-slate-200 dark:border-slate-800 rounded-xl pl-3 pr-8 py-2 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" oninput="updateJiraPlanEndTimeDisplay()">
                         <button type="button" onclick="clearJiraPlanStartTime()" title="Starttijd wissen" class="absolute right-2 p-1 text-slate-400 hover:text-rose-500 dark:hover:text-rose-400 rounded transition cursor-pointer">
                             <i data-lucide="x" class="w-3.5 h-3.5"></i>
                         </button>
@@ -1962,7 +1987,7 @@ if ($isAjaxRequest) {
 </div>
 
 <!-- Modal: Taak & Tijdblok Bewerken (Vrij invullen van tijden & duur) -->
-<div id="editTaskModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="editTaskModal" onclick="if(event.target === this) closeEditTaskModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="fociz-card p-6 w-full max-w-lg shadow-2xl space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-2.5">
@@ -2085,7 +2110,7 @@ if ($isAjaxRequest) {
 </div>
 
 <!-- Modal: Waarschuwing Buiten Werktijden -->
-<div id="outsideWorkhoursModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="outsideWorkhoursModal" onclick="if(event.target === this) closeOutsideWorkhoursModal('CANCEL')" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="fociz-card p-6 w-full max-w-md shadow-2xl space-y-4 border border-amber-500/30">
         <div class="flex items-start space-x-3">
             <div class="w-10 h-10 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-500 flex items-center justify-center flex-shrink-0">
@@ -2131,7 +2156,7 @@ if ($isAjaxRequest) {
 </div>
 
 <!-- Modal: Direct E-mail Inplannen als Dagtaak -->
-<div id="planEmailDirectModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
+<div id="planEmailDirectModal" onclick="if(event.target === this) closePlanEmailDirectModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4">
     <div class="fociz-card p-6 w-full max-w-lg shadow-2xl space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
             <div class="flex items-center space-x-2.5">
@@ -3343,6 +3368,11 @@ function clearJiraPlanStartTime() {
         input.value = '';
         input.focus();
     }
+    const notice = document.getElementById('jiraPlanOpenBlockNotice');
+    if (notice) notice.classList.add('hidden');
+    if (typeof updateJiraPlanEndTimeDisplay === 'function') {
+        updateJiraPlanEndTimeDisplay();
+    }
 }
 
 function toggleJiraPlanDescription() {
@@ -3432,6 +3462,10 @@ function openJiraPlanModal(issueKey) {
     const suggestTime = targetDate === todayStr ? suggestNextFreeSlot() : '09:00';
     document.getElementById('jiraPlanStartTime').value = suggestTime;
 
+    const notice = document.getElementById('jiraPlanOpenBlockNotice');
+    if (notice) notice.classList.add('hidden');
+    updateJiraPlanEndTimeDisplay();
+
     const modal = document.getElementById('jiraPlanModal');
     modal.classList.remove('hidden');
     modal.classList.add('flex');
@@ -3445,16 +3479,96 @@ function closeJiraPlanModal() {
     _jiraPlanCurrentIssue = null;
 }
 
+function updateJiraPlanEndTimeDisplay() {
+    const startTimeInput = document.getElementById('jiraPlanStartTime');
+    const badge = document.getElementById('jiraPlanEndTimeBadge');
+    const durationInput = document.getElementById('jiraPlanDuration');
+    if (!badge) return;
+
+    const startTime = startTimeInput ? startTimeInput.value.trim() : '';
+    const duration = durationInput ? (parseInt(durationInput.value, 10) || 15) : 15;
+
+    if (!startTime) {
+        badge.textContent = '';
+        return;
+    }
+
+    const parts = startTime.split(':').map(Number);
+    if (parts.length < 2 || isNaN(parts[0]) || isNaN(parts[1])) {
+        badge.textContent = '';
+        return;
+    }
+
+    const endTotalMin = parts[0] * 60 + parts[1] + duration;
+    const endH = Math.floor(endTotalMin / 60);
+    const endM = endTotalMin % 60;
+    const endTimeStr = `${String(endH).padStart(2,'0')}:${String(endM).padStart(2,'0')}`;
+    badge.textContent = `(tot ${endTimeStr})`;
+}
+
+async function planJiraInNextOpenBlock() {
+    const durationInput = document.getElementById('jiraPlanDuration');
+    const duration = durationInput ? (parseInt(durationInput.value, 10) || 15) : 15;
+    const btn = document.getElementById('btnJiraPlanOpenBlock');
+    const notice = document.getElementById('jiraPlanOpenBlockNotice');
+    const noticeText = document.getElementById('jiraPlanOpenBlockNoticeText');
+
+    let origBtnHtml = '';
+    if (btn) {
+        origBtnHtml = btn.innerHTML;
+        btn.innerHTML = '<i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin text-white"></i><span>Zoeken...</span>';
+        btn.disabled = true;
+    }
+
+    try {
+        const res = await fetch('/api/planner.php?action=find_next_free_slot', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                duration_minutes: duration
+            })
+        });
+        const data = await res.json();
+
+        if (data.success && data.slot) {
+            const slot = data.slot;
+            const dateInput = document.getElementById('jiraPlanDate');
+            if (dateInput) dateInput.value = slot.date;
+
+            const startInput = document.getElementById('jiraPlanStartTime');
+            if (startInput) startInput.value = slot.start;
+
+            updateJiraPlanEndTimeDisplay();
+
+            if (notice && noticeText) {
+                noticeText.textContent = `Open blok gevonden: ${slot.formatted_date} van ${slot.start} tot ${slot.end} (${slot.duration_minutes}m)`;
+                notice.classList.remove('hidden');
+            }
+        } else {
+            alert(data.error || 'Geen vrij blok gevonden binnen de gezette werktijden.');
+        }
+    } catch (err) {
+        alert('Netwerkfout bij zoeken naar een open blok.');
+    } finally {
+        if (btn) {
+            btn.innerHTML = origBtnHtml;
+            btn.disabled = false;
+        }
+        if (typeof lucide !== 'undefined') lucide.createIcons();
+    }
+}
+
 function setJiraPlanDuration(minutes) {
     document.getElementById('jiraPlanDuration').value = minutes;
     document.querySelectorAll('.jira-plan-dur-btn').forEach(btn => {
         const dur = parseInt(btn.getAttribute('data-dur'), 10);
         if (dur === minutes) {
-            btn.className = 'jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer bg-indigo-600 border-indigo-600 text-white';
+            btn.className = 'jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer bg-indigo-600 border-indigo-600 text-white shadow-xs';
         } else {
             btn.className = 'jira-plan-dur-btn px-2 py-1.5 rounded-xl border text-[11px] font-bold transition cursor-pointer bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:border-indigo-400';
         }
     });
+    updateJiraPlanEndTimeDisplay();
 }
 
 function suggestNextFreeSlot() {
@@ -3873,6 +3987,10 @@ function promptOutsideWorkhoursModal(checkResult) {
             modal.classList.remove('hidden');
             modal.classList.add('flex');
             if (typeof lucide !== 'undefined') lucide.createIcons();
+            setTimeout(() => {
+                const noBtn = document.getElementById('btnOutsideWorkhoursNo');
+                if (noBtn) noBtn.focus();
+            }, 50);
         } else {
             const ok = confirm(`Let op! Je plant buiten werktijden (${checkResult.workdayStart} - ${checkResult.workdayEnd}).\n\nKlik OK (Ja) om toch zo in te plannen, of Annuleren (Nee) om automatisch naar de volgende werkdag te gaan.`);
             resolve(ok ? 'JA' : 'NEE');
@@ -3913,6 +4031,44 @@ async function findSlotOnNextWorkday(duration, taskId = 0) {
     throw new Error(data.error || 'Geen vrij open blok gevonden op de volgende werkdag.');
 }
 
+// Globale sneltoetsafhandeling voor modals (Escape om te sluiten, Enter voor actie)
+window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        const outsideModal = document.getElementById('outsideWorkhoursModal');
+        if (outsideModal && !outsideModal.classList.contains('hidden')) {
+            closeOutsideWorkhoursModal('CANCEL');
+            return;
+        }
+        const jiraModal = document.getElementById('jiraPlanModal');
+        if (jiraModal && !jiraModal.classList.contains('hidden')) {
+            closeJiraPlanModal();
+            return;
+        }
+        const editModal = document.getElementById('editTaskModal');
+        if (editModal && !editModal.classList.contains('hidden')) {
+            closeEditTaskModal();
+            return;
+        }
+        const emailModal = document.getElementById('planEmailDirectModal');
+        if (emailModal && !emailModal.classList.contains('hidden')) {
+            closePlanEmailDirectModal();
+            return;
+        }
+        const detailModal = document.getElementById('jiraTicketDetailModal');
+        if (detailModal && !detailModal.classList.contains('hidden')) {
+            closeJiraTicketDetailModal();
+            return;
+        }
+    } else if (e.key === 'Enter') {
+        const outsideModal = document.getElementById('outsideWorkhoursModal');
+        if (outsideModal && !outsideModal.classList.contains('hidden')) {
+            e.preventDefault();
+            closeOutsideWorkhoursModal('NEE');
+            return;
+        }
+    }
+});
+
 /**
  * Wisselt de actieve plannerdatum geruisloos via AJAX
  * Behoudt de huidige schermhoogte (scrollpositie) en voorkomt flitsen/herladen

roadmap.php

@@ -206,7 +206,7 @@ $quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
 </div>
 
 <!-- Modal: Nieuw Roadmap Item Handmatig Toevoegen -->
-<div id="newItemModal" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
+<div id="newItemModal" onclick="if(event.target === this) this.classList.add('hidden')" class="hidden fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4">
     <div class="fociz-card p-6 sm:p-7 shadow-2xl max-w-lg w-full space-y-4">
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800">
             <h3 class="text-sm font-bold text-slate-900 dark:text-white flex items-center space-x-2">
@@ -333,7 +333,12 @@ async function submitManualItem() {
     if (data.success) {
         location.reload();
     }
-}
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        const modal = document.getElementById('newItemModal');
+        if (modal) modal.classList.add('hidden');
+    }
+});
 </script>
 
 <?php require_once __DIR__ . '/includes/footer.php'; ?>

timeline.php

@@ -224,7 +224,7 @@ html.dark #timelineGridWrapper::-webkit-scrollbar-thumb {
 </div>
 
 <!-- Gedeelde MODAL 1: Taak Toevoegen of Bewerken (100% gesynchroniseerd met Kanban bord) -->
-<div id="cardModal" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
+<div id="cardModal" onclick="if(event.target === this) closeCardModal()" class="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm hidden items-center justify-center p-4 overflow-y-auto">
     <div class="fociz-card p-6 w-full max-w-xl shadow-2xl space-y-5 my-8">
         
         <div class="flex items-center justify-between pb-3 border-b border-slate-100 dark:border-slate-800/80">
@@ -1073,6 +1073,12 @@ function escapeHtml(str) {
         .replace(/"/g, '&quot;')
         .replace(/'/g, '&#039;');
 }
+
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        closeCardModal();
+    }
+});
 </script>
 
 <?php require_once __DIR__ . '/includes/footer.php'; ?>