Author leave on the calendar itself

Planning used to mean filling in a wish list on one tab, pressing a button to
see a suggestion, then pressing another to accept it — with nothing on screen
telling you whether a plan was active. Dragging a range on the calendar now
creates the period directly, clicking a band opens it for editing, and each
change is recomputed and saved in one step. A period repeats never or yearly,
matching what the planner can actually express.

Clicking a day edits that day: its funding type, which pins it so the planner
leaves it alone, and whether the day counts as worked or off. That switch used
to be a mode covering the whole grid, which is what made the calendar confusing.

The season presets move to a rail beside the grid. Picking one lets the planner
choose the placement, then jumps there and flashes it, rather than asking the
user to guess dates the engine already knows.

A sync that funds nothing now says so, naming the period and how many days it
fell short, instead of leaving the screen unchanged and looking broken.

frontend/src/components/modals/PlannedDayModal.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useState, useEffect } from 'react'
-import type { PlannedLeaveDay } from '@/types'
+import type { CalendarDayEntry, PlannedLeaveDay } from '@/types'
 import { useTranslation } from '@/i18n'
 import './planned-day-modal.css'
 
@@ -21,6 +21,14 @@ export interface PlannedDayModalProps {
   isRangeMode?: boolean | undefined
   dayCount?: number | undefined
   defaultDayType?: 'sjukpenning' | 'lagsta' | 'vacation' | undefined
+  // §Task7 day popover — this date's calendar metadata (röda dagar/weekend/
+  // overrides), driving the "arbetsdag/ledig" switch below. `undefined`
+  // while the calendar window hasn't loaded metadata for this date yet;
+  // `null`/absent `onToggleOverride` hides the switch entirely (e.g. in
+  // range mode, where there is no single day to toggle).
+  dayInfo?: CalendarDayEntry | null | undefined
+  onToggleOverride?: (() => Promise<void>) | undefined
+  overrideError?: string | null | undefined
 }
 
 export function PlannedDayModal({
@@ -37,12 +45,16 @@ export function PlannedDayModal({
   isRangeMode = false,
   dayCount = 1,
   defaultDayType,
+  dayInfo,
+  onToggleOverride,
+  overrideError = null,
 }: PlannedDayModalProps): ReactNode {
   const { t, locale } = useTranslation()
   const [dayType, setDayType] = useState<'sjukpenning' | 'lagsta' | 'vacation'>('vacation')
   const [parentId, setParentId] = useState(selectedParentId)
   const [isDubbeldag, setIsDubbeldag] = useState(false)
   const [localError, setLocalError] = useState<string | null>(null)
+  const [isTogglingOverride, setIsTogglingOverride] = useState(false)
 
   useEffect(() => {
     if (existingDay) {
@@ -88,6 +100,22 @@ export function PlannedDayModal({
     }
   }
 
+  // §Task7 — the "Den här dagen är: arbetsdag / ledig" switch. There are
+  // only two effective states, so flipping to whichever option ISN'T
+  // currently selected is exactly the toggle `onToggleOverride` performs —
+  // no separate "set to X" call is needed. A no-op click on the
+  // already-selected option is ignored.
+  const handleSelectDayStatus = async (wantFree: boolean) => {
+    if (!onToggleOverride || !dayInfo) return
+    if (dayInfo.isFree === wantFree) return
+    try {
+      setIsTogglingOverride(true)
+      await onToggleOverride()
+    } finally {
+      setIsTogglingOverride(false)
+    }
+  }
+
   if (!isOpen) return null
 
   const displayDate = new Date(date + 'T00:00:00Z').toLocaleDateString(locale === 'sv' ? 'sv-SE' : 'en-US', {
@@ -179,6 +207,52 @@ export function PlannedDayModal({
               </p>
             )}
           </div>
+
+          {existingDay?.isPinned && (
+            <p className="planned-day-modal__pinned-notice" data-testid="pinned-notice">
+              📌 {t('plannedDayModal.pinnedNotice')}
+            </p>
+          )}
+
+          {!isRangeMode && dayInfo && onToggleOverride && (
+            <div className="planned-day-modal__field">
+              <span className="planned-day-modal__label">{t('plannedDayModal.dayStatusLabel')}</span>
+              <div
+                className="planned-day-modal__override-switch"
+                role="radiogroup"
+                aria-label={t('plannedDayModal.dayStatusLabel')}
+                data-testid="day-status-switch"
+              >
+                <label className="planned-day-modal__checkbox-label">
+                  <input
+                    type="radio"
+                    name="day-status"
+                    checked={!dayInfo.isFree}
+                    onChange={() => void handleSelectDayStatus(false)}
+                    disabled={isSaving || isTogglingOverride}
+                    data-testid="day-status-workday"
+                  />
+                  {' '}{t('plannedDayModal.workdayOption')}
+                </label>
+                <label className="planned-day-modal__checkbox-label">
+                  <input
+                    type="radio"
+                    name="day-status"
+                    checked={dayInfo.isFree}
+                    onChange={() => void handleSelectDayStatus(true)}
+                    disabled={isSaving || isTogglingOverride}
+                    data-testid="day-status-off"
+                  />
+                  {' '}{t('plannedDayModal.dayOffOption')}
+                </label>
+              </div>
+              {overrideError && (
+                <p className="planned-day-modal__error" role="alert" data-testid="day-status-error">
+                  {overrideError}
+                </p>
+              )}
+            </div>
+          )}
         </div>
 
         <div className="planned-day-modal__footer">