feat(calendar): move labels outside card borders for visual continuity

- Month names moved above month cards in year view (outside article border)
  Hidden in non-year views; toolbar shows context label instead
- Day labels (Mon 24, Tue 25) moved above day columns in week view
- Each card/column wrapped in flex container: title above, card below
- New .calendar-card-title CSS: 11px, 55% opacity, subtle label above card
- No duplicate headers: toolbar is the single source of current context

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/components/workspace/calendar/CrmCalendarPanel.vue

@@ -183,15 +183,25 @@ defineProps<{
             class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3 auto-rows-fr"
             :style="calendarViewportHeight > 0 ? { minHeight: `${calendarView === 'year' ? Math.max(420, calendarViewportHeight) : calendarViewportHeight}px` } : undefined"
           >
-            <article
+            <div
               v-for="item in yearMonths"
               :key="`year-month-${item.monthIndex}`"
               v-show="calendarView === 'year' || item.monthIndex === calendarCursorMonth"
-              class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable"
+              :class="[
+                calendarView === 'year' ? 'flex flex-col h-full' : 'sm:col-span-2 xl:col-span-3 flex flex-col',
+              ]"
+            >
+              <p
+                v-if="calendarView === 'year'"
+                class="calendar-card-title"
+              >{{ item.label }}</p>
+
+              <article
+                class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable flex-1"
                 :class="[
                   calendarView === 'year'
-                  ? 'h-full hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
+                    ? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
-                  : 'cursor-default bg-base-100 sm:col-span-2 xl:col-span-3 flex flex-col',
+                    : 'cursor-default bg-base-100 flex flex-col',
                   calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
                   calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
                 ]"
@@ -205,8 +215,7 @@ defineProps<{
                 @mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
                 @click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
               >
-              <p class="font-medium">{{ item.label }}</p>
+                <p v-if="calendarView === 'year'" class="text-xs text-base-content/60">{{ item.count }} events</p>
-              <p class="text-xs text-base-content/60">{{ item.count }} events</p>
                 <button
                   v-if="calendarView === 'year' && item.first"
                   class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
@@ -284,10 +293,14 @@ defineProps<{
                   :class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
                 >
                   <div class="calendar-week-grid">
-                    <article
+                    <div
                       v-for="day in weekDays"
                       :key="day.key"
-                      class="group relative flex h-full min-h-full flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
+                      class="flex flex-col min-h-full"
+                    >
+                      <p class="calendar-card-title text-center">{{ day.label }} {{ day.day }}</p>
+                      <article
+                        class="group relative flex flex-1 flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
                         :class="[
                           selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
                           calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
@@ -298,9 +311,6 @@ defineProps<{
                         @mouseenter="setCalendarHoveredDayKey(day.key)"
                         @click="pickDate(day.key)"
                       >
-                      <div class="mb-2 flex items-start justify-between gap-2">
-                        <p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
-                      </div>
                       <div class="space-y-1.5">
                         <button
                           v-for="event in day.events"
@@ -316,6 +326,7 @@ defineProps<{
                     </article>
                     </div>
                   </div>
+                </div>
 
                 <div
                   class="space-y-2 calendar-depth-layer"
@@ -342,6 +353,7 @@ defineProps<{
           </div>
         </div>
       </div>
+    </div>
   </section>
 </template>
 
@@ -445,6 +457,14 @@ defineProps<{
   right: 4px;
 }
 
+.calendar-card-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+  padding: 0 4px 2px;
+  user-select: none;
+}
+
 .calendar-week-number {
   display: inline-flex;
   align-items: center;