/* Move dropdown */
        .move-dropdown {
            position: absolute;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-dropdown);
            min-width: 200px;
            max-height: 300px;
            overflow-y: auto;
            z-index: var(--z-layer-raised);
            display: none;
        }

        .move-dropdown.visible {
            display: block;
        }

        .move-dropdown-header {
            padding: var(--space-2) var(--space-3);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border-light);
        }

        .move-dropdown-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .move-dropdown-item:hover {
            background: var(--bg-hover);
        }

        .move-dropdown-item.active {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
        }

        .move-dropdown-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-12);
        }

        .move-dropdown-icon svg {
            width: 16px;
            height: 16px;
        }

        .move-dropdown-label {
            font-size: var(--font-size-sm);
        }

        .move-dropdown-section {
            padding: 4px 0;
            border-bottom: 1px solid var(--border-light);
        }

        .move-dropdown-section:last-child {
            border-bottom: none;
        }

        .today-calendar {
            flex: 0 0 380px;
            width: 380px;
            max-width: 380px;
            overflow-y: auto;
            padding: 0 var(--space-3) var(--space-4);
            position: relative;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
            background: var(--bg-card);
            border-left: 1px solid var(--border-light);
            box-sizing: border-box;
            isolation: isolate; /* Create stacking context for proper z-index behavior */
        }

        .today-calendar::-webkit-scrollbar {
            display: none; /* Chrome/Safari/Opera */
        }

        .timeline-header {
            position: sticky;
            top: 0;
            background: var(--bg-card);
            padding: 12px 0;
            margin-bottom: 8px;
            z-index: var(--z-layer-raised);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
        }

        .timeline-header-left {
            flex: 1;
        }

        .timeline-duration {
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
            color: var(--text-secondary);
        }

        .timeline-duration.over-limit {
            color: var(--color-red-text);
        }

        .timeline-title {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 4px 0;
        }

        .timeline-subtitle {
            font-family: var(--font-family);
            font-size: var(--font-size-12);
            font-weight: 400;
            color: var(--text-tertiary);
            margin: 0;
        }

        /* Week Planner - Plan Mode */
        .week-planner {
            flex: 1;
            overflow: hidden;
            padding: var(--space-4) var(--space-3);
            background: linear-gradient(180deg, #F8F9FB 0%, #F3F5F8 100%);
            box-sizing: border-box;
        }

        /* Week controls bar - groups with gaps */
        .week-controls-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            background: transparent;
        }

        /* Segmented control group */
        .control-segment {
            display: flex;
            background: #FFFFFF;
            border-radius: var(--radius-md);
            padding: 4px;
            gap: 2px;
            box-shadow: var(--shadow-1);
        }

        .week-control-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border: none;
            background: transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-tertiary);
            font-family: var(--font-family);
            font-size: var(--font-size-14);
            font-weight: 600;
        }

        .week-control-btn svg {
            width: 20px;
            height: 20px;
        }

        .week-control-btn:hover {
            background: var(--hover-light);
            color: var(--text-secondary);
        }

        .week-control-btn.active {
            background: rgba(74, 144, 217, 0.12);
            color: var(--accent-blue);
        }

        .week-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: var(--space-3);
            flex: 1;
            min-height: 0; /* Allow grid to shrink within flex container */
        }

        .week-day-column {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            border: none;
            box-shadow: var(--shadow-card);
            padding: var(--space-2) var(--space-2) var(--space-3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 100%;
            transition: box-shadow var(--transition-fast);
        }

        .week-day-column:hover {
            box-shadow: var(--shadow-card-hover);
        }

        .week-day-header {
            flex-shrink: 0;
            height: 56px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
            overflow: hidden;
        }

        .week-day-name {
            font-family: var(--font-family);
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .week-day-date-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-2);
        }

        .week-day-date {
            font-family: var(--font-family);
            font-size: var(--font-size-18);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0;
        }

        /* Add task button in day header */
        .week-day-add-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all var(--transition-fast);
            opacity: 0;
        }

        .week-day-date-row:hover .week-day-add-btn {
            opacity: 1;
        }

        .week-day-add-btn:hover {
            background: var(--accent-blue-light);
            color: var(--accent-blue);
            transform: scale(1.1);
        }

        .week-day-add-btn:active {
            transform: scale(0.95);
        }

        .week-day-add-btn svg {
            width: 16px;
            height: 16px;
        }

        /* Always show on touch devices */
        @media (hover: none) {
            .week-day-add-btn {
                opacity: 1;
            }
        }

        .week-day-header .day-duration-total {
            font-size: var(--font-size-xs);
            font-weight: 600;
            color: var(--text-secondary);
            margin-left: 0;
            margin-top: 0;
            background: none;
            border-radius: 0;
            padding: 0;
            height: auto;
            min-width: auto;
            white-space: nowrap;
        }

        .week-day-header .day-duration-total.over-limit {
            color: var(--color-red-text);
            background: none;
        }

        .week-day-column.is-today {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 1px var(--accent-blue);
        }

        .week-day-column.is-today .week-day-date {
            color: var(--accent-blue);
        }

        /* All-Day Events Section - Week View */
        .week-day-all-day {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 8px;
            min-height: 32px; /* Consistent height for timeline alignment */
            box-sizing: border-box;
        }

        /* Empty state - hide border but keep height for alignment */
        .week-day-all-day.empty {
            border-bottom-color: transparent;
        }

        /* All-Day Events Section - Today Timeline */
        .timeline-all-day {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 8px 44px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 0;
            position: relative;
            z-index: 10;
        }

        /* When all-day section exists, offset the grid and events */
        .timeline-all-day ~ .calendar-timeline-grid {
            top: var(--all-day-height, 0px);
        }

        .timeline-all-day ~ .calendar-event,
        .timeline-all-day ~ .current-time-marker,
        .timeline-all-day ~ .free-time-gap {
            margin-top: var(--all-day-height, 0px);
        }

        .all-day-label {
            font-size: var(--font-size-xs);
            color: var(--text-tertiary);
            white-space: nowrap;
        }

        .all-day-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        /* All-Day Event Chip */
        .all-day-chip {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            background: var(--bg-primary);
            border: 1px solid var(--border-light);
            border-left: 3px solid var(--accent-blue);
            border-radius: var(--radius-sm);
            font-size: var(--font-size-xs);
            color: var(--text-primary);
            cursor: pointer;
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all var(--duration-fast) var(--ease-in-out);
        }

        .all-day-chip:hover {
            background: var(--bg-hover);
            border-color: var(--border-medium);
        }

        /* Muted "N all-day" pill shown when Settings → Planner →
           "Show all-day events" is OFF. Quietly indicates hidden content
           per day; click expands chips for that day for the session. */
        .all-day-collapsed-pill {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            background: transparent;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            font-size: var(--font-size-xs);
            font-weight: 500;
            color: var(--text-tertiary);
            cursor: pointer;
            font-family: var(--font-family);
            transition: color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out), background var(--duration-fast) var(--ease-in-out);
        }

        .all-day-collapsed-pill:hover {
            color: var(--text-secondary);
            border-color: var(--border-medium);
            background: var(--bg-hover);
        }