139         $calId = 'cal_' . md5(serialize($data) . microtime());
168 …$html = '<div class="calendar-compact-container ' . $themeClass . '" id="' . $calId . '" data-name…
172         #' . $calId . ' {
196 … #event-search-' . $calId . '::placeholder { color: ' . $themeStyles['text_dim'] . '; opacity: 1; }
197 …#event-search-' . $calId . '::-webkit-input-placeholder { color: ' . $themeStyles['text_dim'] . ';…
198 …#event-search-' . $calId . '::-moz-placeholder { color: ' . $themeStyles['text_dim'] . '; opacity:…
199 …#event-search-' . $calId . ':-ms-input-placeholder { color: ' . $themeStyles['text_dim'] . '; opac…
209 …$html .= '<script type="application/json" id="events-data-' . $calId . '">' . json_encode($events)…
216 …$html .= '<button class="cal-nav-btn" onclick="navCalendar(\'' . $calId . '\', ' . $prevYear . ', …
217 …$html .= '<h3 class="calendar-month-picker" onclick="openMonthPicker(\'' . $calId . '\', ' . $year…
218 …$html .= '<button class="cal-nav-btn" onclick="navCalendar(\'' . $calId . '\', ' . $nextYear . ', …
219 …$html .= '<button class="cal-today-btn" onclick="jumpToToday(\'' . $calId . '\', \'' . $namespace …
300 …)) . ($hasEvents ? ', has events' : '') . '" onclick="showDayPopup(\'' . $calId . '\', \'' . $date…
362 …$html .= 'onclick="event.stopPropagation(); highlightEvent(\'' . $calId . '\', \'' . $eventId . '\…
382         $html .= '<h4 id="eventlist-title-' . $calId . '">Events</h4>';
390 …rch-input-inline" id="event-search-' . $calId . '" placeholder="�� Search..." oninput="filterEvent…
391 …s="event-search-clear-inline" id="search-clear-' . $calId . '" onclick="clearEventSearch(\'' . $ca…
392 …ass="event-search-mode-inline" id="search-mode-' . $calId . '" onclick="toggleSearchMode(\'' . $ca…
395 …$html .= '<button class="add-event-compact" onclick="openAddEvent(\'' . $calId . '\', \'' . $names…
398         $html .= '<div class="event-list-compact" id="eventlist-' . $calId . '">';
399         $html .= $this->renderEventListContent($events, $calId, $namespace, $themeStyles);
405         $html .= $this->renderEventDialog($calId, $namespace, $theme);
408         $html .= $this->renderMonthPicker($calId, $year, $month, $namespace, $theme, $themeStyles);
429         $calId = 'static-cal-' . substr(md5($namespace . $year . $month . uniqid()), 0, 8);
463 …$html = '<div class="calendar-static ' . $themeClass . '" id="' . $calId . '" data-year="' . $year…
471 …$html .= '<button class="static-nav-btn" onclick="navStaticCalendar(\'' . $calId . '\', -1)" title…
475 …$html .= '<button class="static-nav-btn" onclick="navStaticCalendar(\'' . $calId . '\', 1)" title=…
478 …$html .= '<button class="static-print-btn" onclick="printStaticCalendar(\'' . $calId . '\')" title…
703     private function renderEventListContent($events, $calId, $namespace, $themeStyles = null) {  argument
912 …n class="event-namespace-badge" onclick="filterCalendarByNamespace(\'' . $calId . '\', \'' . htmls…
958 …n class="event-namespace-badge" onclick="filterCalendarByNamespace(\'' . $calId . '\', \'' . htmls…
999 …$eventHtml .= '<button class="event-action-btn" onclick="deleteEvent(\'' . $calId . '\', \'' . $ev…
1000 …$eventHtml .= '<button class="event-action-btn" onclick="editEvent(\'' . $calId . '\', \'' . $even…
1006 …class="task-checkbox" ' . $checked . ' onclick="toggleTaskComplete(\'' . $calId . '\', \'' . $even…
1026 …        $html .= '<div class="past-events-toggle" onclick="togglePastEvents(\'' . $calId . '\')">';
1027             $html .= '<span class="past-events-arrow" id="past-arrow-' . $calId . '">▶</span> ';
1030 …$html .= '<div class="past-events-content" id="past-events-' . $calId . '" style="display:none;">';
1170         $calId = 'panel_' . md5(serialize($data) . microtime());
1201 …$html = '<div class="event-panel-standalone" id="' . $calId . '" data-height="' . htmlspecialchars…
1205         #' . $calId . ' {
1229 … #event-search-' . $calId . '::placeholder { color: ' . $themeStyles['text_dim'] . '; opacity: 1; }
1243 …$html .= '<button class="panel-nav-btn" onclick="navEventPanel(\'' . $calId . '\', ' . $prevYear .…
1247 …$html .= '<h3 class="panel-month-title" onclick="openMonthPickerPanel(\'' . $calId . '\', ' . $yea…
1249 …$html .= '<button class="panel-nav-btn" onclick="navEventPanel(\'' . $calId . '\', ' . $nextYear .…
1264 …amespace) . ' - click to clear" onclick="clearNamespaceFilterPanel(\'' . $calId . '\')">' . htmlsp…
1271 …$html .= '<button class="panel-today-btn" onclick="jumpTodayPanel(\'' . $calId . '\', \'' . $names…
1277 …search-input" id="event-search-' . $calId . '" placeholder="Search this month..." oninput="filterE…
1278 …on class="panel-search-clear" id="search-clear-' . $calId . '" onclick="clearEventSearch(\'' . $ca…
1279 …tton class="panel-search-mode" id="search-mode-' . $calId . '" onclick="toggleSearchMode(\'' . $ca…
1281 …$html .= '<button class="panel-add-btn" onclick="openAddEventPanel(\'' . $calId . '\', \'' . $name…
1286 …$html .= '<div class="event-list-compact" id="eventlist-' . $calId . '" style="max-height: ' . htm…
1287         $html .= $this->renderEventListContent($events, $calId, $namespace);
1290         $html .= $this->renderEventDialog($calId, $namespace, $theme);
1293         $html .= $this->renderMonthPicker($calId, $year, $month, $namespace, $theme, $themeStyles);
1400             $calId = 'sidebar-' . substr(md5($namespace . $weekStart), 0, 8);
1404             return $this->renderSidebarWidget($allEvents, $namespace, $calId, $themeOverride);
1480         $calId = 'eventlist_' . uniqid();
1500 …$html = '<div class="eventlist-simple ' . $themeClass . '" id="' . $calId . '" style="' . $contain…
1504         #' . $calId . ' {
1540 …$html .= '<span class="eventlist-today-clock" id="clock-' . $calId . '">' . $currentTime . '</span…
1542 …="eventlist-weather"><span id="weather-icon-' . $calId . '">��️</span> <span id="weather-temp-' . …
1552 … . ' !important;" onmouseover="showTooltip_' . $calId . '(\'green\')" onmouseout="hideTooltip_' . …
1553 …$html .= '<div class="eventlist-cpu-fill" id="cpu-5min-' . $calId . '" style="width: 0%; backgroun…
1554 …$html .= '<div class="system-tooltip" id="tooltip-green-' . $calId . '" style="display:none;"></di…
1558 … . ' !important;" onmouseover="showTooltip_' . $calId . '(\'purple\')" onmouseout="hideTooltip_' .…
1559 …lass="eventlist-cpu-fill eventlist-cpu-fill-purple" id="cpu-realtime-' . $calId . '" style="width:…
1560 …$html .= '<div class="system-tooltip" id="tooltip-purple-' . $calId . '" style="display:none;"></d…
1564 … . ' !important;" onmouseover="showTooltip_' . $calId . '(\'orange\')" onmouseout="hideTooltip_' .…
1565 …lass="eventlist-cpu-fill eventlist-cpu-fill-orange" id="mem-realtime-' . $calId . '" style="width:…
1566 …$html .= '<div class="system-tooltip" id="tooltip-orange-' . $calId . '" style="display:none;"></d…
1585         const clockEl = document.getElementById("clock-' . $calId . '");
1603                     const iconEl = document.getElementById("weather-icon-' . $calId . '");
1604                     const tempEl = document.getElementById("weather-temp-' . $calId . '");
1636         var weatherEl = document.querySelector("#weather-icon-' . $calId . '");
1680     const container = document.getElementById("' . $calId . '");
1697     window["showTooltip_' . $calId . '"] = function(color) {
1698         const tooltip = document.getElementById("tooltip-" + color + "-' . $calId . '");
1775     window["hideTooltip_' . $calId . '"] = function(color) {
1776         const tooltip = document.getElementById("tooltip-" + color + "-' . $calId . '");
1799                 const greenBar = document.getElementById("cpu-5min-' . $calId . '");
1814                 const cpuBar = document.getElementById("cpu-realtime-' . $calId . '");
1820                 const memBar = document.getElementById("mem-realtime-' . $calId . '");
1835                 const greenBar = document.getElementById("cpu-5min-' . $calId . '");
1838                 const cpuBar = document.getElementById("cpu-realtime-' . $calId . '");
1847                 const memBar = document.getElementById("mem-realtime-' . $calId . '");
1962     private function renderEventDialog($calId, $namespace, $theme = null) {  argument
1969 …     $html = '<div class="event-dialog-compact" id="dialog-' . $calId . '" style="display:none;">';
1970 …      $html .= '<div class="dialog-overlay" onclick="closeEventDialog(\'' . $calId . '\')"></div>';
1973         $html .= '<div class="dialog-content-sleek" id="dialog-content-' . $calId . '">';
1976 …   $html .= '<div class="dialog-header-sleek dialog-drag-handle" id="drag-handle-' . $calId . '">';
1977         $html .= '<h3 id="dialog-title-' . $calId . '">Add Event</h3>';
1978 …n type="button" class="dialog-close-btn" onclick="closeEventDialog(\'' . $calId . '\')">×</button>…
1982 …$html .= '<form id="eventform-' . $calId . '" onsubmit="saveEventCompact(\'' . $calId . '\', \'' .…
1985         $html .= '<input type="hidden" id="event-id-' . $calId . '" name="eventId" value="">';
1990 …$html .= '<input type="text" id="event-title-' . $calId . '" name="title" required class="input-sl…
1998 …    $html .= '<input type="hidden" id="event-namespace-' . $calId . '" name="namespace" value="">';
2002 …$html .= '<input type="text" id="event-namespace-search-' . $calId . '" class="input-sleek input-c…
2003 …$html .= '<div class="namespace-dropdown" id="event-namespace-dropdown-' . $calId . '" style="disp…
2008 …$html .= '<script type="application/json" id="namespaces-data-' . $calId . '">' . json_encode($all…
2015 …$html .= '<textarea id="event-desc-' . $calId . '" name="description" rows="2" class="input-sleek …
2024 …     $html .= '<input type="hidden" id="event-date-' . $calId . '" name="date" required value="">';
2025 …r input-sleek input-compact" id="date-picker-btn-' . $calId . '" data-target="event-date-' . $calI…
2029         $html .= '<div class="date-dropdown" id="date-dropdown-' . $calId . '"></div>';
2036         $html .= '<input type="hidden" id="event-end-date-' . $calId . '" name="endDate" value="">';
2037 …t-sleek input-compact" id="end-date-picker-btn-' . $calId . '" data-target="event-end-date-' . $ca…
2041         $html .= '<div class="date-dropdown" id="end-date-dropdown-' . $calId . '"></div>';
2050 … id="event-recurring-' . $calId . '" name="isRecurring" class="recurring-toggle" onchange="toggleR…
2056 …$html .= '<div id="recurring-options-' . $calId . '" class="recurring-options" style="display:none…
2063 …$html .= '<input type="number" id="event-recurrence-interval-' . $calId . '" name="recurrenceInter…
2068 …ecurrence-type-' . $calId . '" name="recurrenceType" class="input-sleek input-compact" onchange="u…
2079 …$html .= '<div id="weekly-options-' . $calId . '" class="weekly-options" style="display:none; marg…
2093 …$html .= '<div id="monthly-options-' . $calId . '" class="monthly-options" style="display:none; ma…
2099 …onthlyType" value="dayOfMonth" checked onchange="updateMonthlyType(\'' . $calId . '\')" style="mar…
2103 …e="monthlyType" value="ordinalWeekday" onchange="updateMonthlyType(\'' . $calId . '\')" style="mar…
2109 …$html .= '<div id="monthly-day-' . $calId . '" style="display:flex; align-items:center; gap:6px;">…
2111 …$html .= '<input type="number" id="event-month-day-' . $calId . '" name="monthDay" class="input-sl…
2116         $html .= '<div id="monthly-ordinal-' . $calId . '" style="display:none;">';
2118 …$html .= '<select id="event-ordinal-' . $calId . '" name="ordinalWeek" class="input-sleek input-co…
2126 …$html .= '<select id="event-ordinal-day-' . $calId . '" name="ordinalDay" class="input-sleek input…
2145 …$html .= '<input type="date" id="event-recurrence-end-' . $calId . '" name="recurrenceEnd" class="…
2159         $html .= '<input type="hidden" id="event-time-' . $calId . '" name="time" value="">';
2160 …r input-sleek input-compact" id="time-picker-btn-' . $calId . '" data-target="event-time-' . $calI…
2164         $html .= '<div class="time-dropdown" id="time-dropdown-' . $calId . '"></div>';
2172         $html .= '<input type="hidden" id="event-end-time-' . $calId . '" name="endTime" value="">';
2173 …t-sleek input-compact" id="end-time-picker-btn-' . $calId . '" data-target="event-end-time-' . $ca…
2177         $html .= '<div class="time-dropdown" id="end-time-dropdown-' . $calId . '"></div>';
2189 …"event-color-' . $calId . '" name="color" class="input-sleek input-compact color-select" onchange=…
2199 …olor-custom-' . $calId . '" class="color-picker-input color-picker-compact" value="#3498db" onchan…
2208 …$html .= '<input type="checkbox" id="event-is-task-' . $calId . '" name="isTask" class="task-toggl…
2215 …tton" class="btn-sleek btn-cancel-sleek" onclick="closeEventDialog(\'' . $calId . '\')">Cancel</bu…
2226 …private function renderMonthPicker($calId, $year, $month, $namespace, $theme = 'matrix', $themeSty…  argument
2234 …Class . '" id="month-picker-overlay-' . $calId . '" style="display:none;" onclick="closeMonthPicke…
2239         $html .= '<select id="month-picker-month-' . $calId . '" class="month-picker-select">';
2247         $html .= '<select id="month-picker-year-' . $calId . '" class="month-picker-select">';
2257 …$html .= '<button class="btn-sleek btn-cancel-sleek" onclick="closeMonthPicker(\'' . $calId . '\')…
2258 …tton class="btn-sleek btn-save-sleek" onclick="jumpToSelectedMonth(\'' . $calId . '\', \'' . $name…
2572     private function renderSidebarWidget($events, $namespace, $calId, $themeOverride = null) {  argument
2696 …$html = '<div class="sidebar-widget ' . $themeClass . '" id="sidebar-widget-' . $calId . '" style=…
2701         #sidebar-widget-' . $calId . ' {
2730             @keyframes sparkle-' . $calId . ' {
2745             @keyframes pulse-glow-' . $calId . ' {
2750             @keyframes shimmer-' . $calId . ' {
2756                 animation: pulse-glow-' . $calId . ' 3s ease-in-out infinite;
2763             .sparkle-' . $calId . ' {
2768                 animation: sparkle-' . $calId . ' 1s ease-out forwards;
2775                 const container = document.getElementById("sidebar-widget-' . $calId . '");
2780                     sparkle.className = "sparkle-' . $calId . '";
2823         $jsCalId = str_replace('-', '_', $calId);
2842         const tooltip = document.getElementById("tooltip-" + color + "-' . $calId . '");
2914         const tooltip = document.getElementById("tooltip-" + color + "-' . $calId . '");
2929         const clockEl = document.getElementById("clock-' . $calId . '");
2947                     const iconEl = document.getElementById("weather-icon-' . $calId . '");
2948                     const tempEl = document.getElementById("weather-temp-' . $calId . '");
2976         var weatherEl = document.querySelector("#weather-icon-' . $calId . '");
3011                 const greenBar = document.getElementById("cpu-5min-' . $calId . '");
3023                 const cpuBar = document.getElementById("cpu-realtime-' . $calId . '");
3028                 const memBar = document.getElementById("mem-realtime-' . $calId . '");
3049 …$html .= '<span class="eventlist-today-clock" id="clock-' . $calId . '" style="color:' . $themeSty…
3051 …="eventlist-weather"><span id="weather-icon-' . $calId . '">��️</span> <span id="weather-temp-' . …
3062 …$html .= '<div class="eventlist-cpu-fill" id="cpu-5min-' . $calId . '" style="width: 0%; backgroun…
3063 …$html .= '<div class="system-tooltip" id="tooltip-green-' . $calId . '" style="display:none;"></di…
3068 …lass="eventlist-cpu-fill eventlist-cpu-fill-purple" id="cpu-realtime-' . $calId . '" style="width:…
3069 …$html .= '<div class="system-tooltip" id="tooltip-purple-' . $calId . '" style="display:none;"></d…
3074 …lass="eventlist-cpu-fill eventlist-cpu-fill-orange" id="mem-realtime-' . $calId . '" style="width:…
3075 …$html .= '<div class="system-tooltip" id="tooltip-orange-' . $calId . '" style="display:none;"></d…
3095 …' . $addBtnShadow . '; transition:all 0.2s;" onclick="openAddEvent(\'' . $calId . '\', \'' . $name…
3143         $jsCalId = str_replace('-', '_', $calId);
3150 …$html .= '<div id="itinerary-bar-' . $calId . '" style="background:' . $itineraryBg . '; padding:0…
3151 …$html .= '<span id="itinerary-arrow-' . $calId . '" style="color:' . $itineraryTextColor . '; font…
3156 …$html .= '<div id="itinerary-content-' . $calId . '" style="transition:max-height 0.3s ease-out, o…
3160 …$html .= $this->renderSidebarSection('Today', $todayEvents, $todayColor, $calId, $themeStyles, $th…
3165 …$this->renderSidebarSection('Tomorrow', $tomorrowEvents, $tomorrowColor, $calId, $themeStyles, $th…
3170 …derSidebarSection('Important Events', $importantEvents, $importantColor, $calId, $themeStyles, $th…
3192                 const content = document.getElementById("itinerary-content-' . $calId . '");
3193                 const arrow = document.getElementById("itinerary-arrow-' . $calId . '");
3218             const content = document.getElementById("itinerary-content-' . $calId . '");
3219             const arrow = document.getElementById("itinerary-arrow-' . $calId . '");
3236         $html .= $this->renderEventDialog($calId, $namespace, $theme);
3286         $calId = 'cal_' . substr(md5($weekStart . microtime()), 0, 8);
3287         $jsCalId = str_replace('-', '_', $calId);  // Sanitize for JS variable names
3378 …$html .= '<div id="selected-day-events-' . $calId . '" style="display:none; margin:8px 4px; border…
3381             $html .= '<span id="selected-day-title-' . $calId . '"></span>';
3382 …$html .= '<span onclick="document.getElementById(\'selected-day-events-' . $calId . '\').style.dis…
3385             $html .= '<span id="selected-day-title-' . $calId . '"></span>';
3386 …$html .= '<span onclick="document.getElementById(\'selected-day-events-' . $calId . '\').style.dis…
3389 …$html .= '<div id="selected-day-content-' . $calId . '" style="padding:4px 0; background:' . $pane…
3395         $jsCalId = str_replace('-', '_', $calId);
3418             const container = document.getElementById("selected-day-events-' . $calId . '");
3419             const title = document.getElementById("selected-day-title-' . $calId . '");
3420             const content = document.getElementById("selected-day-content-' . $calId . '");
3523 …private function renderSidebarSection($title, $events, $accentColor, $calId, $themeStyles, $theme,…  argument
3608 …$html .= $this->renderSidebarEvent($event, $calId, $showDate, $accentColor, $themeStyles, $theme, …
3623 …private function renderSidebarEvent($event, $calId, $showDate = false, $sectionColor = '#00cc07', …  argument